Component
Displace Component for Framer
This is a displace component for Framer based on Pablo Stanley's work that adds a fractal glass effect. Just drop it into your project, upload the image, and the distortion effect is ready—no code needed.
About the resource
To use the Displace component in Framer, start by adding your image—it’ll be split and distorted using a customizable displacement effect. You can control how many slices the image is divided into using the Steps setting (10–100), where more steps mean finer detail.
Adjust the Scale to set the intensity of the distortion, and tweak the Frequency to control how often the distortion pattern repeats—higher values make the effect more intricate. Octaves add layers of detail to the distortion, giving it a more textured feel.
Turn on Flip to alternate the direction of every other slice for a mirrored look, and add Shimmer to overlay a subtle light gradient for extra depth. Lastly, choose the Orientation to slice the image either vertically (left to right) or horizontally (top to bottom), depending on the effect you want.
About the resource
To use the Displace component in Framer, start by adding your image—it’ll be split and distorted using a customizable displacement effect. You can control how many slices the image is divided into using the Steps setting (10–100), where more steps mean finer detail.
Adjust the Scale to set the intensity of the distortion, and tweak the Frequency to control how often the distortion pattern repeats—higher values make the effect more intricate. Octaves add layers of detail to the distortion, giving it a more textured feel.
Turn on Flip to alternate the direction of every other slice for a mirrored look, and add Shimmer to overlay a subtle light gradient for extra depth. Lastly, choose the Orientation to slice the image either vertically (left to right) or horizontally (top to bottom), depending on the effect you want.
About the resource
To use the Displace component in Framer, start by adding your image—it’ll be split and distorted using a customizable displacement effect. You can control how many slices the image is divided into using the Steps setting (10–100), where more steps mean finer detail.
Adjust the Scale to set the intensity of the distortion, and tweak the Frequency to control how often the distortion pattern repeats—higher values make the effect more intricate. Octaves add layers of detail to the distortion, giving it a more textured feel.
Turn on Flip to alternate the direction of every other slice for a mirrored look, and add Shimmer to overlay a subtle light gradient for extra depth. Lastly, choose the Orientation to slice the image either vertically (left to right) or horizontally (top to bottom), depending on the effect you want.
The displace component propeties in Framer.
The displace component propeties in Framer.
The displace component propeties in Framer.
