A collection of video web experiments exploring cinematic scroll, interactive animation, and real-time visual effects — all built for 60fps.
Murakami dreamscape scroll with AI videos, pop-art typography, and Web Audio ambient.
Sticky full-screen video with scroll-driven section reveals and animated stat counters.
Alternating content sections over dedicated video backgrounds with metric pills.
Asymmetric video grid with staggered cell reveals, marquee ticker, and label overlays.
Parallax video zoom with film grain, numbered feature strips, and frosted metric cards.
Scroll-driven typography animation with video background and staggered letter reveals.
Scroll-driven color grading with live blend-mode overlays through five cinematic moods.
Floating gradient blobs with screen blending, scroll-driven parallax, and ambient drift.
Interactive light story — collect luminous particles to unlock a poetic narrative.
Scroll-driven clip-path morphing — seven geometric shapes progressively unmask the video.
Scroll-driven dimensional portal — a radial rift expands to reveal the multiverse.
React-based interactive dashboard with real-time data visualizations.
White mask with mix-blend-mode: screen reveals video only through black text pixels. Black shows video, white hides it.
HSL interpolation with lerpAngle() for hue wrapping. mix-blend-mode: color overlay transforms video mood.
backdrop-filter: blur(40px) saturate(180%) with decorative orbs behind for blur visibility on light backgrounds.
Scroll-driven clip-path generators produce polygon, circle, inset, and organic blob shapes per frame.
radial-gradient masking with smoothstep keyframe interpolation creates expanding/collapsing dimensional portals.
Oscillator drones and pentatonic collection pings generated in real-time. No audio files needed.
All animations use transform and opacity via translate3d — no layout or paint operations in the render path.
Video loop crossfades use requestAnimationFrame ticks that self-terminate on pause. Zero overhead for invisible videos.
IntersectionObserver controls play/pause. Far-observer removes src at 600px outside viewport to release decoders.
innerHeight and offsetHeight cached in resize handler — never read per-scroll. Passive listeners everywhere.