PixelBlast
A dynamic Framer component that generates interactive, animated pixel art backgrounds. Features customizable shapes, liquid motion, and click-activated ripple effects.
Make it with Workshop
Build your own component with AI
A dynamic Framer component that generates interactive, animated pixel art backgrounds. Features customizable shapes, liquid motion, and click-activated ripple effects.
Make it with Workshop
Build your own component with AI
About this ComponentPixelBlast is a highly customizable code component for Framer that creates generative, retro-style pixelated visual effects. It's built using WebGL and Three.js to render smooth, high-performance animations directly on a canvas, making it a powerful tool for creating visually rich backgrounds and interactive art.
Key Features
Shape Variants: You can instantly change the shape of each pixel to be a square, circle, triangle, or diamond.
Pattern Control: Adjust the Pixel Size, Pattern Scale (zoom), and Pattern Density to create a wide range of looks, from sparse and subtle to dense and chaotic.
Color & Speed: Easily set a custom color for the pixels and control the animation speed.
Liquid Mode: When enabled, the pixel grid distorts and "smears" around the user's cursor, creating a fluid, warp-like effect. The strength and radius of this effect are adjustable.
Ripple on Click: When enabled, clicking on the component sends out a circular ripple wave through the pixel grid, adding a satisfying layer of interaction.
Use Cases
Hero Sections: Create a stunning, eye-catching background for the main banner of a website.
Portfolio/Creative Sites: Add a unique artistic flair that makes your design stand out.
Feature Callouts: Use it as a subtle, animated backdrop for specific sections to draw user attention.
Interactive Kiosks or Art: Because it responds to touch and mouse, it's great for displays where user engagement is key.
