Depth module library

Level 1 CSS depth. Five drop-in modules, no library, and not one line of JavaScript added to the page. Everything below is assembled straight from the module files by build-preview.mjs, so what you are looking at is the library itself and not a mock-up of it.

How to test this page. Turn on Reduce Motion and reload: every module goes still. Open it on a phone: nothing tilts and nothing can stick. Switch JavaScript off: everything below is still here and still readable, because only one module reacts to script at all and its resting state is visible.

02 · parallax-layers

Three layers at real z depths. Scroll drift only where the browser can run it on the compositor; everywhere else the static depth remains. No scroll handler exists.

Gresham and east Portland

Placeholder Roofing Co

Every fact, every number and every call button lives in this layer, so the hero is complete with no motion and no 3D at all.

Call (503) 555-0000

01 · tilt-card

Point at an edge or a corner and the card leans toward you. Point at the middle and it lies flat, which is both physically right and what keeps the text selectable and the phone number clickable.

Same day

Water heater out

Most are back on hot water the same afternoon. We carry the common sizes on the truck.

(503) 555-0000

Emergency

Drain backing up

Camera down the line first, so you find out what it is before anyone quotes a repair.

(503) 555-0000

03 · depth-stack

Overlapping cards with real z separation. Every shadow is calculated from one shared light direction, so no card can be lit differently from its neighbour. Narrow the window and the stack unfolds into a plain list.

  1. Step one

    We find the lid

    Locating is included. If it is buried we dig it, and we tell you the price before anything comes off the truck.

  2. Step two

    We pump it out

    Solids and liquid both. A tank that only had the water taken off it fills back up in a month.

  3. Step three

    You get the report

    Baffles, inlet, outlet and drain field, in writing, with the date you are due next.

04 · perspective-reveal

Hinges up from its bottom edge on entry, driven by the motion driver the build already ships. This module adds no script of its own. With JavaScript off it never hides in the first place.

What people wrote afterward

This section hinges up from its bottom edge

With JavaScript switched off it never hides in the first place, so there is nothing to reveal and nothing to go wrong. That is the fallback, and it is the default rather than a special case.

05 · motif-depth

The trade motif cut into the surface rather than drawn on it. Shadow on the upper-left lip, highlight on the lower-right, which is the inversion that reads as carved. Six trades shipped.

Plumbing
Electrical
Roofing
Heating and air
Salon and grooming
Hauling