Letrero de neón

"use client";

import type { CSSProperties } from "react";

/** Letrero de neón: tubo de luz con halo en capas y una letra que parpadea como si estuviera por fallar. React + TypeScript, sin dependencias. */
export type TextoNeonProps = {
  text?: string;
  color?: string;
  /** Índice de la letra que parpadea; -1 para ninguna. */
  flicker?: number;
  className?: string;
  style?: CSSProperties;
};

const CSS = `
.gctne-root { display: inline-block; max-width: 100%; padding: .35em .6em; border: 3px solid var(--c); border-radius: .5em; color: #fff; font: 400 clamp(34px, 7.5vw, 76px)/1.1 "Monoton", "Pacifico", "Brush Script MT", "Snell Roundhand", cursive; letter-spacing: .04em; text-align: center;
  text-shadow: 0 0 3px #fff, 0 0 8px #fff, 0 0 18px var(--c), 0 0 38px var(--c), 0 0 70px var(--c);
  box-shadow: 0 0 6px #fff inset, 0 0 14px var(--c) inset, 0 0 8px #fff, 0 0 22px var(--c), 0 0 54px var(--c); animation: gctne-hum 4s ease-in-out infinite; }
.gctne-root *, .gctne-root *::before, .gctne-root *::after { box-sizing: border-box; }
.gctne-c { display: inline-block; white-space: pre; }
.gctne-c[data-f="true"] { animation: gctne-flick 3.6s linear infinite; }
@keyframes gctne-hum { 50% { filter: brightness(1.12); } }
@keyframes gctne-flick { 0%, 18%, 22%, 62%, 66%, 100% { opacity: 1; text-shadow: inherit; } 20%, 64% { opacity: .35; text-shadow: none; } 21%, 65% { opacity: 1; } 63% { opacity: .5; text-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .gctne-root, .gctne-c[data-f="true"] { animation: none; } }`;

export function TextoNeon({ text = "Abierto 24h", color = "#ff2fa0", flicker = 2, className = "", style }: TextoNeonProps) {
  return (
    <span className={`gctne-root ${className}`} style={{ "--c": color, ...style } as CSSProperties} aria-label={text} role="text">
      <style>{CSS}</style>
      {Array.from(text).map((char, index) => (
        <span key={index} className="gctne-c" data-f={index === flicker ? "true" : undefined} aria-hidden="true">
          {char}
        </span>
      ))}
    </span>
  );
}

npx shadcn@latest add https://www.gassierconsulting.com/r/texto-neon

import { TextoNeon } from "./texto-neon";

export default function Ejemplo() {
  return <TextoNeon text="Ejemplo" />;
}