Nocturne — Living Interface Particle Template
One buffer, four sculpted point clouds, cross-faded on the GPU as you scroll.
A resellable website template whose only imagery is light. Up to 92,000 GPU points hold four sculpted forms — a hollow corona, a barred spiral, a folded cortex and a calm interference lattice — and cross-fade between them on a single buffer as sections scroll past. The forms are generated procedurally from a seeded RNG at boot, so there are no model files and every reload sculpts the identical shape. The morph is staggered per particle, so the field flows rather than snaps, and blooms outward at the halfway point before collapsing into the new silhouette; interrupt it mid-morph and the current interpolated state is frozen into the source buffer first, so scrolling never causes a jump. The field repels from the pointer in world space, smears into a comet under scroll velocity, and its colour is keyed to world height so amber stays on top and violet below however the form rotates. Zero build: static HTML, CSS and ES modules, with Three.js vendored. Drop the folder on any host and it runs.
How to run this
Works the same on Windows, macOS and Linux. No prior setup beyond Node.js, and nothing to configure — the pack runs as-is.
- Built with
- Static HTML/CSS/JS
- Requires
- Node.js 18 or newer
- Opens at
- http://localhost:3000
Note — Needs a local server, but not for the usual reason: the field is an ES module loaded through an import map, and browsers refuse modules on file:// URLs. Opening index.html directly shows the page with no particles. Any static server works — `npx serve .`, or `python3 -m http.server 8000` as the README suggests. There is no build step and nothing to install.
✦ Or let an AI agent set it up for you
Already using Claude Code, Antigravity, Cursor or Windsurf? Unzip the pack, open the folder as a project, and just ask:
Install the dependencies and run this project, then give me the URL
It reads the README included in the pack, runs the right commands for this project, and sorts out anything that trips along the way. You still need Node.js installed (step 1 below) — everything after that it can handle.
Or run it yourself
- 1
Install Node.js, if you don't have it
Download the LTS build from nodejs.org and run the installer — on Windows and Mac it handles everything. Mac users with Homebrew can run
brew install nodeinstead.To check it worked, run
node --version. It should print a number like v22.11.0. - 2
Unzip the pack, then open a terminal inside the folder
Windows: open the unzipped folder in File Explorer, click the address bar, type
powershelland press Enter.Mac: press Cmd+Space, type terminal, press Enter. Then type
cd(with a trailing space) and drag the unzipped folder onto the terminal window — it fills in the path for you. Press Enter. - 3
Start it
Run
npx serve .— npx downloads the little server on demand, so there is nothing to install first.Then open http://localhost:3000 in your browser. Leave the terminal open while you use it — closing it stops the site. Press Ctrl+C in the terminal to stop.
+ − If something goes wrong
- “npm is not recognised” / “command not found: npm”
- Node.js isn’t installed, or the terminal was open before you installed it. Close the terminal, open a new one, and try again.
- “Port 3000 is already in use”
- Something else is running there — often a previous copy of this site. Close the other terminal, or stop it with Ctrl+C.
- The page loads but images or video are missing
- Make sure you ran the command from inside the unzipped Nocturne — Living Interface Particle Template folder itself, not the folder containing it.
Still stuck? Email us and we'll get it running with you.
More like this
Browse the store →
PremiumAURELIAN Calibre 01 — Skeleton Automatic
Time, Engineered. Pinned storytelling & canvas frame scrubbing
PremiumAETHERIS Residences — Skyline Luxury
Not Just A Home. A New Skyline.
PremiumBR Constructions — Ground to Grandeur
Scroll builds the mall, frame by frame
