pi

Insert-to-Loop Seam Handoff

• · Opening a section plays a full-screen insert film that then has to become the panel loop on the right — different box, different crop, different frame. The transition runs in three phases: the insert plays while the loop waits parked at zero, then an overlay contracts to the loop panel's measured screen coordinates over 0.62s while the same loop runs inside it and the insert dissolves out over 0.34s.
• · After the 4K swap, seeking cost hundreds of milliseconds and a zero-second frame flashed through before the jump. Starting the real loop on the same timeline the instant the handoff begins removed the seek entirely; a correction only fires if decoding drifts more than 0.15s.

4K Dual-Format Video Pipeline

• · Sixteen 3840×2160 sources were encoded twice — h264 MP4 and VP9 WebM — and the browser is only handed WebM when canPlayType answers 'probably'. Audio was stripped because every video on the site plays muted.
• · One clip arrived at 66Mbps and ballooned; tightening its CRF halved it at SSIM 0.977 with no visible difference at display size. Resolution went up 4× while total weight fell from 195MB to 107MB across both formats — roughly 55MB for any one visitor.

Hover Prefetch & Orientation Branching

• · Insert films run over 10MB each, so downloading on click leaves a blank screen before the first frame. Buffering starts the moment the pointer touches a menu button — a few hundred milliseconds ahead of the click — and the section opens out of cache.
• · Touch devices have no hover, so sections warm in sequence once the page goes idle, and are skipped outright on data-saver or 2G. Desktop plays landscape sources and mobile portrait ones, with insert and loop locked to the same orientation so the seam never crosses formats.

Content Tables with a Seed Fallback

• · Twenty-one works, eight awards, fourteen client logos and the site settings moved into Postgres. The public page reads the database first and falls back to a seed compiled into the bundle when the table is empty or the query fails, so a migration or a network fault never leaves an empty screen.
• · Row level security limits anonymous reads to published rows and confines writes to authenticated sessions; migrations are written to be safe to re-run. Two storage buckets hold thumbnails and site assets, and empty English fields fall back to Korean rather than rendering blank.

Admin CMS for Non-developers

• · Five tabs — inquiries, portfolio, awards, clients, settings. A YouTube address can be pasted whole and the ID is pulled out of it, thumbnails upload straight to storage, and ordering is arrow buttons rather than numbers.
• · Award cards crop to 4:3, so object-position was wrapped as a 'where it crops' slider with a preview matching the live card. Uploading a company profile PDF makes the download button appear on the site immediately; clearing it removes the button rather than leaving a dead link.

Pricing Behind the Login, SEO in Front of It

• · The client asked that no figures reach visitors, so the rate table lives in the admin bundle alone — submissions store selections and the money is derived after login. The admin loads lazily so it never enters the visitor bundle, and carries idle auto-logout and CSV export.
• · As a SPA the built body is a single #root, so crawlers that do not run JavaScript saw nothing when the link was shared. Static meta, an OG image, Twitter card, canonical, hreflang and Organization JSON-LD were added, plus a runtime pass that rewrites lang, title, og:url and canonical when the language toggle changes the path without a reload. The admin path is hidden through a noindex meta rather than robots.txt, which would only advertise the address.

Arcade Cabinet Identity

Shocking pink (#F90663) and teal (#002A32) on white, pixel type set in hard black borders with a 3D drop, a pixel-art cursor, and Web Audio hover and click tones. The studio's own characters occupy the room behind the menu, so the home screen reads as somewhere you walk into rather than a page you land on.

Video as the Transition

Nothing animates a page in. The insert film is the transition, and when it lifts the finished page is already sitting underneath — which is also why no loading indicator was needed anywhere in the flow.

Split Stage Layout

Desktop holds a halftone content panel on the left against a full-height loop film on the right; mobile stacks them into one scrolling body with the portrait film on top. Landscape films are right-aligned because the characters sit on that side of the frame, so the crop eats the empty left.

Typographic Rules by Weight

Periods were settled as a rule rather than case by case — display titles drop them, thin body copy keeps them — and the two languages were reconciled pair by pair across every field. When the display face's comma read as a nine, only the comma glyph was swapped to another family.