DepthRelight

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