All studies54 / 74
WebGL
Noise gate transition
Switching case studies pours a noise-edged gate across the frame; the content swaps underneath at the one instant the frame is fully covered.
Where it earns its place
Frame-level state changes that deserve a moment: case study switchers, pricing plan toggles, before and after on a product page.
What we changed
- Kept the core architecture: real DOM content under a shader overlay, swapped at the midpoint, so text stays selectable and indexable.
- Fixed the midpoint: the original's translucent overlay let both states show at once; ours is an opaque graphite gate whose leading and trailing edges are timed so the swap is never visible.
- Cut eight variants to the noise gate, replaced the pink and cyan glow with a single champagne hairline, and made the gate travel the way the tabs moved.
- Rebuilt on react-three-fiber with on-demand rendering (no frames when idle), keyboard tabs, autoplay that stops once someone takes over, and an instant swap under reduced motion.