A reusable React and Remotion prompt for turning product ideas, screenshots, and brand assets into a polished video.
Most product videos start with the same ingredients: a few screenshots, a logo, a list of features, and a general idea of what the finished piece should feel like. The difficult part is turning those inputs into a clear story with strong pacing, readable copy, consistent visuals, and motion that supports the message instead of distracting from it.
This is the prompt I use as a starting point for that process. It is designed for AI coding tools that can build with React and Remotion, but the thinking behind it is broader than the technology. It forces the work to begin with the audience, the product benefit, and the visual story before getting lost in animation details.
Why a code-first product video?
Traditional product-video workflows can make even a short piece feel like a large production. The concept, script, storyboard, animation, revisions, and final render often live in different tools and depend on different people. A code-first approach brings those pieces into one structured project.
With React and Remotion, scenes, timing, transitions, colours, copy, and assets can all be treated as editable parts of the same system. That makes the video easier to review and revise. A headline can be shortened without rebuilding the sequence. A screenshot can be swapped without starting again. A horizontal version can also provide the foundation for a vertical cut.
The real advantage is not automation for its own sake. It is control. Instead of asking an AI tool to "make a product video" and hoping for a useful result, this prompt gives it a creative brief, a narrative structure, motion principles, implementation expectations, and a review checklist.
What to prepare before you use it
Good output starts with a focused set of inputs. You do not need a finished storyboard, but you should be able to explain the product in plain language and identify the one outcome the viewer should remember.
- Product summary: Describe what the product does in one or two sentences.
- Audience: Name the specific buyer, user, or stakeholder the video is meant to reach.
- Main benefit: Choose the clearest problem solved or outcome created.
- Feature priorities: Select two or three features that support that benefit.
- Approved assets: Gather logos, screenshots, recordings, colours, fonts, and any required brand guidance.
- Closing action: Decide what the viewer should think, feel, or do at the end.
How to use the prompt
Start by replacing every bracketed field in the Project Details section. Be specific, especially when describing the audience and main benefit. "Teams that need better reporting" gives the tool more direction than "business users," and a concrete outcome is more useful than a broad claim such as "work smarter."
Then ask the tool to produce the storyboard before it writes the full animation. Review the order of the scenes, the on-screen copy, and the time allocated to each idea. This is the least expensive point to fix a weak opening, remove repetition, or simplify an overloaded feature moment.
Once the structure works, let the tool build the first complete version. Review it as a viewer, not just as the person who knows the product. Can you understand the message without pausing? Is the interface readable? Does every scene have a clear purpose? If not, revise the story and pacing before adding more visual effects.
What makes the result better
The strongest product videos are rarely the ones with the most movement. They are the ones that make a single idea easy to understand. Keep the copy short, give important frames time to settle, and use motion to direct attention rather than decorate every moment.
It also helps to treat the first render as a working draft. Check the opening, product accuracy, line breaks, screenshot legibility, transitions, and closing frame. Small improvements to timing and clarity usually create more value than adding another animation technique.
Copy the prompt
You are a creative developer and motion designer. Build a polished product video entirely with code, using React and Remotion. Treat this as a small motion design project. Think about composition, typography, pacing, and visual storytelling alongside the implementation. PROJECT DETAILS Product name: [PRODUCT NAME] What it does: [ONE- OR TWO-SENTENCE PRODUCT DESCRIPTION] Target audience: [WHO THE PRODUCT IS FOR] Main benefit: [THE PRIMARY OUTCOME OR PROBLEM SOLVED] Features to highlight: [FEATURE 1], [FEATURE 2], [FEATURE 3] Available assets: [LOGOS, SCREENSHOTS, PRODUCT RECORDINGS, BRAND COLOURS, FONTS, OR OTHER APPROVED VISUALS] Closing message: [FINAL PRODUCT STATEMENT OR CALL TO ACTION] Duration: [TARGET LENGTH IN SECONDS] Aspect ratio: [16:9 OR 9:16] CREATIVE DIRECTION Create a clean, contemporary product showcase with a clear visual identity. The product should be the main focus, supported by concise copy and purposeful animation. Use a restrained color palette, readable typography, generous spacing, and simple backgrounds. Introduce depth through subtle shadows, layering, and changes in scale. A phone or browser mockup can serve as the central visual element. Frame it carefully and vary the composition across scenes: a full product view, a closer look at a useful detail, and a wider composition with supporting text. Keep the visual language consistent. Transitions, text treatments, colors, and device presentation should feel like parts of the same piece. STORY AND STRUCTURE Before writing the animation, propose a short storyboard. For each scene, describe: - What the viewer sees. - What the viewer should understand. - The on-screen copy. - The approximate duration. - How it connects to the next scene. Use this general narrative as a starting point: 1. Hook Open with a short statement about the benefit or problem. Make the first composition immediately understandable. 2. Product introduction Reveal the product in a clean device or browser presentation. Establish what it is without overwhelming the viewer with information. 3. Feature moments Show two or three useful aspects of the product. Give each one its own moment and connect it to a concrete user benefit. 4. Closing Finish with a simple product statement, logo, or call to action. Let the final frame settle long enough to read. Adapt this structure to the supplied content. Avoid adding scenes simply to fill the duration. PRODUCT PRESENTATION Use supplied screenshots and visual assets whenever possible. Preserve their proportions and keep important interface content readable. When showing a feature, direct attention to the relevant part of the interface through framing, a close-up, or a restrained highlight. You can use simplified interface elements when assets are missing. Keep them visually plausible and clearly connected to the product description. Do not invent functionality, customer claims, or performance metrics. Avoid filling every frame with small UI details. A well-chosen section of the interface often communicates more clearly than a full screen. MOTION DIRECTION Use motion to introduce information, establish hierarchy, and connect scenes. Combine a few simple techniques thoughtfully: - Smooth entrances and exits. - Gentle changes in position and scale. - Text reveals with clear reading order. - Transitions that carry a visual element into the next scene. - Occasional close-ups for important product details. Vary the rhythm. Some moments can move quickly, while others should pause so the viewer can absorb the message. Keep related elements coordinated. If text introduces a feature, the corresponding product visual should appear at a natural moment. Avoid constant movement, excessive rotation, and effects that compete with the content. Let important compositions settle. TYPOGRAPHY AND COPY Write short, specific lines of copy. Prefer a clear benefit over a vague marketing claim. Use a strong hierarchy between headlines, supporting text, and small labels. Maintain comfortable margins and check line breaks carefully. Limit how much the viewer needs to read at once. If a sentence requires a long pause, shorten it or split the idea across scenes. Choose type sizes for the intended viewing format, including playback on a small screen. IMPLEMENTATION Organize the video into reusable React components and distinct scenes. Keep the scene timing easy to adjust. Separate editable content, such as copy, colors, and asset references, from the main presentation logic where practical. Build the overall sequence first, then refine individual moments. Make sure the video works as a complete story before spending too much time on decorative details. Use an approach that is straightforward to preview, revise, and render. Choose your own implementation details based on the creative direction. REVIEW AND REFINEMENT Preview the full video and inspect representative frames. Check that: - The opening communicates quickly. - Each scene has one clear focal point. - Text is readable and stays on screen long enough. - Product visuals remain sharp and correctly proportioned. - Transitions feel connected. - Nothing is clipped or unintentionally overlapping. - The ending feels deliberate. Refine any scene that feels rushed, empty, repetitive, or visually crowded. Pay particular attention to the balance between text and product imagery. DELIVERABLES Provide: - A brief storyboard. - The working React/Remotion project. - A rendered MP4. - A short note explaining how to change the copy, assets, colors, and duration. If some project details are missing, make reasonable creative assumptions and state them briefly. Use references as guidance for quality and mood. Develop your own composition and animation choices rather than reproducing a reference exactly.