Prompt composer

Send a message and watch it travel.

Your text breaks into particles that arc into the chat and rebuild as your message. Placeholders cycle through ideas, and a light runs around the field while the reply is written.

Hi. Ask me to plan a post, make a photo or explain your numbers.

Use it

<link rel="stylesheet" href="vanish.css">
<div id="thread"></div>
<textarea id="prompt"></textarea>

<script type="module">
  import Vanish from './vanish.js';

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

  composer.on('submit', async text => {
    thread.append(Object.assign(document.createElement('p'), { textContent: text }));
    composer.generating(true);
    await askYourModel(text);
    composer.generating(false);
  });
</script>