A website background doesn't have to be static.
I just created Glyph Blocks Background, an interactive animated grid component for Framer.
The idea was simple: turn a background into an experience.
Instead of a traditional static pattern, the component creates an evolving grid of geometric glyphs, drifting formations, and jumping blocks.
The interesting part? The grid responds to your cursor.
Move your pointer and nearby glyphs are attracted toward it, then smoothly spring back into place.
What's inside:
✳️ Procedural geometric glyph animations
🧲 Interactive cursor attraction
◼️ Dynamic jumping blocks
🎨 Five color presets + custom colors
🎛️ 14 customizable Framer controls
⚡ Responsive rendering and reduced-motion support
Built for creative portfolios, technology websites, experimental landing pages, and anyone looking to add personality to their designs.
Made with 💛 by @Karim Saif
What do you think of this interaction?
#Framer #UIDesign #CreativeCoding #WebDesign #InteractionDesign #ProductDesign
A website background doesn't have to be static.
I just created Glyph Blocks Background, an interactive animated grid component for Framer.
The idea was simple: turn a background into an experience.
Instead of a traditional static pattern, the component creates an evolving grid of geometric glyphs, drifting formations, and jumping blocks.
The interesting part? The grid responds to your cursor.
Move your pointer and nearby glyphs are attracted toward it, then smoothly spring back into place.
What's inside:
✳️ Procedural geometric glyph animations
🧲 Interactive cursor attraction
◼️ Dynamic jumping blocks
🎨 Five color presets + custom colors
🎛️ 14 customizable Framer controls
⚡ Responsive rendering and reduced-motion support
Built for creative portfolios, technology websites, experimental landing pages, and anyone looking to add personality to their designs.
Made with 💛 by @Karim Saif
What do you think of this interaction?
#Framer #UIDesign #CreativeCoding #WebDesign #InteractionDesign #ProductDesign