Fx Dotted Glow
Dotted grid background with glowing pulse waves.
Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.
About this effect
What it's for
- Dotted grid background with glowing pulse waves.
- Dot matrix background that ripples when the mouse moves.
- Developer tool hero with a glowing dot pattern.
Includes
- Dot grid canvas
- Sweeping glow bands
- Radial glow pulse
- Pointer ripple
- Token tone
- Dot cap 9000
- Static frame
- Offscreen pause
Works with
- Radix UI and Base UI primitives (pick the one your project uses)
- React 19 and Tailwind CSS 4 in Next.js (App Router), Vite, React Router or TanStack Start, installed with the agentic-ui or shadcn CLI
- Your theme tokens, in light and dark mode
Install
Included with Agentic UI Kit (one-time license). Install needs your license key: see pricing · connect your project.
Agentic UI CLI
agentic-ui add fx-dotted-glowInstalls through shadcn and adapts the component to your design tokens.
shadcn CLI
npx shadcn@4.17.0 add @agentic-ui/fx-dotted-glowUsed in
A standalone component: drop it into any screen.
- Type
- Effect
- Variants
- Radix UI and Base UI
- Themes
- Light and dark
- Widths
- Preview it at desktop, tablet and mobile widths above.
- Motion
- Animated, with a reduced-motion fallback
- npm packages
- None beyond your project's React and Next.js
- Registry dependencies
fx-canvas-kit- Files
4 files
- components/agentic-ui/fx-dotted-glow/fx-dotted-glow/fx-dotted-glow.tsx
- components/agentic-ui/fx-dotted-glow/fx-dotted-glow/dotted-glow-scene.ts
- components/agentic-ui/fx-dotted-glow/fx-dotted-glow/dotted-glow-model.ts
- components/agentic-ui/fx-dotted-glow/index.ts
Related components
Fx Aurora Background
Luminous aurora hero section on high-end SaaS landing page.
Details and live previewFx Background Patterns
Dot grid background with radial fade behind an AI chat landing hero.
Details and live previewFx Beam Border
Feature cards with an energetic travelling beam of light along the contour.
Details and live previewFx Beams Collision
Beams background where light beams fall and collide with the floor.
Details and live preview