# Fx Perspective Grid

Product launch or launch-week banner with a neon horizon grid.

- id: `fx-perspective-grid`
- Page: https://agentic-ui-kit.com/components/fx-perspective-grid
- Live preview: https://agentic-ui-kit.com/live/component/fx-perspective-grid

## Install

```bash
agentic-ui add fx-perspective-grid
npx shadcn@4.17.0 add @agentic-ui/fx-perspective-grid
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** retro-horizon-grid, single-painted-gradient-layer, transform-only-scroll-loop, neon-subtle-blueprint-variants, token-tinted-lines, adjustable-horizon-and-cell, horizon-fade, fx-intensity-scaling, pause-on-hover-and-focus, offscreen-pause, motion-personality-gating, reduced-motion-static-grid, decorative-aria-hidden
- **Intents:** communicate
- **Suits domains:** saas, marketing, devtools, ai-workspace, media, music
- **Interaction:** hover-pause, focus-pause, theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Product launch or launch-week banner with a neon horizon grid, Release notes or changelog header with a subtle hairline floor, Engineering or roadmap section backdrop in the blueprint style, Event, game or music landing hero with a retro look
- **Avoid when:** Dense dashboards, tables or forms where moving lines compete with data, Brands with a calm or conservative tone where a retro look feels off, Sections with long body text that would sit over the floor
- **Preserve when adapting:** decorative-layers-aria-hidden, content-above-the-horizon, pause-on-hover-and-focus, static-grid-when-motion-is-off
- **Replace when adapting:** variant-and-tone, horizon-and-cell, speed-and-intensity, banner-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.1/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** fx-foundation, lib-motion