🐺 THE WOLF

A story never told.

A scroll-directed film for the web. One continuous scroll moves a camera through ten scenes and four seasons of a lone wolf's year — summer's trust, autumn's letting go, the storm, the frozen lake, the howl under the aurora, the sunrise.

Nothing appears; the camera arrives. Nothing is still; the world breathes.

_{Built for the 3D Websites Hackathon · authored & crafted by Daniel Hashmi}

---

Note

Scroll is time. There are no pages, no clicks to advance — only the scroll. Turn the sound on, press walk to let it play itself, and let the forest notice you.

✦ The Walk

	II · The Green Season The forest gives its summers freely. That is how it teaches you to trust — before it teaches you anything else.
V · Rain Grief is just love with nowhere to walk. So you walk it anyway.
	VI · Storm A storm never asks if you are ready; it arrives — with or without warning.
VIII · The Frozen Lake There is a night in every life when endurance is the only remaining form of hope. Endure it.
	X · Sunrise Spring returns not as a reward, but as proof: nothing that endures winter remains only what it was.

Go gently. The road remembers every step.

_{authored & presented by Daniel Hashmi}

_{music by Steffen Daum}

---

✦ How it works

• Scroll is time. The entire site is one pinned viewport driven by a single scrubbed GSAP master timeline (~23 viewport-heights of scroll). The camera pans, cranes, and dollies through a continuous 1,500vw world.
• The world is layered, generated ink. Every scene is procedurally seeded inline SVG — rolling bezier ridges, tiered spruce silhouettes, tinted mist — arranged in depth layers that lag the camera by their distance (true parallax), inside a CSS-3D rig that tilts toward the cursor.
• One sky. A single global gradient, one starfield, and one moon/sun arc across the film; eight seasonal palettes (lilac night, golden summer, periwinkle rain, icy pink winter, mint-violet aurora, rose-gold sunrise) lerp continuously — weather morphs, never cuts.
• A living world. Trees sway individually, mist drifts, stars twinkle, leaves tumble, rain streaks, snow falls, aurora ribbons breathe, lightning strikes — and the wolf, drawn from real anatomy as pose silhouettes (stand / walk / look back / sit / howl), breathes in every shot.
• Words with weight. An original story told in ten spare quotes, revealed word by word (letter by letter at the end) with GSAP SplitText.
• Season changes arrive under sweeping veils — fog, darkness, light — instead of plain slides.

✦ The score is the scroll

• The theme plays only while the world moves — and runs backwards when you scroll back, built on the Web Audio API for real reverse playback and scroll-anchored position.
• Sound is off until asked for: a click on the sound control unlocks the browser-gated audio context (a real user gesture) and turns it on.
• A walk control plays the film hands-free — a steady, readable glide to the end that any real scroll input hands straight back to you.
• The wolf's howl sounds as you pass under the aurora.

✦ Accessibility & fallback

• prefers-reduced-motion (or no JS at all) gets a fully readable storybook: every scene stacked as a still ink painting in its own season palette, with the complete text.
• Text is real DOM text; palettes hold ≥3:1 contrast for the large quote type.

✦ Tech

Framework	Next.js 15 (App Router, fully static)
Animation	GSAP 3 — ScrollTrigger, SplitText
Scroll	Lenis smooth scroll
Styling	Tailwind CSS v4
Audio	Web Audio API (reverse-capable, scroll-anchored)
Type	Cormorant Garamond · EB Garamond · IBM Plex Mono

✦ Run

npm install
npm run dev    # http://localhost:3000
npm run build  # static production build
npm run start  # start static production build

✦ License

Important

© 2026 BasenAI. All rights reserved. This project is source-available, not open source. It is public for one reason: to share a beautiful project and to let others learn from it.

You may view, study, and clone it to run locally for learning. You may not reuse it in another project, copy or modify it, redistribute it, or use it (or its name and visuals) for promotion — of anyone or anything — without BasenAI's prior written permission.

See LICENSE for the full terms.

_{🐺   The wolf never knew it was a story. It was only ever walking   🐺}

  _{But the author, who made this masterpiece memorable}  

❣️