Prompt Template Fill
Picking a starter writes its outline into the composer with the blanks lighting up.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Prompt Template Fill
*
* Choosing a starter writes its outline into the composer piece by
* piece, with the blanks that still need an answer lighting up as theyAbout this pattern
The bridge between a starter chip and a usable prompt. Choosing a template writes its outline into the composer piece by piece — literal wording and blanks alike — with each blank picking up a tinted panel behind it as it lands, so the reader can see both what was inserted for them and what still needs an answer. A caret rides the write head and stops when there is nothing left to add. The words fade and rise a couple of pixels; they never scale, because a template that types itself by growing each word is unreadable while it writes.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
Choosing an action writes a phrased instruction into the input for you.
Related patterns
- Prompt Submit LiftThe composed prompt lifts out of the field and docks as a sent message while the thread makes room.
- Context Pill AttachA dragged file is caught by the prompt bar and lands inside it as a context pill.
- Suggestion Chips CascadeSuggested next actions land in quick succession under the answer, one chip after another.