Cyberpunk Bracket
A three-sided bracket shape (left or right) that exposes refs for GSAP width animations in the cyberpunk UI system.
CyberpunkBracket renders a thin, three-bordered bracket — either opening (left) or closing (right) — used to flank text in the cyberpunk animation sequence. It exposes two refs so a parent component can animate its container width and the bracket itself via GSAP. Pair it with CyberpunkPattern and CyberpunkText to build the full AnimatedCyberpunkCursor composition, or use it standalone for decorative framing.
Installation
npx shadcn@latest add @adv/cyberpunk-bracketUsage
import { useRef } from 'react';
import CyberpunkBracket from '@/components/ui/CyberpunkBracket';
export function Example() {
const bracketRef = useRef<HTMLDivElement>(null);
const bracketContainerRef = useRef<HTMLDivElement>(null);
return (
<div className="flex items-stretch h-12 gap-2">
<CyberpunkBracket
side="left"
bracketRef={bracketRef}
bracketContainerRef={bracketContainerRef}
bracketWidth={12}
/>
<span className="font-mono text-sm uppercase self-center px-2">CONTENT</span>
{/* mirror with side="right" */}
</div>
);
}Example
CONTENT
Props
| Prop | Type | Default | Description |
|---|---|---|---|
side | "left" | "right" | — | Which bracket variant to render. "left" draws top + left + bottom borders; "right" draws top + right + bottom borders. |
bracketRef | React.RefObject<HTMLDivElement | null> | — | Ref for the inner bracket element (GSAP animation target). |
bracketContainerRef | React.RefObject<HTMLDivElement | null> | — | Ref for the outer container whose width is animated. |
bracketWidth | number | — | Initial rendered width of the bracket container in pixels. |