Developer relations portfolio showreel motion video made with Claude Opus and Remotion: Claude Opus launch video

Originally posted by @wani_shola on X · posted Sep 26, 2026 · curated by MotionHunt, updated Oct 16, 2026

In short

A showreel-style motion graphics video for a developer relations engineer's portfolio, built with Remotion from captures of the author's real website pages and its chat answers. The author's prompt targets 1920×1080 and about 90 to 100 seconds, with music at about 120 BPM.

Prompt

From the author's post

Make a showreel-style motion graphics video for my portfolio website, https://t.co/Y2MJ2DHedD, using Remotion. It should show what I do as a developer relations engineer, like a showreel for my résumé.

- Use as much of the real website as possible: capture the pages and sections in a browser (home, Ask, package pages, Hire, mobile view, dark mode) and animate them inside browser and phone frames.
- Show the site's chat answering real questions about my work, with the questions and answers large and bold. Use only facts and numbers that are on the site.
- Follow premium brand rules: three colours and the site's own fonts, one idea per shot, key objects centred, space to breathe, eased motion only, smooth transitions instead of hard cuts, and a rhythm that speeds up and slows down with the story.
- Add music at about 120 BPM (elite, kinetic, sophisticated) and cut every scene on the beat. No extra sound effects.
- 1920×1080, about 90 to 100 seconds, ending on the website and my contact email.

How it was made

The author says Opus 5.5 made the video from their portfolio website, using Remotion, and shares the prompt used. The prompt asks for website pages captured in a browser and animated in browser and phone frames, with chat Q&A text, music at about 120 BPM, and no extra sound effects. The author did not share render time, cost, or further production details.

Tools: Claude Opus, Remotion

Shot breakdown

Not timedPlanned: home page of the real website shown in a browser frame, animated.
Not timedPlanned: the site's Ask chat, with real questions and answers set large and bold.
Not timedPlanned: package pages from the site, animated inside browser frames.
Not timedPlanned: the Hire section of the site.
Not timedPlanned: mobile view of the site inside a phone frame.
Not timedPlanned: dark mode version of the site.
Not timedPlanned: closing shot on the website URL and contact email.

Breakdown written by AI from the prompt and post, reviewed by MotionHunt.

Why it works

Uses the real website captures instead of mock screens, as the prompt asks.
Keeps one idea per shot with key objects centred and space to breathe, per the brief.
Uses eased motion and smooth transitions instead of hard cuts.
Cuts each scene on the beat of ~120 BPM music, with the rhythm speeding up and slowing down with the story.

Remix it for your product

Make a showreel-style motion graphics video for my [PRODUCT] website using Remotion. It should show what I do as [ROLE], like a showreel for my résumé.

- Use as much of the real website as possible: capture the pages and sections in a browser (home, [FEATURES]) and animate them inside browser and phone frames.
- Show the site's chat answering real questions about my work, with the questions and answers large and bold. Use only facts and numbers that are on the site.
- Follow premium brand rules: three colours and the site's own fonts, one idea per shot, key objects centred, space to breathe, eased motion only, smooth transitions instead of hard cuts, and a rhythm that speeds up and slows down with the story.
- Add music at about 120 BPM and cut every scene on the beat. No extra sound effects.
- 1920×1080, about 90 to 100 seconds, ending on the website and my contact email.

Fill in your product, set the direction and add your logo. Copy the brief or download a ZIP for Claude Code.

Customize this prompt