Transitions / React + Web APIs
Iris Reveal
Open a circular aperture from the center of the scene.
Open experiment[ EXP-002 / DEMONSTRATION ]
Glitch Reveal.
Displace horizontal scene slices into a controlled architectural reveal.
- Category
- Transitions
- Collection
- Demonstration study
- Stack
- React / Web APIs / CSS
- Chronology
- Undated / exploration
EXP-002 / 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
A restrained signal interruption reveals the same environment in fragments. There are no repeated flashes or strobe layers.
02 / How it works
Each horizontal slice uses a clipped copy of the same image. Alternating displacement settles to zero over one animation; intensity sets displacement and slices sets layer count.
03 / Implementation
Actual React demo source. Import this component with the archive stylesheet and pass variant (glitchReveal), values, playing, replay and reduced props. The image demos use /images/resources-bg.png.
Loading implementation…
04 / Parameters
| Parameter | Type | Range | Default |
|---|---|---|---|
| Intensity | Number | 0–1 | 0.65 |
| Duration | Number | 0.3–3s | 1.2s |
| Slices | Number | 3–24 | 12 |
05 / Usage & accessibility
A working demonstration created for this archive, not a claim of historical client work. Activate manually. Reduced motion uses a static result. Animation handles and 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.
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