Skip to content
← Back to archive
[ EXP-032 / DEMONSTRATION ]

Scroll Camera Glitch.

Trigger short scene tears while the Hero camera moves toward About.

ScrollReactWeb APIsCSSscrollkeyboard
Category
Scroll
Collection
Demonstration study
Stack
React / Web APIs / CSS
Chronology
Undated / exploration
Open playgroundView code ↓
EXP-032 / LIVE PREVIEW
Loading experiment…
REDUCED MOTION / STATIC RESULT

Reduced motion is enabled. This preview displays the stable result without zoom, displacement or scrambling.

01 / Overview

Trigger short scene tears while the Hero camera moves toward About. Adapted from the portfolio implementation listed below, with manual playback for inspection.

Portfolio implementation

  • src/components/hero/HeroAboutSequence.jsx
  • src/styles/hero-about.css

02 / How it works

Three windows in the Hero/About scroll sequence briefly displace thin scene copies and pulse camera contrast. This study maps those windows to a local focusable scrollport at progress .26, .44 and .66, and scales burst duration for inspection.

03 / Implementation

Actual React demo source. Import this component with the archive stylesheet and pass variant (scrollGlitch), values, playing, replay and reduced props. The image demos use /images/resources-bg.png.

Loading implementation…

04 / Parameters

ParameterTypeRangeDefault
DurationNumber0.4–3s0.9s
IntensityNumber0.2–10.6

05 / Usage & accessibility

This is a contained portfolio-derived study, not the full page controller. Play starts one transition; Replay resets it. Pause freezes active timelines. Scroll Camera Glitch requires scrolling inside its focusable preview after Play. Reduced motion shows a stable composition. Frames, timelines and local listeners are released on unmount.

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.

Return to archivePortfolio