# resn-storytelling — Resn (Story Through Scroll)

- **School**: Motion / Experimental
- **Vibe**: Surprise as the reward; the page tells a story to those who scroll
- **Best for**: Brand storytelling, agency portfolios, campaign microsites
- **Touchstone**: resn.co, Resn's case-study pages, awwwards site-of-the-day archives

**Palette**
- Project-driven — Resn's recipe is more about composition than a fixed palette
- Often warm-cool contrasted within one piece (warm character against cool environment, or vice versa)
- Saturated where the story demands; muted where it breathes

**Typography**
- A campaign-specific display face is almost always present — custom or unusual
- Body type quiet, often a humanist sans at small sizes
- Text often integrated *into* the scene (titles set in WebGL space, not on a fixed UI layer)

**Spacing**: irregular and composition-driven; not grid-strict

**Radius**: project-dependent

**Shadow**: scene-baked, not component

**Motion**: long-form choreography — a single page might tell a 90-second story across 8–12 scroll triggers, with payoffs at specific moments

**Signature moves**
- Scroll triggers reveal narrative beats — a character moves across the screen, a product is unveiled, a punchline lands
- Easter eggs hidden for repeat visitors
- Cursor-reactive surface materials (a hover changes a texture, an audio cue plays)
- Multi-scene composition — each section is treated as a film scene with its own art direction
- A reward at the end — a special interaction or scene only revealed on full scroll-through

**Avoid**
- Bloating with too many beats — Resn's recipe is "fewer, better" beats
- Pure decoration without narrative — every motion moment should advance the story
- Forgetting the punchline — the recipe needs a payoff scene

**AI prompt seed**
> Narrative scene from a brand microsite, mid-action moment, character or object in motion with intentional motion blur, warm-cool palette contrast, theatrical lighting, 16:9.

**Don't use when**
- There's no story to tell (the recipe needs narrative content)
- Audience won't scroll patiently (Resn rewards patience — for impatient audiences, choose a static recipe)
- The build is rushed — Resn's recipe demands choreography time

---

> **Same school — Motion / Experimental**: [`field-io`](./field-io.md) · [`active-theory`](./active-theory.md)  
> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)