Pixel Paragraph Words

"use client";

import { PixelParagraph } from "@/components/ui/pixel-paragraph-words";

/* ─── Showcase ─── */

export default function PixelParagraphWordsDemo() {
  return (
    <div className="mx-auto w-full max-w-2xl space-y-8 px-6 py-10">
      <PixelParagraph
        text="54+ animated components and effects. Free, open source, and built to drop into any shadcn/ui project."
        pixelWords={["animated", "shadcn/ui"]}
        font="square"
        className="text-2xl leading-relaxed text-muted-foreground"
        pixelWordClassName="text-foreground"
      />

      <PixelParagraph
        text="Highlight the keywords that matter and let them pop in a crisp pixel typeface."
        pixelWords={["keywords", "pixel"]}
        font="grid"
        className="text-xl leading-relaxed text-muted-foreground"
        pixelWordClassName="text-foreground"
      />

      <PixelParagraph
        text="Mix a retro circle grid with modern copy for playful, on-brand emphasis."
        pixelWords={["retro", "circle"]}
        font="circle"
        className="text-xl leading-relaxed text-muted-foreground"
        pixelWordClassName="text-foreground"
      />

      <PixelParagraph
        text="Triangle and line variants give every word its own distinct texture."
        pixelWords={["Triangle", "line"]}
        font="triangle"
        className="text-xl leading-relaxed text-muted-foreground"
        pixelWordClassName="text-foreground"
      />
    </div>
  );
}