Noise Dissolve Transition
A plate breaks into irregular noise patches with a glowing rim and the next picture shows through — fractal noise compared with an animated threshold; it assembles on entering view, advances on click, scrubs with scroll or follows a manual threshold.
- Shaders
- threejs
- glsl
- gsap
- scrolltrigger
- advanced
- medium perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1263 words of exact values — rewritten live as you tune the Playground.
Prompts are for subscribers
Subscribe to copy this prompt in every format, rewritten live to match your Playground settings.
Loading prompt…
Couldn’t load the prompt
Check your connection and try again.
Source
Full source code
Source code is for subscribers
Subscribe to read, copy and download the full HTML, CSS and JavaScript of this demo.
Loading source code…
Couldn’t load the source code
Check your connection and try again.
medium Slitscan
A poster is sliced into strips (or rings) that each slide by their own phase, so the image repeats in stepped copies like a slit-scan photo; a looping wave drives it, the pointer drags the nearest strips and scroll scrubs and shears the scan.
- threejs
- glsl
- gsap
- scrolltrigger
Featured medium Pixelation Transition
A full-bleed WebGL plane dissolves into a mosaic (cells grow 1 → 48 px), swaps to the next of three procedural pictures at the coarsest moment and sharpens back — on click, or automatically every 4 seconds.
- threejs
- glsl
- gsap
- canvas2d
medium Noisy Track
The pointer drags a wake of noisy distortion through a full-bleed dusk-dune picture: a decaying float trail buffer masks an fbm displacement with static rows, grain and RGB split, widening with pointer speed, then heals.
- threejs
- glsl
- gsap
WebGL Glitch Slice on Scroll Velocity
A sticky full-bleed WebGL hero reads the page's scroll velocity every frame and tears the picture into hash-seeded horizontal slices with an RGB split that scale with speed, settling exponentially when you stop; the headline's red and cyan ghosts follow.
- threejs
- glsl
- gsap
- canvas2d