Full-screen hover-reveal. Image or video columns wipe in, slide, and blur.
A hand-built reveal interaction, not a simple image swap. Runs on the browser's native Web Animations, with zero external libraries.
Image or video per column, full-bleed. Only the active video decodes; others pause in sync.
Inactive columns go black & white on leave (or any color/blend mode); the active stays full color.
A real backdrop blur ramps up from the base of the active column.
16 CSS blend modes on the overlay and inactive treatment (Multiply, Screen, Saturation, Color, Luminosity…).
Reveal wipe follows the cursor's from-to movement, with adjustable parallax slide-in.
Collapses to a paged carousel on small screens, with optional infinite cycle and stylable nav.
Portfolios, agency and studio heroes, product showcases, photography, fashion, jewelry and luxury, real estate, game and film promos, and any full-width landing section that needs to impress.
Up to 50 columns, from a three-up hero to a full image gallery.
Per-role typography (title/subtitle/description/button) in rem, em or px via Framer font controls.
Every fill & hover color, plus accent, dividers, gradient, overlay, inactive tint.
Independent gaps per text element, and per-side padding on columns and button.
Separate timing & easing for media reveal and column transition.
Effects: overlay (color, blur, blend), bottom gradient, active-column blur, inactive tint.
Zero animation dependencies: native Web Animations API, so nothing extra ships to the page.
Decodes only one video at a time, so full-screen video stays fast.
Pauses video playback when scrolled out of view (tunable trigger) to save CPU, battery and data.
GPU-light: heavy backdrop-filter work stays contained.
Pause can sync to the reveal so video stops exactly when the wipe finishes.
Top-tier desktop Lighthouse / PageSpeed scores 🟢🟢🟢🟢 on average (96-100, lightweight setup).
Full-screen hover-reveal. Image or video columns wipe in, slide, and blur.
A hand-built reveal interaction, not a simple image swap. Runs on the browser's native Web Animations, with zero external libraries.
Image or video per column, full-bleed. Only the active video decodes; others pause in sync.
Inactive columns go black & white on leave (or any color/blend mode); the active stays full color.
A real backdrop blur ramps up from the base of the active column.
16 CSS blend modes on the overlay and inactive treatment (Multiply, Screen, Saturation, Color, Luminosity…).
Reveal wipe follows the cursor's from-to movement, with adjustable parallax slide-in.
Collapses to a paged carousel on small screens, with optional infinite cycle and stylable nav.
Portfolios, agency and studio heroes, product showcases, photography, fashion, jewelry and luxury, real estate, game and film promos, and any full-width landing section that needs to impress.
Up to 50 columns, from a three-up hero to a full image gallery.
Per-role typography (title/subtitle/description/button) in rem, em or px via Framer font controls.
Every fill & hover color, plus accent, dividers, gradient, overlay, inactive tint.
Independent gaps per text element, and per-side padding on columns and button.
Separate timing & easing for media reveal and column transition.
Effects: overlay (color, blur, blend), bottom gradient, active-column blur, inactive tint.
Zero animation dependencies: native Web Animations API, so nothing extra ships to the page.
Decodes only one video at a time, so full-screen video stays fast.
Pauses video playback when scrolled out of view (tunable trigger) to save CPU, battery and data.
GPU-light: heavy backdrop-filter work stays contained.
Pause can sync to the reveal so video stops exactly when the wipe finishes.
Top-tier desktop Lighthouse / PageSpeed scores 🟢🟢🟢🟢 on average (96-100, lightweight setup).
