Wordpop Sample — Future of Work

# Wordpop Sample — Future of Work Eight scenes of one social-recap vocabulary. The first four are recreated from a 9:16 screen recording — yellow type set straight on full-bleed footage, assembled a WORD AT A TIME, with a highlighter chip carrying the spoken caption — and the other four extend the same grammar to the reveals the recording did not contain. ## The animation, which is the whole template Nothing fades. Every word in the recording appears in a single frame and stays — measured at 30fps, a word is absent in one frame and fully opaque in the next. So every reveal here is a 0.05s linear `opacity` step on `{part:"word"}` (or on the layer, for the one-word script accents), staggered on the beat the recording keeps: | scene | what pops | beat | motion ends | | --- | --- | --- | --- | | cover | 4 title words, the script accent, then the chip | 0.4s / 1.53s / plate 2.23s + words 0.19s | 3.62s | | count | numeral, script noun, 4 qualifier words | 0s / 0.8s / from 1.5s at 0.35s | 2.60s | | thought | the chip alone, 7 words | plate 0s + words from 0.2s at 0.23s | 1.63s | | question | 3 words, then the script payoff | 0.32s / 1.3s | 1.35s | | rule | the script count, then a whole LINE at a time | 0s / lines from 0.5s at 0.35s | 1.25s | | stat | the figure a CHARACTER at a time, script, chip | 0.18s / 0.8s / plate 1.3s | 2.70s | | quote | the serif quote a LINE at a time, then the chip | 0.45s / plate 1.1s | 2.27s | | close | 4 words from the LAST one back, script, handle | 0.35s `from: "end"` / 1.5s / plate 2.0s | 2.25s | **Every scene's motion is finished inside 4 seconds**, and with room to spare: the longest is the cover at 3.62s, and it still lands at 4.00s if the fill writes two more words into its caption than the placeholder has. That is the budget the timings were chosen against — the chip staggers in particular, which is why the cover's is 0.19s where the recording measured 0.23s. Nothing is anchored to a scene's end, so a scene simply holds its last frame for however long the narration runs. The chip is the one thing that is not a word pop: the PLATE fades up whole (0.18s) with its words still hidden, so the empty pill sits there for a fifth of a second before the copy starts landing in it. That is what the recording does, and it only works because `font.backgroundFit: "line"` fits the pill to the LINE — hidden words still hold their layout, so the pill is full size from the first frame. ## Type Three faces, one job each. `blackHanSans` for the display lines — the recording's face was matched by ink width against the measured cap height (`FUTURE OF` runs 832px against a measured 822px at 132px on the 1080x1920 canvas, the closest of sixteen candidates). `playFairDisplay` italic for the register shifts — one word in six scenes (`Recap`, `takeaways`, `notice?`, `three`, `of teams`, `thanks`) and the whole frame in the quote. `inter` 600 for the caption chip, whose 47px size was derived from the chip's measured ink width and confirmed against its cap height. Every line was placed by deriving the cap top from the face's own vertical metrics rather than by eye: `top = (measuredCapTopPx - halfLeading - (ascent - inkTop)) / canvasHeight`. The display stack holds `lineHeight: -33.3` (0.8em) on the cover and `-27.5` (0.87em) on the count — both the recording's measured 106px line pitch against their own sizes. ## The other two ratios The base is 9:16. `16:9` scales every size by 1.22 and re-stacks the blocks from the scaled gaps (a ratio inherits the DESIGN's gaps, not its percentages), then sets the boxes to `left: 15 / width: 70` so the measure stays readable on a wide canvas. `1:1` keeps the 9:16 sizes — the canvas is the same 1080 wide — and only re-stacks vertically. `textShadow` is stored in raw px, so it is patched up for the larger 16:9 canvas. ## Colour — three roles, four schemes | role | what it is | | --- | --- | | `ground` | the file ground the footage covers | | `accent` | every display word AND the caption chip's plate | | `inkOnAccent` | the caption type, the one colour that sits ON the chip | | `shade` | the 50% black drop shadow that does the legibility work instead of a scrim | There is no scrim anywhere: the type sits directly on the picture with a soft drop shadow, which is why every backdrop is briefed middle-dark and quiet through the band the copy lands in. Eight schemes, in two families. **Highlighter, Lime, Coral, Ice** are the recording's own idea — one saturated accent over a near-black ground, moved round the wheel. **Navy & Cream, Forest & Chalk, Oxblood & Blush, Slate & Amber** are TWO-TONE: each is built from two hues rather than an accent on black, with `ground` and `inkOnAccent` two values of the same hue and `accent` the other. Because `inkOnAccent` is the dark end of the ground's own hue, the chip reads as the ground punched through the accent rather than as a third colour — and the contrast pair the design depends on (dark type on a light chip) is stronger in all four than in the saturated set.