# A haunted house that lives inside a Webflow page

> A 3D haunted house produced with ImmersivStudio: atmospheric interiors and eerie lighting in a WebGL scene embedded in an editorial Webflow shell.

Canonical page: https://andersonmancini.dev/blog/haunted-house-webflow-3d

Published: 2026-08-27 · 1 min read · Tags: three.js, webflow, webgl, atmosphere, launch

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](https://andersonmancini.dev/images/haunted_house.webp)

## 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](https://andersonmancini.dev/videos/three-js-haunted-house-using-react-three-fiber.md), a [project video](https://andersonmancini.dev/videos/haunted-house-react-three-fiber-project.md) and an [autofocus demo](https://andersonmancini.dev/videos/autofocus-haunted-house-demo.md).

## Try it

The house is live at [hauntedhouse.webflow.io](https://hauntedhouse.webflow.io/), and the details are on the [project page](https://andersonmancini.dev/projects/haunted-house.md).

## Related projects

- [Haunted House](https://andersonmancini.dev/projects/haunted-house.md) — 3D + Webflow with ImmersivStudio