Prompt Send

Installation

$ pnpm dlx shadcn@latest add @snapcn/prompt-send

Component code

The exact file shadcn add copies into your project.

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { PromptSend } from "@/components/snap-cn/prompt-send";

const BriefScene = () => (
  <PromptSend
    text="Add a text reveal, a soft blur transition, and a gradient background"
    placeholder="Describe the scene you want…"
    chips={["Add a text reveal", "Try a blur transition", "Pick a background"]}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="PromptSend"
    component={BriefScene}
    durationInFrames={165}
    fps={30}
    width={1280}
    height={720}
  />
);

Give it a longer sentence, more chips, a shorter field — it all still lands:

<PromptSend
  width={420}
  fieldHeight={52}
  radius={12}
  chips={[]}
  text="A one-line control, and copy long enough that the field has to scroll under its own caret"
/>

The typing is eased, and that is the whole shot

The surprise in the reference recording is that it does not type at a constant rate. It accelerates in and decelerates out: about 17 characters a second over the first word, 33 through the middle, and a visible settle on the last three. Fitting an ease-in-out sine to the character count read off twenty-four frames lands within 0.30 characters rms across all 69 — no constant rate comes close.

That matters beyond the typing, because the camera rides the same curve. Pin a camera to a character count and it lurches once per keystroke; pin it to the continuous curve underneath and it glides, while the caret hops forward and back onto its mark — which is exactly the ±8px wobble the reference shows.

typeStart and typeDuration are the two props. Everything about the rate falls out of them, and any length of copy finishes in the same window.

Two cuts, not two zooms

At 1.975s the view cuts to 2.327× in a single frame, landing with the caret 57% across the frame, and then tracks left with the sentence. At 4.008s it cuts again, out to 1.44×, centred on the send button — which is where the pointer is already heading.

Both are steps. cameraFor returns one of exactly three states and there is a test asserting that no frame of the clip sits anywhere else. Ramping a cut, even across two frames, turns it into a zoom and loses the snap.

Both marks are fractions of the frame, never pixel offsets, so a wider panel or a bigger type size reframes instead of drifting off the edge.

The unroll

The panel does not fade in and it does not scale up from nothing. A 2px hairline appears at its top edge and the box grows downward out of it — top edge pinned, bottom edge travelling its full height in 445ms — while the width goes 0.93 → 1. The writing surface and the chip strip are two heights on the same curve with different durations, which is why the strip surfaces from under the field late instead of being there from the first frame.

Nothing is a constant tuned to one sentence

Every offset above is either a fixed inset — a padding, which should not change when the type does — or a ratio of a font size, which must. layoutFor turns four numbers into the whole geometry, and the defaults are the recording's own measurements, so the shipped shot is pixel-identical to the one that was measured:

• Longer copy scrolls the field under the caret, the way a real single-line input does, instead of running past its edge. It scrolls on the continuous curve, so the line glides while the caret hops.
• More chips wrap, and the panel grows by exactly the rows they needed. The stagger keeps running in label order across them.
• No chips at all and the panel hugs the field.
• A short fieldHeight puts the text and the send button on the same row, and the line yields the button's gutter — but only then, so the reference's tall field still gets its full width.

The pointer belongs to the screen

It is drawn outside the camera. A pointer is a property of the display, not of the thing on it, so it must not grow when the shot pushes in — and the reference's does not. Set cursor={false} to drop it, and the click and the send bloom go with it.

The caret blinks off the last keystroke

Not off a wall clock. A real caret stays solid while you type and starts blinking a fixed interval after you stop, and anchoring it that way is what gets the reference's two measured blinks — dark at 4.267s, back at 4.741s — without a single extra number.

Colour and wording

The proportions and the timing are measured. The colours and the labels are not — the reference is a specific product, and its blue and its copy are its brand. The paint is the shadcn token set, the field takes its surface from the Input primitive's own style context so the two cannot drift, and the backdrop wash is layered from accentColor (which defaults to theme.primary), so it is the installer's accent.

Props