The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="parallax" id="parallax">
  <div class="scene">
    <span class="layer orb orb-a" data-depth="20"></span>
    <span class="layer orb orb-b" data-depth="45"></span>
    <div class="layer ring" data-depth="70"></div>
    <div class="layer copy" data-depth="110">
      <h1>Depth you can feel</h1>
      <p>Move your mouse across the scene.</p>
    </div>
    <span class="layer chip chip-a" data-depth="170">React</span>
    <span class="layer chip chip-b" data-depth="210">Three.js</span>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same 3d scene, then ask it to adapt the colours, text or framework to your project.

Create a mouse-driven 3D parallax hero using HTML, CSS and a little vanilla JavaScript (no libraries).

Structure:
- A full-viewport container with perspective: 1200px and a near-black background (#060816).
- A "scene" element (max 720px wide, about 420px tall) with transform-style: preserve-3d.
- Six absolutely positioned layers inside it, each with a data-depth attribute: two large blurred colour orbs (indigo #2506ad at depth 20, orange #ff7b00 at depth 45), a thin white circular ring (depth 70), the centred heading "Depth you can feel" with a subtitle (depth 110), and two white rounded "chips" labelled React (depth 170) and Three.js (depth 210).

Behaviour (JavaScript):
- On pointermove over the container, compute x and y from -0.5 to 0.5 relative to its centre.
- Rotate the scene: rotateY(x * 14deg) rotateX(-y * 14deg).
- For each layer, set transform to translate3d(x * depth * -0.5px, y * depth * -0.5px, depth px). Layers with a larger depth sit closer to the viewer and move more.
- On pointerleave, return everything to the centre. Use a 0.2s ease-out transition on transforms.
- If the user prefers reduced motion, do not attach the listeners.

Return a single HTML file with <style> and <script> tags.

How to build it, step by step

1. 1

   Give the container perspective and the scene transform-style: preserve-3d so child layers can sit at different depths.

2. 2

   Assign each layer a depth number with a data attribute. Use it twice: as the translateZ distance and as the multiplier for how far the layer shifts.

3. 3

   Convert the pointer position to a range of -0.5 to 0.5 so the centre of the scene means 'no movement'.

4. 4

   Shift each layer opposite to the pointer, scaled by its depth. Near layers move a lot, far layers barely move: that difference is parallax.

5. 5

   Tilt the whole scene a few degrees towards the pointer to strengthen the 3D impression.

6. 6

   Reset on pointerleave and skip the effect entirely for reduced-motion users.

Customisation tips

• On phones, drive the same update function from the deviceorientation event instead of the pointer.
• Keep the tilt small (10-15 degrees). Large angles make text hard to read.
• Replace the chips with product screenshots to make a layered product hero.

More 3d scenes