Sparkle Grid BG

Turn a simple grid into a mesmerizing field of light. ✨

Sparkle Grid Background is an interactive Framer component featuring drifting clusters of glowing dots that grow into circles and transform into beautiful four-point sparkles. Move your cursor across the grid to create a responsive bloom of light that follows your movement.

Built with Canvas 2D, customizable colors, smooth transitions, and performance-conscious animation for modern websites.

✨ Great For

• Creative portfolios and personal websites

• SaaS and AI landing pages

• Product showcases and hero sections

• Futuristic dashboards and digital experiences

• Interactive backgrounds and experimental websites

• Agencies, studios, and creative brands

Live Demo: https://sparklegridbg.framer.website/

⚡ Features

• Organic Sparkle Animation — Drifting clusters emerge naturally across the grid.

• Three-Stage Transformation — Dots grow into circles and bloom into four-point sparkles.

• Interactive Cursor Effect — Nearby cells respond to pointer movement.

• 5 Color Presets — Original, Midnight, Aurora, Rose, and Gold.

• Custom Colors — Personalize sparkle and background colors.

• Responsive Layout — Automatically adapts to different screen sizes.

• Performance Optimized — 30 FPS rendering limit and capped canvas resolution.

• Smart Animation Pausing — Stops rendering when the component moves offscreen or the browser tab becomes hidden.

• Reduced Motion Support — Provides a static alternative for visitors who prefer less animation.

• Static Preview — Includes an SVG fallback for Framer exports and thumbnails.

• No External Dependencies — Built with React, Framer, and Canvas 2D.

🛠 Support

Need help, found a bug, or have a suggestion?

• X (Twitter): https://x.com/karimsaif0

• Email: karimsaif010@gmail.com