Burn Hover Reveal — Cinematic liquid & burn hover effects

Features

• Real-time WebGL hover reveal effects

• 3 built-in cinematic styles:

  • Liquid Wipe

  • Paper Burn

• Smooth mouse-reactive parallax motion

• Organic fluid distortion with noise simulation

• Realistic ember and burn edge visuals

• High-performance shader rendering

• Fully responsive image scaling

• Zero image bleeding during transitions

• Optimized for Framer editor and live sites

• Ultra-smooth cinematic easing animations

Customization Options

• Upload custom top and bottom images

• Switch between 3 effect styles

• Control animation speed

• Adjust liquid refraction intensity

• Customize ripple strength and flow speed

• Change wipe direction angles

• Fine-tune paper burn texture and ember width

• Modify hover parallax depth

• Toggle editor preview mode

• Customize burn hole size and reveal behavior

How to Use

1. Add the component to your Framer canvas

2. Upload your primary and secondary images

3. Choose an effect style:

   • Liquid Wipe

   • Paper Burn

4. Adjust animation and distortion settings

5. Customize parallax depth for cinematic movement

6. Preview interactions directly in Framer

7. Publish your site with GPU-accelerated hover effects

Use Cases

• Creative portfolio hover galleries

• Fashion and editorial websites

• Premium product showcases

• Interactive hero sections

• Agency case study reveals

• Experimental landing pages

• Luxury brand interactions

• WebGL-powered image transitions