The Squares component is a fully customizable, animated background for Framer. It creates a subtle, professional effect of squares moving smoothly across the screen. The component
Made with Workshop
Build your own component with AI
The component generates a grid of customizable squares that move smoothly across the background, creating a professional and engaging visual effect.
Key features of this component include:
Direction Control: You can easily change the animation direction, choosing between diagonal, up, right, down, and left movements to fit your design.
Customizable Speed: The Animation duration setting gives you precise control over the speed of the moving squares, allowing for anything from a slow, subtle flow to a faster, more dynamic feel.
Full Styling Control: The component lets you customize every visual aspect. You can adjust the background color, border color, and size of the squares to match your brand's palette and scale.
Interactive Hover Effects: A customizable Hover Color allows you to create an interactive effect when a user's cursor passes over the squares, adding a layer of polish and user engagement.
The Squares component is perfect for creating a clean, modern aesthetic that feels alive without being distracting. It's a powerful tool for adding a high-end feel to your website's background.