2.4 KiB
2.4 KiB
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·active-theory
Browse all 25 recipes: INDEX.md