# Split letter wave > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The hero of a fictional summer motion-design camp, "Sundae Club". The two-line headline "Make things / that wiggle." is split into one span per letter; on load each letter rises from 0.7em below its baseline, tilted 10°, and springs past its resting position before settling, with a 34ms stagger so the wave sweeps left to right across both lines. Hovering (or focusing) any single word replays a smaller "hop" on that word only. The feeling is a bouncy, confident toy: big soft letterforms on saturated cobalt. The detail worth copying is the two-layer letter span, which lets the entrance and the hover hop run on separate elements so they never cancel each other. ## Reference behaviour 1. Initial state: cobalt page, nav at top, eyebrow "Summer motion camp · Lisbon", headline animating in, lede and two CTAs below, an info bar along the bottom. 2. On load, 21 letters animate in sequence. Letter `n` starts at `120ms + n × 34ms`; each takes 820ms. The last letter lands at about 1.62s. 3. Each letter: opacity 0 → 1 over its first 35%, travels from `translateY(.7em) rotate(10deg) scale(.9)` up past rest to `translateY(-.1em) rotate(-3deg) scale(1.02)` at 70%, then settles at rest. 4. The word "wiggle." is pink (`--pink`); the other three words are cream. 5. Hovering any word (mouseenter) restarts a 520ms hop on that word's letters, 28ms stagger per letter within the word: up 0.22em with −6° tilt, down past rest by 0.04em with +2°, then rest. 6. Re-hovering mid-hop restarts the hop cleanly from the first letter. 7. Each word is focusable (`tabindex="0"`); focusing it triggers the same hop and shows a 3px pink ring. 8. Clicking "Replay" in the bottom bar restarts the full entrance wave. 9. A 140px cream starburst sticker reading "No. 04" sits top-right, rotated 12°, slowly spinning (one turn per 24s). 10. Pink "Get tickets" / "Apply by 30 May" buttons lift 2px and tilt −2° on hover. ## Structure ``` 1280 × 800, 56px side padding ┌──────────────────────────────────────────────────────────────────────┐ │ (~) Sundae Club Programme Mentors Venue FAQ [Get tickets] │ 76px nav, hairline below ├──────────────────────────────────────────────────────────────────────┤ │ ── SUMMER MOTION CAMP · LISBON ✷ No.04 │ sticker 140px, rot 12° │ Make things │ 192px / .92 │ that wiggle. │ "wiggle." pink │ │ │ Five days of animation, type… [Apply by 30 May] [See schedule]│ lede 440px max ├──────────────────────────────────────────────────────────────────────┤ │ 14–18 July 2026 LX Factory €640 early bird Hover a word… (Replay)│ 64px bar, hairline above └──────────────────────────────────────────────────────────────────────┘ ``` - `.wrap`: CSS grid, rows `76px 1fr 64px`. - `