Particles sampled from real glyph pixels gather into a readable phrase and repel the local pointer.
"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>
);
}
Part of 000h — browse the full library on 21st.dev.