draft agent

pro

Get the prompt, project and Figma file with monthly ($29 a month) or yearly ($249 a year). Plus tax where it applies.

An AI writing app on a 1080 × 1080 stage that scales to the window: a dark glass window over painted mountains, with a chat on the left and a research paper set in Newsreader on the right (the project "Rt & Social Signals", the paper "Social Signals as an Early Proxy for Physical Distancing"). A ~23.6-second story loops. A scripted pointer drags a selection down the Methods paragraph, line by line; an "Ask agent ⌘L" pop-up appears, is clicked and turns into a violet context chip that flies into the composer. "Tighten this, add sample size" is typed and sent, and the message lands in the chat. The agent's steps run with spinners while a dashed connector ties the active step to the paragraph: "Reading selection" with a scan beam running down each line, "Cross-checking sources" with chips popping in (EpiEstim, Trends export, Mobility), then "Drafting edit in document". The edit is written live: each old phrase is struck through in red, each new one typed in green, with a violet "Agent" cursor that blinks as it goes. An edit card shows +24 −17 and a summary; the pointer clicks Accept, the button turns green, the struck text fades out, the new text glows once and the document saves ("Saved · just now"). A click or tap anywhere stops the demo where it is and hands the page to the real pointer. Built as React-rendered HTML moved by damped springs, tweens and waits, with the wallpaper painted once on a canvas; the words, the diff and the timing are a few constants to change. window.__SP sets the speed, and reduced motion shows the finished edit still.

what you get

prompt
Paste it into Claude, Codex, Kimi or Cursor to rebuild this template. Tested: we rebuild every template from its prompt before it goes live.
project
The Vite + React source code as a .zip, ready to run.
figma file
The editable design as a .fig file to import into Figma.

what's inside

  • ai agent
  • chat
  • document editor
  • live diff
  • text selection
  • context chip
  • typing animation
  • agent steps
  • scan beam
  • accept changes
  • springs
  • cursor animation
  • glass window
  • film grain
  • canvas 2d
  • autoplay
  • frame-exact recorder

stack

  • react
  • vite
  • typescript
  • canvas

fonts

Geist, Geist Mono, Newsreader

Free fonts, linked in the prompt.

colors

  • #0E1114
  • #16171A
  • #8E7CFF
  • #2FBF71
  • #E5484D
  • #FFFFFF
  • #141414
  • #6E5A43

license

With monthly or yearly: personal and commercial work, client projects included. Don't resell or share the template, prompt or files.

read the license