Mografy Templates · Screens and devices

AI chat stream

A prompt types into the glass pill, the pill rises into a chat window as the user message, and the reply streams in with a teal caret.

16:96 sFree · MIT
Also designed for 9:16ai-chat-stream

Add the template

Run this in your Mografy folder. The template, the shared modules and its fonts are copied into the project; files you changed are kept. A folder that is not a project yet becomes one, with a scene that plays the template.

Terminal
mografy add ai-chat-stream-wide projects/my-film

To watch it on its own, point the project's scene to the template: "scene": "scenes/templates/ai-chat-stream-wide.ts"

Use it in a film

Play the template on your film's timeline and override its parameters. Pass backdrop: false to draw an overlay template over your own picture.

scenes/main.ts
import * as aiChatStreamWide from './templates/ai-chat-stream-wide.js'
import { play } from './templates/kit.js'

// inside renderFrame(ctx, time): play it from 2 s, with your own copy
play(ctx, time, 2, aiChatStreamWide, { prompt: "Write a launch post for our new planner" })

Or describe the film to Claude or Codex: the Mografy Skill knows every template and picks the ones that fit.

For your agent Show an AI feature answering. Prompt one line (under ~44 characters), reply 1–3 sentences (under ~190 characters). The chat window is a stand-in: restyle `chat()`; never use a real AI brand name or logo.

Parameters

  • promptstringWrite a launch post for our new planner
  • replystringMeet the planner your team will actually open. Northwind turns scattered tasks into one calm week, so you spend less time planning and more time shipping.
  • themeenum · night | light | neonlight
  • safeGuidebooleanfalse

Timing and layout live in the template file itself: edit them there, then check and review the frames.