QuackElements
Browse components+
Backgrounds/Aether Grid

Aether Grid

A directional field of square stars with deterministic shimmer and reduced-motion support.

Interactive example

Customize

Tune the field and watch every value update live.

Direction

Installation

Run the CLI from your project root. Dependencies and component source are added automatically.

$npx quackelements add aether-grid

Usage

The generated file lives in your repository, so the component API and styles remain fully editable.

example.tsx
import { AetherGrid } from "@/components/quack/backgrounds/aether-grid"

export function AetherGridDemo() {
  return (
    <AetherGrid
      className="min-h-[420px]"
      direction="right"
      gridSize={52}
      squareSize={0.57}
      fadeStart={0.33}
      fadeEnd={1}
      twinkleSpeed={1.4}
      twinkleStrength={0.94}
      falloff={1.25}
      intensity={1}
      opacity={1}
      minBrightness={0.55}
      squareColor="#f59e0b"
      backgroundColor="#050505"
    />
  )
}