Particle Text

Text 8

About

Particles sampled from real glyph pixels gather into a readable phrase and repel the local pointer.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Particle Text to your project and fits it to your theme.

Code

How Particle Text is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { ParticleText } from "@/components/ui/particle-text";

/** The demo brings its own 000h canvas, so it looks right on any host page (the component package sets nothing global). */
function DemoSurface({ children }: { children: import("react").ReactNode }) {
  return <div className="grid min-h-screen w-full place-items-center bg-[var(--v-canvas)] p-4 font-[family-name:var(--font-text)] text-[length:var(--fs-body)] leading-[var(--lh-body)] text-[var(--v-text)]">{children}</div>;
}

export default function Demo() {
  const [paused, setPaused] = React.useState(false);
  const [replay, setReplay] = React.useState(0);
  return (
    <DemoSurface>
      <div className="mx-auto grid w-full max-w-3xl gap-4 p-8">
        <ParticleText text="Made of ideas" density={5} particleSize={1.7} paused={paused} replayKey={replay} />
        <div className="flex flex-wrap items-center gap-2">
          <button
            type="button"
            aria-pressed={paused}
            onClick={() => setPaused((value) => !value)}
            className="rounded-full border border-[var(--v-border)] bg-[var(--v-paper)] px-4 py-2 text-sm font-medium text-[var(--v-text)] transition-colors hover:bg-[var(--v-beige)]"
          >
            {paused ? "Resume motion" : "Pause motion"}
          </button>
          <button
            type="button"
            onClick={() => {
              setReplay((value) => value + 1);
              setPaused(false);
            }}
            className="rounded-full px-4 py-2 text-sm font-medium text-[var(--v-text)] transition-colors hover:bg-[var(--v-beige)]"
          >
            Replay
          </button>
          <span className="text-sm text-[var(--v-text-2)]">Move over the letters; particles return to their word.</span>
        </div>
      </div>
    </DemoSurface>
  );
}