About Component
Live Preview: https://cursorreveal.framer.website/
Cursor Reveal is a WebGL-powered hero component for Framer. Move your cursor across the canvas to paint a fluid trail that reveals a hidden image beneath the surface. Built with Three.js and a custom GLSL shader pipeline for buttery-smooth, GPU-accelerated performance.
Real-time WebGL fluid trail simulation Cursor paints a soft glowing mask across the hero Smooth image reveal with halo edge glow effect Idle auto-cursor — animates on its own when untouched Optional click & tap shockwave ring burst Adaptive quality — lower resolution on mobile for performance Full-bleed responsive layout — works at any size Touch support for mobile and tablet interactions Static preview in Framer canvas, live in published site No setup needed — works out of the box
Use Cases
Portfolio & personal branding hero sections Creative agency & studio landing pages Fashion & lifestyle product showcases Photography & visual storytelling heroes SaaS marketing & feature highlight sections Architecture & interior design portfolios Editorial & magazine-style opening sections
Keywords
cursor reveal framer, webgl hero framer, interactive image reveal, fluid trail effect, mouse trail reveal, image reveal animation, glsl shader framer, three.js framer component, hover reveal hero, cursor glow framer, parallax reveal, idle animation framer, touch reveal mobile, gpu animation framer, hero section framer, liquid reveal effect, image transition framer, interactive hero framer, shockwave effect, blur reveal framer
About Component
Live Preview: https://cursorreveal.framer.website/
Cursor Reveal is a WebGL-powered hero component for Framer. Move your cursor across the canvas to paint a fluid trail that reveals a hidden image beneath the surface. Built with Three.js and a custom GLSL shader pipeline for buttery-smooth, GPU-accelerated performance.
Real-time WebGL fluid trail simulation Cursor paints a soft glowing mask across the hero Smooth image reveal with halo edge glow effect Idle auto-cursor — animates on its own when untouched Optional click & tap shockwave ring burst Adaptive quality — lower resolution on mobile for performance Full-bleed responsive layout — works at any size Touch support for mobile and tablet interactions Static preview in Framer canvas, live in published site No setup needed — works out of the box
Use Cases
Portfolio & personal branding hero sections Creative agency & studio landing pages Fashion & lifestyle product showcases Photography & visual storytelling heroes SaaS marketing & feature highlight sections Architecture & interior design portfolios Editorial & magazine-style opening sections
Keywords
cursor reveal framer, webgl hero framer, interactive image reveal, fluid trail effect, mouse trail reveal, image reveal animation, glsl shader framer, three.js framer component, hover reveal hero, cursor glow framer, parallax reveal, idle animation framer, touch reveal mobile, gpu animation framer, hero section framer, liquid reveal effect, image transition framer, interactive hero framer, shockwave effect, blur reveal framer
Ahmet Loca
