ElectricText

gistfile1.txt

import { Html } from "@elysiajs/html";

interface ElectricTextProps {
  children: string;
  duration?: number;
}
export const ElectricText = ({
  children,
  duration = 0.55,
}: ElectricTextProps) => {
  const characters = children.split("");
  return (
    <>
      <span class="inline-flex relative">
        <span
          class="tracking-wide md:tracking-wider"
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
            background:
              "repeating-linear-gradient(0deg, #000, #000 1px, transparent 1px, transparent 3px)",
            pointerEvents: "none",
            zIndex: 1,
          }}
        />
        {characters.map((char, index) => {
          return (
            <span
              style={{
                display: "inline-block",
                whiteSpace: "pre",
                position: "relative",
                animation: `bounceAndShadow ${duration}s infinite`,
                animationDirection: Math.random() > 0.5 ? "reverse" : "normal",
                animationDelay: `-${index * 400}ms`,
              }}
            >
              {char}
            </span>
          );
        })}
      </span>
      <style>{`
        :root {
        --shadow-color1: #ff0050;
        --shadow-color2: #00f2ea; 
        --shadow-color3: #0000ff; 
        --shadow-color4: #ffffff; 
        --shadow-color5: #00f2ea; 
        }

        @keyframes bounceAndShadow {
            0%, 100% {
              transform: translateY(0);
              text-shadow: 2px 0px 0px var(--shadow-color1), 0px 2px 0px var(--shadow-color2), -2px 0px 0px var(--shadow-color3);
            }
            25% {
              text-shadow: 2px 0px 0px var(--shadow-color1), 0px 2px 0px var(--shadow-color4), -2px 0px 0px var(--shadow-color5);
            }
            50% {
              transform: translateY(-1px);
              text-shadow: 0px 2px 0px var(--shadow-color1), -2px 0px 0px var(--shadow-color3), 0px -2px 0px var(--shadow-color5);
            }
            75% {
              text-shadow: -2px 0px 0px var(--shadow-color1), 0px -2px 0px var(--shadow-color5), 2px 0px 0px var(--shadow-color2);
            }
          }
      `}</style>
    </>
  );
};