Identity Artwork Glitch Swap.

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.

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

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.