Particle Form

Forms

About

A real HTML waitlist form drawn into WebGL: it ripples like cloth, tilts to your pointer, and on submit bursts into thousands of particles that swirl back as the success state. Uses Chrome 157's HTML-in-Canvas; other browsers get the same form as plain HTML. More like this at kit.neebarp.com

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

Code

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

Usage.tsx

"use client";
import ParticleForm from "@/components/ui/particle-form";

export default function ParticleFormDemo() {
  return (
    <div style={{ position: "relative", width: "100%", height: 560, overflow: "hidden", borderRadius: 16 }}>
      <ParticleForm
        palette="sunset"
        eyebrow="Early access · Batch 07"
        title="Get in"
        titleEm="early."
        body="Join the waitlist. We send one email when your seat is ready."
        label="Work email"
        placeholder="you@company.com"
        cta="Join the waitlist →"
        successTitle="You're on the list. ✓"
        successNote="Seat 401 of 412 is yours. We'll write when it opens."
        footLeft="412 seats left"
        footRight="No spam, ever"
        demoEmail="hello@example.com"
      />
    </div>
  );
}