← All work

Case 03 of 05 · Client project · Motion Design & Scroll Animation Website

A Love Story in Motion

A wedding site told as a film, scene by scrolling scene.

A Love Story in Motion is a wedding website built as a motion piece: the couple's story unfolds in scroll-driven scenes, paced like a short film from first meeting to wedding day.

Year
2025
Type
Client project
Role
Art direction, motion design, development
Built with
Web animation, Scroll choreography, Media
See it
Open the live site ↗
A wedding website opening on the names Zane and Zoë beside a diamond ring.

Act 1 · Before

Tell ten years in one scroll

A couple wanted their wedding site to feel like their story, not a schedule with hearts on it. The brief: real emotion, zero kitsch, and the practical details still easy to find. The constraint: it had to move people who already know the story.

  • Kitsch ban written into the brief: no floating hearts, no script-font confetti.

Act 2 · The work

How he built it

Structure

Storyboard before sitemap

The site was structured as narrative beats, the meeting, the years, the proposal, the day, each beat one scene with one emotional job. Practical information, venue, time, RSVP, was deliberately placed after the story resolves.

  • Paced like film: each scene earns the next, no skipping ahead in the layout.
System

Typography carries the feeling

The art direction trusts type, spacing and photographic rhythm instead of ornament. Big quiet headlines, long breaths of negative space, and the couple's photography treated like film stills.

  • One type family, two voices: display for feeling, small caps for facts.
Craft

Motion timed like memory

Scroll velocity mapped to scene transitions, images that drift at the pace of recollection, a pulse of movement at the proposal beat. The scroll is the film's playhead: guests control the pacing without knowing it.

  • Scroll is the playhead: guests direct the film without controls.
Build

Emotion needs sixty frames a second

Sentiment dies at 20fps. The build keeps every animation on the compositor, streams media in narrative order, and degrades gracefully on older phones. The grandmother's tablet was a named test device.

  • Animations restricted to transform and opacity: emotion stays smooth.

Look closer

Click a number

A goes and stands on it, then explains the decision.

A wedding website opening on the names Zane and Zoë beside a diamond ring.

Act 3 · After

Played to the last scene

A wedding site that guests actually finished: the story reads as a film rather than an information page, and the practical details arrive only after the emotion has done its work.

The site shipped before the invitations went out and did its job: guests arrived at the wedding already moved, and the RSVP form was the easiest part of the story.