"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { ArrowUp, Sparkles } from "lucide-react"; import { cn } from "@/lib/utils"; /** * Deterministic pseudo-random in [0, 1), seeded so nothing that runs during * render/SSR depends on Math.random (no hydration mismatch). Only ever called * inside event handlers / effects below. */ function seed(i: number): number { const x = Math.sin(i * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x); } interface Ember { ox: number; oy: number; x: number; y: number; vx: number; vy: number; r: number; g: number; b: number; size: number; life: number; decay: number; baseAlpha: number; } export interface VanishingInputProps { placeholders?: string[]; onSubmit?: (value: string) => void; rotateInterval?: number; className?: string; } export function VanishingInput({ placeholders = ["Type something…"], onSubmit, rotateInterval = 2600, className, }: VanishingInputProps) { const containerRef = useRef(null); const inputRef = useRef(null); const canvasRef = useRef(null); const embersRef = useRef([]); const rafRef = useRef(0); const animatingRef = useRef(false); const [value, setValue] = useState(""); const [index, setIndex] = useState(0); const [focused, setFocused] = useState(false); const [vanishing, setVanishing] = useState(false); // Rotate the placeholder while the field is empty, keeps it alive at rest. useEffect(() => { if (value.length > 0 || placeholders.length <= 1) return; const id = window.setInterval(() => { setIndex((p) => (p + 1) % placeholders.length); }, rotateInterval); return () => window.clearInterval(id); }, [value.length, placeholders.length, rotateInterval]); useEffect(() => () => cancelAnimationFrame(rafRef.current), []); const runVanish = useCallback( (ctx: CanvasRenderingContext2D, w: number, h: number) => { let sweep = 0; let frames = 0; const sweepSpeed = Math.max(9, Math.round(w / 34)); const tick = () => { frames += 1; sweep += sweepSpeed; ctx.clearRect(0, 0, w, h); ctx.globalCompositeOperation = "lighter"; const embers = embersRef.current; let alive = 0; for (let i = 0; i < embers.length; i++) { const p = embers[i]; if (p.ox <= sweep) { p.x += p.vx; p.y += p.vy; p.vy += 0.02; p.vx *= 0.985; p.x += Math.sin((frames + p.ox) * 0.08) * 0.18; p.life -= p.decay; } if (p.life <= 0) continue; alive += 1; const a = p.life * p.baseAlpha; ctx.globalAlpha = a > 1 ? 1 : a; ctx.fillStyle = `rgb(${p.r},${p.g},${p.b})`; ctx.beginPath(); ctx.arc(p.x, p.y, p.size * p.life, 0, Math.PI * 2); ctx.fill(); } ctx.globalAlpha = 1; ctx.globalCompositeOperation = "source-over"; if (alive > 0 && frames < 260) { rafRef.current = requestAnimationFrame(tick); } else { ctx.clearRect(0, 0, w, h); animatingRef.current = false; setVanishing(false); } }; cancelAnimationFrame(rafRef.current); rafRef.current = requestAnimationFrame(tick); }, [] ); const vanish = useCallback(() => { const container = containerRef.current; const input = inputRef.current; const canvas = canvasRef.current; const text = value.trim(); if (!container || !input || !canvas || text.length === 0) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const cRect = container.getBoundingClientRect(); const iRect = input.getBoundingClientRect(); const w = Math.max(1, Math.round(cRect.width)); const h = Math.max(1, Math.round(cRect.height)); canvas.width = w; canvas.height = h; const cs = window.getComputedStyle(input); ctx.clearRect(0, 0, w, h); ctx.font = `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`; ctx.textBaseline = "middle"; const grad = ctx.createLinearGradient(0, 0, w, 0); grad.addColorStop(0, "#cdc6ff"); grad.addColorStop(0.5, "#7c6cff"); grad.addColorStop(1, "#5b8cff"); ctx.fillStyle = grad; const padL = parseFloat(cs.paddingLeft || "0"); const textX = iRect.left - cRect.left + padL; const textY = iRect.top - cRect.top + iRect.height / 2; ctx.fillText(value, textX, textY); const data = ctx.getImageData(0, 0, w, h).data; const embers: Ember[] = []; const step = 3; let n = 0; for (let y = 0; y < h; y += step) { for (let x = 0; x < w; x += step) { const idx = (y * w + x) * 4; const alpha = data[idx + 3]; if (alpha > 90) { const s1 = seed(n * 2 + 1); const s2 = seed(n * 2 + 3); const s3 = seed(n + 7); embers.push({ ox: x, oy: y, x, y, vx: (s1 - 0.35) * 1.4 + 0.25, vy: -(0.5 + s2 * 1.35), r: data[idx], g: data[idx + 1], b: data[idx + 2], size: 1 + s3 * 1.7, life: 1, decay: 0.018 + s1 * 0.022, baseAlpha: alpha / 255, }); n += 1; } } } if (embers.length === 0) return; embersRef.current = embers; animatingRef.current = true; setVanishing(true); onSubmit?.(value); setValue(""); runVanish(ctx, w, h); }, [value, onSubmit, runVanish]); const handleSubmit = useCallback( (e: React.FormEvent) => { e.preventDefault(); if (animatingRef.current || value.trim().length === 0) return; vanish(); }, [value, vanish] ); const empty = value.length === 0; const disabled = value.trim().length === 0; return (

{/* ember canvas, sits above the field, headroom above lets sparks rise out */}

); } export default function Demo() { const [last, setLast] = useState(null); return (

What should we build?

Type a prompt, hit enter, watch it scatter into light.

{last ? ( Sent · “{last}” ) : ( Press Enter to send )}

); }

Vanishing Input

What should we build?