Introduction
Motion graphics has become one of the strongest ways to communicate ideas in the modern digital era. It is not only used by large studios or marketing agencies; it is now a practical tool for startups, founders, product teams, content creators, and freelancers who need to explain a concept quickly and professionally.
This project turns Scuti AI’s published company profile into a short, animated company introduction. The revised video is based on the services and positioning described on Scuti’s website: a Vietnam-based AI specialist team working on generative AI, software development, and practical business solutions. The goal was to move beyond a generic AI-themed intro and make the animation communicate what Scuti actually does.
This case study documents the real deliverable, the five-scene story, the browser-based rendering process, and ways a similar workflow can support product communication, proposals, and internal presentations.
Why this project matters
A lot of business communication still happens through static slides, long documents, and plain text. Those formats can communicate information, but they are not always memorable or persuasive. Motion graphics changes that.
When done well, motion graphics can compress an idea into a short, visually rich experience that is easy to understand and easy to remember. That is extremely valuable for AI products, where the technology may be complex but the value proposition needs to be clear, convincing, and fast to grasp.
The purpose of this project is not only to produce a nice visual. It is to show that a modern, premium visual identity can be built using repeatable production methods and that the same process can be applied to many business contexts.
Final output
The final video is a 16-second, 1920 x 1080 motion graphics introduction rendered at 30 frames per second. It combines the original dark, luminous visual system with timed title cards, animated service nodes, a three-step delivery journey, company facts, and a closing contact message.
The visual treatment stays technology-focused, but the story is now company-specific. Instead of relying on generic claims such as an invented automation percentage, the video names Scuti’s published services and labels its company scale figures as group-level information.
The final file is saved in the project workspace and can be accessed here:
The MP4 was rendered from 480 captured frames and decoded successfully during verification. It is a real video asset, not a mockup.
Project brief and creative direction
The updated creative brief is to introduce Scuti through the work it offers and the way it delivers that work. The message is grounded in Scuti’s public company profile rather than an invented product feature set.
The video moves through five timed chapters:
- Company introduction: Scuti as an AI specialist team in Vietnam, taking generative AI from research and prototypes toward production systems.
- AI services: Gen AI Consulting, Generative AI OCR, Secure GAI / RAG, and Dify support, represented as animated nodes orbiting the Scuti AI center.
- Delivery journey: research and strategy, prototype and proof of concept, then build and scale.
- Experience and focus: AI for manufacturing and other industries, with company facts shown as proof points: founded in 2015, 10+ years in system development, 300+ projects, and 400+ group members. The video labels the scale figures as group-level; verify the latest figures and their scope with Scuti before republishing.
- Closing message: a concise invitation to work together, with scuti.asia as the contact destination.
The sequence is designed to help viewers understand Scuti’s capabilities and engagement path in a few seconds, rather than only signaling that the subject is an AI company.
Production workflow: how the video was actually created
Step 1: Define the visual direction
The creative direction was defined around three principles:
- retain the existing premium, dark technology look
- make Scuti’s real services and delivery approach the visual subject
- use clear typography, chapter changes, and purposeful movement to support the message
The background grid and central orbital form remain as a consistent visual thread. New service nodes, staged process cards, proof-point panels, and animated chapter transitions add movement while keeping the text readable.
Step 2: Build the scene in code
The visual scene was built with HTML and CSS inside the Node.js render script. CSS keyframes animate the orbit, service nodes, process cards, glow, and other background elements. Five timed chapter sections are revealed in sequence by the render script.
The structure of the scene included:
- a dark background, grid, light fields, and orbital elements retained from the initial design
- animated service nodes for consulting, AI OCR, RAG, and Dify support
- three connected cards showing research, validation through a prototype or PoC, and delivery at scale
- a manufacturing-focused chapter with published group-level experience figures
- a final call to action pointing viewers to Scuti’s website
Because the composition is code-driven, the copy, chapter timing, layout, and animation can be adjusted directly in the source and rendered again.
Step 3: Use browser rendering to capture frames
The project used a browser automation tool to render the composition and capture a sequence of still frames.
The rendering steps were:
- open the visual scene in a browser
- render the HTML/CSS animation in a headless environment
- capture sequential screenshots at a fixed frame rate
- set the active chapter’s opacity and entrance position from the current timeline time
- save each frame to the
frames/folder for later assembly
The frame loop captures 480 images at 30 frames per second for a 16-second video. The explicit chapter timing makes the scenes reproducible; the CSS animations add continuous motion within each scene.
Step 4: Convert frames into a final MP4
After capture, the numbered frames were encoded into an H.264 MP4 using the project’s bundled ffmpeg-static binary.
The process was:
- capture frames at a stable rate
- export at 1920 x 1080, 30 fps, using H.264 video and yuv420p pixel format
- decode the finished MP4 to verify that all 480 frames are readable and that the duration is 16 seconds
This is a realistic workflow for motion graphics work because it allows for clean iteration and consistent export quality.
The exact tools used
The project used a lean but effective production stack:
- Node.js: for scripting the render pipeline
- Playwright: for browser-driven rendering and frame capture
- ffmpeg-static: for final MP4 export
- HTML + CSS: for motion design layout and animation
- local workspace files: to keep source files and outputs organized
This lightweight stack suits teams that want to keep the visual source editable and regenerate the same video after copy or timing changes. It is not a substitute for every traditional editing workflow, but it works well for this code-driven motion graphics format.
Creative brief used
The video was assembled directly in HTML/CSS rather than generated from a single AI prompt. The following creative brief summarizes the direction used for this revision:
Create a concise, premium motion graphics company introduction for Scuti AI, grounded in the services and company information published on scuti.asia. Present Scuti as an AI specialist team in Vietnam. Animate the service areas Gen AI Consulting, Generative AI OCR, Secure GAI / RAG, and Dify support. Show the delivery path from research and strategy to prototype / PoC and then full-scale development. Include Scuti’s manufacturing focus and clearly label company scale metrics as group-level figures. End with a clear invitation to visit scuti.asia. Keep the existing dark technology visual language, add distinct animated chapters, maintain legible typography, and avoid unsupported product claims or statistics.
This brief establishes:
- the company facts and services the video may communicate
- a clear five-part narrative
- the intended technology-focused visual language
- the need to distinguish group metrics from Scuti-specific figures
- a readable and direct closing call to action
It is a summary of the creative brief, not a claim that an AI video generator produced the final asset.
Source files in the project
The source material and deliverables for this project include:
https://github.com/cuongdvscuti/video-generate.git
Together, these references connect the original brief, production notes, render implementation, final MP4, and the public company information used to shape the updated story.
For anyone who wants to continue or modify the project, render_scuti_video.js is the main technical entry point because it contains the render logic for the motion graphics sequence.
Why this method works so well
This workflow works because it combines art direction with a code-driven, highly structured production process.
The core benefits are:
- speed: changes can be tested quickly
- repeatability: assets can be recreated and modified easily
- scalability: one visual system can be used for multiple videos
- clarity: the storyline is organized into five timed chapters
- flexibility: the visual language can be adapted for different brands or products
In other words, you are not simply animating random shapes. You are building a system that presents a message in a controlled, brand-aware way.
My opinion
I believe this workflow is extremely valuable, especially for AI and digital-first businesses. It makes the presentation of a product feel sharper, more premium, and more memorable without requiring a large budget or a fully developed post-production pipeline.
The reason I like this method is that it helps transform abstract ideas into something tangible. A product may be powerful in real life, but if it cannot be explained clearly and visually, it loses impact. Motion graphics solves that problem by making complex ideas feel intuitive.
This is not just a design technique. It is a communication technique. It helps a business explain what it does, why it matters, and why the audience should care.
How I can apply this in my daily work
I can apply these techniques to my own work in several practical ways.
1. Daily tasks
I can use short motion graphics summaries for daily updates, project reports, internal alerts, or milestone announcements. This makes information easier to digest than a long wall of text. Instead of sending static updates, I can package them into short visual stories that are easier to understand and share.
2. Client proposals
For client proposals, a short motion intro can make the pitch feel more premium and more convincing. It creates a stronger first impression and helps the client understand the value of the proposal before reading the details. In competitive environments, this can absolutely influence perception.
3. Internal projects
For internal teams, motion graphics can explain a roadmap, product direction, system architecture, or technical concept in a much more accessible way. This reduces confusion and improves communication because people are not just reading text—they are seeing the structure and flow of the idea.
4. Marketing and portfolio work
I can also use this workflow for landing pages, social video teasers, portfolio intros, and product showcase clips. These formats are highly useful for personal branding and business promotion because they increase clarity and trust in a short time window.
Conclusion
This project shows that a polished motion graphics video is not limited to large agencies or expensive production teams. With a thoughtful process, a clear format, and a reusable workflow, it is possible to build an effective visual introduction that feels premium and professional.
The real value is not only the rendered file. The real value is the method: how ideas are shaped into visual narratives, how motion is used to explain a brand, and how reusable systems can scale to many future projects.
That is why I see this kind of workflow as highly useful beyond just video creation. It is a modern communication skill that can improve daily productivity, client communication, and internal storytelling.