Pixel Loader

import type { CSSProperties, ElementType } from "react";

type StaggerBy = "sections" | "letters";
type Direction = "horizontal" | "vertical";
type Order = "natural" | "reverse" | "center";

type PixelTextProps = {
  as?: ElementType;
  text: string;
  index: number;
  total: number;
  letterOffset: number;
  totalLetters: number;
  duration?: number;
  sectionStagger?: number;
  letterStagger?: number;
  staggerBy?: StaggerBy;
  direction?: Direction;
  order?: Order;
  pixelSize?: number;
  steps?: number;
  colors?: [string, string, string];
};

const orderIndex = (index: number, total: number, order: Order) => {
  if (order === "reverse") return total - 1 - index;
  if (order === "center") return Math.abs(index - (total - 1) / 2);
  return index;
};

export function PixelText({
  as: Tag = "span",
  text,
  index,
  total,
  letterOffset,
  totalLetters,
  duration = 1500,
  sectionStagger = 260,
  letterStagger = 24,
  staggerBy = "sections",
  direction = "vertical",
  order = "natural",
  pixelSize = 8,
  steps = 7,
  colors = ["#f05a3c", "#2aafc1", "#b8e63a"],
}: PixelTextProps) {
  const makeStyle = (delay: number, colorOffset = 0) => ({
    "--delay": delay + "ms",
    "--duration": duration + "ms",
    "--steps": steps,
    "--coarse": Math.round(pixelSize * 1.75) + "px",
    "--medium": pixelSize + "px",
    "--fine": Math.max(2, Math.round(pixelSize * 0.5)) + "px",
    "--tone-a": colors[colorOffset % 3],
    "--tone-b": colors[(colorOffset + 1) % 3],
    "--tone-c": colors[(colorOffset + 2) % 3],
    "--enter-x": direction === "horizontal" ? "-2px" : "0px",
    "--enter-y": direction === "vertical" ? "-2px" : "0px",
    "--exit-x": direction === "horizontal" ? "1px" : "0px",
    "--exit-y": direction === "vertical" ? "1px" : "0px",
    "--clip-start": direction === "horizontal"
      ? "inset(0 100% 0 0)"
      : "inset(100% 0 0 0)",
    "--pixel-angle": direction === "horizontal" ? "45deg" : "135deg",
  } as CSSProperties);

  const layers = (character: string, delay: number, colorOffset: number) => (
    <span className="pixel-glyph" style={makeStyle(delay, colorOffset)}>
      <span className="pixel-base">{character}</span>
      <span aria-hidden="true" className="pixel-fx pixel-coarse">{character}</span>
      <span aria-hidden="true" className="pixel-fx pixel-medium">{character}</span>
      <span aria-hidden="true" className="pixel-fx pixel-fine">{character}</span>
    </span>
  );

  if (staggerBy === "letters") {
    let localIndex = 0;
    return (
      <Tag className="pixel-text pixel-text--letters" aria-label={text}>
        <span className="pixel-letters" aria-hidden="true">
          {text.split(/(\s+)/).map((token, tokenIndex) => {
            if (/^\s+$/.test(token)) return <span key={tokenIndex}>{token}</span>;
            return (
              <span className="pixel-word" key={tokenIndex}>
                {Array.from(token).map((character) => {
                  const globalIndex = letterOffset + localIndex++;
                  const delay = orderIndex(globalIndex, totalLetters, order) * letterStagger;
                  return <span key={globalIndex}>{layers(character, delay, globalIndex)}</span>;
                })}
              </span>
            );
          })}
        </span>
      </Tag>
    );
  }

  const delay = orderIndex(index, total, order) * sectionStagger;
  return (
    <Tag className="pixel-text" style={makeStyle(delay, index)}>
      <span className="pixel-base">{text}</span>
      <span aria-hidden="true" className="pixel-fx pixel-coarse">{text}</span>
      <span aria-hidden="true" className="pixel-fx pixel-medium">{text}</span>
      <span aria-hidden="true" className="pixel-fx pixel-fine">{text}</span>
    </Tag>
  );
}