Celluloid color system

One magenta. The UI accent (--cel-magenta) is the logo ink itself, so the hero name and the Buy Tickets button on the same screen never wear two different pinks. The neon-era #ff1f8f does not appear on this branch.

The letterforms. Live type, not a raster: PP Right Grotesk Tall Black with her custom X patched into the font itself (the -sx5 build: X re-aligned to cap/baseline in sx2; her exact G and R vectors in sx4; her LOCKUP KERNING in sx5 — a nine-pair GPOS delta lookup that lands every TRAVAGANZA pair within 0.1 units of her SVG letterfit), word at 26.31vw (her cap = 17.99% of frame width), cyan X via ::first-letter. “A New Musical” wears its OWN face, built from her Xtravaganza.svg vectors (a lighter, truly oblique cut with her hand-tuned letterfit baked into the advances) — rotated 85.34deg, cap 9.62% of the word’s, the run spanning the lockup’s full height, cap line to baseline, ink reaching 2.57vw past the word’s right edge. Every value measured from her vectors.

The type files. Web (self-hosted, serving on the site): pp-right-grotesk-tall-black-sx5.woff2 — PP Right Grotesk Tall Black carrying Sasa’s letterforms: her X (source: Xweb.pdf page-2 vectors; ink re-aligned to cap line and baseline), her G and R (source: Xtravaganza.svg, 2026-07-20 — the G’s counter tail tapers to a point, the R’s foot takes her true cut), and her lockup kerning (nine TRAVAGANZA pairs as a GPOS lookup, matching the SVG’s letterfit within 0.1 units). All other glyphs are the licensed original. pp-right-grotesk-tagline-1.woff2 — the tagline’s own face, built entirely from the same SVG’s A NEW MUSICAL: her lighter ~20° oblique cut, ten letters + space, her hand-tuned letterfit baked into the advances (set it with tracking 0). Desktop twins for design work, named DISTINCTLY from the licensed original so both can share a font menu: family “PP Right Grotesk SasaX”, styles Tall Black (sx5 parity) and Tagline Oblique. All four files + lineage README live in Dropbox: James Mayes/Xtravaganza/01-Brand/Fonts/pp-right-grotesk-sasa-x/. Licensed base — team use only.

The billing. James’s original pairing, kept at Sasa’s request (2026-07-19): roles in the mono ticker voice (JetBrains Mono, uppercase, tracked), names in Manrope, the three credits clustered at center. Screened with the title at the 0.62 supporting register. Kerning and positioning iterate from this baseline; the Xweb-measured Right Grotesk/Manrope-500 treatment lives in git history if the direction swings back. On phones the three credits set as ONE row inside the logo’s exact footprint (the word’s 77.5vw of ink + the tagline’s 2.57vw column): MUSIC & LYRICS BY rides the viewport midline with the SCROLL cue, BOOK BY opens on the X’s left edge, DIRECTED BY closes on the tagline’s outer edge — the uneven gaps between credits are by design. Roles ride down 0.28em toward their names on every viewport, so each pair reads as one credit. Below 280px (narrower than any real display) the lockup enters its SURVIVAL TIER: the word alone carries the logo, small but properly set and centered true; credits, tagline and the top chips leave (both conversions stay one tap away in the menu and the action bar, which drops its quiet middle so Sign up + Buy tickets fit). The film, the reveal, the pops and the loop exit all still perform on the word.

Motion — the reveal. The title has ONE entrance, and the film performs it (the dock model, heroTitle.ts, authorable in the framing lab): the lockup starts invisible, fades in from 0.6s, and rides the camera’s opening pan down as if painted on the film just above the frame — docking at its natural position on the hands-to-sky beat (4.2s), where it latches viewport-locked for the rest of the visit. On desktop it arrives oversized at 150% and settles to 60% as it docks (REVEAL_START_SCALE / DOCK_SCALE), scaling about its foot so the docked lockup sits just above the billing and the oversized entrance grows upward, off-screen. Phones now take the SAME introduction as desktop: the lockup arrives oversized at 250% (mirroring desktop’s REVEAL_START_SCALE / DOCK_SCALE ratio, so it bleeds off the screen edges) from just off the top edge, then descends and shrinks to its authored size on the film clock. The descent EASES IN (DESCENT_EASE 2.0): it lingers high through the lighting-truss band near the top of the frame, then accelerates subtly to the dock once past it. It scales about its foot, so the oversized start grows upward off-screen, and it settles level (no bounce, no rock). The old ballroom dip is retired, kept behind MOBILE_INTRODUCE in heroTitle.ts. Easter egg: G throws the ✕ and the logo’s X answers. The hits are cut to the film’s audio, so MUTED (the default) only the 14s pop fires: the one motivated by a visual cue, G’s hands thrown into an X. With SOUND ON the full combination returns. SEVEN beats per pass of the loop: singles at 14/20/22/24s, all at full 2.3× magnitude (only the whip direction varies), then doubles at 26.5/28.5/30.5s whose second hit launches off the first’s landing to 2.45×, peaks 200ms apart. The gate is live: unmuting mid-play brings the hits back at once. Every peak sheds a rhythm-game HIT BURST: 6–9 ephemeral X sprites (pink, ~25% cyan) scatter upward with staggered spawns while a ghost rushes the viewer; the sprites multiply like the ✕’s own inks, so pink over the cyan core births the house violet at the moment of the hit. Triggers lead each mark by one attack so PEAK lands on the beat. The reveal now CYCLES with the film: at the loop’s tail (34.45s) the docked lockup and credits drop quickly out through the floor (gravity fall, a slight -1.8° lean, desktop keeping its 60% scale all the way down), fully out just before the 35.2s wrap — and the entrance replays: the dancer exits through the floor and re-enters from the sky, one continuous loop. The billing materializes on the same clock: a 1.4s ease that completes the instant the title reaches its resting place (the settle, not the latch), on every viewport. After the dock, the only title motion left is the scroll: the hero pins for 80% of a viewport and you fall into the film — media scales 1→1.08 (foot-anchored) while the whole title stage scales 1→1.14 and fades.

