Ideas Grow Together

# Typed Sample — Ideas Grow Together Six scenes built out from a screen recording of a social story: heavy uppercase Archivo Black set green over full-bleed workspace footage, assembled a letter at a time, with a small white caption typing itself in at the foot. Four scenes are the recording's own beats; two more extend the vocabulary rather than repeating it. Every scene is a DIFFERENT text animation — that is the point of the pack, and it is also why no two of them are laid out the same way. ## Type Two faces from one superfamily. `archivoBlack` carries every display line and `archivo` at 500 carries every caption. The face was identified by measurement, not by eye: at matched cap height the recording's five display strings sit within ±2% of Archivo Black's own advance widths (Poppins is 13% narrow, Montserrat 5%, Rubik 12%), and the caption's three lines land within 1% of Archivo 500. Every size was derived with `remToFontSize` against its own canvas: 118px / 112px display and 50px caption at 1080x1920, restated for 1920x1080 and 1080x1080 rather than reused. The lockup holds `lineHeight: -34` (0.79em — the two lines nearly touch, as the reference sets them) and the stacked scenes open to `-23` (0.92em), which is the one place the recording's two display settings differ. Every line was measured against its resolved box before it was written: the widest display line runs 837px in a 950px box at 9:16 and the widest caption line 839px in a 907px one, so the authored `<br>` rows hold at all three ratios. ## Colour — four roles, eight schemes | role | what it is | | --- | --- | | `ground` | the file ground, the foot scrim under every caption, and both drop shadows | | `paper` | the top wash, the panel band, and the field's reversed type | | `display` | the big uppercase type, and the ground of the one scene that is a field of colour | | `ink` | the captions and the two hairlines | The recorded green measures `#115333` off the frame. **Forest, Cobalt, Ember, Plum, Teal, Wine, Slate, Mustard** — they differ in family and temperature rather than brightness, because the pair the design actually depends on is dark `display` on light `paper`, and that pair is checked in all eight: 8.5, 10.5, 7.6, 11.9, 8.2, 10.6, 12.0 and 7.2 to one. Scene 5 inverts the same pair — paper type on a display field — so it is covered by the same check. Every scrim, wash, halo and shadow is written as a hex TINT of one of the four roles (`#0E120FA6`, `#F2F0EBCC`), so a scheme switch carries all of them. ## Shadows Two, both slight, both tints of a role, and both only where type sits over a photograph the template does not own: - `textShadow` on the display type — an 18px `ground` drop at 3px, so the dark lockup gains weight against a bright wash rather than a halo. A LIGHT shadow was tried first and read as a glow: it lifts the type off nothing, because the type is already darker than everything behind it. - `textShadow` on the captions — a 14px `ground` drop at 2px, which is what lifts white 50px type off a bright floor. Both are the same role at two tints (`#0E120F66`, `#0E120FA6`), so a scheme switch carries them and the two decisions stay independent. The panel scene's type is on a flat paper band and the field scene's is on a solid colour, so neither carries one: a shadow with nothing to separate is just dirt. ## Motion — five moves, and nothing over four seconds | move | where | | --- | --- | | **char typewriter** — letters arrive in turn, each rising 18% of its own height | the lockup, scenes 1 and 6 | | **rule wipe** — a hairline drawing itself left to right | scenes 2 and 5 | | **masked word rise** — words climbing up into their own line, which clips them | scene 3 | | **line rise** — whole lines arriving on their own beat | scene 4 | | **block settle** — the whole block easing out of a blur at 1.07 scale | scene 5 | | **caption typewriter** — the char move again, faster and finer | every scene | Each is written as `set` + `to`, so both ends are stated and there is no live value for a rebuilt timeline to capture. **Every scene's motion is finished by 3.7s** — the slowest is scene 1, whose caption lands at 3.64s — so a scene that is cut short still plays whole. 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 | layout | what carries it | | --- | --- | --- | --- | | 1 | Statement | full-bleed, lockup top | the typed lockup | | 2 | Standfirst | full-bleed, copy ranged left at the foot | a hairline, and no display type at all | | 3 | Panel | paper band top 28%, picture below | dark type on paper, words climbing in | | 4 | Stack | full-bleed, three lines top | one word per line, one beat each | | 5 | Field | no picture — a field of the display colour | paper type reversed out, settling as a block | | 6 | End card | full-bleed, lockup centred mid-frame | the opening line typed back in | Scene 6 is `meta.silent` — an end card repeating the opening line has nothing to narrate, and the silence keeps its `customDuration` pinned. `meta.broll` is on scenes 1-4, whose plate IS the scene's picture under a narration; the end card's is held, and scene 5 has no picture to hold. Scene 3 is the only one that is not full-bleed and scene 5 the only one with no photograph, which is what keeps six scenes of one vocabulary from reading as the same scene six times. ## Departures from the reference The reference needs no scrim — its own footage is a bright wall exactly where the dark green type sits. These are SLOTS, so they take any photograph, and dark type over a dark plate is the failure that follows. Hence the wash, the halo, the foot scrim and the caption's drop shadow; the worst case under the top wash measures 5.8:1. The hairlines, the paper band and the colour field are the other additions, and they exist to keep the six scenes apart. The five photographs are generic workspace placeholders borrowed from `chip-sample-work-from-home`, not art direction — every one is a `cover` slot with an honest box.