Glitch Effect — Add a glitch effect to any image

Glitch Effect

Drop the component inside an image frame and control the effect through the properties panel.

Two modes

1. Even. The image is split into equal horizontal slices. Each slice independently shifts left or right, creating a classic digital glitch look.

   

2. Random. Thin strips appear at random vertical positions across the image. Their thickness is adjustable. Great for a more subtle, sporadic distortion.

   

Properties

• Trigger — activate on hover or keep always on

• Frequency — how often the glitch updates (in ms)

• Slices — number of horizontal bands

• Slice Height — strip thickness in Random mode (% of image height)

• Shift Strength — max horizontal displacement (% of image width)

• Jitter Chance — probability of each slice shifting per tick

• Hold Frames — how long a shifted slice stays in place

• Smoothness — transition duration for slice movement

• Allow Overflow — let slices extend beyond the image or clip them

How to use

1. Add an image to your Framer project

2. Drag Glitch Effect from Assets into the image frame

3. Adjust settings in the properties panel

All values are proportional to the image size — the effect scales consistently across screen sizes.