Vanish

Demo

What it does

1. 01

   Particles are sampled from the real text, wrapped exactly as the textarea wraps it

2. 02

   Each particle lands at its place in the new message, even if the thread moves mid-flight

3. 03

   Cycling placeholders, auto-grow, and a Stop button while generating

4. 04

   IME-safe Enter, a capped particle count and a fade for reduced motion

Use it

git clone https://github.com/YagnikBarasiya23/vanish-prompt-input.git
# copy vanish.js and vanish.css into your project

import Vanish from './vanish.js';

const composer = new Vanish(document.querySelector('textarea'), {
  placeholders: ['Plan a post for Saturday', 'Why did reach drop?'],
  target: () => thread.lastElementChild,
});

composer.on('submit', async text => {
  addMessage(text);
  composer.generating(true);
  await askYourModel(text);
  composer.generating(false);
});

Every option, the technique behind the motion and the accessibility notes are in the README on GitHub

• Flutter

  09 · Arc gauge

  Arcline

  Progress that springs, not ticks.

  • Single Dart file
  • No dependencies
  • Free · MIT
• Flutter

  10 · Ruler picker

  Notch

  Scroll to a number, feel every step.

  • Single Dart file
  • No dependencies
  • Free · MIT