←
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

Monochrometheme="monochrome"

1:1 reference 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:

"use client";

import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";

export type LedMatrixTheme = "uipirate" | "monochrome" | "emerald" | "cyan" | "amber" | "crimson";
export type LedMatrixSize = "xs" | "sm" | "md" | "lg" | "xl";

export interface LedMatrixChevronButtonProps {
  label?: string;
  theme?: LedMatrixTheme;
  size?: LedMatrixSize;
  onClick?: () => void;
  className?: string;
}

export function LedMatrixChevronButton({
  label = "See Plans",
  theme = "monochrome",
  size = "md",
  onClick,
  className = "",
}: LedMatrixChevronButtonProps) {
  const [isHovered, setIsHovered] = useState(false);
  const [frame, setFrame] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setFrame((f) => (f + 1) % 16);
    }, 110);
    return () => clearInterval(interval);
  }, []);

  const themeColors = {
    uipirate: "#FF5B04",
    monochrome: "#FFFFFF",
    emerald: "#10B981",
    cyan: "#06B6D4",
    amber: "#F59E0B",
    crimson: "#EF4444",
  }[theme];

  return (
    <div
      className={`relative inline-flex items-center select-none p-[6px] rounded-[50px] bg-[#1a1c23] border border-white/10 ${className}`}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <motion.button
        type="button"
        onClick={onClick}
        animate={{ y: isHovered ? -2 : 0 }}
        transition={{ type: "spring", stiffness: 450, damping: 25 }}
        className="relative flex items-center gap-4 px-6 py-3 rounded-[24px] bg-[#0d0e12] border border-white/10 text-white font-bold text-sm cursor-pointer overflow-hidden"
      >
        {/* Animated LED Matrix Badge */}
        <div className="flex items-center gap-1">
          {[0, 1, 2].map((col) => (
            <div
              key={col}
              className="w-1.5 h-1.5 rounded-full transition-opacity duration-200"
              style={{
                backgroundColor: themeColors,
                opacity: (frame + col) % 3 === 0 ? 1 : 0.2,
                boxShadow: (frame + col) % 3 === 0 ? `0 0 6px ${themeColors}` : "none",
              }}
            />
          ))}
        </div>
        <span>{label}</span>
      </motion.button>
    </div>
  );
}

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
labelstring"See Plans"Button label in resting state.
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.
interactionMode"hover" | "click" | "both""hover"Interaction trigger mode: expands LED screen on hover, click, or both.
stepSpeedMsnumber110LED shift speed in milliseconds per column step.
onClick() => voidundefinedClick event handler.