A haunted house that lives inside a Webflow page

· 1 min read · three.js, webflow, webgl, atmosphere, launch

A dark haunted house interior with eerie light, a 3D scene embedded in a Webflow page

A haunted house is a good excuse to play with mood: shaders, light and pacing. This one was produced with ImmersivStudio, and its main idea is where the 3D lives: inside a Webflow page.

The haunted house

One page, two tools #

The WebGL scene sits inside an editorial Webflow shell, so story, layout and immersive visuals share the same page, and they do not look like two products stitched together.

What it does #

  • atmospheric interiors and eerie lighting,
  • a narrative you walk through in the browser,
  • scroll-driven pacing, which turns a simple house tour into something unsettling.

The React Three Fiber videos #

Later I rebuilt the idea in React Three Fiber, and there are videos of it: the first version, a project video and an autofocus demo.

Try it #

The house is live at hauntedhouse.webflow.io, and the details are on the project page.

Related projects