YT YouTube2Text

YouTube2Text → Transcripts → 【经验开源】AI 做动画视频完全指南：原理、技巧、Skill 一次给全

【经验开源】AI 做动画视频完全指南：原理、技巧、Skill 一次给全 — Transcript

by code秘密花园 · 3,446 words · 531 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00You’ve probably found it hard to avoid
0:01these videos lately: hard-core knowledge
0:03points, no host on screen, with graphics
0:04pulsing to the beat of the music. It
0:06feels like watching an MV, and you
0:07actually learn something along the way.
0:09It's called the "WB Knowledge Awards,"
0:10and this topic has already racked up
0:12billions of views. Most of these videos
0:14are made by language models, like Opus
0:165.5. But language models can't draw, nor
0:18can they directly generate video. They
0:20are completely different from video
0:22models like Sora. They only output text
0:23—they’re pure text models. So, how are
0:26these videos made? Hello everyone, I’m
0:28Teacher Garden. Welcome to CO’s Secret
0:29Garden. Those who follow me probably
0:31know that I started exploring using code
0:32to make videos a long time ago. I’ve
0:34also shared detailed tutorials and my
0:35open-source skills. Since Opus 5.5 came
0:37out, it has taken code-generated video
0:39to a whole new level. The two videos I
0:41posted recently were both made using
0:43Opus 5.5. Today, I want to talk to you
0:45about how language models create videos
0:46, what techniques are worth mastering,
0:48and how you can make videos like these.
0:51Finally, I’ll present my latest
0:52open-source video creation skill, which
0:54integrates all my newest experience,
0:56tips, and various video styles, allowing
0:59you to quickly replicate my video
1:00effects.
1:01At the end of the day, a video is just a
1:03stack of images played in sequence. A 15
1:05-second clip at 30 frames per second is
1:08just 450 images. What the model needs to
1:11do is write a webpage with a function
1:13inside; you give it a timestamp, like
1:153.2 seconds, and it renders the frame
1:16for that exact moment.
1:18The rest is left to two tools: one runs
1:20an invisible browser in the background
1:22to capture a screenshot every 1/30th of
1:24a second, and the other stitches those
1:27450 images together. There’s one
1:28requirement: you must be able to jump to
1:30any second and render that frame
1:31immediately, without relying on where
1:33the previous frame left off. Because for
1:35speed, the rendering script opens
1:36several browsers at once—one starting
1:38from 0 seconds, another from 10 seconds
1:40. Like a flipbook, every page must be
1:41independently drawable; where particles
1:43fly or how springs bounce are all
1:44calculated directly from the time. This
1:46is also the biggest advantage of using
1:47code for videos. Video models generate a
1:49finished clip, so if you want to change
1:50one word, you have to change the prompt
1:52and redo the whole thing. With
1:53code-based videos, if a camera move is
1:55too fast or a number is wrong, you just
1:56re-render those few seconds. So, how do
1:58you write the visuals for a specific
1:59second using only text? The model will
2:01select different code depending on the
2:03specific video. Making videos is
2:05essentially like building a webpage;
2:07every button and card you see on a page
2:09is backed by HTML code. For instance,
2:11this line on the screen is an orange
2:13pill-shaped button; the browser reads it
2:15and draws it. Web animation is simply
2:16making those properties change over time
2:18. By adjusting the width, height, and
2:20corner radius, a button can stretch into
2:22a search box, then expand into a card.
2:24So-called "camera movement" in videos is
2:26also just changing numbers. To zoom into
2:28a button in the bottom-right corner, you
2:30center the view on it and scale the
2:31entire interface up three times;
2:33everything grows, creating the sensation
2:34of a camera move. To draw more complex
2:36icons or curved lines, it is time for
2:38SVG to take the stage. It also uses text
2:40to describe the visual composition. A
2:42single line of text can be a circle, or
2:44it can be a complex curve. The "
2:45hand-drawn" effect in many logo
2:47animations is a simple trick: you set
2:49the stroke to a dashed line, where both
2:51the dash and the gap are the length of
2:53the line. Start with the gap facing the
2:55screen, then slowly shift the solid line
2:57into view, making it look like it's
2:59being drawn by a pen. But if there are
3:01thousands of particles flying at once,
3:03HTML and SVG can't keep up. That’s when
3:05Canvas comes in. Canvas gives you a
3:07blank slate where the code draws
3:08everything pixel by pixel. Pick a brush
3:10, set a coordinate, and three lines of
3:12code make a circle. Every frame, you
3:14wipe the canvas clean and redraw it
3:15based on the current timestamp. Drawing
3:17one circle takes three lines; drawing
3:193,000 just requires an extra loop. This
3:21is why complex effects like particles,
3:23pixel art, and flat illustrations mostly
3:25use Canvas. For example, to form text
3:27with particles, you write the text on an
3:29invisible canvas, read which pixels have
3:31color as the destination, calculate
3:33starting points based on IDs, and have
3:35them fly from start to finish over time
3:37, gathering into the desired shape. For
3:39retro or cinematic vibes like old TVs,
3:41film grain, or neon, you need WebGL
3:43shaders. Canvas draws stroke by stroke,
3:46but shaders work differently. A 1080p
3:48frame has over 2 million pixels; you
3:50write a short rule, and the GPU applies
3:52it to every pixel simultaneously to
3:54calculate the color. The old TV effect
3:56is just several rules stacked together:
3:58scanlines, chromatic aberration, curved
4:01surfaces, and film grain. Shaders are
4:03rarely used alone. Usually, Canvas draws
4:05the frame first, then hands it over to
4:07add the texture. By separating content
4:09from style, each layer can be processed
4:11independently. For a true 3D feel, you
4:13need JS. Making 3D is like shooting a
4:15movie: place your objects, set up lights
4:17, position a camera, and Three.js will
4:19render what the camera sees. Everything
4:21in this world is pieced together from
4:23triangles; 12 triangles make a cube,
4:25while hundreds or thousands make a
4:27sphere. You don't need to build complex
4:29models from scratch. You can create them
4:31in Blender or import existing ones, then
4:33assign textures. A matte finish gives a
4:35sphere a soft, clay-like look, while
4:37changing it to metal makes it chrome.
4:38Add a light source from the top left.
4:40The bottom right of the sphere now has
4:42shade, a shadow appears on the ground,
4:43and the sense of depth instantly emerges
4:45. Finally, set up the scene and make it
4:47move. A row of dominoes, a ball at the
4:49top of a slope; the ball rolls down at
4:51the right time, the dominoes fall
4:53exactly when calculated, and the camera
4:55follows along—a pile of triangles has
4:57just become a sequence. If you really
4:59want that hand-drawn feel like colored
5:01pencils, you can use P 5.brush. It's an
5:04open-source library specifically for
5:06simulating brushes, featuring 11 types,
5:08and can even create watercolor-style
5:10color bleeds. It works much like Canvas
5:12: pick a brush, then start drawing.
5:15The same circle now has the grain of a
5:17colored pencil and the wash of
5:18watercolor. However, every hand-drawn
5:20stroke has random jitter, which brings
5:22us back to our rule: the frame is
5:24determined only by time. If the random
5:26seed isn't fixed, the whole image will
5:27shake uncontrollably. But you can also
5:29use this to your advantage; by changing
5:31the random seed every few frames, the
5:32lines will slightly tremble—just like
5:34the "living lines" in hand-drawn
5:36animation. A video looks satisfying
5:37largely thanks to the sound; when
5:39something hits on screen, a sound plays
5:41right at that moment. When the music
5:42pauses, the visuals pause along with it
5:44. Watch the same video with the sound
5:46off, and it will feel much flatter.
5:48These sounds are also calculated by code
5:50.
5:51Sound is essentially vibration in the
5:53air; inside a computer, it’s just a long
5:55string of numbers, each representing how
5:57much the speaker diaphragm pushes out at
5:59that moment.
6:00Since they are numbers,
6:03drums, bass, piano, and clicks can all
6:05be calculated this way, layered together
6:08, exported as audio, and then
6:09synthesized with the video. This makes
6:11hitting beats more accurate than in
6:13editing software, because the visuals
6:15and audio read from the same timeline.
6:17At the 3.2-second impact, the visuals
6:19and sound naturally align on the same
6:21frame without having to drag audio
6:23tracks around to match them. For videos
6:25with voiceovers, this timeline is
6:26measured from the audio first. Record
6:28the voiceover, measure when each
6:30sentence starts and ends, and then
6:31arrange the visuals according to that
6:33timeline. For example, our current
6:35videos, from generating audio to
6:37matching visuals for each segment, can
6:39all be done by the model itself. So this
6:41workflow can do much more than just
6:43short clips; give it a song and lyrics,
6:45and it can direct and make an MV. Even
6:47live-action footage that code can't draw
6:49can be directed by the model, which
6:51calls on video models to generate assets
6:53, then uses code to composite subtitles
6:55, effects, and transitions.
6:58Once the principles are understood,
6:59getting started is actually very simple
7:00. Just tell your Agent, "Make a 15-
7:01second motion graphics video for my
7:02product," and it will write the code,
7:03capture shots, and composite it itself.
7:05After making a few, you'll discover
7:06another problem: without constraints,
7:07the model often uses the same tricks,
7:09which looks flashy for one video. But
7:10after watching too many, you get visual
7:12fatigue; some viewers can now tell at a
7:15glance which model made it. The model is
7:16powerful, but how you prompt it still
7:18takes skill, so I carefully dissected a
7:20batch of viral videos to see what they
7:21actually got right. Phrases like "make
7:23it look high-end" or "make it look
7:25designed" are interpreted differently by
7:27the model every time.
7:29Giving it a benchmark is much more
7:31stable, whether it's a movie intro, an
7:32ad, or a design style. For example,
7:34seasons changing outside a train window
7:35, a cozy cabin, and a cup of coffee on
7:37the table, in the style of The Grand
7:38Budapest Hotel. With just one title, the
7:40pastel color palette and symmetrical
7:41composition are all correctly
7:42established. You also need to clarify
7:44what to learn and what not to: learn the
7:45rhythm, composition, and color logic,
7:46but don't just copy the characters,
7:47shots, and melody. If you can't describe
7:49the style of the reference video, just
7:50throw screenshots and screen recordings
7:52at it and have it analyze them first.
7:53Once you've set the benchmark, have it
7:55think of three ways to tell the story,
7:56like a journey, a before-and-after
7:57comparison, or one thing transforming
7:59into another. Pick one and explain why,
8:01because the first idea the model spits
8:02out is often the most common one for
8:04that style.
8:06First, set the tempo of the music, then
8:08arrange the shots to hit the beats.
8:10Music is measured in BPM, or beats per
8:11minute; at 120 BPM, one beat is 0.5
8:12seconds, so a 15-second clip has exactly
8:1430 beats—cuts, elements dropping in, and
8:15text popping up should all land on the
8:17beat. Viewers don't need to count the
8:19beats to feel that a video needs ups and
8:20downs, with sections that are dense and
8:22others that are relaxed.
8:26How to arrange the specifics should be
8:28left to the model based on the content;
8:30you just need to tell it where the
8:31emotional climax should be. It's the
8:33same when using pre-existing tracks:
8:35have it analyze the beat structure first
8:37, and sync the visuals accordingly. And
8:39that's how you turn a simple process
8:41into a powerful creative tool.
8:43Also, for videos with narration, make
8:45sure the background music and sound
8:47effects dip when someone is speaking.
8:49Otherwise, if the whole video just cuts
8:51from one shot to the next, the lazy way
8:53is using pop-in effects, which is also
8:55the most boring. A good transition grows
8:57the next shot out of the previous one: a
8:59circle from the last scene becomes the
9:01sun in the next, or the camera zooms
9:02into a button that leads to the
9:04following scene. The camera should also
9:05move; 2D images can be pushed in, pulled
9:07out, or panned across just the same.
9:09Only let the audience focus on one thing
9:10at a time; don't rush the text in while
9:12the container is still transforming—
9:13wait until it settles before bringing it
9:15out. For explainer videos, pay extra
9:16attention; the most common failure is
9:18turning the script into a series of
9:19title cards and wrapping them in pop-in
9:21background effects—it might look like
9:23it's moving, but it's really just a
9:24slide deck. When storyboarding, be clear
9:26about what change the audience needs to
9:28grasp in each segment, and keep the
9:30protagonist on screen throughout. A
9:31simple way to check is to hide the
9:33subtitles and watch it; if you can still
9:34understand it just by looking at the
9:36visuals, then you've really built a
9:38product video. The best method is to
9:39open Claude directly in the project
9:40repository, let it read the code to
9:42understand the product features first,
9:43and then extract the selling points for
9:45storyboarding. Also, you must provide it
9:47with real logos, product screenshots,
9:48URLs, and brand colors; the interfaces
9:50it imagines are obviously fake, and if
9:51you don't provide the features, numbers
9:53, and client names, it will just make
9:55them up. For things that need
9:56verification, let it research online;
9:58when demonstrating features, add cursors
10:00, movement, clicks, and UI feedback so
10:01the audience can understand it more
10:03easily. You can have it critique its own
10:05work as if it were a professional motion
10:07designer questioning your strategy and
10:08plan; if it doesn't feel like the work
10:10of a pro, scrap it and start over—every
10:12frame from the first to the last should
10:14be refined. But empty slogans aren't
10:15enough; you need to give it a way to
10:17check its work. Claude can see images,
10:18but it can't play continuous video or
10:20hear audio, so you need to convert the
10:22video into images and data it can
10:23understand. How to specifically do this
10:25will be detailed later when we talk
10:26about skills. Additionally, the longer
10:28the video, the less you should let it
10:29finish in one go; produce a few
10:30keyframes first, confirm the direction
10:32before doing the animation, and set the
10:33pace before rendering.
10:35I still have many more tips and tricks,
10:37as well as the various pitfalls I've
10:39encountered, that I can't cover in just
10:41one video.
10:43As usual, it's time for the open-source
10:45segment. I’ve organized all of this into
10:47a brand-new video creation tool,
10:49SkillMotionShowReal, which has already
10:51been released to our gardenSkills
10:53repository. Long-time viewers might ask
10:55, didn't you already have a skill for
10:57making videos? I certainly do—it’s
10:59called WebVideoPresentation. It turns
11:00articles into scripts, creates a
11:02page-by-page clickable presentation, and
11:04records the screen at the end. The
11:05biggest difference between these two
11:06skills is who controls the pacing.
11:08WebVideoPresentation uses one screen per
11:10page, moving forward with each click;
11:11the rhythm is in your hands. It was
11:13designed that way because models at the
11:14time weren't good at continuous
11:15animation. MotionShow arranges every
11:17frame, every cut, and every sound effect
11:19into a timeline, handing the rhythm over
11:21to the AI. With improved model
11:22capabilities, this has become much
11:24easier to do. It can create a few
11:26seconds of intro, a short clip synced to
11:28the beat, or even a 20-minute explainer
11:30video based on your script; in my
11:32opinion, this Skill is the most valuable
11:34.
11:36Opus 5.5 is already very powerful, but
11:39it can still be inconsistent at times.
11:41Scale turns previous techniques into
11:43fixed steps in the process. Before
11:45starting, it must write a Brief that
11:47clarifies the benchmarks, key takeaways
11:49, and a "do-not-use" list. The Brief is
11:52delivered with the final video, so you
11:54can just tweak it for the next topic.
11:55The Skill includes 43 styles, ranging
11:57from popular trends like pixel games,
11:59vintage TV, cute 3D, synthwave, and ink
12:01wash to Swiss typography and film intros
12:03; they are basically all there. Each
12:05style file details the textures, color
12:07palettes, fonts, motion, sound design,
12:09and potential pitfalls. For example, if
12:11you're an educational creator with a
12:12recorded voiceover, but your video has a
12:14dozen points that each require stock
12:16footage, taking a whole day to edit, you
12:17can hand the video to this tool.
12:19Choosing a "whiteboard" style, the main
12:21screen will illustrate whatever concept
12:22you are discussing, while your portrait
12:24shrinks to the corner, keeping your
12:26original audio and subtitles intact. If
12:27you are an indie developer about to
12:29launch an app, you need a preview video
12:30for the App Store. Outsourcing costs
12:32thousands, and you don't know how to
12:33edit; you can choose the "light UI"
12:35style, provide your screenshots, and
12:36turn them into a feature demo clip. It
12:38generates both landscape and portrait
12:39versions at once. If you are a math
12:41teacher preparing to lecture on
12:42derivatives tomorrow, and you're
12:43wondering how to clearly explain "
12:44infinite approximation," you can choose
12:45the "conceptual transformation" style to
12:47animate mathematical concepts, allowing
12:48students to see exactly how each step is
12:50derived. If you have kids and want to
12:51turn bedtime stories into animations for
12:53them, you can choose a crayon picture
12:55book style, with colored pencil strokes
12:57and watercolor washes, just like a
12:58moving storybook. To bring
13:00code-generated videos to life, we
13:01primarily rely on the capabilities of
13:03OPUS 5.5. It’s impressive, capable of
13:05producing amazing results with just a
13:07single prompt. While other models can't
13:08quite keep up yet, if you define the
13:10process and requirements clearly enough
13:12, they can achieve similar results. But
13:13not everyone has access to OPUS 5.5, and
13:15that’s where the value of Scale comes in
13:17. Processes, rules, and styles are all
13:19pre-written, with ready-made scripts for
13:20rendering screenshots, music synthesis,
13:22and final inspections. You don’t need to
13:24fiddle with models; just focus on the
13:26creative side. The most frustrating part
13:27of using AI for video is the "black box
13:29"—waiting for hours only to find the
13:30result is wrong and having to spend
13:32massive effort to readjust. In
13:33MotionShow, I’ve designed a clever
13:35real-time preview feature.
13:38Just say "I want to watch as you work"
13:40at the start, and it opens a preview
13:42screen like editing software, letting
13:44you see the full production process and
13:45make adjustments whenever something
13:47feels off.
13:49The process works like this: before
13:50starting, it clarifies your needs—never
13:52repeating what you've already said—then
13:54writes the brief. Next, it generates
13:55style frames, using code to produce the
13:57opening, a key memory point, and the
13:58ending. If you haven't set a style, it
14:00offers three distinct directions
14:01stitched into one image for you to
14:02choose from. Picking a direction based
14:04on a few images saves much more trouble
14:05than realizing the direction is wrong
14:06only after rendering. Once the direction
14:08is set, it produces shots one by one.
14:10Each shot is shown as it's completed, so
14:11you can point out any issues on the spot
14:13. For music and mixing, if there's a
14:15voiceover, we sync that first, then
14:17arrange the footage to the actual
14:18duration. Before outputting, you open an
14:20editing workspace where the audio and
14:22video are authentic. You can drag the
14:24playhead frame-by-frame, adjust
14:25voiceover, music, and sound effects
14:27separately, and only synthesize the
14:29video once everything is perfect. The
14:31process only pauses for you at three
14:32points: when confirming requirements and
14:34before exporting style frames. The rest
14:36of the time, it works on its own, but
14:37you can check in whenever you want.
14:40The final step is the inspection, which
14:42cannot be skipped. As mentioned, models
14:44can't see video or hear sound, so Skill
14:46converts the footage into images and
14:47data it can understand. Verify every
14:49second before rendering to ensure the
14:51output is consistent every time. After
14:53finishing each shot, take a few frames
14:54for a self-check, look at the
14:56frame-sampling collage and motion report
14:57to automatically catch glitches and
14:59blurry text, check audio waveforms and
15:01loudness, and even measure if you’ve
15:02truly hit the mark before the most
15:04intense moment. Dimensions, frame rate,
15:06and duration—let a script judge these
15:08hard metrics; if any fail, don't deliver
15:10. If your tool supports Agents, assign
15:12an uninvolved reviewer to just look at
15:14these images and pick out flaws; it
15:15takes a bit longer, but it’s much more
15:17reliable than one-shot final delivery.
15:19Drop the link on the screen to your
15:21agent and tell them: "Help me install
15:23MotionScale."
15:24Then, just state your video creation
15:26requirements directly.
15:29Feel free to share the videos you’ve
15:30made with Motion in the comments, and
15:32I’ll be sure to like, favorite, and
15:34follow back. If you found this video
15:36helpful, please leave a free like, save
15:38it, and follow for more.

About this transcript

This page contains the full transcript of 【经验开源】AI 做动画视频完全指南：原理、技巧、Skill 一次给全 by code秘密花园, generated from the public captions YouTube serves with the video. The transcript has 3,446 words across 531 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to choose a caption track available on the video.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, caption language selection, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.