Transitions / React + Web APIs
Glitch Reveal
Displace horizontal scene slices into a controlled architectural reveal.
Open experiment[ EXP-005 / PLAYGROUND MODE ]
Iris Reveal / Playground
Open a circular aperture from the center of the scene.
EXP-005 / LIVE PREVIEW
STATIC / REDUCED MOTIONREDUCED MOTION / STATIC RESULT
Reduced motion is enabled. This preview displays the stable result without zoom, displacement or scrambling.
01 / Overview
Open a circular aperture from the center of the scene. An independent interaction study built for the Resources archive.
02 / How it works
Animate a circular clip-path from zero to a radius that covers the stage.
03 / Implementation
Actual React demo source. Import this component with the archive stylesheet and pass variant (irisReveal), values, playing, replay and reduced props. The image demos use /images/resources-bg.png.
Loading implementation…
04 / Parameters
| Parameter | Type | Range | Default |
|---|---|---|---|
| Duration | Number | 0.4–3s | 1.2s |
05 / Usage & accessibility
Start manually with Play. Pause freezes the timeline; Replay restarts it. Reduced motion shows the finished composition. Loaders demonstrate indeterminate waiting.
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.
Transitions / React + Web APIs
Curtain Wipe
Part two opposing panels to uncover the next scene.
Open experimentTransitions / React + Web APIs
Diagonal Wipe
Sweep an angled edge across the composition.
Open experiment