←
LED Dot Matrix Chevron Button

LED Dot Matrix Chevron Button

Cyberpunk Matrix

Cyberpunk carbon-fiber squircle button with an expandable 7×7 LED dot matrix screen that stretches across the entire chassis on hover/click revealing 5 cascading pixel chevrons.

Interactive Playground & Studio

Live Controls
led-matrix-chevron.tsx
Hover or click to interact
Customizer
PRESETS & VARIATIONS

All Variants & Themes

Click to test interactive spring physics on every theme

Monochrome Figmatheme="monochrome"

1:1 Figma Master design with white LED grid pixels.

UI Pirate Magmatheme="uipirate"

Signature magma orange LED illumination wave.

Neon Emeraldtheme="emerald"

Cyberpunk reactor green LED matrix screen.

Electric Cyantheme="cyan"

Laser cyan glowing pixel chevrons.

Amber Solartheme="amber"

Warm golden amber retro terminal LED display.

Crimson Lasertheme="crimson"

High-intensity ruby red cascading chevron pulse.

Features & Physics

✓Expandable 7×7 pixel dot matrix screen
✓Cascading phosphor marquee wave animation
✓Carbon-fiber textured squircle chassis
✓Instant tactile feedback on click

Code & Integration

Customized live with your active playground prop settings:

import { LedMatrixChevronButton } from "@/components/LedMatrixChevronButton";

export default function Example() {
  return (
    <LedMatrixChevronButton
      theme="monochrome"
      size="md"
      onTrigger={() => console.log("Matrix sequence activated")}
    />
  );
}

Peer Dependencies

Requires Framer Motion and Tailwind CSS for spring physics and layout tokens:

npm install framer-motion clsx lucide-react tailwind-merge

API & Props Reference

PropTypeDefaultDescription
theme"monochrome" | "uipirate" | "emerald" | "cyan" | "amber" | "crimson""monochrome"Phosphor color for the LED dot grid.
size"xs" | "sm" | "md" | "lg" | "xl""md"Controls pixel scale and chassis padding.
onTrigger() => voidundefinedFired when the chevron sequence reaches climax.