56:I[473921,["/creators-assets/_next/static/immutable/chunks/1hsplt7jfjgnh.js","/creators-assets/_next/static/immutable/chunks/0ct7__d3eqq0r.js","/creators-assets/_next/static/immutable/chunks/0c-r9a3oxph1w.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/1tyeiicl34tqo.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/1co9epfn9jp6v.js","/creators-assets/_next/static/immutable/chunks/1zalsqf-ioaic.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/2e-sz6cfsc9_9.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/3or5zvywp1ubp.js","/creators-assets/_next/static/immutable/chunks/1k3rwcufrnywl.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/0lx6ikbaymow8.js","/creators-assets/_next/static/immutable/chunks/15z5hu5cixks0.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/0ina8hhu8zfh2.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/2_dm0za3asre2.js","/creators-assets/_next/static/immutable/chunks/1mpx4d_3k5had.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/3_ujmu63m88vf.js","/creators-assets/_next/static/immutable/chunks/25l6djez1lvts.js","/creators-assets/_next/static/immutable/chunks/3pe6luvwzbwnz.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3un-l23eued0s.js","/creators-assets/_next/static/immutable/chunks/3nzo9vld-4e3c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/31lxg3j13mof7.js"],"PostDetailCard"] 57:T992,

Turn any image into an interactive, depth-aware lighting experience.

DepthRelight uses an image and a corresponding depth map to create dynamic lighting, surface detail, displacement, and soft depth-based shadow, directly inside Framer.

Move your pointer across the image and watch the light travel across the surface, revealing depth and form.

FEATURES

Real-time WebGL2 rendering
Depth-based lighting and surface normals
Soft depth-based shadows
Image detail lighting
Adjustable displacement
Custom light color and brightness
Adjustable light radius and elevation
Ambient lighting
Smooth pointer-following
Optional hover-only interaction
Automatic idle light movement
Depth smoothing and cutoff controls
AgX tone mapping
View and performance controls
No external runtime libraries required

EASY TO CUSTOMIZE

Everything is controlled directly from Framer's property panel.

No coding is required to customize the effect.

Use your own image and depth map to create completely different visual experiences.

WHAT YOU GET

DepthRelight Framer Code Component
Component URL
Setup documentation
Third-party notices and attribution information

HOW IT WORKS

DepthRelight interprets a depth map to approximate the surface structure of an image.

That depth information is used to calculate lighting, surface normals, displacement, and depth-based shadows in real time.

The result is a flat image with a dynamic sense of depth and light.

REQUIREMENTS

You need:

An image
A corresponding depth map

For best results, the image and depth map should share the same composition and framing.

LICENSE

Licensing information are included with the purchase.

CONTACT

If you run into any issues or need assistance with this component, feel free to reach out to us at hello@lamfigo.com

53:[["$","$L56",null,{"post":{"id":"01a15718-ef0d-7368-ba57-1b4d22ce4d4e","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"8e3e73ae-fdef-48fe-9242-324836e5bf5c","name":"Lamfigo","slug":"lamfigo","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/851869/avatar-RCMEyDunLJTCowpj9HiGvSnhlrDtdQ.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Tt6IPOotNn04002nwghz","resolved":true,"title":"DepthRelight","body":"$57","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Turn any image into an interactive, depth-aware lighting experience."}]},{"type":"paragraph","content":[{"type":"text","text":"DepthRelight uses an image and a corresponding depth map to create dynamic lighting, surface detail, displacement, and soft depth-based shadow, directly inside Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Move your pointer across the image and watch the light travel across the surface, revealing depth and form."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"FEATURES","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Real-time WebGL2 rendering "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Depth-based lighting and surface normals "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Soft depth-based shadows "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image detail lighting "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable displacement "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom light color and brightness "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable light radius and elevation "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ambient lighting "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth pointer-following "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional hover-only interaction "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic idle light movement "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Depth smoothing and cutoff controls "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"AgX tone mapping "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"View and performance controls "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"No external runtime libraries required"}]}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"EASY TO CUSTOMIZE","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is controlled directly from Framer's property panel."}]},{"type":"paragraph","content":[{"type":"text","text":"No coding is required to customize the effect."}]},{"type":"paragraph","content":[{"type":"text","text":"Use your own image and depth map to create completely different visual experiences."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"WHAT YOU GET","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"DepthRelight Framer Code Component "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Component URL "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Setup documentation "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Third-party notices and attribution information"}]}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"HOW IT WORKS","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"DepthRelight interprets a depth map to approximate the surface structure of an image."}]},{"type":"paragraph","content":[{"type":"text","text":"That depth information is used to calculate lighting, surface normals, displacement, and depth-based shadows in real time."}]},{"type":"paragraph","content":[{"type":"text","text":"The result is a flat image with a dynamic sense of depth and light."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"REQUIREMENTS","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"You need:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"An image "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A corresponding depth map"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"For best results, the image and depth map should share the same composition and framing."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"LICENSE","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Licensing information are included with the purchase."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"CONTACT","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"If you run into any issues or need assistance with this component, feel free to reach out to us at "},{"type":"text","text":"hello@lamfigo.com ","marks":[{"type":"link","attrs":{"href":"mailto:hello@lamfigo.com","target":"_blank","rel":"noopener noreferrer nofollow"}}]}]}]},"introduction":"Interactive Image Relighting","slug":"depthrelight","author":{"framerUserId":"8e3e73ae-fdef-48fe-9242-324836e5bf5c","name":"Lamfigo","slug":"lamfigo","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/851869/avatar-RCMEyDunLJTCowpj9HiGvSnhlrDtdQ.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8e3e73ae-fdef-48fe-9242-324836e5bf5c/01a1570b-f6f0-723a-b7f4-07c4f1a8de9d.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-20T02:16:53.701Z","updatedAt":"2026-10-20T04:00:17.673Z","publishedAt":"2026-10-20T02:16:53.697Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://lamfigocomponents-v1.framer.website/depthrelight","price":"7","paymentUrl":"https://ko-fi.com/s/6ed662eb8f","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"JYBDyh1dllYS4zOx3NzK","tags":[]}}],"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-10-20T02:16:54.285Z","updatedAt":"2026-10-20T02:16:54.285Z","reported":false,"type":"post"}}],"$L58"]

Suggested for you