"use client"; import React, { useState, useRef, useId, useMemo } from "react"; import { motion, AnimatePresence, LayoutGroup } from "framer-motion"; import { Send, Check, Loader2, User, Mail } from "lucide-react"; // --- TYPES & INTERFACES --- export type FormAccentColor = "orange" | "indigo" | "emerald"; export type FormStatus = "idle" | "loading" | "success" | "error"; type Particle = { id: number; x: number; y: number; color: string; size: number; rotate: number; }; interface FormData { name: string; email: string; } export interface ParticleSuccessFormProps extends Omit, "onSubmit"> { /** Async function to handle form submission. Must return successfully to trigger particles. */ onSubmitAction?: (data: FormData) => Promise; /** UI Styles from the Uixtra System */ color?: FormAccentColor; /** React 19 native ref support */ ref?: React.Ref; } // ============================================================= // CONFETTI PHYSICS ENGINE // ============================================================= const generateParticles = (count: number, colors: string[]): Particle[] => { return Array.from({ length: count }).map((_, i) => { const angle = Math.random() * Math.PI * 2; const velocity = 50 + Math.random() * 200; return { id: i, x: Math.cos(angle) * velocity, y: Math.sin(angle) * velocity - 100, color: colors[Math.floor(Math.random() * colors.length)], size: 4 + Math.random() * 10, rotate: Math.random() * 720, }; }); }; /** * Particle Success Form (v3.0 Infinity) * An immersive form that triggers a 3D-simulated particle explosion * (confetti) from the submit button upon successful submission. */ export const ParticleSuccessForm = ({ onSubmitAction, color = "emerald", className, ref, ...props }: ParticleSuccessFormProps) => { const compId = useId(); const buttonRef = useRef(null); const [form, setForm] = useState({ name: "", email: "" }); const [status, setStatus] = useState("idle"); const [particles, setParticles] = useState([]); // Safe Color Mapping for Tailwind JIT const themeMaps: Record = { orange: { input: "focus-within:border-orange-500", text: "peer-focus:text-orange-500", btn: "bg-orange-500", btnHover: "hover:bg-orange-400", particles: ["#f97316", "#fdba74", "#fff", "#171717"], }, indigo: { input: "focus-within:border-indigo-500", text: "peer-focus:text-indigo-500", btn: "bg-indigo-500", btnHover: "hover:bg-indigo-400", particles: ["#6366f1", "#a5b4fc", "#fff", "#171717"], }, emerald: { input: "focus-within:border-emerald-500", text: "peer-focus:text-emerald-500", btn: "bg-emerald-500", btnHover: "hover:bg-emerald-400", particles: ["#10b981", "#6ee7b7", "#fff", "#171717"], } }; const current = themeMaps[color]; const particleColors = useMemo(() => { return [current.particles[0], current.particles[1], "#a3a3a3", "#ffffff", "#e5e5e5"]; }, [current]); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (status !== "idle" || !form.name || !form.email) return; try { setStatus("loading"); setParticles([]); if (onSubmitAction) { await onSubmitAction(form); } else { await new Promise(resolve => setTimeout(resolve, 2000)); } setParticles(generateParticles(60, particleColors)); setStatus("success"); setForm({ name: "", email: "" }); setTimeout(() => { setStatus("idle"); setParticles([]); }, 3500); } catch (error) { console.error("Submission failed:", error); setStatus("error"); setTimeout(() => setStatus("idle"), 2000); } }; const handleInputChange = (e: React.ChangeEvent) => { const { id, value } = e.target; const key = id.replace(`${compId}-`, "") as keyof FormData; setForm(prev => ({ ...prev, [key]: value })); }; const inputFields = [ { id: "name", label: "Full Name", type: "text", icon: User }, { id: "email", label: "Email Address", type: "email", icon: Mail }, ]; return (

Sign Up

Join us today. Explosion guaranteed on success.

{inputFields.map(({ id, label, type, icon: Icon }) => { const fieldId = `${compId}-${id}`; const isFilled = form[id as keyof FormData].length > 0; return (

{label}

); })}

{status === "success" && particles.length > 0 && (

{particles.map((particle) => ( 0.5 ? "50%" : "2px", }} /> ))}

)} {status === "idle" && ( Create Account )} {status === "loading" && ( )} {status === "success" && ( Perfect! )} {status === "error" && ( Failed )}

); }; export default function ParticleSuccessFormDemo() { const handleOnSubmit = async (data: FormData) => { console.log("Form Submitted Successfully:", data); await new Promise(resolve => setTimeout(resolve, 2500)); }; return (

); }