4a:I[267044,["/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/3-v4s4kk6cmds.js","/creators-assets/_next/static/immutable/chunks/0tb62zkq3ytzl.js","/creators-assets/_next/static/immutable/chunks/2_dm0za3asre2.js","/creators-assets/_next/static/immutable/chunks/1gasll1b30-2c.js","/creators-assets/_next/static/immutable/chunks/0y1e6y4tai9kl.js","/creators-assets/_next/static/immutable/chunks/3nzo9vld-4e3c.js","/creators-assets/_next/static/immutable/chunks/1-4qrfj8z2lbh.js","/creators-assets/_next/static/immutable/chunks/0iefpbbgjpqk_.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3un-l23eued0s.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/424127942kmt_.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js"],"S"] 4b:Ta21,

Create immersive image sliders with fluid, liquid-style WebGL transitions.

TransitionSlider turns a standard image slider into an interactive visual experience with custom shader transitions, smooth navigation, autoplay, and extensive controls directly inside Framer.

Choose from multiple transition styles and control how each transition behaves, where it originates, how intense it feels, and how your slider responds to user interaction.

FEATURES

Real-time WebGL2 rendering
Five distinct transition effects: Bubble, Frost, Ripple, Plasma, and Melt
Cycle mode for automatically rotating through effects
Shuffle mode for randomized transitions
Adjustable transition intensity
Adjustable chromatic / color split effect
Adjustable transition duration
Custom transition origin: Click, Center, or Random
Autoplay with adjustable interval
Click-to-advance interaction
Swipe navigation
Arrow-key navigation
Custom navigation controls
Slide counter
Animated progress indicators
Custom slide headings and paragraphs
Adjustable heading typography
Adjustable paragraph typography
Custom text colors and opacity
Paragraph width, spacing, and offset controls
Custom UI typography
Adjustable component padding
Responsive layout
Reduced-motion support
Automatic off-screen rendering pause
Optimized render-on-change behavior
Framer canvas preview
Optional frozen transition preview
No external runtime libraries required

EASY TO CUSTOMIZE

Everything is controlled directly from Framer's property panel.

No coding is required to customize the slider.

Add your own images, edit your slide content, choose a transition style, and fine-tune the animation, navigation, typography, colors, and spacing to match your design.

TransitionSlider is designed to work as a flexible visual component rather than a fixed pre-designed slider.

LICENSE

Licensing information is 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

4c: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

