Chamaac UI

DocsComponentsSponsor

  • Overview

    • Get Started
    • Components

  • Animated Icons

    • Icons Overview

  • Backgrounds

    • NebulaNew
    • Grid BloomUpdated
    • Liquid Chrome
    • Waves
    • Interactive Grid

  • Sections

    • How It WorksNew
    • Stats Cards
    • Feature Steps
    • Gauge

  • Buttons

    • Buttons Overview
    • Premium Button
    • Glowing BorderNew
    • Shimmer Button
    • Slide Up Button
    • Focus Button
    • Neo Brutalist
    • Hover Arrow

  • Text Animations

    • Text LoopNew
    • Dancing Letters
    • Gif Text

  • Inputs

    • AI Input

  • Navigation

    • Dock

  • Carousels

    • Carousel

Interactive Grid Background

A highly interactive, mouse-sensitive grid background.

New Release

Interactive Grid.

A high-performance, reactive canvas grid system. Use your mouse to interact with the data points.

Customize

40
1.5
300

Installation

npx shadcn@latest add https://chamaac.com/r/interactive-grid-background.json

Props

PropTypeDefaultDescription
gridGapnumber40Distance between grid dots in pixels
dotSizenumber1.5Radius of the dots
radiusnumber300Radius of the mouse interaction zone
colorstring"#737373"Base color of the dots
highlightColorstring"#FFFF00"Color of the dots active hover