About Checker Blocks BG
Checker Blocks is an interactive geometric background component for Framer that transforms a simple two-color grid into a constantly evolving composition of blocks, rings, dots, and checkerboard patterns.
Patterns switch through crisp glitch transitions on a rhythmic beat, while pointer interaction lets individual blocks react and transform as visitors move across the grid.
Preview
https://checkerblocks.framer.website/
Great for
Creative portfolio websites
Bold hero sections
Design studio and agency websites
Experimental landing pages
Editorial and poster-inspired layouts
Fashion and culture websites
Product launches
Interactive backgrounds
Brutalist and Swiss-inspired designs
Creative Framer projects
Features
Interactive geometric grid
Solid blocks, rings, dots, and checker patterns
Rhythmic glitch transitions
Cursor-driven block transformations
5 ready-made visual presets
Custom preset for deeper control
Adjustable animation speed
Adjustable grid density
Adjustable large-block distribution
Adjustable pattern change amount
Custom background and pattern colors
Seed control for generating different compositions
Responsive to any component size
Optimized Canvas rendering
Presets
Choose from Poster, Micro Grid, Bold Blocks, Dense Glitch, and Minimal, or switch to Custom for full control over the composition.
Customize
Make Checker Blocks fit your project directly from Framer's property panel. Change the background and pattern colors, select a preset, generate a different composition with Seed, enable or disable pointer interaction, and control the animation.
With the Custom preset, you can also fine-tune cell size, large-block frequency, animation speed, and the amount of the grid that changes on each beat.
Support
Need help with the component, found an issue, or have a feature request?
Email: karimsaif010@gmail.com
