Components
Accent Frame
A dynamic frame with animated corner accents.
npx neonblade add accent-frameHover Effects (hover each)
expand (default)
glow
pulse
flicker
trace
none
Colors & Dual Color (quad mode)
Cyan
Pink
Green
Cyan + Pink
Always Animated (no hover needed)
Glow always on
Pulse always on
Flicker always on
Background Variants & Corner Styles
bg: none
bg: subtle
bg: solid
rounded tips
Corner Geometry
Thin short
Thick long
Thick quad pulse
Props Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
color | "cyan" | "pink" | "green" | string | "cyan" | Primary corner accent color. Preset name or any CSS color. |
colorB | "cyan" | "pink" | "green" | string | - | Secondary accent color for the opposite-diagonal bracket pair. Defaults to the primary color. |
mode | "duo" | "quad" | "duo" | "duo" renders top-left + bottom-right corners. "quad" renders all four. |
hoverEffect | "expand" | "glow" | "pulse" | "flicker" | "trace" | "none" | "expand" | Hover animation on the corner brackets. "expand" grows the arms, "glow" adds a neon shadow, "pulse" breathes in glow, "flicker" neon-flickers, "trace" chases a highlight along the arm. |
glowIntensity | "low" | "medium" | "high" | "medium" | Controls the spread radius of glow/pulse effects. |
animated | boolean | false | When true the chosen hoverEffect runs continuously without requiring hover. |
bgVariant | "none" | "subtle" | "solid" | "none" | "subtle" adds a faint accent-tinted fill; "solid" adds a #0a0a0a dark fill. |
cornerStyle | "square" | "rounded" | "square" | Square or rounded bracket tip ends. |
cornerLength | number | 16 | Base arm length of each bracket in px. |
cornerThickness | number | 2 | Stroke thickness of the bracket in px. |
hoverLength | number | 32 | Arm length when expanded (hoverEffect="expand") in px. |
transitionDuration | number | 300 | Expand / transition animation speed in ms. |