Interactive Grid Hero

Interactive proximity-reactive square cell grid canvas that softly rounds and insets cells within a focused radius around the cursor.

8.1 KB
•
Updated on September 14, 2026
Active on Canvas Stage

Installation

Bash
pnpm dlx shadcn@latest add @spaceui/block-interactive-grid-hero-1

Features

  • Dynamic Proximity Physics: Cells smoothly adjust border-radius and inset within a configurable radius around the pointer.
  • Shape Controls: Switch seamlessly between square, rounded, and full (circle) corner styles.
  • Responsive Layout: Automatically calculates rows and columns to fill 100% of container width and height.

Keep in mind

  • MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
  • Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
  • Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.
Community Wall
pnpm dlx shadcn@latest add @spaceui/components-spaceui-ui