Chamaac UI

DocsComponentsFavouritesSponsor

  • Overview

    • Get Started
    • Components
  • Animated Icons

    • Icons Overview
  • Backgrounds

    • SynthesisNew
    • Electric MistNew
    • Astral FlowNew
    • Nebula
    • Grid Bloom
    • Liquid Chrome
    • Waves
    • Interactive Grid
  • Inputs

    • AI Input
  • 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
  • Navigation

    • Dock
  • Carousels

    • Carousel

Grid Bloom

A mesmerizing, shader-driven background with dual pulsing wave origins that create interference patterns across an animated rotating grid.

Grid Bloom

Customize

1
12
0
10
0.05
-0.2
-0.4
0.5
1
0.6

Installation

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

Props

PropTypeDefaultDescription
classNamestring-Additional CSS classes for the container
colorstring"#e040fb"Color of the blooming pulse pattern
speednumber1.0Overall animation speed multiplier
gridScalenumber12.0Grid tile density — higher values create smaller, denser tiles
rotationSpeednumber0.0Speed of the slow continuous grid rotation
fadeFalloffnumber10.0Controls how quickly the bloom fades out to the edges. Lower = sharper fade. Higher = softer/no fade.
distortionAmountnumber0.05Amount of noise-based distortion applied to the grid lines. Setting to 0.0 gives rigid, straight lines.
flowSpeedXnumber-0.2Horizontal scrolling speed of the grid.
flowSpeedYnumber-0.4Vertical scrolling speed of the grid.
hoverLightRadiusnumber0.5Radius of the light illumination under the mouse. Higher = larger light aura.
hoverRepulsionRadiusnumber1.0Radius of the structural push effect from the mouse.
hoverRepulsionStrengthnumber0.6Strength of the geometric push effect from the mouse. Setting to 0.0 disables the warp.
enableMouseInteractionbooleantrueEnables or disables mouse hover interaction (light aura and grid repulsion effect). Set to false to disable all mouse-driven effects.

Build with ❤️ by Amarnath Dhumal