Pixel Scan
Fred Moon
Pixel Scan is a custom component designed specifically for the Framer website builder, offering an engaging pixel scan effect that reveals text and images in a unique, dynamic way. Whether you’re a designer aiming to make your content stand out or a developer looking to enhance interactivity, Pixel Scan brings an advanced level of control and customisation to Framer projects.
What is Pixel Scan?
Pixel Scan is a Framer-compatible component built with code to deliver a captivating pixel scan effect that “reveals” text and images pixel by pixel. The effect is ideal for creating engaging page elements, adding visual intrigue to headers, or introducing key visuals in a way that draws the viewer’s attention.
Key Features
20+ Colourways
Pixel Scan offers a wide selection of colour presets, allowing you to choose the right palette for any brand or theme. Each colourway is carefully crafted to ensure that your content remains visually compelling.Speed Control
Customise the pace of the pixel scan effect. Whether you want a slow, cinematic reveal or a quick, dynamic flash, Pixel Scan adapts to fit the rhythm of your content.Pixel Density & Effect Width
Adjust the density of pixels to achieve either a highly detailed reveal or a simplified, broader effect. With control over the width of the effect, you can focus the reveal precisely or allow it to expand across the entire component.Time Delay
Add delays to control the timing of each reveal, ensuring that elements appear precisely when you need them to. This feature allows for seamless coordination with other animations or page elements.Directional Options
Choose the direction of the pixel scan—left to right, top to bottom, or any custom direction. This flexibility makes it easy to integrate the effect naturally with your page’s design flow.
How to Get Started
You can try out Pixel Scan in your Framer projects by duplicating the component and testing its features in real time. Explore different settings to find the ideal blend of speed, colour, density, and direction for your project.