Parallax scene

What's included

A set of eleven plates spread through a single three-dimensional space, in two files plus its artwork: a stylesheet, a script, and eight SVGs. No dependencies, no build step, no external requests — you copy the folder into a project and it works.

No plate is animated on its own. They're placed at different depths, the whole space tilts by ten degrees at most towards the pointer, and the perspective does the rest: a plate at depth z is shown at 1 / (1 − z / perspective) of its size and moves by as much. So a single line explains every speed in the scene.

The artwork is original SVG, made for this component. They're text files a few kilobytes long: you open them, change a colour, swap a ridge. The geometry doesn't move — depth and drawing are separate.

Features

• One variable for everything — --pxs-scene-width rescales the drawing et the effect. The depths are ratios of that length, not pixels: so the composition is identical at 340 and at 1900 pixels wide.
• Works without JavaScript — the set is composed, the light and the scrim are there. Only the tilt is missing, the one thing the script brings.
• The script writes only two numbers — the pointer position, damped by a spring, between −1 and 1. The angles, the colours and the durations stay CSS variables: you set them without opening the JavaScript.
• Your choice of frame of reference — data-tracking="viewport" for a full-page scene, "element" as soon as there are several on the same page.
• A spring you can tune live — data-stiffness, data-damping et data-mass are read back when they change.
• Reduced motion respected — under prefers-reduced-motion, no more tilt, no more fade, and the delays fall to zero. What is an image rather than a movement — the depth, the scrim, the shafts of light — stays.
• The heading is text — not an image. It can be read, selected, translated, and it weighs nothing.

Dropping it into a page

Two files to load, then one plate per layer:

<link rel="stylesheet" href="parallax-scene.css">
<script src="parallax-scene.js" defer></script>
<div class="parallax-scene" data-tracking="viewport">
  <div class="parallax-scene__probe" aria-hidden="true"></div>
  <div class="parallax-scene__stage">
    <div class="parallax-scene__plate parallax-scene__plate--sky">
      <img src="art/sky.svg" alt="" width="1369" height="1000">
      <p class="parallax-scene__headline">Horizons</p>
    </div>
    <div class="parallax-scene__plate parallax-scene__plate--clouds">
      <img src="art/clouds.svg" alt="" width="1369" height="1000">
    </div>
    <!-- … eight more plates, back to front … -->
    <div
      class="parallax-scene__plate parallax-scene__plate--vignette"
    ></div>
  </div>
</div>

The DOM order is the depth order, back to front: that's the only thing to respect if you add a plate. The component gives itself a height; give it height: 100svh for a full-page banner and it will fill the box.

What you should know

• The scene overflows its box, on purpose. It covers the box like an image set to cover: the sky plate is shown at 131% of the scene. The overflow is clipped and doesn't scroll — measured, the page never overflows by a pixel from 320 to 1600 — but a scrollWidth read on the component itself will return more than its width, and that's normal.
• Touch is deliberately left out. A finger is the pointer: the scene would jump to wherever it lands and follow it, which reads as a bug rather than as depth. Mouse and stylus only.
• The effect is decorative. It exposes no setting, so the component adds nothing to the keyboard traversal — there's nothing to operate. The plates are images with an emptyalt: they aren't in the accessibility tree. Only the heading is, because it's real text.
• No inline styles, no inline scripts. The component honours the site's strict security policy, and never uses innerHTML. The script writes its two numbers through the CSSOM, which gets through where a <style> would be refused.
• The geometry comes from elsewhere, the artwork doesn't. The depths, the perspective, the angles and the spring curve were measured on a commercial Framer component — probed and cross-checked against the constants in its own code. The artwork, the CSS and the JavaScript are original: nothing was taken from its implementation or from its illustrations.