Cyberpunk LED Hardware•Expandable Dot Matrix
LED Matrix Chevron Tactile Button
Expandable phosphor LED dot-matrix chevron button featuring physical grid illumination, animated marquee shift loop, and specular bevel framing.
preview.tsx
Hover or click to interact
Customizer
PRESETS & VARIATIONS
All Variants Preview
Hover over buttons to expand dot matrix screen & trigger cascading chevrons
Monochrome Figmatheme="monochrome"
1:1 Figma Master design with white LED grid pixelsUI Pirate Magmatheme="uipirate"
Signature magma orange LED illumination waveNeon Emeraldtheme="emerald"
Cyberpunk reactor green LED matrix screenElectric Cyantheme="cyan"
Laser cyan glowing pixel chevronsAmber Solartheme="amber"
Warm golden amber retro terminal LED displayCrimson Lasertheme="crimson"
High-intensity ruby red cascading chevron pulseInstallation & Setup
Install required peer dependencies for animation support:
npm install framer-motion clsx
Code & Integration
LedMatrixChevronButton.tsx• Production Ready
"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>
);
}Component API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "See Plans" | Text displayed on the button cap |
| theme | LedMatrixTheme | "monochrome" | LED Phosphor color theme preset |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Scale multiplier |
| onClick | () => void | undefined | Click callback event handler |
Personalized Help
Struggling with LED dot-matrix buttons or custom hardware UI controls? Let's talk about your product.
UI Pirate is a product design & development agency trusted by 50+ SaaS founders and enterprise teams across the US, UK & beyond. Tell us what you need.