SCROLLHAUS / 3D TEMPLATES

Interactive 3D website templates that answer the cursor

50 original 3D website templates built with three.js and WebGL. Every one reacts to the mouse in real time: glass that refracts a headline, particles that part around the pointer, cloth that you can push, lava that melts into the cursor. Open any template live, then paste a single snippet into your page. There is no build step, no 3D modelling and no Spline export to manage.

What makes these 3D templates different

Most 3D web design starts with a scene file, a viewer and a long wait for assets to load. These templates are code-first instead: each one is a single <div> and one module script that loads three.js from a CDN, so the interactive 3D experience is ready in seconds and stays sharp at any size. The motion is driven by the cursor, which turns a hero section from something people look at into something they play with.

They are designed for real landing pages, not just demos. Each template pauses while it is off screen, caps its pixel ratio on high-density displays, and switches to a gentle automatic motion on touch devices so phones still see it move.

Browse the 3D templates by style

Glass & chrome

• Glass Lens Headline: A clear glass ring floats over a bold headline and bends the type wherever the cursor drags it.
• Neon Tube: A glowing neon tube on a brick wall that bends toward the cursor and flickers on click.
• Plasma Orb: A plasma ball whose crackling bolts reach for the cursor wherever it touches the glass.
• Prism Light Split: The cursor is a light source: its beam hits a glass prism and splits into a rainbow fan.
• Layered Waves: Glossy colour ribbons rolling like waves; the cursor lifts the ones beneath it and a click sends a swell.
• Shattering Crystal: An iridescent crystal ball whose facets lift away and spin wherever the cursor touches, then knit back together.
• Liquid Chrome Blob: An oil-slick chrome blob that keeps flowing and stretches its surface out to reach for the cursor.
• Glass Cube Stack: A grid of tinted glass cubes over soft colour that rise and turn toward the cursor and jump on click.
• Iridescent Ribbon Trail: A twisting iridescent ribbon that follows the cursor and swings behind it like silk.

Playful

• Watching Eyes: Five glossy eyeballs that follow the cursor anywhere on the page, each with its own lag, and blink on their own.
• Gold Coin Stacks: Stacks of gold coins rising like a chart; hovering tosses the top coins and a click rains them back down.
• Orbiting Planets: A tiny solar system that tilts with the cursor; hovering a planet stops it to show its name.
• Voxel Terrain: A blocky island where the cursor raises hills block by block, from sand and grass up to snowy peaks.
• Live 3D Bar Chart: A 3D bar chart that grows into place, highlights a month on hover and regrows with fresh data on click.
• Puzzle Cube: A glossy puzzle cube whose rows turn as the cursor sweeps over them; a click scrambles it.
• Sliced Sphere: A sphere built from stacked slices that slide toward the cursor and settle back into shape.
• Magnetic 3D Icons: Glossy inflated icons that are drawn toward the cursor like magnets and spin when you hover them.
• Cursor Shape Morph: One soft toon shape that morphs from sphere to cube to bloom to pill as the cursor moves across.
• RGB Keycaps: A mechanical keyboard whose keys press down under the cursor and light a rainbow underglow.

Type & image

• Curved Portrait Carousel: A ring of curved portrait cards; the cursor sets the spin, hovering a card lifts it and dims the rest.
• Holographic Tilt Card: A collectible card that tilts toward the cursor on a spring, with rainbow foil, sparkles and a moving glare.
• Hover-Pop 3D Letters: Chunky glossy letters that jump, spin and squash when you hover them, and lean toward the cursor.
• Flashlight Reveal: A dark gallery lit only by a flashlight that follows the cursor, revealing sculptures and a hidden message.
• Image Kaleidoscope: A photo folded into mirrored wedges that spin with sideways sweeps and zoom as the cursor moves.
• Flip-Dot Display: A wall of flip-dots spelling a message; the cursor flips dots as it passes and a click wipes in new text.
• Lens Reveal Headline: A magnifying lens follows the cursor across giant type and reveals the photograph hidden behind it.
• Card Fan Deck: A deck of photo cards that fans open as the cursor approaches, leans toward it and shuffles on click.

Particles & shaders

