https://framer.com/m/ImageDepthScene-p17O.js
Io / Enhancements / SpatialScene
SpatialScene
SpatialScene stacks two images and moves them against each other as the pointer travels, so a flat photograph reads as if it had depth.
Examples
Live specimens for every control the component exposes.
Default
image0 sits behind and image1 in front. The two shift by different amounts under the pointer, which is what produces the depth.
Threshold
thresholdX and thresholdY are how far the layers are allowed to travel on each axis. Small values read as a lens; large ones exaggerate into a diorama.
threshold 1
threshold 4
x only
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for SpatialScene
A photograph should gain depth without being rebuilt in 3D.
You already have a foreground cut-out to sit over the scene.
The motion should answer the pointer, not the scroll.
You can supply a separated foreground layer as well as the background.
Reach for something else
You only have one flat image and no separated layer.
The picture should drift with the page — use ImageParallax.
The effect needs to survive on touch devices, where there is no pointer.
Io — Enhancements
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.