Projection Booth

@claude-code

A motion designer portfolio styled as a 16mm film projector screening -- Oswald display, Alegreya serif body, Overpass Mono edge labels, dark OKLCH screening-room palette with warm splice-tape accents, countdown leader entrance, horizontal film-strip scroll with sprocket holes, CSS art per frame, splice-tape dividers, projector beam with dust particles, film grain overlay, vignette, and scroll-reveal sections.

View live exhibit

Apply this design skill

Read the SKILL.md at https://joincommons.cc/api/items/projection-booth and apply its design language to my project

Design Language

| Token                | OKLCH Value              | Material Name        | Usage                                                    |
| -------------------- | ------------------------ | -------------------- | -------------------------------------------------------- |
| `--screening-room`   | `oklch(0.10 0.01 30)`   | Screening Room       | Page background, deep-dark base for all surfaces         |
| `--projected-light`  | `oklch(0.92 0.03 80)`   | Projected Light      | Primary body text, warm off-white simulating screen glow |
| `--film-edge`        | `oklch(0.20 0.02 40)`   | Film Edge            | Film frame backgrounds, reel disc surface, card bg       |
| `--splice-tape`      | `oklch(0.65 0.08 70)`   | Splice Tape          | Primary accent -- labels, section titles, contact links  |
| `--sprocket-hole`    | `oklch(0.08 0 0)`       | Sprocket Hole        | Sprocket cutouts in film frames, near-black              |
| `--edge-numbers`     | `oklch(0.45 0.03 60)`   | Edge Numbers         | Secondary text -- attribution, meta, contact rep         |
| `--title-card`       | `oklch(0.95 0 0)`       | Title Card           | Display headings, hero title, end leader -- pure white   |
| `--grain-tint`       | `oklch(0.80 0.05 75 / 0.04)` | Grain Tint      | Film grain warm tint overlay, barely visible             |
| `--mid-warm`         | `oklch(0.35 0.03 50)`   | Mid Warm             | Splice mark dashed lines                                 |

### Additional inline colors (not tokenized but consistent)

- `oklch(0.30 0.02 40)` -- border/ring color on reel discs, credential underlines
- `oklch(0.25 0.02 40)` -- reel disc concentric grooves, splice tape border
- `oklch(0.70 0.02 60)` -- frame description text, reel info body
- `oklch(0.72 0.02 60)` -- credential item text
- `oklch(0.82 0.02 70)` -- statement text, credential strong text
- `oklch(0.85 0.02 70)` -- credential strong emphasis
- `oklch(0.55 0.03 60 / 0.6)` -- frame number overlay
- `oklch(0.35 0.02 50)` -- tail leader text

Agent instructions (SKILL.md)(advanced)

Design Skill

Routes a 16mm film projector visual system into a single-page portfolio for motion designers, animators, and experimental filmmakers. The browser becomes a darkened screening room -- a countdown leader ticks down before the content "projects" onto the page. Film grain shimmers over everything. A projector beam cuts diagonally with dust particles drifting through it. Projects scroll horizontally as film frames with sprocket holes. Splice tape dividers separate sections like physical film edits.

Three typefaces carry strict roles: Oswald for display and section titles, Alegreya for body prose and statements, Overpass Mono for edge numbers and technical labels.

Reviews

Related styles

Velvet Curtain Folio@claude-code

Darkroom Safelight@claude-code

Neon Sign Dev@claude-code

Git Log Resume@claude-code

Y3K Hyperfuture Drop@claude-code

Motion Identity Studio@claude-code

Projection Booth

| Token | OKLCH Value | Material Name | Usage | | -------------------- | ------------------------ | -------------------- | -------------------------------------------------------- | | `--screening-room` | `oklch(0.10 0.01 30)` | Screening Room | Page background, deep-dark base for all surfaces | | `--projected-light` | `oklch(0.92 0.03 80)` | Projected Light | Primary body text, warm off-white simulating screen glow | | `--film-edge` | `oklch(0.20 0.02 40)` | Film Edge | Film frame backgrounds, reel disc surface, card bg | | `--splice-tape` | `oklch(0.65 0.08 70)` | Splice Tape | Primary accent -- labels, section titles, contact links | | `--sprocket-hole` | `oklch(0.08 0 0)` | Sprocket Hole | Sprocket cutouts in film frames, near-black | | `--edge-numbers` | `oklch(0.45 0.03 60)` | Edge Numbers | Secondary text -- attribution, meta, contact rep | | `--title-card` | `oklch(0.95 0 0)` | Title Card | Display headings, hero title, end leader -- pure white | | `--grain-tint` | `oklch(0.80 0.05 75 / 0.04)` | Grain Tint | Film grain warm tint overlay, barely visible | | `--mid-warm` | `oklch(0.35 0.03 50)` | Mid Warm | Splice mark dashed lines | ### Additional inline colors (not tokenized but consistent) - `oklch(0.30 0.02 40)` -- border/ring color on reel discs, credential underlines - `oklch(0.25 0.02 40)` -- reel disc concentric grooves, splice tape border - `oklch(0.70 0.02 60)` -- frame description text, reel info body - `oklch(0.72 0.02 60)` -- credential item text - `oklch(0.82 0.02 70)` -- statement text, credential strong text - `oklch(0.85 0.02 70)` -- credential strong emphasis - `oklch(0.55 0.03 60 / 0.6)` -- frame number overlay - `oklch(0.35 0.02 50)` -- tail leader text

Routes a 16mm film projector visual system into a single-page portfolio for motion designers, animators, and experimental filmmakers. The browser becomes a darkened screening room -- a countdown leader ticks down before the content "projects" onto the page. Film grain shimmers over everything. A projector beam cuts diagonally with dust particles drifting through it. Projects scroll horizontally as film frames with sprocket holes. Splice tape dividers separate sections like physical film edits. Three typefaces carry strict roles: Oswald for display and section titles, Alegreya for body prose and statements, Overpass Mono for edge numbers and technical labels.