• Lava Metaballs: Raymarched lava blobs that drift, merge and split; the cursor is a blob too and melts into the others.
• Connection Globe: A dotted globe that fires glowing arcs from wherever the cursor lands, like data travelling around the world.
• DNA Helix Unzip: A rotating double helix whose base pairs unzip wherever the cursor passes along it.
• Hologram Projection: A flickering cyan hologram above a projector that turns with the cursor and glitches when touched.
• Firefly Swarm: Hundreds of blinking fireflies that follow the cursor over tall grass and scatter on click.
• Particle Sphere Repel: Nine thousand glowing particles on a sphere that part around the cursor and burst outward on click.
• Hyperspace Tunnel: A neon ring tunnel with light streaks that bends toward the cursor; a click kicks it into warp speed.
• Ink Smoke Trail: Colour-shifting ink that pours from the cursor and curls away like smoke in a slow current.
• Gravity Galaxy: A spiral galaxy of 26,000 stars; the cursor is a gravity well that drags and swirls them as it passes.
• Particle Portrait: A photo rebuilt from thousands of 3D particles that part around the cursor and scatter on click.
• Neon Ripple Grid: A neon wireframe floor running a real wave simulation: the cursor leaves a wake and clicks drop stones.
• Radar Scope: A tilting radar with a sweeping beam and live contacts; the cursor aims a reticle that locks onto blips.

Physics

• Cloth Banner: A printed fabric banner hanging from a rod, simulated as real cloth that the cursor presses and drags.
• Pop the Bubbles: Iridescent soap bubbles drift upward; the air around the cursor nudges them and a touch pops them into droplets.
• Pool Ripples: A sunlit pool seen from above: ripples follow the cursor and bend the tiled floor, with caustic light dancing on it.
• Grass Meadow: Sixteen thousand blades of grass that sway in the wind and part around the cursor as it moves through.
• Domino Wave: A field of colourful dominoes that topple outward from the cursor and stand themselves back up.
• Snow Globe: A tiny winter cabin in a glass globe; quick cursor movements shake it and the snow swirls back into the air.
• Newton’s Cradle: A chrome Newton’s cradle that passes motion through the row; brush an end ball or drag one back and let go.
• Jelly Cube: A glossy candy cube that ripples like jelly wherever the cursor pokes it and squashes on click.
• Cursor Push Balls: A pool of glossy balls with real physics that the cursor shoves around; a click pops them into the air.
• Swinging Pendant Lights: Warm pendant lamps that swing on their cords when the cursor brushes past, lighting the wall behind.
• Paper Bird Flock: A flock of folded paper birds that flees the cursor like a hawk, or follows it after a click.

How to add a 3D template to your website

1. Open a template and try it live with your cursor.
2. Copy the snippet: one element and one script.
3. Paste it into a Code or Custom HTML block in Webflow, Framer, WordPress, GoHighLevel, Shopify or plain HTML.
4. Change the colours, words or images in the settings block at the top of the script.

Spline-style 3D, without the Spline file

Spline is a great tool for designing 3D scenes visually. These templates aim for the same polished, interactive look, but ship as plain code you own: no viewer runtime, no scene to host and nothing to re-export when you want a different colour. If you already design in Spline, they work well alongside it for the cursor-driven moments that are easier to express in code.

Performance and accessibility

Interactive 3D should never cost you the page. Keep one template above the fold, give it a fixed height, and keep your headline and call to action as real HTML beside it so they stay readable and indexable. The templates render only while visible and use GPU shaders for the heavy lifting, which keeps scrolling smooth on mid-range laptops.

Frequently asked questions

Are these 3D website templates free?

3 of them are free to copy (Watching Eyes, Hover-Pop 3D Letters, Pop the Bubbles). Every template can be opened and tried live; a Scrollhaus plan unlocks the code for the rest.

Do I need to know three.js or WebGL?

No. Paste the snippet and edit the clearly labelled settings. Developers can read the code: it is short, commented and uses standard three.js.

Do the cursor effects work on phones?

Yes. On touch screens each template drives itself with a slow automatic motion, and taps still trigger the click interactions.

Looking for full website templates? Browse the 131 web templates · Read the guide to interactive 3D website templates