Guides

The documentation tells you what every control does. These guides are the other half: what to reach for, in what order, for the things people actually build with the studio. Each one is self-contained and ends with a working artefact you can look at.

• How the effect works

  The equal-apparent-size trick, why a cube costs 16 bytes instead of a 64-byte matrix, and how a near-million-cube grid still draws in one call. Read this to understand what you are tuning.

• Build a landing page from one image

  The --theme flow end to end: pick a voice, write a brief, steer the palette without breaking its contrast guarantee, and verify the page with probe screenshots before you ship it.

• Embed the effect in an existing site

  --emit js and what the host page owes the module: a layered wrapper, real scroll height, and — if you want to get fancy — content paced against the --assembly custom property.

• Choosing images that forge well

  What survives being scattered into cubes and what doesn't: contrast, silhouette, resolution, transparent backgrounds, and when to trade the full-image faces for the chunky flat-colour mosaic.

• Driving page animation from scroll position

  Riding the camera's clock instead of inventing a second timeline: --assembly in pure CSS, the pixelScroll event in JavaScript, and an honest comparison with scroll-driven CSS animations and IntersectionObserver.

• Tuning a forged page for real devices

  What --rows actually costs, why doubling it roughly quadruples the cube count, what --optimize does to your payload, and how to measure a frame instead of guessing at one.

• Shipping a scroll effect that doesn't hurt anyone

  Vestibular safety and prefers-reduced-motion as a floor the page cannot override, the motion toggle worth shipping anyway, focus order around a decorative canvas, and the contrast the palette guarantees.

• Putting a forged page on the internet

  One self-contained file and one external request — and the specific ways that goes wrong: a host serving .mjs as text, a strict CSP that blocks the three.js import, and what to check before you ship.

Where to start

If you have never used the studio, skip the reading and open the Studio with any photograph you have to hand — the live preview teaches the controls faster than prose can. Come back here when you want the effect inside a real page, or when a particular image is not landing the way you expected.

If you are automating — a build pipeline, a batch of pages, an AI agent — start with the landing page guide; it is written around the CLI, and everything the browser UI does, the CLI does headlessly.

Questions these guides don't answer

Licensing, browser support, offline use, and the other short answers live on the FAQ. The full control reference stays in the documentation, and the three voices are shown, not described, on the examples page.