49:["$","$L4a",null,{"value":{"fallback":{"$inf$activity-creator-8e3e73ae-fdef-48fe-9242-324836e5bf5c-all:/unified/creator/8e3e73ae-fdef-48fe-9242-324836e5bf5c/activity/":[{"data":[{"id":"01a15dd1-4d36-7718-9f2c-834a80cbdae2","type":"component.created","target":{"type":"component","id":"4YUjqsOB2UwqOZhU7aTU","preview":"TransitionSlider","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8e3e73ae-fdef-48fe-9242-324836e5bf5c/01a15dd1-074b-77e9-ac68-bd4aa4546e29.png","targetDeleted":false,"owned":false,"feedItemType":null,"actions":null},"context":null,"actors":[{"id":"8e3e73ae-fdef-48fe-9242-324836e5bf5c","name":"Lamfigo","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/851869/avatar-RCMEyDunLJTCowpj9HiGvSnhlrDtdQ.jpg","slug":"lamfigo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-21T09:36:00.310Z","latestAt":"2026-10-21T09:36:00.310Z"},{"id":"01a15718-f15b-7716-8ddf-f038ce393598","type":"component.created","target":{"type":"component","id":"Tt6IPOotNn04002nwghz","preview":"DepthRelight","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8e3e73ae-fdef-48fe-9242-324836e5bf5c/01a1570b-f6f0-723a-b7f4-07c4f1a8de9d.png","targetDeleted":false,"owned":false,"feedItemType":null,"actions":null},"context":null,"actors":[{"id":"8e3e73ae-fdef-48fe-9242-324836e5bf5c","name":"Lamfigo","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/851869/avatar-RCMEyDunLJTCowpj9HiGvSnhlrDtdQ.jpg","slug":"lamfigo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-20T02:16:54.875Z","latestAt":"2026-10-20T02:16:54.875Z"},{"id":"01a14241-0995-70ad-a39b-e710ced96ae2","type":"creator.followed","target":{"type":"creator","id":"f58ad3ab-82e2-41dd-958e-94a329e53007","preview":"Real Mehedi","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f58ad3ab-82e2-41dd-958e-94a329e53007/i7cup138","slug":"real-mehedi","targetDeleted":false,"owned":false,"feedItemType":null,"actions":null},"context":null,"actors":[{"id":"8e3e73ae-fdef-48fe-9242-324836e5bf5c","name":"Lamfigo","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/851869/avatar-RCMEyDunLJTCowpj9HiGvSnhlrDtdQ.jpg","slug":"lamfigo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-16T01:08:40.962Z","latestAt":"2026-10-16T01:08:40.962Z"},{"id":"019ef049-41fe-7381-b3f7-54eff2ef4a6b","type":"template.liked","target":{"type":"template","id":"59317","preview":"PortfolioDav","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c2391297-a6ed-4c5d-b0e4-a5953fa2bae9/butdg2a0","targetDeleted":false,"owned":false,"feedItemType":null,"actions":null},"context":null,"actors":[{"id":"8e3e73ae-fdef-48fe-9242-324836e5bf5c","name":"Lamfigo","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/851869/avatar-RCMEyDunLJTCowpj9HiGvSnhlrDtdQ.jpg","slug":"lamfigo","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-06-22T17:03:13.402Z","latestAt":"2026-06-22T17:03:13.402Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:8e3e73ae-fdef-48fe-9242-324836e5bf5c:/unified/posts/?creator=8e3e73ae-fdef-48fe-9242-324836e5bf5c&with=reposts":[{"data":[{"id":"01a15dd1-4ab6-70a5-b9af-abf55d41d402","title":null,"body":"

Introducing Lamfigo Transition Slider ✨

It comes with 7 transition modes, from Bubble and Frost to Ripple, Plasma, and Melt, plus Cycle and Shuffle for a little unpredictability.

With customizable effects, transition origins, timing, autoplay, and more, everything can be adjusted directly inside Framer without touching the code.

Hope you enjoy playing with it as much as we enjoyed building it!

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Introducing Lamfigo Transition Slider ✨"}]},{"type":"paragraph","content":[{"type":"text","text":"It comes with 7 transition modes, from Bubble and Frost to Ripple, Plasma, and Melt, plus Cycle and Shuffle for a little unpredictability."}]},{"type":"paragraph","content":[{"type":"text","text":"With customizable effects, transition origins, timing, autoplay, and more, everything can be adjusted directly inside Framer without touching the code."}]},{"type":"paragraph","content":[{"type":"text","text":"Hope you enjoy playing with it as much as we enjoyed building it!"}]}]},"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":"4YUjqsOB2UwqOZhU7aTU","resolved":true,"title":"TransitionSlider","body":"$4b","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Create immersive image sliders with fluid, liquid-style WebGL transitions."}]},{"type":"paragraph","content":[{"type":"text","text":"TransitionSlider turns a standard image slider into an interactive visual experience with custom shader transitions, smooth navigation, autoplay, and extensive controls directly inside Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Choose from multiple transition styles and control how each transition behaves, where it originates, how intense it feels, and how your slider responds to user interaction."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"FEATURES"}]},{"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":"Five distinct transition effects: Bubble, Frost, Ripple, Plasma, and Melt"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cycle mode for automatically rotating through effects"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shuffle mode for randomized transitions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable transition intensity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable chromatic / color split effect"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable transition duration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom transition origin: Click, Center, or Random"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Autoplay with adjustable interval"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Click-to-advance interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Swipe navigation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Arrow-key navigation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom navigation controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Slide counter"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated progress indicators"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom slide headings and paragraphs"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable heading typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable paragraph typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom text colors and opacity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Paragraph width, spacing, and offset controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom UI typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable component padding"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic off-screen rendering pause"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optimized render-on-change behavior"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Framer canvas preview"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional frozen transition preview"}]}]},{"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"}]},{"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 slider."}]},{"type":"paragraph","content":[{"type":"text","text":"Add your own images, edit your slide content, choose a transition style, and fine-tune the animation, navigation, typography, colors, and spacing to match your design."}]},{"type":"paragraph","content":[{"type":"text","text":"TransitionSlider is designed to work as a flexible visual component rather than a fixed pre-designed slider."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"LICENSE"}]},{"type":"paragraph","content":[{"type":"text","text":"Licensing information is included with the purchase."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"CONTACT"}]},{"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":"Liquid WebGL Slider","slug":"transitionslider","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/01a15dd1-074b-77e9-ac68-bd4aa4546e29.png","metadata":{"tint":{"h":216,"s":42,"l":31},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-21T09:35:59.010Z","updatedAt":"2026-10-21T09:35:59.010Z","publishedAt":"2026-10-21T09:35:59.007Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://lamfigocomponents-v1.framer.website/transitionslider","price":"13","paymentUrl":"https://ko-fi.com/s/0b69f60f30","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"p1r13RyeYV4ALG5ChhTf","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-21T09:35:59.670Z","updatedAt":"2026-10-21T09:35:59.670Z","type":"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":"$4c","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","type":"post"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L4d"}]