[{"data":1,"prerenderedAt":14},["ShallowReactive",2],{"artikel-en-buat-video-motion-graphics-dengan-claude":3},{"slug":4,"lang":5,"title":6,"description":7,"date":8,"updated":9,"topic":10,"product":9,"cover":11,"readMin":12,"html":13},"buat-video-motion-graphics-dengan-claude","en","How to Create Motion Graphics Videos with Claude","Turn your posters and product assets into videos people want to watch. A short guide to how Claude builds motion graphics through code, with a sample brief and a review checklist.","2026-10-11",null,"video","\u002Fimages\u002Fartikel\u002Fbuat-video-motion-graphics-dengan-claude.webp",8,"\u003Cp>You already have a good poster, a logo and product photos. But when it is time to make a video, it feels like starting from scratch. There is a script to write, scenes to arrange, text to animate and music to match. So the same poster goes up again.\u003C\u002Fp>\n\u003Cp>Claude can help turn those assets into motion graphics through code. You describe the message and visual style, then review the animation it builds. This gives you a way to create promotional videos, product explainers and tutorials with control over individual elements.\u003C\u002Fp>\n\u003Cfigure class=\"post-video post-video-9x16\">\n  \u003Cvideo controls playsinline preload=\"metadata\" width=\"1080\" height=\"1920\">\n    \u003Csource src=\"\u002Fvideos\u002Fclaude-motion-tutorial.mp4\" type=\"video\u002Fmp4\">\n    Your browser does not support video. \u003Ca href=\"\u002Fvideos\u002Fclaude-motion-tutorial.mp4\">Download the video\u003C\u002Fa>.\n  \u003C\u002Fvideo>\n  \u003Cfigcaption>A sample video from the Claude Motion Video tutorial (LearnAI.my).\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\u003Cfigure>\n  \u003Cimg src=\"\u002Fimages\u002Fartikel\u002Fbuat-video-motion-graphics-dengan-claude\u002Fen-1.webp\" alt=\"Existing assets arranged as the foundation of a new video\" loading=\"lazy\" decoding=\"async\">\n  \u003Cfigcaption>Your existing assets can become the foundation of a new video. Illustration by ammarrahimi.com.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\u003Cp>A polished result still needs a clear brief and human review. In this article, I walk through how to start, share a sample prompt and explain what to check before you publish.\u003C\u002Fp>\n\u003Ch2>Understand how Claude builds a video\u003C\u002Fh2>\n\u003Cp>In a motion graphics workflow, Claude writes code to animate text, shapes, charts, images and interface elements. That code plays as an animation or is rendered into a video. This makes it possible to request a specific change to a word or to the moment a logo appears.\u003C\u002Fp>\n\u003Cp>The approach is useful when the message needs to be accurate. Think of videos showing product names, prices, instructions or real app screenshots. Realistic people and cinematic scenes still require footage or a suitable video generation tool.\u003C\u002Fp>\n\u003Cp>The Claude Motion Video tutorial by LearnAI.my illustrates workflows using HTML and JavaScript animations, Remotion or HyperFrames. Remotion also provides a Claude Code plugin for creating and editing video projects. These tools need to be available in your working environment; a prompt alone does not necessarily set up the rendering tools.\u003C\u002Fp>\n\u003Ch2>Choose the route that fits your account\u003C\u002Fh2>\n\u003Cp>There are two routes to distinguish. Claude Motion is an animation feature within Claude. According to its official help centre as of 11 October 2026, it is in beta for Team and Enterprise plans and supports MP4 export. Access depends on your plan and organisation settings.\u003C\u002Fp>\n\u003Cp>The other route uses Claude Code with a video project and tools such as Remotion. Remotion documents how to install its plugin through the Code section of the desktop app. This route suits projects where you want to manage local assets, animation code and project versions in an organised way.\u003C\u002Fp>\n\u003Cp>The reference slides use Opus 5.5. Start with a model available in your account and assess the preview. A model name, an effort setting or a high resolution does not guarantee an engaging video. Message clarity, reading time and layout still need to be tested.\u003C\u002Fp>\n\u003Ch2>Start with a short video and one clear goal\u003C\u002Fh2>\n\u003Cp>For your first project, choose one objective. For example, create a 15-second video that invites viewers to explore one product. A short duration makes it easier to review each scene and identify what needs improvement.\u003C\u002Fp>\n\u003Cp>A class promotion is a useful example. The original poster might contain a headline, a date, an instructor photo and plenty of detail. In a video, you can introduce the audience's problem, show the value of the class, then finish with the date and an invitation to register. The same content gains a sequence that unfolds over time.\u003C\u002Fp>\n\u003Cp>Other useful projects for business owners include explaining one product feature, showing a three-step portal tutorial or creating a short video from website screenshots. Use actual screens when you are explaining functionality that is available in the product.\u003C\u002Fp>\n\u003Cfigure>\n  \u003Cimg src=\"\u002Fimages\u002Fartikel\u002Fbuat-video-motion-graphics-dengan-claude\u002Fen-2.webp\" alt=\"An organised workflow makes review and reuse easier\" loading=\"lazy\" decoding=\"async\">\n  \u003Cfigcaption>An organised workflow makes review and reuse easier. Illustration by ammarrahimi.com.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\u003Ch2>Prepare your assets before asking for animation\u003C\u002Fh2>\n\u003Cp>Create one folder for each video. Add the logo, product photos, screenshots, script and audio you plan to use. Give files recognisable names, such as white-logo.png or signup-screen.png, to make them easy to identify.\u003C\u002Fp>\n\u003Cp>Include your brand colours, fonts and any wording that must stay unchanged. If a price, date or product name needs to be exact, spell it out in the brief. Complete source material gives Claude less room to guess.\u003C\u002Fp>\n\u003Cp>A poster flattened into a single image has limitations. To animate its logo, pictures and text separately, use the original design files or separate those elements. If you use an AI tool to reconstruct them, compare the results with the originals so spelling and logo details remain accurate.\u003C\u002Fp>\n\u003Cp>A reference video can help communicate the colours, pacing and transitions you like. Ask Claude to describe those style choices, then use your own assets and message. This helps you establish a consistent visual identity.\u003C\u002Fp>\n\u003Ch2>A better brief means fewer corrections\u003C\u002Fh2>\n\u003Cp>Before requesting a full video, define the audience, one main message, the duration and where it will appear. Ask for a short storyboard first so you can review the sequence of scenes. Fixing the concept at that stage is easier than revising it after a long render.\u003C\u002Fp>\n\u003Cp>Use the following sample prompt and replace the product details with your own. It is a brief to adapt, rather than a prompt tested to produce a particular finished video.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>Create a 15-second motion graphics video introducing [product name] to [target audience]. The goal is to encourage viewers to visit [page or take action]. Use the assets in the material folder, brand colours [colour codes] and the text I provide. Use a vertical 9:16 format with a target export size of 1080 × 1920.\u003C\u002Fp>\n\u003Cp>Propose a storyboard first, including the timing of each scene. Open with the audience's problem, show one main benefit and finish with a clear call to action. Make the text large enough for a phone and allow enough time to read it. Use real screenshots. Do not add prices, testimonials or features that are absent from the supplied material.\u003C\u002Fp>\n\u003Cp>Once the storyboard is approved, build the animation using the tools available in the project. Produce a preview for review before exporting the MP4. Save the assets, code and change notes in the project folder.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>Notice how the prompt specifies the assets, audience, objective and review process. A request such as "make an impressive video" leaves too much open to interpretation. A specific brief gives you a useful standard for judging the result.\u003C\u002Fp>\n\u003Ch2>Review the video as your audience will see it\u003C\u002Fh2>\n\u003Cp>Watch the preview on a phone. Text that looks comfortable on a monitor may be too small on a vertical screen. Check spelling, scene timing and logo placement. Also check whether the message makes sense with the sound off.\u003C\u002Fp>\n\u003Cp>If you use a voiceover, keep the music from overpowering it. Motion timed to the beat can make a video more enjoyable, but viewers still need time to read. Avoid filling every second with another transition.\u003C\u002Fp>\n\u003Cp>Give feedback with a precise timestamp. For example, "At 00:07, the headline disappears too quickly. Hold it for one more second and enlarge the benefit text." That is easier to act on than "make it look better".\u003C\u002Fp>\n\u003Cp>You can also ask Claude to assess motion, readability and audio alignment. Treat that assessment as help with spotting weaknesses. The final decision still depends on your own review and the purpose of the video.\u003C\u002Fp>\n\u003Ch2>Adapt the video to where it will appear\u003C\u002Fh2>\n\u003Cfigure>\n  \u003Cimg src=\"\u002Fimages\u002Fartikel\u002Fbuat-video-motion-graphics-dengan-claude\u002Fen-3.webp\" alt=\"Layout adapted to each aspect ratio\" loading=\"lazy\" decoding=\"async\">\n  \u003Cfigcaption>Adapt the layout to each aspect ratio instead of simply cropping the video. Illustration by ammarrahimi.com.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\u003Cp>Once you approve one version, request other formats using the same project. Use 16:9 for landscape video and 9:16 for vertical video. A 1:1 or 4:5 composition can suit feed content, depending on the platform requirements.\u003C\u002Fp>\n\u003Cp>Ask for the elements to be rearranged so the headline, images and call to action remain clear. Check areas that app buttons or captions might cover. Rendering at 4K or 60 fps can increase the processing load, so choose settings that fit the intended use and your environment.\u003C\u002Fp>\n\u003Ch2>Save the workflow that works\u003C\u002Fh2>\n\u003Cp>Keep the video versions, original prompt and change notes. A README file can describe which assets were used, where exports are saved and what should be preserved when the project is resumed.\u003C\u002Fp>\n\u003Cp>Once you find a suitable style, document the colours, fonts, scene structure and review rules. In an environment that supports it, those guidelines can become a reusable skill for future projects. The message and assets still need to change with each campaign.\u003C\u002Fp>\n\u003Ch2>Start with something you already have\u003C\u002Fh2>\n\u003Cp>Choose one poster, one product screenshot or one explanation you often repeat to customers. Set a single message, write a brief and build a short preview. You can then see what works before expanding the project.\u003C\u002Fp>\n\u003Cp>For me, the value of this workflow is the opportunity to experiment and make precise revisions. You can test the order of your message, adjust when text appears and reuse assets you have already prepared. A good video comes from clear direction and careful review.\u003C\u002Fp>\n\u003Cp>Try turning one of your static assets into a 15-second video this week. Check whether a viewer can understand its main message in a single watch. That is a more useful first measure than the number of animation effects.\u003C\u002Fp>\n\u003Ch2>References\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Flearnai.my\" target=\"_blank\" rel=\"noopener\">Claude Motion Video and AI learning by LearnAI.my\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fsupport.claude.com\u002Fen\u002Farticles\u002F17454997-get-started-with-claude-motion\" target=\"_blank\" rel=\"noopener\">Official Claude Motion help centre\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fwww.remotion.dev\u002Fdocs\u002Fai\u002Fclaude-code-plugin\" target=\"_blank\" rel=\"noopener\">Official Remotion documentation for the Claude Code plugin\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>This article draws on the Claude Motion Video slides by LearnAI.my, particularly their explanation of the concept, assets, prompts, review process and project organisation. The practical guidance and illustrations are arranged for readers of ammarrahimi.com. Feature availability was checked on 11 October 2026.\u003C\u002Fp>\n",1793543302591]