The tens glint. The judges’ “10” fans rise in the crowd (20.35s, then a staggered pair at 21.22/21.42s) and each catches the light: a photographic 8-point starburst — white cross-streaks with a diagonal sparkle pair, bloom core with a whisper of the title cyan — snapping in and HOLDING near peak for 720ms (the hold is what reads in full motion), screen-blended on the film. A dynamic overlay, not baked into the video: cues live in FILM SPACE and the sprites are re-mapped through the live cover-crop every frame, so they ride the camera’s pan glued to their fans. The beats land between the 20s and 22s X pops — the judges scoring the walk.

The projector lamp. The hero’s waiting state: before the film’s first pixels arrive (slow connections; iOS Low Power Mode holding the poster), the black frame carries a faint warm pool of light breathing on a 3.4s cycle — the lamp warming up behind the screen before picture-up. Pure CSS, zero listeners: the video element paints over it the moment it has anything to show. Static under reduced motion.

The idle glint. The one exception to “the film is the only thing moving,” and it moves once: after 7 seconds of true idle the top chips solidify from the gel register to full ink and a single soft sheen sweeps Sign Up, then Buy Tickets — light catching a marquee. Fires once per visit, then the bar eases back to 0.62; any scroll, pointer, key, or touch re-arms the countdown; skipped entirely under reduced motion. Deliberately NOT a repeating flash: blinking CTAs are banner heritage, and the site’s photosensitivity rule stands — one flash per event, nothing loops.

Pools. The fixed section pool (radial ellipse under the title band) survives; the old traveling billing pool is retired — dark pixels are no-ops under screen, so the credits' legibility now comes from the section pool beneath the group.

The foot edge. The film dies clean into stage black: the foot curtain reaches opaque #000 over its last 6px, the zoom anchors at the foot, and the video's own last rows are masked to transparent — a composited video layer bleeds ~1px past the section's clip, and that leaked row must have nothing bright to paint (the “white hairline” bug, verified fixed by pixel scan).

Sound. The hero film carries its audio and always starts muted; sound is opt-in every visit, never persisted. A first-visit nudge signals it: on the 14s visual-cue pop a one-time mono caption (“SOUND OFF · TAP TO PLAY”) fades in by the control with a single ring cue on it; any interaction dismisses it, it never repeats, and unmuting removes it. On phones it stacks above the control so it clears the Scroll cue. Once summoned, the sound belongs to the visitor, not the scene: the film keeps playing as they scroll away, scoring the whole page, and its ghost control travels — fixed bottom-right, portaled out of the pinned subtree. On phones it doesn’t jump clear of the incoming ActionBar — its lift is a function of the hero’s exit progress, so it rides up WITH the scroll and is fully raised the instant the bar’s sentinel fires. Muting sends the control home to the film and, if the film is off-screen, stops it. Ducking with precedence: pressing play on the single in the Listen scene mutes the film automatically — the actual track always trumps the ambience. The muted state wears a small ✕ as its slash, the brand’s own mute mark. Hidden under reduced motion, where the film never plays.

The pen. A pink highlighter, not an opaque pencil: --cel-magenta at 55% opacity, with the landing dab laid twice (a stacked 30% pass) so the ink darkens where the pen first pressed — pressure you can see, and the photo always reads through.

The gesture. Drawn LIVE when the frame enters view: one circle-ish pass at constant hand speed (340ms per revolution), usually riding 0.3–0.6 of a second revolution past its start while the radius spirals gently outward — the overlap lays a strand beside the first ink instead of retracing it — and occasionally stopping shy, never closing. The imperfection is long low-frequency deviation (sin 2a / sin 3a) with only a whisper of shake: a fast hand sweeps, it doesn’t wobble. The stroke ends in a lift-off taper.

The rules. Every viewing draws a fresh mark — start point, handedness, closure, tilt, and wobble all randomize per pass, so no two visitors (or two scrolls) see the same circle. Rings are face-centered per frame (a per-cell inset box in the strip data), oversized where the gesture wants to run off the photo — the frame clips it. Under prefers-reduced-motion the finished mark simply appears.

Reduced motion (prefers-reduced-motion): the film never plays — the graded poster stands, the title is simply there (no reveal), the select marks appear as finished circles (no draw-on), the strip is a plain swipe carousel, the idle glint and the lamp’s breathing never run, and the mute control doesn’t exist (there is no sound to control).

No JavaScript: the pages are prerendered — every word of the hero, dates, credits, and bios is real text in the HTML. A <noscript> override shows the title plainly, since the reveal that would have shown it can never run.

Save-Data / 2G: the 9MB loop’s src never attaches — the poster IS the experience, at full quality, preloaded to win the first-paint race.

The film is late or forbidden (slow throughput; iOS Low Power Mode blocks autoplay): the projector lamp breathes over the black frame while we wait, and a 4s grace timer docks the title anyway — the poster deserves its title. If playback begins mid-film (a visitor joins past the beat), the title docks instantly rather than replaying an entrance whose moment has passed.

The rule beneath the rules: animation is a PERFORMANCE of state, never the source of it. The docked title, the finished ring, the poster, the visible credits — each exists in CSS/HTML without a single frame of script running. What the guides call an entrance is always a privilege, revoked gracefully.