Skip to content
tileio

Menu

12 layers · 1 free

Three.js backgrounds: real-time 3D behind your content

A three.js background sits behind the page and moves on its own: a scene with depth and light rather than a flat loop. These twelve are built to be backdrops. They read well behind a headline and run a steady loop without needing the visitor to do anything.

They span landscapes (dunes, a meadow with fireflies, a desert highway, a low-poly island through a day), light (an aurora, laser fans in haze, lanterns over a lake), and abstract fields (a wireframe tunnel, hexagonal columns on a wave, merging metaballs, a voxel city growing tower by tower).

Every scene runs on three.js r186. Tune the swatches and sliders, then copy a prompt for single HTML or a Next.js, React, Vue or Astro component that imports three from npm. Laser Show is free.

The 12 layers, in order

  1. Folded curtains of light over a starfield, swaying on slow noise, green at the hem.

  2. An endless tunnel of glowing wireframe rings and rails rushing toward you on a slow curve.

  3. Rolling dunes shaped in the vertex shader, one face gold under a low sun.

  4. Thousands of hexagonal prisms rising and falling on a travelling wave, tinted by height.

  5. Liquid blobs that drift, merge and split in a marching-cubes field under two lights.

  6. A meadow of instanced grass blades bending in the wind, fireflies drifting above.

  7. A planet with satellites on tilted orbits, each dragging a fading trail of light.

  8. Lantern Night: three.js 3D background preview

    Lantern Night

    PRO

    N° 0658 · instanced emissive lanterns with mirrored reflections and bloom

    Hundreds of paper sky lanterns rising over a still lake at dusk, mirrored in the water.

  9. Laser Show: three.js 3D background preview

    Laser Show

    FREE

    N° 0648 · volumetric beam fans in haze

    Laser fans thrown over a smoky hall: a waving sheet of light and spinning beams.

  10. A desert highway running forever into a dusk sky, bending and rolling over hills.

  11. A faceted island on flat water under a sun that sweeps through a full day.

  12. A city of blocks that grows out of the ground tower by tower, windows flickering on.

Browse the full catalogue: 3D Scenes

Questions

How do I add a three.js background to a website?

Put a fixed or absolutely positioned canvas behind your content, run the scene's render loop there and keep your content in a layer above it. The prompt asks your AI tool for exactly that, plus a still frame for reduced motion.

Will a three.js background slow my site down?

It costs GPU time, so the scenes cap the device pixel ratio and settle into a still frame under reduced motion. Use one per page, and prefer a CSS or canvas background where you only need a texture.

Can I use these in React or Next.js?

Yes. Pick Next.js or React and the prompt asks for a client component that imports three from npm, mounts the canvas in a ref and disposes the renderer on unmount.

Are they free?

Laser Show is free. Free layers are for personal projects; commercial use needs Pro or Lifetime.

Related collections

All collections