Symmetra Studios
AI video production
A 4K showreel, a living shader and sixty frames a second, on hardware the studio does not control.
- Role
- Design and engineering, end to end
- Timeline
- 2026
- Type
- Studio site for an AI video production studio
- Platforms
- Web
Stack
The problem
Symmetra is an AI video production studio, and for a studio the website carries the burden of proof: taste has to be visible before a single word is read. That meant a real 4K showreel playing in the browser, continuous motion design around it, and film-grade art direction end to end.
The naive version of that combination melts laptops. Autoplaying 4K video, an animated shader backdrop and scroll-linked choreography all compete for the same GPU, and iOS Safari actively fights pages that hold multiple videos. Getting cinema and a steady sixty out of the same GPU was the entire engineering problem.
Approach
A living backdrop in raw WebGL
The site's signature backdrop is a mesh gradient written directly against the WebGL context, no three.js. Simplex noise runs through fractal Brownian motion with domain-warped coordinates, in a restrained monochrome palette. The other half of shader work is making it cheap: one noise octave dropped for roughly 40% less per-pixel cost, rendering throttled to thirty frames with frame-skipping, a hard pause when the tab hides, and a plain CSS gradient on mobile. The pass cut GPU load by about 85%, nobody can see the difference, and the frames the backdrop gives up are what let everything above it hold sixty.
4K film that streams like TV
Films are served through Mux over HLS: native playback on Safari, hls.js everywhere else, with the adaptive bitrate tuned to open at full quality, because a showreel that starts blurry has already failed. The real battle was iOS Safari's video decoder pool, which silently evicts every video on a page when it runs dry; the fix is unglamorous and essential, explicitly detaching sources and resetting elements on cleanup so the reel never goes black mid-scroll.
A studio that updates itself
Content is a workflow, not a deploy. An editor drops a new film into the CMS, it encodes automatically up to 4K, and a signature-verified webhook revalidates every page that pulls that content type; the site updates in seconds without a build. The choreography runs on top and makes the taste visible: a splash sequence, word-by-word manifesto reveals, a filmstrip reel, page transitions and a custom cursor, all timed on GSAP and Lenis.
Outcome
The site is live at symmetrastudios.com as the studio's actual front door: full SEO and structured data, a CMS the studio runs itself, and the motion design doing the selling.
The first deploy went live under three weeks from the first commit; the shader and the choreography layered in over the month that followed. Since launch the studio has published on its own, no developer in the loop.
Want something like this?
Tell us what you're building and we'll give you an honest assessment of scope, timeline, and cost.