component
SurfaceReveal
By Rashid Iqbal

Details
- Rashid IqbalAuthor
- componentType
- $10.00Price
- 2026-09-03Published
- 2026-09-03Updated
- 2026-09-03Added
- MapsCategories
Summary
Cursor Image reveal
Description
Surface Reveal is an interactive Framer Code Component that combines normal-map lighting with an organic, persistent cursor reveal . Move your cursor across the surface to reveal the underlying texture with dynamic lighting and a natural, evolving trail. Key Features: Interactive Normal-Map Lighting: Dynamic cursor-based lighting creates realistic depth and surface detail. Persistent Cursor Reveal: Reveal the surface as you move, with a trail that naturally fades and evolves over time. Organic Brush Effect: Noise, grain, distortion, and swirling effects create a natural, non-uniform reveal. Animated Intro Reveal: Add a smooth, directional dissolve when the component enters the viewport. Custom Textures: Use your own base texture, normal map, overlay, reveal mask, and cloud texture. Responsive: Supports different aspect ratios and responsive image controls for desktop and mobile. Optimized Rendering: Uses a shared WebGL renderer and cached textures to keep multiple instances efficient. Framer Controls: Easily adjust brush size, reveal behavior, intro direction, and responsive settings directly from Framer. Use Cases Product Showcases: Reveal product surfaces, materials, and textures interactively. Portfolio Websites: Add a tactile, premium interaction to project imagery. Hero Sections: Create an atmospheric reveal effect that responds naturally to the cursor. Creative Galleries: Let visitors explore images through interactive lighting and texture. Brand Websites: Add subtle depth and motion without relying on heavy UI animations. Exceptions: Technical Defects: The component is materially defective or does not function as described, and our support team is unable to resolve the issue. Duplicate Purchase: You accidentally purchased the exact same item twice. For support or assistance, please contact us before requesting a refund. We’re committed to making sure the component works properly for your project.
Introduction
Cursor Image reveal
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #3320