Vanish Input

`<pura-vanish-input>` is the chat-composer vanish input: when the user submits, the typed text is rasterized onto a Canvas 2D overlay and dissolved into particles that fly out of the field before it clears, the signature microinteraction of AI chat and search composers (inspired by Aceternity UI's Placeholders And Vanish Input). `placeholders` accepts a pipe-separated list that rotates while the field is empty; `duration` controls the dissolve time. The effect is pure progressive enhancement: SSR and pre-JS render a fully usable pill input with a submit arrow, and under reduced motion the field simply clears with no particles and no placeholder rotation. Listen for `submit` (detail `{ value }`) to handle the entered text, and `vanish` when the effect finishes. Each instance registers in `window.__puraVanishInputs` by `data-pura-id` with `{ value, submit }`, and mirrors runtime state in `data-pura-vanish-state` and `data-pura-vanish-last`.

Preview

<!-- AI search composer with rotating placeholders -->
<pura-vanish-input
  label="Search"
  placeholders="Search products...|Try: running shoes|Try: waterproof jacket"
  interval="2500"
></pura-vanish-input>

<script>
  document.querySelector("pura-vanish-input")
    .addEventListener("submit", (e) => console.log("query:", e.detail.value));
</script>

<!-- static placeholder, slower dissolve, themed -->
<pura-vanish-input
  label="Message"
  placeholder="Send a message"
  duration="1200"
  style="--pura-vanish-input-radius: 12px; --pura-vanish-input-height: 3.25rem;"
></pura-vanish-input>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/vanish-input.js"></script>

import "./pura/lib/vanish-input.js";