app-demo-videos

Record the real app, then let Glif frame it in a video template. The user's explicit instructions come first, within host safety rules.

1. Plan the video

Agree on a short plan before recording:

• Story: 3 to 6 beats, one feature or action each. Open with the most useful moment; social cuts need a hook in the first 3 seconds.
• Length: 15 to 30 seconds for social and teasers, 30 to 90 for walkthroughs and explainers.
• Template: pick one, or describe your own.
  • Browser tour: the app in a clean browser window on a soft background, zooms on clicks, a caption per beat.
  • Device composite: the real recording placed on a laptop or phone screen in a generated lifestyle scene. Glif tracks the screen if the camera moves.
  • Social ad demo: vertical, 15 seconds, hook first, big captions, music.
  • Narrated walkthrough: voiceover and captions over the browser tour.
  • Explainer: animated slides in a chosen style, narrated, with short clips of the real app. Good for "how it works".
  • Changelog video: release notes or a changelog URL turned into a short narrated update.
  • App Store preview: real app footage only, 15 to 30 seconds, vertical. Check App Store Connect for current specs.
• Outputs: 16:9 master at 1920×1080, plus a 9:16 1080×1920 cut if wanted, a poster image, a 1280×720 YouTube thumbnail or a README GIF.
• Sound: voiceover script, voice (Glif can play samples to choose from, or clone a voice from a sample with the owner's consent), music mood (ducked under the voice), and optional click sounds synced to the cursor.
• Captions: word-by-word highlight, simple lower thirds, or motion-graphic overlays with numbers and charts. Ask Glif for a still frame with a few font options first if the look matters.

Show the plan and wait for a yes. Video uses more credits than images.

2. Record the app

Use the user's own recording or Loom export if they have one. Otherwise:

1. Start the app locally and seed it with demo data. Never record real customer data, emails, tokens or keys.
2. Copy scripts/record-demo.mjs into the project's scratch space. Install Playwright if the project lacks it (npm i -D playwright and npx playwright install chromium), after checking with the user.
3. Replace the example beats with the planned steps. glideClick moves a visible cursor before clicking. smoothScroll scrolls gently. Leave about a second of stillness after each beat.
4. Run it with DEMO_URL=<local url> node record-demo.mjs. Add DEMO_MOBILE=1 for a phone layout. It prints each beat's time; keep those for captions.
5. Check the result, or pull frames with ffmpeg -ss <seconds> -i <file> -frames:v 1 frame.png. Re-record if something glitched.
6. If ffmpeg is installed, convert to MP4: ffmpeg -i in.webm -c:v libx264 -pix_fmt yuv420p -crf 18 demo-raw.mp4.

Keep recordings out of git, such as in recordings/ listed in .gitignore.

3. Send it to Glif

Upload each recording and the logo with upload_file: pass filename and kind: "video" (or "image"), then run the returned command with the real path. Attach the returned fileUrl values.

Call compose_project once with:

• the chosen template, length and every output size
• the beat list with timestamps and exact caption text, in quotes
• the voiceover script, voice choice and music mood
• brand colors (hex), logo and an intro or outro card (app name, one line, URL)
• this rule: "Keep the app footage real. Frame, crop, zoom, speed up and caption it, but never regenerate or restyle the interface. Use a programmatic video template, such as Remotion, so captions and timing are exact."

Share the projectUrl. Follow the run with get_job_status, passing the jobId as job_id. A video can take several minutes; keep working on other things meanwhile. A pending status or timeout is not a reason to start another run.

4. Check and save

Download with curl -fsSL "<media url>" -o <path> into marketing/video/, or public/videos/ if the site embeds it. Check:

• size, length and codec: ffprobe -v error -show_entries stream=codec_name,width,height:format=duration -of csv=p=0 <file>
• caption spelling and timing against the beats
• the interface looks like the real app

Fix problems in the same project by passing its project_id. Don't start a fresh run for a small fix. Useful follow-ups there: a 9:16 cut, 3 alternative 3-second openings to test, or a thumbnail.

To embed on the site:

<video src="/videos/demo.mp4" poster="/videos/demo-poster.jpg" autoplay muted loop playsinline width="1920" height="1080"></video>

For a README, a short MP4 works on GitHub. A GIF should stay under about 10 MB; ask Glif for one or make it locally with ffmpeg.

List the files you made. Posting or uploading to stores is the user's call.