---
name: scroll-parallax
description: "Create a layered scroll scene while preserving native scrolling. Use for parallax, scroll, depth."
---

# Scroll parallax

Create a layered scroll scene while preserving native scrolling.

## Implementation decisions

1. Map section-local progress to bounded transforms.
2. Batch geometry reads and transform writes in one animation frame.
3. Overscan moving layers so their edges do not become visible.
4. Disable displacement for reduced motion while retaining content order.

## Working source

Read [components/demos.tsx](../webcraft-shared/source/components/demos.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions.

## Verify observable behavior

- Keyboard, touch and trackpad scroll naturally.
- Moving layers never reveal blank edges.
- No repeated forced layout per frame.

## Scope

Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative.

Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/parallax

Version 2.0.0 · Original WEBCRAFT content · MIT