✕ The Category Is — Receipts
Style map
The actual rendered site (celluloid branch, 1440×900), annotated: each line runs from the real element to its entry below — token, value, and where it’s allowed to speak. Captured from the live preview, so what you see here is what ships.
The Sting — hero
Sasa’s screened title (Xweb.pdf): the film leads and the title rides its opening pan to a 60% dock (the reveal; heroTitle.ts); the words are gels laid over it with the Screen blend. Every ink on this frame is accounted for.
| Value | Token | Where & why | |
|---|---|---|---|
| 1 | screen · 0.62 | .menu-btn | hamburger: the disc vanishes under screen, three white lines brighten over the film; ink sets to 1 under the pointer |
| 2 | grayscale(1) contrast(1.08) | the performance loop | camera-directed film: heroCamera.ts drives object-position from the 25-key track (cuts and cushioned hand pans, authored in the framing lab) |
| 3 | #30cfff | --title-cyan · screen @ 1.0 | the X: live type in its own span — the pop target: muted (the default) only the 14s visual-cue hit fires (G’s X-hands); sound on unlocks the full seven-beat combination (full-magnitude singles 14/20/22/24s, 200ms doubles 26.5/28.5/30.5s), each peak shedding the sprite burst with the multiply-violet. Face is the -sx5 build: her X, G, R and lockup kerning from her vectors |
| 4 | #f2edea | RG Tall caps · +0.17em · screen @ .62 | billing roles: her supporting register, tracking and cap size measured from the comp’s vectors |
| 5 | #f2edea | Manrope 500 · screen @ .62 | billing names: her stems measure between Manrope 400 and 500, nearest 500. The middle credit rides the viewport midline with the cue |
| 6 | #f2edea @ 92% | scroll cue | falling thread + mono label, on the same center axis as the middle credit |
| 7 | #05adf5 | --x-cyan fill · normal @ .62 | Sign Up chip: chips keep NORMAL blend, screen would erase the dark label exactly where the film is bright |
| 8 | #fa25da | --cel-magenta fill · normal @ .62 | Buy Tickets chip: the UI magenta IS the logo ink |
| 9 | #fa25da | --x-magenta · screen @ 1.0 | TRAVAGANZA: brightens wherever the film behind is bright. Her comp’s literal graphics state (Screen, ca 1.0), read from the PDF |
| 10 | #30cfff | --title-cyan · rotate(85.34deg) | A NEW MUSICAL: rotated horizontal run down the final A’s leg, flat top collinear with the word’s cap line (the roofline). Word + tagline center as ONE unit: 9.01vw margins each side |
| 11 | screen · 0.62 | .cel-mute ghost | sound control: hairline circle, the muted state wears a small ✕ as its slash; sound is opt-in every visit |
The List — signup
The sheer glass over the runway photo: the one surface that stays a panel, because a form needs a floor. After opt-in the panel ends with the share moment (“Bring your house: share the show”, native share sheet with clipboard fallback).
| Value | Token | Where & why | |
|---|---|---|---|
| 1 | #fa25da | --cel-magenta ✕ + ash | category eyebrow: magenta ✕, mono ash text |
| 2 | #f2edea | PP Right Grotesk Tall Black | scene headline, stepped up to clamp(2rem,4.6vw,3.6rem) so it holds against the 380px hero title |
| 3 | #fa25da | --cel-magenta accent | preference checks: magenta accent-color |
| 4 | #fa25da | --cel-magenta fill | Notify Me: flat magenta, no neon glow on this branch |
| 5 | rgba(0,0,0,·) + blur | .cel-glass--sheer | sheer smoked glass: the photo stays alive behind the form |
| 6 | #f2edea @ 12% | --color-line border | fields: hairline borders on near-black |
| 7 | grayscale + dim | photography @ 55% | runway backdrop, dimmed to keep form contrast |
Tens Across the Board: tickets + the venue
The loudest object on the page, then the venue in one breath: the note is screened on the photo of the very house it describes. This frame also carries the underlined utility link that now appears across the site.
| Value | Token | Where & why | |
|---|---|---|---|
| 1 | #fa25da | --cel-magenta ✕ + ash | category eyebrow: Tens Across the Board |
| 2 | #fa25da | .cel-bigbtn fill | Get Your Tickets Now: the loudest object on the page, flat logo ink, black display label |
| 3 | #f2edea @ 55% | --font-mono ticker | Through Baltimore Center Stage: the mono ticker voice |
| 4 | #f2edea | --color-page mono | photo credit: courtesy line, pill-less |
| 5 | screen (block) | .cel-screened body copy | the venue note: public BCS facts, screened on the photograph of the house it describes; ash-strong Manrope over the pool |
| 6 | underline #fa25da | .linkbtn | the underlined utility link: page-white text on a magenta underline, whole link turns magenta on hover. Same element in the calendar row (Google · Outlook · Apple), the SoundCloud line, and the Substack link; inside screened blocks it composites lighter over the film |
| 7 | grayscale + dim | photography @ 45% + pool | the empty house from the stage: the seats the button sells |
Stage Door — the strip + action bar
Era frames with the highlighter rings, the persistent three-button dock, and the socials row.
| Value | Token | Where & why | |
|---|---|---|---|
| 1 | #fa25da | --cel-magenta ring | the select mark (the contact-sheet editor’s circle, drawn as a highlighter): one live pass centered on José’s face — pressure dab on landing, lift-off taper, an outward-spiral overlap or a shy non-close; never the same twice. Full spec on the Celluloid Stage page |
| 2 | #f2edea @ 55% | --font-mono on ash | era stamps: mono ticker voice |
| 3 | #f2edea @ 55% | ash → page on hover | consolidated credits: hovering a frame lights its credit |
| 4 | #05adf5 | --x-cyan fill | action bar Sign Up: matches the top bar cyan |
| 5 | underline #fa25da | .linkbtn | Producers’ Substack: the same underlined utility link, riding with the social icons |
| 6 | #f2edea @ 12% | ghost — --color-line border | Listen Now: the quiet middle; hierarchy stays honest |
| 7 | #fa25da | --cel-magenta fill | Buy Tickets: the loud bookend |
Captured from the live celluloid preview with element coordinates read from the DOM at screenshot time — the lines cannot drift from the pixels. Site design by Sasa Rodriguez & James Mayes.