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.
CyberpunkPattern renders a fixed-width container filled with a pattern-diagonal background. It sits between the bracket and center text in the full AnimatedCyberpunkCursor layout, expanding into view during the animation sequence. The two refs let a GSAP timeline control the container width and the fill element independently.
Installation
npx shadcn@latest add @adv/cyberpunk-patternUsage
import { useRef } from 'react';
import CyberpunkPattern from '@/components/ui/CyberpunkPattern';
export function Example() {
const patternRef = useRef<HTMLDivElement>(null);
const patternContainerRef = useRef<HTMLDivElement>(null);
return (
<div className="flex items-stretch h-12">
<CyberpunkPattern
patternRef={patternRef}
patternContainerRef={patternContainerRef}
patternWidth={64}
/>
</div>
);
}Example
pattern fill
Props
| Prop | Type | Default | Description |
|---|---|---|---|
patternRef | React.RefObject<HTMLDivElement | null> | — | Ref for the inner fill element (GSAP animation target). |
patternContainerRef | React.RefObject<HTMLDivElement | null> | — | Ref for the outer container whose width is animated. |
patternWidth | number | — | Initial rendered width of the pattern container in pixels. |