5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/2qlox892e2j_q.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/07e2f_v4-u-we.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/2c_4he4mvu2r0.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3q7g04e77g4lf.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/0lmnldnlzsgok.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/0z2hzm-7v_g2c.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0p4vy6mn-x9zs.js"],"PostDetailCard"] 5d:Ta00,

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.

59:[["$","$L5c",null,{"post":{"id":"01a06940-bb45-77db-90b4-e2d16415e458","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"cf79b33d-8ec3-4bf2-8cf4-822e63f6c190","name":"Rashid Iqbal","slug":"rashidiqbal","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1235366/avatar-A0hz247PWQPoVlJ4u5z5KDJw4wjQqO.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"Uo3S8VbxTCAdxMOsGjPt","resolved":true,"title":"SurfaceReveal","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Surface Reveal","marks":[{"type":"bold"}]},{"type":"text","text":" is an interactive Framer Code Component that combines "},{"type":"text","text":"normal-map lighting with an organic, persistent cursor reveal","marks":[{"type":"bold"}]},{"type":"text","text":". Move your cursor across the surface to reveal the underlying texture with dynamic lighting and a natural, evolving trail."}]},{"type":"paragraph","content":[{"type":"text","text":"Key Features:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive Normal-Map Lighting:","marks":[{"type":"bold"}]},{"type":"text","text":" Dynamic cursor-based lighting creates realistic depth and surface detail."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Persistent Cursor Reveal:","marks":[{"type":"bold"}]},{"type":"text","text":" Reveal the surface as you move, with a trail that naturally fades and evolves over time."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Organic Brush Effect:","marks":[{"type":"bold"}]},{"type":"text","text":" Noise, grain, distortion, and swirling effects create a natural, non-uniform reveal."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated Intro Reveal:","marks":[{"type":"bold"}]},{"type":"text","text":" Add a smooth, directional dissolve when the component enters the viewport."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom Textures:","marks":[{"type":"bold"}]},{"type":"text","text":" Use your own base texture, normal map, overlay, reveal mask, and cloud texture."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive:","marks":[{"type":"bold"}]},{"type":"text","text":" Supports different aspect ratios and responsive image controls for desktop and mobile."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optimized Rendering:","marks":[{"type":"bold"}]},{"type":"text","text":" Uses a shared WebGL renderer and cached textures to keep multiple instances efficient."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Framer Controls:","marks":[{"type":"bold"}]},{"type":"text","text":" Easily adjust brush size, reveal behavior, intro direction, and responsive settings directly from Framer."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Use Cases","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product Showcases:","marks":[{"type":"bold"}]},{"type":"text","text":" Reveal product surfaces, materials, and textures interactively."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio Websites:","marks":[{"type":"bold"}]},{"type":"text","text":" Add a tactile, premium interaction to project imagery."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero Sections:","marks":[{"type":"bold"}]},{"type":"text","text":" Create an atmospheric reveal effect that responds naturally to the cursor."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative Galleries:","marks":[{"type":"bold"}]},{"type":"text","text":" Let visitors explore images through interactive lighting and texture."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Brand Websites:","marks":[{"type":"bold"}]},{"type":"text","text":" Add subtle depth and motion without relying on heavy UI animations."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Exceptions:","marks":[{"type":"bold"}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Technical Defects:","marks":[{"type":"bold"}]},{"type":"text","text":" The component is materially defective or does not function as described, and our support team is unable to resolve the issue."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Duplicate Purchase:","marks":[{"type":"bold"}]},{"type":"text","text":" You accidentally purchased the exact same item twice."}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph","content":[{"type":"text","text":"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","slug":"surfacereveal","author":{"framerUserId":"cf79b33d-8ec3-4bf2-8cf4-822e63f6c190","name":"Rashid Iqbal","slug":"rashidiqbal","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1235366/avatar-A0hz247PWQPoVlJ4u5z5KDJw4wjQqO.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cf79b33d-8ec3-4bf2-8cf4-822e63f6c190/01a06940-9d52-727d-ace4-930e95f85ea1.png"}],"post":null,"createdAt":"2026-09-03T21:50:44.466Z","updatedAt":"2026-09-03T21:50:44.466Z","publishedAt":"2026-09-03T21:50:44.461Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://surfacereveal.framer.website/","price":"10","paymentUrl":"https://buy.polar.sh/polar_cl_vINs6Eur9GxCDFR5UzPeZMavu64i4FmLE3yer0juTfx","workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"gwPAPhBvWwZ3dDjz4Pgv"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-03T21:50:45.061Z","updatedAt":"2026-09-03T21:50:45.061Z","reported":false}}],"$L5e"]

Suggested for you