Pinned scenes

Parallax Strata

Layered background that moves at physically plausible rates — far plane 8%, mid 22%, near 45%, foreground grain static — so depth reads as depth, not as a gimmick.

Difficulty: Standard
Credits saved: ~120
Access: Free

Technique

Single scroll listener writes one CSS custom property (--p). Each plane uses translate3d(0, calc(var(--p) * <ratio>), 0) so the browser composites on the GPU with one style recalculation.

Choreography spec

none — continuous scroll link

continuousfar 8%, mid 22%, near 45% of scroll delta
foregroundgrain stays fixed to break the parallax convincingly

Reversibility

Single derived custom property — always in sync.

Reduced motion

All planes static, composed as designed.

parallax-strata.prompt

Build a "parallax-strata" section for my landing page.

TECHNIQUE
Single scroll listener writes one CSS custom property (--p). Each plane uses translate3d(0, calc(var(--p) * <ratio>), 0) so the browser composites on the GPU with one style recalculation.

SPEC
██████████████████████████████████████████████
██████████████████████████████████████
████████████████████████████████████████████████████

RULES
████████████████████████████████████████████
██████████████████████████████████████████████████

Full prompt copies straight to your clipboard.

Parallax strata

Depth that reads as depth.

plane 1 — 8%plane 2 — 22%plane 3 — 45%grain — fixed