Scroll / React + Web APIs
Camera Zoom Navigation
Move between spatial anchors within one continuous environment.
Open experiment[ EXP-028 / PLAYGROUND MODE ]
Horizontal Journey / Playground
Translate a horizontal sequence through vertical scrolling.
EXP-028 / LIVE PREVIEW
01DISCOVER
02EXPLORE
03CREATE
REDUCED MOTION / STATIC RESULT
Reduced motion is enabled. This preview displays the stable result without zoom, displacement or scrambling.
01 / Overview
Translate a horizontal sequence through vertical scrolling. An independent interaction study built for the Resources archive.
02 / How it works
Map normalized vertical scroll to the horizontal track overflow inside the preview.
03 / Implementation
Actual React demo source. Import this component with the archive stylesheet and pass variant (horizontalJourney), values, playing, replay and reduced props. The image demos use /images/resources-bg.png.
Loading implementation…
04 / Parameters
| Parameter | Type | Range | Default |
|---|---|---|---|
| Strength | Number | 0.2–1 | 1 |
05 / Usage & accessibility
Enable playback, then scroll the focusable preview with a wheel, touch or keyboard. Motion follows the local scroll position. Reduced motion shows a static composition.
Requires a current browser with Web Animations, requestAnimationFrame and Pointer Events. Background imagery is decorative; essential labels remain in the document. The magnetic target supports tap and keyboard activation.
Related experiments.
Scroll / React + Web APIs
Depth Parallax
Move foreground and background layers at different speeds.
Open experimentScroll / React + Web APIs
Reading Progress
Fill a progress rail as the preview scrolls.
Open experiment