Kinetic Sample — Show Up

Dynamic Template

# Kinetic Sample — Show Up Six scenes of one editorial brand carrying a fitness programme: lowercase Archivo Black set enormous over duotoned photography, assembled a letter at a time. The design was recreated from a Canva story recording — scene 1's type is measured off it — and the other five extend the same vocabulary rather than inventing a second one. ## Type `archivoBlack` throughout — one face, always lowercase. Six steps, each derived with `remToFontSize` against its own canvas height (206 / 150 / 103 / 76 / 39 / 28 px at 1080x1920). Display copy holds `lineHeight: -41` (0.708em, the lines nearly touch) and `letterSpacing: -5` (-0.05em, fitted against the recording's measured ink widths — Archivo Black is a wide face and the reference is set tight). Body copy opens to 1.25em and -0.02em. Every line was measured with `measureText` against its resolved box at all three ratios before it was written: the end-card sign-off stacks to two lines because "join monday." runs 944px against an 886px box, and the standfirst's measure is fitted per ratio to keep its break off a one-word orphan. ## Colour — six roles, eight schemes | role | what it is | | --- | --- | | `ground` | every scene ground, and every legibility-scrim tint | | `groundAlt` | the quote scene, which is a field of colour rather than a picture | | `ink` | display type on the ground | | `inkAlt` | type and the hairline ON the colour field | | `accent` | hairlines, chapter marker, list numerals — and the photo duotone | | `muted` | the standfirst, the one piece of secondary copy | The palette reaches the **photography**, not just the type: every plate is graded to grey and a full-bleed `mix-blend-mode: color` layer tints it in the scheme's accent. Because `color` takes hue and saturation from the plate and luminosity from the backdrop, the tint can never change type contrast — the luminosity is the photograph's either way — and the scrims above it still do all the legibility work. Five colour schemes come first, so the template looks alive out of the box, then the three near-monochrome ones the design was originally drawn in: **Ember, Volt, Cobalt, Rose, Citrus, Graphite, Bone, Frost.** They differ in temperature and family rather than brightness. Four of them invert `groundAlt` to a LIGHT field with dark `inkAlt`, which is why those two roles are separate from `ground`/`ink` — the quote scene flips to a light card and nothing else moves. Every pair the design stacks was checked against the WCAG formula in all eight: `ink`/`ground` >= 10, `muted`/`ground` >= 4.5, `accent`/`ground` >= 4.5 (the accent carries type, so it cannot just be decorative), `inkAlt`/`groundAlt` >= 6 (display type at 150px, so 6 rather than 10). The `accent` hairline deliberately never lands on `groundAlt`: scene 4's rule is `inkAlt`, the role built to read on that field. ## Motion — four moves, no fifth | move | where | | --- | --- | | **char reveal** — odd letters fall, even letters rise, interleaved | the display line of every scene | | **line rise** | labels, standfirsts, lists, credits | | **rule wipe** — a hairline drawing itself left to right | scenes 2, 4, 5 | | **panel rise** | the photo bands and the diptych pair | The char reveal is the signature and every scene carries it. It is written as `set` + `to` so nothing immediate-renders — both ends are stated and there is no live value to capture, which is what `from` gets wrong on a rebuilt timeline. Every other entrance is `fromTo` with both ends stated for the same reason, with `transformOrigin` in both ends of the rule wipe so it is set and never tweened. Nothing is anchored to a scene's end. Each scene draws in and holds its final frame for as long as the narration runs; the boundary is one `scene.transition`. ## Scenes | # | scene | what carries it | | --- | --- | --- | | 1 | Statement | the lockup alone, over full-bleed footage | | 2 | Chapter | a photo band, a marker, a two-line title | | 3 | Diptych | two plates read against each other | | 4 | Quote | no picture at all — type on a field of colour | | 5 | Rules | three numbered lines over a scrimmed surface | | 6 | End card | the sign-off centred under a vignette | Scene 6 is `meta.silent` — an end card has nothing to narrate, and the silence keeps its `customDuration` pinned. `meta.broll` is on scenes 1 and 2 only: those two slots ARE their scene's picture, while the diptych pair are grid tiles, the surface is a ground and the end card is a title beat. ## Departures from the reference The reference has no legibility scrim — it does not need one, because its own footage is dark where the type sits. These are SLOTS, so they take any photograph: the gradient plates are what keep the type readable over a bright one, and the worst case under the top scrim measures 16.7:1. Landscape swaps scene 1's scrim for a left-to-right one, because that is where the lockup sits at 16:9. The hairline is the second addition — one piece of punctuation, used three times — and the duotone is the third.