# Fx Gradient Border

Interactive feature cards on marketing landing with cursor-tracking gradient hover border.

- id: `fx-gradient-border`
- Page: https://agentic-ui-kit.com/components/fx-gradient-border
- Live preview: https://agentic-ui-kit.com/live/fx/fx-gradient-border

## Install

```bash
agentic-ui add fx-gradient-border
npx shadcn@4.17.0 add @agentic-ui/fx-gradient-border
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** static-gradient-border, animated-conic-border, animated-flow-border, cursor-tracking-hover-glow, double-border-layering, card-panel-specializations, theme-token-integration, offscreen-pause, reduced-motion-fallback, motion-personality-scaling
- **Intents:** communicate, explore-detail
- **Suits domains:** saas, ai-workspace, analytics, ecommerce, devtools
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Interactive feature cards on marketing landing with cursor-tracking gradient hover border, Active AI generation or streaming panel framed in animated rotating conic gradient border, Double-border KPI metrics cards providing layered depth in financial or observability dashboards, High-priority CTA panel with static dual-tone gradient border and ambient glow
- **Avoid when:** Dense spreadsheet or tabular grid cells where decorative borders distract from data reading, Subtle secondary utility controls that should remain visually quiet, Low-power battery-constrained mobile contexts where excessive simultaneous animated loops are unneeded
- **Preserve when adapting:** decorative-layers-aria-hidden, token-derived-colors, offscreen-pause-and-static-fallback
- **Replace when adapting:** tone-and-secondary-tone, border-width-and-radius, card-panel-content
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/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/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** fx-foundation, lib-motion