Atropos 3D Parallax Card — Layered Depth Hover Card

A tilt card that only rotates is a flat picture on a hinge. The thing that makes a 3D card feel like an object with depth is parallax between its layers — the badge moving further than the title, the background moving the opposite way — because differential motion is the cue the visual system actually uses to infer depth.

Atropos is a 4kb library built for exactly this, and it is a meaningfully different tool from the many tilt scripts that only apply a rotation to one element.

The required nesting, and why each level exists

Atropos will not work against arbitrary markup. It needs four nested elements, and each one owns a single transform so they do not fight:

.atropos > .atropos-scale > .atropos-rotate > .atropos-inner

- .atropos is the root Atropos binds to and where the perspective is established. - .atropos-scale handles the lift — the card growing slightly as it becomes active. - .atropos-rotate handles rotateX and rotateY from pointer position. - .atropos-inner holds your content and is where the parallax children live.

Combining scale and rotation onto one element would make them multiply into skew as they animate. Splitting them across levels keeps each transform independent, which is why the nesting is mandatory rather than stylistic.

data-atropos-offset is the whole design language

Every child that should move independently declares its depth as a plain number:

<span class="a3d-badge" data-atropos-offset="14">

The number is a translation multiplier applied along the card's Z-plane as it rotates. The signs and magnitudes here are chosen as a deliberate depth stack:

- `-6` — the background gradient. Negative offsets move *against* the pointer, so the backdrop slides opposite to the foreground. This is the single most effective trick in the file: opposing motion produces far more perceived depth than everything drifting the same way. - `-3` — the glow, sitting just above the background. - `2` / `4` — the kicker pill and the copy, barely floating. - `9` — the product orb, clearly forward. - `14` — the corner badge, closest to the viewer and moving most.

Read top to bottom, those numbers *are* the card's z-order. Adjusting depth is editing one attribute — no CSS, no JavaScript.

Two things are easy to get wrong. Offsets need a positioned ancestor and position: relative on the child to layer predictably, which is why nearly every element in the CSS carries it. And past roughly ±20 the illusion breaks: layers slide so far they visibly detach from the card edges.

Configuration that matters

activeOffset: 42 sets how far the card pushes toward the viewer while active. Turned up, the whole card reads as a zoom and the per-layer parallax gets lost inside it — the layer offsets should be doing the work, not the global scale.

rotateXMax and rotateYMax at 14 degrees are deliberately conservative. Tilt scripts commonly default to 25 or more, which looks impressive on a screenshot and makes text along the far edge genuinely hard to read at a glance. duration: 320 governs the ease back to rest, so releasing the pointer settles rather than snapping.

highlight: true adds Atropos's glare layer — a soft radial sheen that tracks the pointer, which is what sells the surface as glass rather than paper. shadow with shadowScale: 1.04 grows the drop shadow slightly as the card lifts, grounding it.

Free on mobile

Atropos falls back to device orientation on touch devices with no extra code. The card tilts as the phone tilts. That is genuinely differentiating — most tilt implementations are pointer-only and are simply inert on the devices where most traffic arrives.

Reduced motion

Continuous pointer-tracked 3D motion is exactly what prefers-reduced-motion exists for, and gyroscope tilt can be actively unpleasant for people with vestibular sensitivity. The snippet queries the media list and calls instance.destroy() when reduction is requested, which restores the markup to a normal static card — the content is untouched, only the motion goes. The change listener means toggling the OS setting takes effect without a reload.

Reusing it

Keep the four-level nesting, then compose your own content inside .atropos-inner and assign offsets from a rough depth plan: backgrounds negative, body content low positive, the one element you want to pop highest. Compare it with a 3D card tilt for the single-layer version, or a glare card when you want the sheen without the parallax.