Image Slit Scan
Add mesmerizing slit-scan distortion effects to any image with smooth hover transitions.
Overview
Add mesmerizing slit-scan distortion effects to any image with smooth hover transitions.
- Smooth slit-scan distortion effect
- Hover or always-on trigger modes
- Adjustable strength and frequency controls
- Overflow settings for edge effects
- Works with any image or aspect ratio
- Lightweight and performance-optimized
- Zero coding required
VFX Image Slit Scan
A futuristic, sci-fi inspired distortion effect for unique visual storytelling. Uses Three.js WebGL shaders for high-performance slit-scan animations.
Features
Three.js Powered High-performance shader-based effect using Three.js WebGL renderer.
Smooth Transitions Spring-based animation for fluid hover and trigger states.
Customizable Effect Adjust strength and frequency for subtle or chaotic distortions.
Trigger Options Always active or hover-triggered with invert option.
Use Cases
Tech Landing Pages — Reinforce a "future-forward" brand identity.
Experimental Portfolios — Showcase your willingness to break design norms.
Music & Event Sites — Create a glitchy, high-energy visual atmosphere.
Product Launches — Reveal new tech products with a matching aesthetic.
How to Use
Installation
VIDEO PLACEHOLDER: Installation Tutorial
- Log in to your account at framerhub.io
- Navigate to framerhub.io/dashboard
- Find VFX Image Slit Scan in your Recent Purchases
- Click the "Copy" button
- Open your Framer project
- Paste the component anywhere on your canvas (Cmd/Ctrl + V)
Customization
Image Settings
- Image: Select your image (responsive image support)
- Image Fit: Choose Fill, Cover, or Contain
Effect Settings
- Strength: Intensity of the distortion (0-2)
- Frequency: Wave frequency of the slit-scan (1-200)
Trigger Options
- Trigger: Always or On Hover
- Invert: Flip the hover logic
Quick Tips
Subtle Effects — Use strength 0.3-0.5 for elegant, professional distortions.
High Energy — Increase frequency (100+) and strength (1.5+) for chaotic, glitchy effects.
Hover Reveal — Set trigger to Hover with Invert enabled to show effect on mouseover.
License
Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.
Refund Policy
Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!
Why Designers Love This
Creates a sense of motion and depth that static images can't match. Ideal for tech brands, experimental layouts, and music event sites where you need a cutting-edge vibe.
Image Slit Scan - $9
Add mesmerizing slit-scan distortion effects to any image with smooth hover transitions.
You might also like
Why Choose Framer Hub Components
Loved by Framer teams
Used by Framer professionals who need premium, no-code experiences.
"The Best Framer CMS Filtering Plugin I've Found — Truly a Game-Changer. I've tested a lot of Framer CMS filtering and sorting components — both free and paid — and this is by far the best one I've come across."
"He really helped me out when I needed assistance adding it to my Framer project. Super fast customer support highly recommend!"
"We had tried a couple of other Framer CMS filter components but they were buggy, hard to use and support was slow or non-existent. FramerCMSFilter is easier to use and has a lot of added functionality."
Got questions? We've the answers
Got questions? We've the answers
Everything you need to know about FramerHub.