Cyberpunk Text
A bordered monospace text block designed to be animated by GSAP — the core text element of the cyberpunk UI system.
CyberpunkText renders a bordered, monospace label box that exposes three ref handles so a parent (such as AnimatedCyberpunkCursor) can drive its reveal via GSAP. Use it when you need a styled text cell inside a custom animation sequence.
Installation
npx shadcn@latest add @adv/cyberpunk-textUsage
import { useRef } from 'react';
import CyberpunkText from '@/components/ui/CyberpunkText';
export function Example() {
const textRef = useRef<HTMLDivElement>(null);
const centerBoxRef = useRef<HTMLDivElement>(null);
const centerBoxContainerRef = useRef<HTMLDivElement>(null);
return (
<CyberpunkText
textRef={textRef}
centerBoxRef={centerBoxRef}
centerBoxContainerRef={centerBoxContainerRef}
text="NEON CITY"
/>
);
}Example
NEON CITY
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The label text rendered inside the box. |
textRef | React.RefObject<HTMLDivElement | null> | — | Ref attached to the inner text <div>. Used by GSAP for text scramble. |
centerBoxRef | React.RefObject<HTMLDivElement | null> | — | Ref attached to the bordered box wrapper. Used by GSAP for scale animations. |
centerBoxContainerRef | React.RefObject<HTMLDivElement | null> | — | Ref attached to the outermost container. Used by GSAP for width expansion. |