The Haunted Garden — Scents From Beyond

• 

• 

• 

• 

• 

Inspiration

We wanted to create a horror experience that feels less like a website and more like a place the visitor has entered.

The Haunted Garden — Scents From Beyond is built around a fictional 1894 estate whose grounds became connected to unexplained supernatural occurrences. Instead of presenting horror through ordinary pages, posters, or menus, we wanted the story to unfold through movement, atmosphere, sound, depth, and discovery.

The idea was to make scrolling itself part of the narrative: the deeper you go, the more the estate reveals.

What it does

The Haunted Garden is an interactive 3D horror archive built around a continuous descent into a mysterious estate.

Users begin at the Iron Threshold and travel through a series of supernatural chapters, encountering six distinct entities:

• The White Widow
• The Crimson Offering
• She Who Waits in Darkness
• The Burning Goddess
• The Forest That Breathes
• The Frozen Silence

Each chapter reveals environmental clues, archival records, sensory details, and supernatural events.

The experience also contains interactive case dossiers, historical records, field transcripts, research sections, and an atmospheric audio layer.

The goal is not simply to tell the visitor what happened.

It is to make them feel like they are uncovering something they were never supposed to find.

How we built it

We built the experience with React, TypeScript, Vite, and Three.js.

Three.js powers the interactive 3D environment, including the dark forest, depth, atmospheric fog, and thousands of moving particles. The camera responds to the user's movement and progressively travels deeper into the environment.

GSAP ScrollTrigger and Lenis were used to create the cinematic scrollytelling system. Instead of treating scrolling as ordinary page navigation, scroll position controls the progression of the narrative and the camera's movement through the estate.

The visual system combines Cinzel for dramatic editorial typography, Inter for readable content, and JetBrains Mono for archival information.

We also created atmospheric sound that can be controlled from the interface, while subtle film-grain, vignette, lighting, and glass effects reinforce the archival horror aesthetic.

Challenges we ran into

The biggest challenge was making the 3D environment and scrolling experience feel like one continuous journey rather than separate website sections.

We had to carefully balance camera movement, scroll speed, animation timing, atmospheric effects, typography, and readability.

Performance was another challenge. A large number of particles and a continuously rendered WebGL environment can easily become heavy, so the experience had to be designed around efficient rendering and controlled visual complexity.

We also had to make the experience work across desktop, tablet, and mobile screens without losing the feeling of depth and immersion.

Accomplishments that we're proud of

We are most proud of turning a conventional scrolling website into a spatial storytelling experience.

The visitor can physically descend through a 3D environment while the narrative changes around them. The forest, atmosphere, chapter progression, archival information, sound, and interactions work together as parts of the same story.

We are also proud of the six distinct supernatural chapters and the interactive classified dossiers, which give the experience a sense of discovery beyond the main scroll journey.

Most importantly, we built the project around a simple idea:

You don't just read the archive. You descend into it.

What we learned

We learned that immersive web design is not about adding as many effects as possible.

The strongest moments came from controlling timing, space, lighting, movement, sound, and negative space.

We also learned how challenging it is to synchronize WebGL rendering with scroll-driven animation while keeping the experience responsive and performant.

Most importantly, we learned to design interaction as part of the story itself. In this project, scrolling isn't just navigation—it is the mechanism through which the visitor discovers the world.

What's next for The Haunted Garden — Scents From Beyond

We want to expand the archive with more supernatural locations, deeper interactive investigations, additional environmental events, and richer spatial sound.

Future versions could also introduce more responsive environmental reactions, allowing the estate to subtly change depending on how the visitor explores it.

The ultimate goal is to turn The Haunted Garden into a larger interactive horror archive where every descent uncovers another part of the story.

Built With

• audio
• css
• gsap
• html
• javascript
• lenis
• lucide
• react
• scrolltrigger
• tailwind
• three.js
• typescript
• vite
• web
• webgl