Skip to content
← Back to experiment
[ EXP-033 / PLAYGROUND MODE ]

Identity Artwork Glitch Swap / Playground

Hide the Hero-to-About artwork replacement beneath a brief slice tear.

TransitionsReactWeb APIsCSSclick
EXP-033 / LIVE PREVIEW
Portfolio scene artworkArrival scene artwork
STATIC / REDUCED MOTION
REDUCED MOTION / STATIC RESULT

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

01 / Overview

Hide the Hero-to-About artwork replacement beneath a brief slice tear. 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

Swap the underlying Hero and About artwork at the midpoint of three displaced bands. A striped mask briefly covers the replacement. This extracts the identity-swap slices and mask from the reversible Hero/About timeline into one manual transition.

03 / Implementation

Actual React demo source. Import this component with the archive stylesheet and pass variant (artworkSwap), 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