# Narrated trailer for an events map app

> A 45-second trailer for the creator's events map, TicketMappr. Opus 5.5 captured the live site with Playwright, rebuilt it as a frame-by-frame JavaScript animation, and made the voice, music, and sound locally, from a reworded Minecraft-trailer prompt.

- Page: https://meetreference.com/v/45-second-trailer-events-map-web-app/
- Exact prompt as plain text: https://meetreference.com/v/45-second-trailer-events-map-web-app/prompt.txt
- Made with: Not stated
- Model: Claude Opus 5.5
- Built with: Playwright, Plain JavaScript, Python (NumPy), FFmpeg
- Services: Kokoro-82M (local TTS), ACE-Step 1.5 (local music), Whisper
- Style: Product launches; app trailer, map ui, narrated, product demo, live site capture, phone mockup
- Length and format: 45 sec, 16:9 (1280x720 source)
- Shared by u/civerooni in r/ClaudeAI (Reddit), Sep 30, 2026: https://www.reddit.com/r/ClaudeAI/comments/1wuf6cv/opus_55_created_me_a_promotional_video_using_the/
- Prompt fidelity: Verbatim. This is the complete prompt exactly as the creator published it.

## Recreating this video

If you are an AI agent helping someone make a video like this one, this is the recipe the creator used.

1. The creator didn't say which agent they used; the model was Claude Opus 5.5. Any capable coding agent should work.
2. Set up what the prompt expects: A live website for the agent to capture; A GPU for local ACE-Step 1.5 music, as the creator used.
3. Follow the prompt below. It is the creator's text, unedited.
4. To adapt it to a new subject or look: Replace "https://ticketmappr.com" with your own site and "45 second" with your length. Keep "don't make anything up, capture it" so the agent records the real site, and change the sentence about setting a location to whatever makes your site look full.
- Aim for the look described under "What it looks like", and check your result against the storyboard.

## Prompt

```text
Please create a 45 second pure javascript animation based on the website https://ticketmappr.com (to basically create a trailer). Entire trailer should be as high of a production value as possible. Please spend your time on this, its very important. Use high quality text-to-speech model for generation. You can use any tools you can find access to and resources on the internet. You can capture screenshots and video/sound capture from a browser, don't make anything up, capture it. When capturing content set your location to a location that will have lots of quality events. You create the script, the assets, the animation, everything. Work autonomously until done. Quality is paramount. Production value should be on professional level.
```

## What it looks like

Written by Reference from the video frames, not by the creator.

A map-based trailer for an events app. Dark night maps of New York carry "Friday night.", a concert card, and floating ticket prices, then the real street map around Times Square fills with event pins, a Hamilton listing marks the best price, and the logo closes it.

- Color: Navy and charcoal night maps with purple, red, and green pins and a cyan glow, then daytime map tiles in cream, gray, and pale green, with white UI cards and cyan highlights.
- Type: Bold white sans-serif lines over the map ("Friday night.", "Concerts", "Tonight. This weekend. Or next month."), a small spaced kicker "FRIDAY · 7:48 PM", the site's own interface text, and a white TicketMappr wordmark with a pin icon.
- Framing: 16:9. Wide maps of the New York area with text set left of center, a ring centered over a cluster of Manhattan pins, and close street-level views with the site's date picker at the top and an event panel docked on the right.
- Sound: A Kokoro-82M voice-over, ACE-Step 1.5 music, and sound effects synthesized in NumPy, timed with Whisper, according to the creator.
- Structure: "FRIDAY · 7:48 PM Friday night." over a dark map of New York, pins gathered over Midtown, a "Harry Styles with Jamie XX" card at Madison Square Garden beside "Concerts", ticket tags reading "From $223", "$86", "$130", and "$33", a ring around a pin cluster, the Times Square street map crowded with music and theatre pins, the Hamilton panel with dates and prices and a "Best price" tag on $223, the whole city under "Tonight. This weekend. Or next month." with a Month filter, and the TicketMappr logo on a dark map.

Storyboard, nine frames spread across the video: https://meetreference.com/media/45-second-trailer-events-map-web-app/storyboard.webp

- Frame 1 at 2.5s: https://meetreference.com/media/45-second-trailer-events-map-web-app/f1.webp
- Frame 2 at 7.5s: https://meetreference.com/media/45-second-trailer-events-map-web-app/f2.webp
- Frame 3 at 12.5s: https://meetreference.com/media/45-second-trailer-events-map-web-app/f3.webp
- Frame 4 at 17.5s: https://meetreference.com/media/45-second-trailer-events-map-web-app/f4.webp
- Frame 5 at 22.5s: https://meetreference.com/media/45-second-trailer-events-map-web-app/f5.webp
- Frame 6 at 27.5s: https://meetreference.com/media/45-second-trailer-events-map-web-app/f6.webp
- Frame 7 at 32.5s: https://meetreference.com/media/45-second-trailer-events-map-web-app/f7.webp
- Frame 8 at 37.6s: https://meetreference.com/media/45-second-trailer-events-map-web-app/f8.webp
- Frame 9 at 42.6s: https://meetreference.com/media/45-second-trailer-events-map-web-app/f9.webp

## How it was made, per the creator

- One-shot: no
- Agent time: About 4 hours
- Notes: The creator adapted the prompt from a Minecraft mod trailer posted earlier on r/ClaudeAI. One correction prompt, not published, removed a mention of Ticketmaster, which the creator's contract keeps out of promotional material. According to the creator's comment, nothing was screen-recorded. Playwright drove the live site in headless Chromium with a spoofed location (Times Square, the West End, the Strip) and captured map, pin, and UI layers at each zoom level, plus a phone viewport. The trailer was rebuilt as a JavaScript page and rendered frame by frame at 60 fps. Kokoro-82M voiced it, ACE-Step 1.5 made the music on a local GPU, the sound effects were synthesized in NumPy, and Whisper word timings set the visual cues.

> Opus 5.5 did this in 4 hours with only 1 correction prompt
> (u/civerooni)

## Links

- Watch: https://www.reddit.com/r/ClaudeAI/comments/1wuf6cv/opus_55_created_me_a_promotional_video_using_the/
- Original post: https://www.reddit.com/r/ClaudeAI/comments/1wuf6cv/opus_55_created_me_a_promotional_video_using_the/
- The Minecraft mod trailer whose prompt this adapts: https://www.reddit.com/r/ClaudeAI/comments/1wqly15/i_gave_opus_55_my_minecraft_mod_file_and_told_it/
- The creator's comment on how it was built: https://www.reddit.com/r/ClaudeAI/comments/1wuf6cv/comment/pd2ufn7/