Animated Cyberpunk Cursor
A GSAP-animated cursor-style label that assembles brackets, diagonal patterns, and a text box into a reveal sequence on mount.
AnimatedCyberpunkCursor composes CyberpunkBracket, CyberpunkPattern, and CyberpunkText into a single self-contained widget that plays a coordinated reveal animation on mount. Left and right bracket-pattern pairs slide into position, the center box expands, and the label scrambles into place — all driven by a GSAP timeline. Drop it anywhere you need a dramatic, futuristic call-to-action indicator.
Installation
npx shadcn@latest add @adv/animated-cyberpunk-cursorUsage
import AnimatedCyberpunkCursor from '@/components/ui/AnimatedCyberpunkCursor';
<AnimatedCyberpunkCursor label="ENTER" />Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | "ENTER" | The text displayed in the center box and scrambled in during the reveal animation. |
Cyberpunk Pattern
A diagonal-fill pattern block that exposes refs for GSAP width animations, used as a decorative side element in the cyberpunk UI system.
Cyberpunk Stripe Banner Notification
A fixed full-viewport banner with animated diagonal stripes, GSAP reveal, scan-line effects, and a dismissible expandable detail panel.