Vanish Input

vanish x placeholder

Input with animated vanishing placeholder text. From Aceternity.

inputvanishplaceholderaceternity

Code

input-vanish.tsx

"use client";
import { useEffect, useState } from "react";

/* The key={i} remounts the input so the fade keyframe replays on each swap. */
export function VanishInput({ placeholders, interval = 2600 }: { placeholders: string[]; interval?: number }) {
  const [i, setI] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setI((p) => (p + 1) % placeholders.length), interval);
    return () => clearInterval(t);
  }, [placeholders.length, interval]);
  return (
    <input key={i} placeholder={placeholders[i]}
      className="w-full rounded-xl border border-border bg-surface px-4 py-3 text-sm outline-none animate-[fadeIn_0.4s_ease-out] focus:border-brand/60" />
  );
}

globals.css: @keyframes fadeIn { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: translateY(0) } }

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Vanish Input component and wire it to my accent.”