Klyv Particle Field

Component 5

About

A drifting constellation on a canvas, linked and pointer-reactive. Canvas, because the link pass is quadratic over positions.

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

Code

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

Usage.tsx

import { ParticleField } from "@/components/ui/klyv-particle-field";
import { Text } from "@/components/ui/klyv-particle-field-utils/components-Text-Text";

function ParticleExample() {
  return (
    <div className="relative min-h-[220px] w-full overflow-hidden rounded-[var(--radius-card)] border border-line bg-app">
      <ParticleField density={7} pull={120} />
      <div className="relative flex min-h-[220px] flex-col items-center justify-center gap-2 p-8 text-center">
        <Text size="subtitle">Move your pointer across the panel</Text>
        <Text size="caption" tone="soft" leading="normal" className="max-w-[44ch]">
          The dots drift on their own and lean towards the pointer inside a 120px radius. Links fade
          with distance, so the mesh thickens where the dots gather.
        </Text>
      </div>
    </div>
  )
}

export default function Demo(){return <div data-component-demo className="flex min-h-screen w-full items-center justify-center bg-canvas p-8 text-ink"><div className="w-full max-w-[620px]"><ParticleExample /></div></div>}