The Wolf

A story not told.

Comment

Inspiration

The Wolf was built as a scroll-directed film, not a conventional website. The core idea is that the user should feel like they are moving a camera through a single continuous story about a lone wolf's year, with season changes, weather, and emotion all unfolding in one uninterrupted motion.

What it does

The project turns scrolling into time. A pinned Next.js page uses GSAP ScrollTrigger, Lenis, and a master timeline to move a camera across ten scenes and an ending sequence. Each chapter is a self-contained biome with its own palette, weather, terrain, and wolf pose, while a single sky, moon/sun disc, and starfield connect the whole film.

How we built it

We built the experience with Next.js 15 and React 19 using a single Film composition as the runtime orchestrator. Scene data lives in lib/story.ts, camera choreography in lib/scenes.ts, and seasonal colors in lib/palettes.ts. The scenery is rendered as deterministic inline SVG in SceneStage, the celestial layer is separate in Celestial, and the wolf is drawn as custom vector paths in WolfFigure. Audio is handled by a scroll-anchored Web Audio controller in lib/scroll-audio.ts, so the theme can move forward or backward with the user's scroll direction.

Challenges we ran into

The hardest parts were keeping the world deterministic between server and client, making the motion feel cinematic without creating a laggy scroll experience, and preserving readability as the scenes shift across very different palettes. And handling the audio, matching it with the scene was challenging. We had also handle accessibility and fallback behavior carefully so reduced-motion users still get the full story as a stacked, readable storybook.

Accomplishments that we're proud of

We're proud that the project feels authored rather than assembled. The wolf poses were traced and refined to stay consistent across shots, the scenery is procedural but still cohesive, and the transitions avoid hard cuts by using fog, darkness, and light as scene veils. The scroll-synced audio, parallax depth, and text reveal system all work together as one coherent film language.

What we learned

We learned that strong constraints produce stronger experiences. Limiting the project to one camera, one sky, one wolf, and one continuous scroll forced every visual and interaction choice to justify itself, which made the final result more intentional and easier to extend.

What's next for The Wolf

Next, we would keep polishing the film grammar: more scene variation, richer environmental life, more elements, and stories, stronger audio design with more sound effect like the wolf howl, and additional narrative beats without breaking the one-scroll structure, but may add multi direction scroll flow instead of only one direction (moving from left to right, current behavior). We would also continue tightening performance, accessibility, and mobile interaction so the experience stays smooth across more devices.

Built With

Share this project:

Updates

Submission history