Skip to content
tileio

12 layers · 5 free

Three.js scenes for a hero section

These twelve are self-contained scenes on three.js r186, loaded through an import map, with every control in one CONFIG object, so the scene you tune in the studio is the scene that ships. Each one is built to sit behind a headline.

Every scene pauses when its tab is hidden. Point and line scenes such as Drift Field, Warp Tunnel and Ridge Lines are the lightest to render; Gem Transmission and Liquid Metal lean on physically based materials, so test them on a mid-range phone and keep a still frame ready.

The 12 layers, in order

  1. 24,000 points in a slow current that lag behind the camera and glow in two colours: the classic particle hero.

  2. Silk ribbons tracing a 3D flow field, each regrowing from its head and shaded along its length.

  3. N° 0645 · sampled-text point morph

    Points that settle into a short phrase, loosen into dust and form the next while the pointer parts them. The headline can be the scene.

  4. Stars stretched into lines by their speed in a twisting tunnel. Pulls the eye forward, for launches and anything about speed.

  5. Four Gerstner waves under a low sun, foam on the crests and fog swallowing the horizon.

  6. Wireframe terrain rolling out of fog toward a glowing horizon, the camera banking with the pointer.

  7. N° 0647 · hidden-line city with street-grid drone path

    A drone flight through a hidden-line city with a scan plane sweeping up the towers. Suits mapping, infrastructure and data.

  8. A chrome blob pushed by layered noise, studio reflections sliding over it, dented by the pointer.

  9. A word extruded into solid letters that lean and orbit the camera, each on its own rhythm, lit by two coloured lights.

  10. N° 0720 · 2D ray-traced dispersion beams

    A beam of white light crossing a hazy room and fanning into a spectrum through a prism the pointer turns.

  11. Low orbit at dawn over a procedural planet: city lights on the night side, the sun breaking over the limb.

  12. A cut gem turning in a studio with real refraction and dispersion. The heaviest scene here; worth it on a product page.

Browse the full catalogue: 3D Scenes

Related collections

All collections