Design
Module 05 · by AMLLC
Spotlight & Ticket Reel
Put your user under a light. The Spotlight is a stage-lit profile banner — one person, one focused ray with a shimmer that sweeps light and name on the same clock — and it doubles as the OG card for every shared profile, recipe, or party link. The Ticket Reel is its sibling: a lazy dual-clock carousel where the scene slides first and a gold admit-one ticket springs in behind it. One self-contained HTML file, five treatments, a real WebGL volumetric stage, and the script that renders the static OG.
Instant access — the reader opens right after payment. Or read chapter one free as a member.
See it move
The stage, live.
This is the actual output running in your browser at OG (link-preview) ratio — watch the shimmer sweep the ray and the name together, then flip to the Ticket Reel and let it deal. Hover the reel to pause it.
The result
What you end up with
How it works
The technique, in four moves
No motion tool, no render farm. A container-query stage, a clipped beam, one shared clock, and a lagged second carousel — everything else is tokens and copy.
container-type:inline-size; everything sized in cqw. The same markup is the banner and the OG card.clip-path, blurred and screen-blended, with a shimmer layer sweeping once per 5.5s and a blurred pool on the floor.scaleY(1.14), gradient-filled through background-clip:text, sheening in sync with the ray's sweep.One clock. One lag.
Two synchronizations carry the whole module. In the spotlight, the ray's shimmer and the name's sheen run on one 5.5-second clock — desync them and you have two effects instead of one lit stage. In the reel, the background and the ticket run on two clocks 650ms apart — collapse them into one and you have a slideshow instead of a machine dealing tickets. Same lesson twice: the timing relationship is the design.
The math
One file replaces the design retainer.
Designer per asset
The spotlight file
Before you start
What you need
A browser, a portrait, and your brand's green and gold. The WebGL variant needs one script tag; the OG export needs Python with PIL.
A browser — the page is one self-contained HTML file; Three.js loads from a CDN for the Motif variant only. · A portrait — square crop, inlined as a data URL. · Your tokens — a deep green, a gold, a cream, a display serif. · Python + PIL — only for the static OG render script; no headless browser required.
Inside the module
The reel, chapter by chapter
One stage, two exports
Why the card is built at 1.91:1 with container units — the in-app banner and the 1200×630 OG card from one document, no breakpoints.
The ray and the shimmer
The clipped, blurred, screen-blended beam; the sweep-then-hold shimmer; the floor pool; and the name sheening on the same 5.5s clock.
Five treatments from one token set
Stage, Verde, Gilded, Noir Émeraude, Motif — variants as class swaps, and why the gilded look only works if most cards don't get it.
Real depth: the WebGL stage
Why stacking CSS blur regresses the look, and the Three.js scene that replaces it — volumetric cone, smoke sprites, falling dust, fog-lit frame field, camera parallax.
The lazy ticket reel
Two clocks 650ms apart, the overshoot spring, proper lazy-loading with data-src one beat ahead, and binding the ticket to a five-field party record.
Shipping stills: the OG render script
The PIL script that rebuilds the card as compositing math — screen-blended polygons, gradient-filled glyph-by-glyph type — with no headless browser.
Who it's for
Made for the launch that needs a promo
You should read this if your product has profiles, creators, listings, or events that get shared — and you want the banner, the link preview, and the hero carousel to look art-directed instead of assembled.
Skip it if you already have a design system with a lit profile treatment and a carousel you like, or nothing in your product ever gets a public link.
Or skip the reading entirely — apply to have it built on your brand: your tokens, your portraits, all five treatments plus the reel and the OG script, from $500.
Two doors
Read it, or hand it to us.
Get the guide
The full 6-chapter reader — the dual-export stage, the beam and shimmer, the five treatments, the WebGL volumetric, the dual-clock reel, and the OG render script. Includes the downloadable .skill file: the complete template plus the inject and render scripts. Yours to keep, updated as the pattern improves.
Have it built
We build the system on your brand — your tokens, your portraits, all five spotlight treatments, the ticket reel wired to your data, and the OG pipeline — plus the source. Apply, we scope it, you approve a fixed price first.
Apply to have it built