T-001 数据实体化 · 实拍素材 · 真实素材(照片、数据)交给代码,代码排版、加动效。拖动下面的时间轴,画面只跟着 t 变。T-001 Data made physical · Real footage · Real material (photos, data) handed to code for layout and motion. Drag the timeline: the picture depends on t alone.G-005 动漫短剧分镜 · AI 素材 · AI 生成的素材(生图、生视频、语音合成)交给代码,代码剪辑、加动效。拖动下面的时间轴,画面只跟着 t 变。G-005 Anime short-drama storyboard · AI material · AI-generated material (generated images, generated video, speech synthesis) handed to code for editing and motion. Drag the timeline: the picture depends on t alone.C-001 中国水墨 / 写意 · 纯代码 · 画面全部由代码算出,没有一张现成图片。拖动下面的时间轴,画面只跟着 t 变。C-001 Chinese ink wash · Pure code · Every pixel is computed by code; no ready-made image. Drag the timeline: the picture depends on t alone.
什么是 AI Coding VideoWhat AI Coding Video is
AI Coding Video 是让 AI 编程助手写程序来做视频:你用平常的话说想要什么片子,助手写出代码,代码一帧一帧画出画面、配好声音,最后存成 MP4。画面里的东西可以全部由代码画,也可以用你给的照片、录像、数据,或 AI 生成的图片和视频,混着用也行;不管素材从哪来,剪辑、排版、动效都由代码来做。下面用一支混着用的小片子走一遍。AI Coding Video means having an AI coding assistant write a program that makes the video. You say in plain words what you want; the assistant writes code; the code draws the picture frame by frame, adds the sound and saves an MP4. Everything in the frame can be drawn by code, or come from your own photos, footage and data, or from AI-generated images and clips, or any mix of them. Wherever the material comes from, the code does the editing, layout and motion. Here is one small mixed example, step by step.
“做一支 15 秒的新品开场:用我拍的产品照片,背景让 AI 画一张,标题和评分做成动画。”"A 15-second product opener: use my product photo, have AI paint the background, and animate the title and the rating."
你说想要什么Say what you want
内容、风格、多长、横屏还是竖屏。手上有照片、录像、数据,一起交给它。What it's about, the look, how long, landscape or portrait. Hand over any photos, footage or data you have.
代码画Code draws标题、评分、动效title, rating, motion
实拍素材Real footage你拍的产品照片your product photo
AI 生成AI-made一张背景图one background
备齐素材Gather the material
从三处取,用哪几样都行。只用代码画的片子,这一步直接跳过。Take it from any of the three places, in any mix. A code-only film skips this step.
标题Title照片Photo背景Backdrop
代码一层层叠成画面Code stacks the layers
AI 写一段代码,说清每一刻每层放哪、怎么动,像叠透明胶片。The AI writes code saying where each layer sits and how it moves at every moment, like stacking clear film.
t = 0.00 s
出成视频Out comes the video
每秒画 30 张,配上声音,存成 MP4,横屏竖屏各一版。同一份代码,每次出来都一样。30 pictures a second, plus sound, saved as MP4 in landscape and portrait. Same code, same film, every time.
第 3、4 步的小画面是你的浏览器此刻按代码现场画的。页面不放外来图片,所以「照片」和「AI 背景」用代码画的图形代替。The small pictures in steps 3 and 4 are being drawn by your browser right now, from code. This page uses no outside images, so the "photo" and the "AI background" are stand-ins drawn by code.
可复现Reproducible同一份代码,每次跑出来的片子一帧不差。Same code, same film, frame for frame.
可修改Editable换颜色、换文字、换节奏只是改几个参数。Colors, words and timing are a few parameters.
素材来路清楚Clear provenance纯代码的样片没有素材;用素材的样片,每份素材的出处、许可或生成参数都记在清单里。Pure-code samples use no material; samples that do list every piece with its source, license or generation settings.
AI 用代码做视频的三类路线Three routes to making video with code
三类路线都由代码负责剪辑、排版和动效,区别在画面里的素材从哪来。点一类,下面的样片跟着切换。On every route the code does the editing, layout and motion; they differ in where the material in the frame comes from. Pick one and the samples below switch with it.
C 类 · 195 种 · 按题材分Class C · 195 styles · by theme
画面全部由代码算出:Canvas、WebGL、SVG 等。声音也是代码合成的电子音。不需要任何素材,最适合风格化的动画。The picture is computed entirely by code: Canvas, WebGL, SVG and more, with a synthesized electronic score. Needs no material at all; best for stylized animation.
T 类 · 20 种 · 按内容类型分Class T · 20 styles · by content type
代码把录像、录屏、照片、数据剪进片子。本库样片只用公共领域素材(NASA、美国国会图书馆、NOAA 等),你做时换成自己的。The code cuts footage, screen recordings, photos and data into the film. The samples here use public-domain material only (NASA, the Library of Congress, NOAA and others); swap in your own.
G 类 · 20 种 · 按内容类型分Class G · 20 styles · by content type
先用生图、生视频、语音合成做出素材,再交给代码剪辑和加动效。适合写实人物和场景。任何一家服务都行。Generate images, clips and voice first, then let the code edit and animate them. Good for realistic people and scenes. Any provider works.
实际场景:3 类路线的综合应用In practice: mixing the three routes
真正要交付的片子,很少只走一条路。接下来更常见的做法是三类混着用:真实的东西用实拍和数据,拍不到的让 AI 生成,图表、标题、转场交给代码画,最后由代码把它们剪在一起。下面拿一支 70 秒的新品介绍片举例:每一行是一类素材,从左到右是时间。A film you actually ship rarely sticks to one route. The usual way from here on is to mix all three: real things come from footage and data, what you can't film comes from AI, and charts, titles and transitions are drawn by code, which then cuts it all together. Below is a 70-second product video: one row per kind of material, time running left to right.
片头Opener0–8s
产品亮相Product8–22s
数据说话The numbers22–34s
使用场景In use34–46s
原理说明How it works46–60s
结尾Close60–70s
代码画Code draws
标题动效Title motion
标注、价格卡Callouts, price card
图表动画Animated chart
原理示意动画Mechanism animation
Logo 收尾Logo end card
实拍素材Real footage
产品照片、录像Product photos, video
真实销量数据Real sales data
AI 生成AI-made
开场画面Opening shot
使用场景Scenes in use
AI 配音AI voice
旁白Narration
代码合成Code
剪辑 · 排版 · 字幕 · 转场 · 配乐 · 出片,全程由代码完成Editing · layout · captions · transitions · music · export, all done by code
原理说明这一段只用两类:示意动画由代码画,讲解交给 AI 配音,不用拍也不用生图。The how-it-works part uses just two routes: code draws the mechanism animation and AI voices the explanation; no filming, no image generation.
一类当主角,两类补位One lead, two in support资讯片靠实拍和数据,带货片靠 AI 画面,教程靠代码图解;另两类补上主角做不到的部分。News leans on footage and data, product ads on AI imagery, tutorials on code-drawn diagrams; the other two fill in what the lead can't do.
代码是底座Code holds it together素材不管从哪来,最后都交给代码剪辑、排版、加字幕和动效,所以整支片能重出,改一处只重做一段。Wherever the material comes from, code does the cutting, layout, captions and motion, so the whole film can be re-rendered, and one change redoes one part.
素材随时能换Swap material any time每份素材记在清单里。换成你自己的照片、数据,或换一家 AI 服务,代码不用改。Every piece is listed. Swap in your own photos or data, or another AI provider, and the code stays the same.
页面最底下「真实应用」有 3 支这样混着做的完整视频,可以逐段看每段用了哪几类。At the bottom of the page, Use cases has 3 full videos made this way; step through them to see which routes each part uses.
样片查看Browse the samples
先选类型:纯代码、实拍素材、AI 素材。纯代码的按题材和技术筛,两类素材的按内容类型筛。每页 15 支,停在哪里,哪里的样片才开始播放;点画面放大播放,点「声音」听配乐和旁白。Pick a class first: pure code, real footage or AI material. Pure-code samples filter by theme and technique; the two material classes filter by content type. 15 per page; a sample starts playing once you stop scrolling on it. Click a picture to play it large, or press Sound for the score and narration.
题材Theme
技术Technique
内容类型Content type
技术Technique
数字是用到这种技术的样片数;置灰的 5 种风格条目推荐过,但还没有样片。出片工具(Playwright、ffmpeg 等)每支都一样,不列在这里。The number is how many samples use that technique; the 5 greyed-out ones are recommended by style entries but have no sample yet. Output tools (Playwright, ffmpeg and the like) are the same for every sample and are left out here.
同一个内容类型,T 类用真实素材、G 类用 AI 生成的素材,切换上面的类型对照着看。技术的数字是用到这种做法的样片数,置灰的还没有样片;卡片上点技术标签也能筛。Within one content type, class T uses real material and class G uses AI-generated material; switch the class above to compare. The number next to a technique is how many samples use it, greyed-out ones have none yet; tapping a technique tag on a card filters too.
没有同时符合这些条件的样片。No sample matches these filters.
手绘与绘画Hand-drawn & painting
C-001
中国水墨 / 写意Chinese ink wash
宣纸纹理、三层远近不同浓淡的山(噪声生成的山脊 + 向下渐淡的墨)。Noise-built ridges in three ink tones on fibrous paper; an ink bloom reveals the scene, calligraphy appears stroke by stroke, then the red seal.
每块颜色是一个多边形反复随机细分出毛边,再用很低的透明度叠几十层,边缘自然晕开、中间更浓;。Each colour patch is a polygon subdivided into ragged edges and stacked dozens of times at low opacity, so edges bloom and centres deepen; multiply blending lets washes show through.
Rough.js 在 Canvas 2D 上画速写线(手抖、出头、不闭合,seed 固定所以每帧一样),淡彩先于线条铺上、故意偏离轮廓并溢出到纸外,街景从左到右一栋栋画出来,最后点上人影和落款。Rough.js draws wobbling sepia pen lines on cream cold-press paper, building a street one house at a time; transparent washes land slightly off the lines and bleed past them, then figures, a lamp and a red seal finish the page.
画面铺满几千个圆角短笔触,每笔画一层暗边、一层本色、一道高光做出颜料的厚度;。Thousands of short rounded strokes, each with a dark edge, body colour and a highlight; sky strokes follow a noise flow field and swirl around the sun.
整幅画(房子、树、牵手的两个人、太阳、飞鸟、爱心)是同一条首尾不断的折线,按长度一点点描出。The whole picture is one unbroken polyline drawn out by length, with the camera riding the pen tip before pulling back to reveal it.
字和框按笔顺逐笔写出(按长度裁出折线的一部分),悬浮的马克笔跟着笔尖走,最后镜头拉远看整块板。Handwriting and boxes are traced along their paths by a floating marker; the camera pulls back to the full board at the end.
板书和示意图按笔顺逐笔写出,整层再用一张固定的随机点阵抠掉一部分像素,做出粉笔的颗粒和断笔;。Writing and diagrams appear stroke by stroke, then a fixed random dot mask knocks out pixels for chalk grain; the chalk stick follows the active stroke.
两幅画各自在形状内部均匀取点,一粒沙对应一个点;前一幅画好后,每粒沙沿噪声场打着旋。Two pictures are sampled into grains; each grain swirls along a noise field from the first picture to its spot in the second.
p5.js(instance 模式,逐帧 redraw)配 p5.brush 的水彩填色和铅笔线,角色线条按 12 帧/秒换种子“抖”,背景种子固定;一滴雨落在头顶的小芽上,角色吓一跳、看着芽开出花,再高兴地蹦两下。p5.brush watercolour fills and pencil lines on paper, redrawn each frame in p5 instance mode with a seed that changes 12 times a second: a raindrop hits the sprout on a round character's head, it startles, the bud blooms, and it hops with joy.
用 Remotion(React 组件 + useCurrentFrame)画一块数位黑板。A pure black digital board drawn in Remotion from useCurrentFrame: 3-6 px round-cap single-line SVG strokes with a slight hand wobble reveal themselves by stroke-dashoffset at speaking pace, a stylus tip stays at the head of the line, five fixed-meaning colours carry the labels, and a solid red arrow stamps down at the end.
p5.js(instance 模式)在 init 里把一整面比画幅更宽的湿壁画画到一张离屏画布上——干灰泥底、粉化剥落、建筑把画面分成一格格,人物是轮廓清楚的厚重体块;每帧 Canvas 2D 沿墙面平移这张画,叠上均匀的天光和灰泥颗粒,镜头从一幕走到下一幕。p5.js paints a wall wider than the frame once at init — dry plaster, powdering patches, stage-box architecture and block-like figures — and each frame the camera pans along it under even daylight with plaster grain.
墙、地板、人和桌子各是一块剪裁区,区内按大小两套错位网格铺圆点,每个点用哈希值略微压扁、转一个角度,像手画;所有点的半径乘同一道从画面中心向外扩散的正弦波,整个房间一起胀缩;窗里是三维网格上的彩色小灯,按 1/z 投影并不断朝镜头移近;最后一圈波浪形的边界从人身上向外扩大,圈内只剩同一种红底白点,物体轮廓就此消失。Wall, floor, figure and table are each a clipped region filled with two offset grids of large and small dots; a hash squashes and turns each dot slightly so it looks hand-painted, and every radius is multiplied by one sine wave spreading out from the centre of the frame, so the whole room swells and shrinks together. Through the window, coloured lights on a 3D grid are projected by 1/z and keep moving towards the camera. At the end a wavy boundary grows outwards from the figure; inside it only one red-and-white dot pattern remains, so the outlines of the objects dissolve into the grid.
书架、窗、书桌、台灯、地球仪全部用路径和渐变画好,再乘一张光照图,只有台灯照到的一圈是亮的;花体字是自己合成的连笔线:每个字母是一段带回环的摆线,按升部、降部改高度,再整体右倾,钢笔沿着这些线写出来;地球仪的大陆是经纬度上的多边形,每帧旋转后投影到球面;最后右页切成竖条,各条转不同角度,翻成一张带卷曲的书页。Shelves, window, desk, banker's lamp and globe are drawn with paths and gradients and then multiplied by a light map, so only the circle under the lamp is bright. The cursive is synthesised: each letter is a looped cycloid arc whose height changes for ascenders and descenders, slanted to the right, and a fountain pen traces these lines across the page; the globe's continents are polygons in latitude and longitude, rotated and projected onto the sphere every frame; at the end the right page is cut into vertical strips turned by different angles, so it turns over with a curl.
半透明兽皮人偶按部件和关节层层画出,镂空花纹用 destination-out,multiply 叠到油灯照亮的布幕上。A translucent leather puppet built from jointed parts with cut-out lace patterns, multiplied onto a lamp-lit cloth screen.
平涂色块加雕版墨线,普鲁士蓝分层,天空晕染渐变,纸纹用 multiply 压在最上层,镜头像展开画卷一样横移。Flat color blocks with carved ink lines in Prussian blue, graded skies, and paper grain multiplied over everything as the scroll pans.
整张红纸先画好再用 destination-out 镂空出对称纹样,扇形裁切模拟展开,洞里透出暖光。A red sheet is drawn whole, then cut away with destination-out into a symmetric pattern that unfolds and lets warm light through.
六层剪纸山、云、亭子、树叠在灯箱里,每层带投影、按深度做不同幅度的视差摇晃。Six cut-paper layers with drop shadows sway with depth-based parallax inside a lit box; window holes let the warm light through.
荷花、荷叶、花苞和茎都由贝塞尔曲线采样成折线,init 里一次算好;先按顺序用粗细均匀的细墨线把每条折线逐段描出(铁线描),再分三层上色:平涂淡底色、从花瓣根部到尖端的渐变分染、尖端加深和叶脉;每帧先画颜色再画墨线,线始终压在色上。绢底是暖黄底色加经纬细纹和水渍。Lotus petals, leaves, bud and stems are Bézier curves sampled into polylines; even, fine ink lines trace each one in order, then three colour layers build up — a flat base, a root-to-tip graded wash and a deeper tip with veins — painting back to front so front petals hide what is behind, with the ink always drawn over the colour on a warm silk ground.
胖娃娃抱鲤鱼、两侧莲花荷叶、四角云纹,都是 Path2D 形状;init 里按从后到前的顺序把每个形状“刻”到五块版上:本色的版上填色,其余版上挖掉(被前面挡住的颜色和墨线都不印),每块版再乘一层木纹噪声;出片时黄、桃红、绿、紫、墨线五块版依次带着参差的边从左往右刷印上去,每块版有固定的套版错位,用正片叠底叠在纸上。A chubby child hugging a carp, lotus on both sides and cloud scrolls in the corners are Path2D shapes carved, back to front, into five plates — filled on their own plate and knocked out of the others so hidden colour and line never print — each multiplied by wood-grain noise; yellow, pink, green, purple and the black key plate then sweep on one by one with ragged edges and a fixed misregistration, multiplied onto the paper.
纹样画在一张环绕瓶身一周的展开贴图上(颈部卷草、肩部如意云头、腹部正面缠枝莲背面鱼藻、底部莲瓣),正面的纹样每帧按进度一笔笔描出、再晕染淡青;瓶身用片元着色器画:每个像素按所在高度的轮廓半径算出圆柱上的角度 asin(x/r),到贴图上取色,再按法线加明暗、釉面高光和边缘反光;最后瓶子转半圈露出背面。Neck scrolls, shoulder cloud collars, a front band of scrolling lotus with a fish-and-weed back, and lotus panels at the foot are painted on a wrap-around texture, the front ones stroke by stroke with pale washes and iron-spot specks; a fragment shader maps it onto a plum-vase profile — each pixel's angle on the cylinder is asin(x/r) at its height — adds glaze shading, a sliding highlight and rim light, then turns the vase half round to show the back.
三张原创脸谱,每张是一组只写右半边坐标的色块(平滑闭合曲线),画两次(第二次水平镜像)得到左右对称;每块色带白色勾边,再加卷纹、火焰纹、腮纹等装饰线;第一张先描墨线、再填色,都用一个从中轴往两边张开的裁剪框,所以线和色从中间向两侧同时长出;锣响时一道深红水袖从脸前扫过,脸谱横向翻一下换成下一张。背景是竖褶的深红幕布和上下两条金色回纹。Three original face designs are sets of smooth closed shapes written for the right half and drawn twice, the second time mirrored, with white borders and curl, flame and cheek lines; the first face's lines and colour grow from the centre line outward through a widening clip, and on each gong a pale water sleeve sweeps across while the face flips sideways into the next one, over a pleated red curtain with gold fret borders.
字形来自毛笔字体(马善政楷书),笔顺和笔速是自己标的:每一笔是字形里的一条中线,写到哪里就沿中线画一束二十几根“笔毛”当遮罩,只露出遮罩下的字形;越到笔画末端墨越少,一部分笔毛按各自的阈值断开,露出纸纹,就是飞白。镜头放大跟着笔尖走,写完拉远看整幅,最后盖一方朱印。The glyphs come from a brush font, but the stroke order and pace are hand-marked: each stroke is a centre line, and as it is written a bundle of two dozen 'bristles' is drawn along it as a mask that reveals only the glyph beneath; toward the end of a stroke bristles run dry at their own thresholds and break, leaving flying-white streaks of paper. The camera follows the brush tip close up, pulls back to the whole sheet and a red seal is stamped.
红黑两色平涂,山体里用一组波浪白线当刻刀痕,整版再用固定的随机墨点抠出斑驳;。Flat red and black with wavy gouge lines and a fixed speckle mask, stepped at 8 fps like hand-pulled prints, opening on a print being lifted.
黄、粉、蓝三版分别画好,渐变先换算成网点(每格一个圆,面积对应浓度)。Yellow, pink and blue layers are converted to halftone dots, speckled and misregistered by a few pixels, then multiplied together.
深蓝底上画两层网格,火箭的每个零件是一条折线,按顺序描出,描线的笔尖发光;。On a blue grid each part is a polyline traced by a glowing pen, followed by dimension lines, callouts and a revision stamp.
窗格是一张随机扰动的网格,切成三角和四边形,每格一种宝石色,铅条是粗黑描边;。A jittered grid cut into jewel-coloured panes with thick leading; a diagonal light band brightens panes by distance, with god rays and dust.
在鱼的轮廓里按网格取点,每点一块金色方砖,砖从四周旋转着飞来拼成鱼;。Gold tiles fly in and spin into the outline of a fish, which then swims with a sine wave while each tile glints on its own phase.
阶梯形金边门框、放射线、扇形纹和中轴塔楼全是对称的直线和圆弧,金色用竖向多段渐变假装金属反光;。Symmetric stepped frames, sunbursts and fans in multi-stop gold gradients; carved doors open on the axis and marquee bulbs chase around.
牛皮纸底上,色块、网点照片、号外剪报、一格一字的大字、贴纸按节拍一张张“拍”上来。Colour blocks, a halftone photo, newsprint and letter tiles slam onto kraft paper on the beat, with torn edges, a page shake and a highlighter pass.
每个物体是一团平滑闭合曲线,加径向高光、边缘暗部和指纹圈做出黏土质感;。Each object is a smooth blob with a radial highlight, dark rim and fingerprint rings, re-jittered every frame at 12 fps as if re-sculpted.
Three.js 用代码拼出带凸点的塑料积木(方块 + 一排小圆柱),放在真实桌面上微距拍摄。Studded plastic bricks built from code sit on a real desk under two soft boxes, shot macro with a layered Canvas 2D depth-of-field pass; the model snaps together one brick per stop-motion step, and the last two bricks really fall, simulated by cannon-es at a fixed 1/120 s step replayed from zero each frame so the result is identical every render.
纸是一组多边形,每一步折叠先用折痕线把纸面切开,折起的一半绕折痕在 3D 里转 180°,转到哪个角度就按法线算明暗、按朝向决定露出彩面还是白面;四步折成小猫,点上眼睛,弹两下再倒着展开;台面阴影按高度偏移并模糊。The sheet is a set of polygons: each fold clips them along the crease line and swings the lifted half 180° about the crease in 3D, shading every facet from its normal and showing the coloured or white side by which way it faces; four folds make a cat face, it hops twice and unfolds, with a blurred table shadow offset by height.
只用圆、方、三角和红黄蓝黑,按网格定位;每个形状从画外用指数缓动猛冲进来、急停在格线上。Only circles, squares and triangles in red, yellow, blue and black, snapping onto a grid with exponential easing; overlaps multiply into new colours.
撞色几何块(波点圆、三角、波浪线、锯齿条、条纹半圆、格子方块)加粗黑描边。Clashing geometric blocks with thick black outlines pop in elastically, then bounce on every beat; the headline carries an offset shadow.
每拍换一个底色和一种平面构成(条纹、同心圆、竖条、钥匙、圆点阵、放大镜)。Each beat changes the background and a flat graphic motif while a silhouette runs at 12 fps; letters slide in from both sides for the title.
HTML/CSS 排版加 SVG 图形,全部动作排在一条暂停的 GSAP 时间轴上,每帧 seek 到 t:台标缩成角标,要闻目录开场,翻牌价格板和折线讲一个事实,平行四边形台标下的字条上下翻转换标题,结尾目录逐条打勾。Dark navy stage with an HTML/CSS and SVG news kit: the logo shrinks into a corner bug, a flip-board price and a broken-line chart carry one fact, and the lower-third strip flips to each new headline — all animated on one paused GSAP timeline seeked per frame.
一张操作表按“打字、停顿、删字、标记、换行”排出每个按键的时刻,按 t 找到当时屏幕上的文字,光标在打字时常亮、停下时闪烁,关键词下面刷出荧光笔,换行时整页上滚。A list of operations (type, pause, delete, mark, new line) yields the time of every keystroke; each frame looks up the text on screen at t, the cursor blinks only while idle, a highlighter sweeps the keyword and the page scrolls up.
一圈圈文字环沿 z 轴等距排开,按透视除以深度投到屏幕上,镜头匀加速向前飞;隧道中心线随深度正弦弯曲、整体缓慢滚转,远处的环缩成发光细线,近处的字掠过画面边缘时正好读出。Rings of characters are spaced along z and projected by dividing by depth while the camera accelerates forward; the tunnel's centre line bends with depth and slowly rolls, far rings shrink to glowing hairlines and near words become readable as they sweep past.
自己写一个等距投影函数,把方块的三个面按不同明度画出来,搭出采集、处理、存储、分发四个工位;。A hand-written isometric projection builds four stations from shaded boxes; packets ride the conveyor and numbered labels pop up.
方格纸上,铅笔沿折线把数据一段段画出来(每笔描三遍、带一点抖动),镜头贴着笔尖跟拍;。A pencil draws the line chart point by point with the camera on its tip, circles the jump in red, then pulls back.
用 Canvas 照 Manim 的样子画(深底、蓝黄配色、斜体公式),不是真的 Manim;。Drawn in Canvas in the look of Manim (not real Manim): each beat adds a sine term, the epicycles trace a wave closer to a square wave.
近黑渐变加发丝网格,界面卡片吸附进场、一道扫光、柱状图长起,最后一个巨大数字。Near-black gradient with a hairline grid; a UI card snaps in, a light sweep passes, bars grow, and one huge number lands.
Three.js 在无限黑影棚里悬浮一个透明玻璃 + 磨砂玻璃 + 金属的产品(全部用代码建的几何体)。A code-built product of clear glass, frosted glass and metal floats in an endless black studio; two long strip lights sweep across its surface, high-IOR transmission gives the edges a dispersed fringe, a caustic ring sits on the floor, and the slow exploded view snaps shut on the beat.
一个圆角矩形用临界阻尼弹簧在按钮、进度卡、视频卡三种尺寸之间形变。One rounded rectangle springs between button, progress card and video card with crossfading content; the last frame matches the first.
D3.js 的地理投影(墨卡托)和 geoPath 每帧重算 SVG 路径,镜头中心和缩放跟着线头走;航线用 d3.geoInterpolate 沿大圆取点(再往北鼓起成弧)、按进度画出,里程用 d3.geoDistance 算。海岸线是噪声生成的虚构大陆和岛,城市名也是虚构的。A D3 Mercator projection redrawn each frame while the camera follows the line head: an orange arc is drawn city to city across a fictional noise-built coastline, with a live odometer and a latitude/longitude card.
几百颗星和一条噪声银河画在一张会绕天极缓慢旋转的天幕上,每颗星按自己的频率闪;“天秤座”的主星按顺序用发光细线一段段连起,笔尖带一个亮点,连好后浮出天平的线描轮廓和星座名又隐去,最后镜头推近顶上那颗星。Hundreds of twinkling stars and a noise-built Milky Way sit on a sky that slowly turns about an off-screen pole; the main stars of Libra, projected from their real coordinates, are joined line by line with a bright pen tip, then a dashed balance-scale outline and the name fade in and out before the camera pushes toward one star.
十三件文具各画成一张带正下方柔和阴影的贴图(init 里画一次),按“同类在一起”的网格坐标从最近的画面边缘滑入、略冲过头再落定;2.5 秒起整组按颜色重新排列,最后从每件物品引出细线标名称。竖版把整套坐标转 90°,物品也一起转,仍然横平竖直。Thirteen desk items are each drawn once as a sprite with a soft shadow straight beneath; they slide in from the nearest edge onto a grouped-by-kind grid with a small overshoot, regroup by colour at 2.5 s, and get thin leader lines with names; the portrait cut rotates the whole layout 90° so everything stays square.
角色的四肢是没有关节的二次曲线,跟着节拍整体摆动;全画面黑白。Limbs are jointless curves swinging to the beat, in black and white at 12 fps with grain, scratches, dust, flicker and a heavy vignette.
夜色渐变天空、两层楼群按不同速度视差卷动,车身只用亮暗两色平涂加一道高光(赛璐璐上色)。Two-tone cel shading with a highlight line, parallax city layers, limited animation at 8 fps and a VHS overlay.
SVG 画场景和角色(细黑线 + 平涂色块,没有阴影),GSAP 暂停时间轴排动作、每帧 seek 到 t;小角色跳起来够架子上的饼干没够着,落地一震,架子一歪,饼干正好掉到头上。A flat SVG world of thin black lines and unshaded fills: a small character squashes, jumps for a cookie on a shelf, misses, and the cookie drops on its head — timed on a paused GSAP timeline with anticipation and overshoot.
四格依次弹出,网点用错位圆点阵铺、集中线从中心放射、对白气泡带尾巴。Four panels pop in with screentone dots, speed lines and speech balloons; the sound effect lettering is outlined, sheared and shaken.
一页四格,格框是抖动的粗墨线;人物、山崖、速度线、刀光都用 brushStroke(一束会断墨的笔毛)沿折线画,衣袍是填黑的平滑形状再沿边扫几笔干笔;镜头逐格推过去,每格在镜头到达时按时间画出,最后拉远看整页;拟声字用毛笔字体,全页只有血点用朱红。A four-panel page with wobbly thick ink borders; figures, cliffs, speed lines and the sword arc are drawn with a dry-brush stroke — a bundle of bristles that run out of ink — along polylines, robes are filled smooth shapes swept with dry strokes at the edges; the camera pushes from panel to panel, each panel inking itself as it arrives, then pulls back to the page, with brush-font sound effects and vermilion used only for the blood.
天空、积云、远山和山坡小屋预先画进三张离屏画布,积云是几十团由亮到灰的渐变圆团叠出体积、再沿亮边点水粉笔触,三层按不同速度横移出视差;前景几千根草叶每帧重画,一阵风从左往右按 x 的先后经过,草浪、大树、晾的衣服、女孩的裙摆和辫子依次摆动;女孩用细描线加两阶平涂(阴影=本体减去朝光源平移的本体),帽子被吹起后她抬手按住。Sky, cumulus clouds, far hills and the hillside cottage are painted once into three off-screen canvases: each cloud is dozens of round gradients from bright to grey stacked into volume, with gouache dabs dotted along the lit edges, and the three layers pan at different speeds for parallax. Several thousand grass blades in the foreground are redrawn every frame; one gust travels from left to right in order of x, so the grass wave, the big tree, the washing on the line, and the girl's skirt and braid move one after another. The girl uses thin clean lines with two-tone cel fills (the shadow is the shape minus the shape shifted towards the light); when her hat lifts in the wind she raises a hand and holds it down.
窗外的积雨云是几十团渐变圆团叠成,再用「云的形状减去朝背光方向平移的形状」取出朝太阳的那一圈边、模糊后加亮成金边;屋里的光柱是把每格窗玻璃沿太阳方向一层层平移到地板上、用加色叠出来的,乘上流动的噪声就成了丁达尔光;女孩逆光,身上是冷色平涂加同一个减法做出的暖色轮廓光;最后叠泛光、沿太阳与画面中心连线排开的光晕和冷暖分离的调色,镜头缓慢推近并上仰。The cumulonimbus outside the window is a density field: hundreds of soft round kernels summed and roughened with fractal noise, lit by subtracting the density one step towards the sun, so the sunward edges turn white; the shape minus itself shifted away from the sun gives the golden rim, blurred and added on top. The light shafts in the room are each window pane moved step by step along the sun's direction down to the floor and added together, then multiplied by drifting noise; dust motes glow only where tracing back along the ray lands inside a pane. The girl is backlit: cool flat colour with a warm rim made by the same subtraction. Bloom, flare ghosts on the line between the sun and the frame centre, and a warm-cool split grade go on last, while the camera slowly pushes in and tilts up.
GLSL 光线步进算出整张画面:木头底座是圆角圆柱,弹簧脖子是沿一条贝塞尔曲线排开、各自朝切线方向的七个圆环,黄铜头和毡帽、橡胶球、上了清漆的木桌各有一套材质算法;一盏聚光灯只照亮玩具和球所在的那一圈并投软阴影,远处墙上的灯是算好的柔和光斑,假装浅景深。没有脸的弹簧玩具靠姿态演戏:看见滚来的球先探身,压缩弹簧做预备,跳过去落地后头还在晃,再一探头把球顶走。A GLSL ray marcher computes the whole frame: the wooden base is a rounded cylinder, the spring neck is seven rings laid along a Bézier curve, each facing the curve's tangent, and the brass head with a felt cap, the rubber ball and the varnished table each have their own material model. One spotlight lights only the circle where the toy and the ball are and casts soft shadows; the lights on the far wall are computed as soft discs to fake a shallow depth of field. The faceless spring toy acts through posture alone: it leans out when the ball rolls in, compresses its spring in anticipation, hops over and lands with its head still wobbling, then dips and nudges the ball away. Every pose value is a closed-form function of t (easing, parabolas, damped oscillations).
技术Technique
Playwright
ffmpeg
风格提示词Style prompt (Chinese)
用皮克斯式 3D 动画风格:先设计一眼能认出的剪影和大小对比,再做表面;布、木头、金属、皮肤各有清楚不同的材质,材质本身说明角色性格;光是讲故事的工具,主光把视线引向剧情焦点,可以为情绪偏离物理;角色表演有预备、跟随和重心转移,情绪来自动作因果而不是频繁换表情,无脸的物件(台灯、玩具、机器)也能靠姿态演戏,浅景深加柔和的全局光。只学这套方法,不复刻任何现有角色。
同一组形状画两遍:色版画布上用青、品红、黄三种网点图案(每种转不同角度、点的大小代表浓淡)正片叠底出颜色,墨版画布上画粗黑轮廓、「形状减去朝光源平移的形状」得到的大块实黑和沿明暗交界的一排平行排线;墨版整体错开几像素再叠回旧新闻纸,像套色不准。能量是一簇簇大小不一的黑点,每两帧换一次位置;拟声字和对白框用手写字体。The same set of shapes is drawn twice. On the colour plate, cyan, magenta and yellow halftone patterns, each turned to its own angle with dot size giving the tint, are multiplied together. On the ink plate go the heavy black outlines, solid blacks made by subtracting the shape shifted towards the light, and a band of parallel hatching along the terminator. The ink plate is shifted a few pixels before being printed back onto old newsprint, like misregistered colour. Energy is clusters of black dots of mixed sizes that jump to new positions every two frames; the sound effect and the speech balloon use a handwritten font.
车库背景(洞洞板、旧冰箱改的机器、工作台)一次画好,全部是平涂加同一粗细的黑描边,只在台面下、下巴下各补一块硬阴影;两个原创角色的手臂是两节描边粗线,按关键姿势表在几帧内「啪」地换姿势(带一点回弹),眼睛是白圆加用哈希抖动的不规则小瞳孔,表演靠停顿和眼神方向;传送门是几条随时间旋转的螺旋线叠在发光的绿圆上,边缘按正弦起伏,并给整个场景泼一层绿光。The garage background (pegboard, a machine made from an old fridge, workbench) is drawn once: flat fills and one uniform black outline everywhere, with a hard shadow added only under the bench and the chin. Each arm of the two original characters is a two-segment outlined stroke; a table of key poses makes them snap to a new pose within a few frames, with a small overshoot. Eyes are white circles with small irregular pupils jittered by a hash, and the acting rests on pauses and where they look. The portal is a few spiral lines rotating over a glowing green disc, its edge rippling with sines, and it washes the whole scene in green light.
每个部件都是一张多边形「纸片」,顶点按哈希值轻微抖动,像剪刀剪的边,底下垫一块错开的投影表示前后层级;人物只做整片平移、整片转动和嘴形切换,走路是上下小颠,说话时每两帧随机换一张嘴;镜头靠硬切在远景和反应特写之间跳,笑点放在停顿上,最后员工像一张纸板一样整片倒下。Every part is a polygon 'piece of paper' whose vertices are nudged slightly by a hash, like a scissor-cut edge, with an offset shadow underneath to show which layer is in front. The characters only slide, turn as a whole piece and swap mouths: walking is a small up-and-down hop, and while talking a random mouth is chosen every two frames. Hard cuts jump between the wide shot and a reaction close-up, the joke sits in the pauses, and at the end the employee falls over flat like a piece of card.
Three.js 搭一座 3D 微缩夜景(石板广场、房子、城墙、水面),像素精灵用 Canvas 2D 现画成贴图、。Hand-drawn pixel sprites stand like paper cutouts inside a full 3D miniature night scene: every lamp is a real point light casting shadows, exponential fog holds the distance back, and a tilt-shift blur over the three-quarter high angle makes the whole town read as a glowing toy model.
技术Technique
Playwright
ffmpeg
风格提示词Style prompt (Chinese)
用 HD-2D 风格:手工像素精灵像剪纸一样立在完整的 3D 微缩场景里,夜晚、有雾,每盏灯投下真实阴影,从高处三分之四视角拍摄并加移轴景深模糊,整个世界像一个发光的玩具模型。
game.js 是一个真能用键盘玩的横版动作小游戏(samples/C-058/play.html 打开就能玩);。A single-file side-scrolling action game that a person can actually play with the keyboard; for the sample a scripted input tape plays it through while the camera follows, and each frame re-simulates the game from zero at a fixed 1/120 s step, so the capture keeps its HUD, scanlines and emulator bezel and still depends only on t.
技术Technique
Playwright
ffmpeg
风格提示词Style prompt (Chinese)
先用 Canvas 2D 做一个可以真实操作的单文件 HTML 游戏(横版动作、机关、战斗、灯光闪烁),再让脚本自动玩一遍并录制 60 秒演示,保留 HUD 和菜单,镜头跟随角色。
先用 Canvas 2D 画出黑白的内容(倒数片头、片名卡、聚光灯下的主体和打字机字幕),再交给 WebGL 片元着色器做胶片:粗颗粒、随机划痕和灰尘、闸门抖动、整体明暗闪烁、四角暗角,全部由时间 t 算出。Canvas 2D draws the black-and-white content — leader countdown, title card, a spotlit loom and typewriter subtitles — and a WebGL shader ages it: coarse grain, random scratches and dust, gate weave, flicker and corner vignette.
先在一块小画布上画好画面(灰阶街景、踩香蕉皮滑倒的绅士、字幕卡),每秒 16 格抖动。A small canvas holds the film frame at 16 fps, aged with sepia, grain, scratches, dust and flicker, set in a theatre with velvet curtains.
Three.js 用代码拼出无尽的黄墙房间(墙、地毯、天花板、嵌入式灯管全部程序生成。An endless yellow-wallpaper room generated in code and looped around the camera as it drifts forward on handheld noise, then run through a GLSL pass for tape tearing, chroma offset, scanlines and grain, with a camcorder date stamp and three 'rules' subtitles composited on top.
Three.js 程序生成一座小镇(街区、楼、车、行人全部用代码摆),正交俯拍三分之四视角;。A procedurally generated town shot from above in three-quarter view, then given a tilt-shift pass in Canvas 2D so only one horizontal band stays sharp while everything above and below blurs by distance; saturation and contrast are pushed and the cars and pedestrians move at timelapse speed under drifting cloud shadows.
冷青色线框,几圈刻度环和虚线环按不同速度反向旋转,雷达用锥形渐变做扫描尾迹。Counter-rotating tick rings, a conic-gradient radar sweep and a lock-on box that spins tighter and turns orange, with live readouts.
低分辨率缓冲区里逐像素算隧道(按距离和角度查异或纹理、循环调色板),放大后不做平滑;。A per-pixel tunnel in a low-res buffer (XOR texture by distance and angle, cycling palette) under copper bars, a chrome logo and a sine scroller.
等宽字符网格里每列按各自速度落下两串字,列头近白、身后渐暗,字在下落途中按哈希换字;2 秒时一张文字遮罩里的格子一起亮起,雨幕排出隐藏的词,同时镜头缓慢推进、近处一层大字虚焦掠过。Columns of glyphs fall at their own speeds on a monospace grid, bright heads and fading tails, glyphs swapping by hash; at two seconds a text mask lights up and the rain spells a hidden word while the camera pushes in.
海边放风筝的画面按 18 格每秒画在四分之一大小的画布上,逐像素调色(整体偏洋红暖黄、暗部发青、黑位抬起)并加逐帧变化的颗粒,再放大成柔和的画面;外面叠圆角片门、上下晃动、橙色漏光、划痕和灰尘,结尾是过曝白帧和片孔滑过的换卷。A beach scene with a kite is drawn at 18 fps on a quarter-size canvas, graded pixel by pixel (magenta-warm cast, cyan shadows, lifted blacks) with grain that changes every frame, then scaled up soft; a rounded film gate, gate weave, orange light leaks, scratches and dust go on top, ending in a reel change of overexposed frames and sliding perforations.
先把一张干净的台标画面画进离屏画布,再在每个节拍重音上按该拍的种子做几道损坏:红绿蓝三通道分开错位、整条横向切片撕开、低分辨率方块拖着上一位置的残影、取一行像素向下拉成竖条纹;第 5 拍整屏冻结在上一拍的画面,强度按指数衰减卡在拍点上。A clean station ident is drawn off-screen, then each beat corrupts it with that beat's seed: RGB channels split and offset, horizontal slices tear sideways, low-res blocks drag a ghost of an earlier position, and single pixel rows are stretched into vertical streaks; beat 5 freezes the frame, and intensity decays exponentially from each beat.
WebGL 片元着色器里自写光线步进,噪声叠出海浪高度场,按菲涅耳混合天空反射,每像素 2 次采样。A hand-written GPU ray marcher: a noise height field for the waves, Fresnel sky reflection, two samples per pixel.
技术Technique
Playwright
ffmpeg
风格提示词Style prompt (Chinese)
用写实光线步进渲染风格:自写 GPU 光线步进渲染器,没有外部 3D 模型和贴图,夕阳低角度逆光、海面反射和大气雾气,每帧多次采样降噪,电影感调色和浅景深,镜头缓慢移动。
画面由一张节拍表驱动,每个半拍一颗彩球飞到圆环上击中,炸出波纹和光束;。A beat table drives everything: each half-beat a ball hits the ring and bursts; 120 radial bars and kaleidoscope lines follow the envelope.
上千条流线从左侧几束种子点出发,沿一张随时间缓慢变化的噪声流场逐步积分走出去,相邻的线挨得很近就成了丝带;1.5 秒重音时给流场叠一阵高频扰动让丝散开,再按指数衰减慢慢理顺,叠加混合让交叠处更亮。Over a thousand streamlines start from a few bundles of seed points and are integrated step by step through a slowly evolving noise flow field, so neighbours stay close and read as ribbons; on the accent a burst of high-frequency turbulence scatters them and decays exponentially, drawn additively so crossings glow.
init 里一次画好暮色天空、树林和草叶剪影;几百个光点各有深度、绕圈半径和呼吸频率,位置由噪声和正弦算出,近处的用大号柔光贴图画成失焦光斑、远处的是清晰小点;2 秒前后一部分光点飞到“你”字的取样点上聚成字,同时字形本身亮起一层淡淡的柔光,让笔画更清楚,再散开。Sky, tree line and grass silhouettes are painted once; hundreds of lights each get a depth, orbit radius and breathing rate, placed by noise and sines; near ones are drawn as large soft bokeh sprites, far ones as sharp dots, and around two seconds a dedicated swarm flies to sample points of a character while a faint glow of the glyph lights up behind them, then they scatter again.
一个手写的 GLSL 片元着色器。窗外城市是网格里随机放置的暖橙、冷青光点,按失焦程度画成大光斑;玻璃上静止的小水珠和沿弯曲路线下滑的大水珠各自算出表面法线,水珠里按法线反向取样一张清晰、倒置的灯影,滑过处留下小水珠并擦掉雾气。One hand-written GLSL fragment shader: city lights are scattered in grid cells and drawn as large out-of-focus discs; still droplets and big drops sliding along wavy paths each compute a surface normal and sample a sharp, inverted copy of the lights, leaving a trail of beads and clearing the fog.
窗户画在一张小画布上(亮的窗格、暗的窗棂和窗台盆栽的剪影),用仿射变换把它“投”到地板上成为光斑,再在窗和光斑之间插值画几十层淡淡的叠加,就成了带窗棂影子的体积光柱;尘埃在光柱里的亮度直接取光柱图层的值,太阳角度随时间慢慢移动。The window is drawn once on a small canvas (bright panes, dark muntins, a potted plant); an affine transform throws it onto the floor as a light patch, and dozens of faint layers interpolated between window and floor build a volumetric shaft with the muntin shadows inside; each dust mote takes its brightness from the shaft layer.
五层楼群按随机种子生成(楼身、窗格、一层层飞檐和竖招牌),每层预先画成一张长图,镜头上升时近处的层移得多、远处的移得少,形成纵深;招牌的霓虹光和字各自单独一张小图,逐帧按哈希闪烁;层与层之间叠分形噪声做的雾带,前景是摇晃的红灯笼和雨丝,升到屋顶时天上浮出一个切片错位的全息大字。Five layers of towers are generated from a seed, with window grids, stacked flying eaves with neon trim and vertical signboards, and each layer is pre-drawn into one tall image; as the camera rises, near layers move more than far ones, giving depth. Every sign's neon glow and lettering is its own small image that flickers per frame from a hash, bands of fractal-noise fog drift between layers, red lanterns sway on ropes in the foreground under slanted rain, and on reaching the rooftops a giant hologram character appears in sliced, glitching strips.
整片厂区是一个片元着色器里的距离场:钢架塔(四根立柱加横梁和交叉斜撑,用对称和取模复制)、双曲面冷却塔、储罐和管道,按 2.5 分之一分辨率逐像素做光线步进;地面是一块平面水,命中后沿反射方向再走一遍得到倒影,加涟漪和油膜的虹彩;沿视线取十个点累加体积雾和顺着光方向的条纹,就是光柱;警示红灯按视线到灯的距离算光晕;焊接火花和飘落的灰在画布上按同一个相机投影来画。The whole plant is one distance field in a fragment shader: lattice towers (four columns with ring beams and cross bracing, repeated by symmetry and modulo), hyperboloid cooling towers, a tank and pipes, ray-marched per pixel at 1/2.5 resolution. The ground is a flat sheet of water: a hit marches again along the reflected ray for the reflection, with ripples and an oily iridescent film; ten samples along each view ray add up volumetric fog and stripes aligned with the light, which read as light shafts; red warning lights glow by the ray's distance to each lamp; welding sparks and falling ash are drawn on the canvas through the same camera projection.
阿波罗 17 号拍的地球照片慢慢推近、退到一侧,NOAA 莫纳罗亚 1959–2025 年的二氧化碳年均值逐年长成一排立体方柱,计数跟着旁白走。The Apollo 17 photo of Earth pushes in and slides aside while NOAA's Mauna Loa CO2 annual means for 1959–2025 rise year by year as a row of solid blocks, the counter keeping pace with the narration.
NASA 专家访谈剪成两段跳切,每句换一次景别(推近、拉回),关键词做成弹出的大花字,底部中文字幕。A NASA expert interview cut into two jump-cut takes; every sentence alternates framing, a keyword pops up as a big bold caption and Chinese subtitles run at the bottom. Segment timing lives in assets.json and the picture follows it frame by frame.
1974 年的两张太空餐试吃照片做推镜,圈出「挤着吃」的软管,弹出卖点贴纸和价签式标签;接空间站上吃饭的录像,最后一张产品卡收尾。Two 1974 NASA space-food tasting photos push in inside a print-ad layout; hand-drawn rings circle the squeeze tubes and sticker-style selling points pop up, then ISS footage and a round product card close it out.
左边发射录像、右边发射台照片上压巨大的倒计时数字;归零起飞后录像铺满,再分成三格,照片和任务数字(读 CSV)一格格滚出来,最后落一句口号。Launch footage on one side and a pad photo with a giant countdown on the other; at zero the footage goes full frame, then three panels roll in with photos and mission numbers read from a CSV, ending on a tagline.
一张 1942 年的公共领域风景照,depth.py 用 Depth Anything V2 估出深度图;片元着色器按每个像素的深度反推它在镜头移动后该在哪(近处挪得多、远处挪得少,迭代几次补遮挡),一张静照就有了推近加环绕的立体运镜;品牌标题放在天空和山峰之间的那一层,从山后升起、被山尖挡住;中段一道扫光露出深度图本身,结尾是虚构户外品牌的落版。depth.py estimates a depth map for a public-domain 1942 landscape with Depth Anything V2; a fragment shader works out where each pixel lands once the camera moves (near pixels shift more than far ones, iterated to fill occlusions), giving one still photo a push-in and orbit; the brand title lives on a layer between the sky and the peaks, rising from behind the mountains and clipped by the summits; midway a sweep reveals the depth map itself, and it ends on a fictional outdoor brand's end card.
把 1902 年《月球旅行记》剪成 15 秒的小故事,镜头之间插中文字幕卡(花边框、衬线字),画面加放映机的闪烁、片门晃动和划痕。The 1902 public-domain film A Trip to the Moon recut into a 15-second story, with ornate Chinese intertitle cards between shots and projector flicker, gate weave, scratches and grain on top.
空间站拍的夜景和日出两段录像、一张极光照片,按节拍切镜头;自写的歌词一字一字浮出,横屏加电影遮幅、竖屏歌词放中间,加漏光和颗粒。Two ISS Earth-view clips and an aurora photo cut on the beat, with original lyrics floating up character by character; letterboxed in landscape, centred lyrics in portrait, plus light leaks and grain.
Natural Earth 海岸线画底图,NOAA 最佳路径一点点画出飓风伊恩的轨迹(按强度上色),信息卡跟着读数;后半段空间站拍的两张照片滑进来,新闻条和字幕跟旁白走。A Natural Earth coastline base map while the NOAA best track of Hurricane Ian draws itself point by point, coloured by intensity, with a live readout card; ISS photos slide in later and a news lower third and subtitles follow the narration.
三张 1936 年的底片扫描摆在发亮的灯箱上,镜头在底片之间平移,放大镜在每张的细节上停一会儿;左上角的档案卡用打字机效果打出编号和年份,底部字幕跟旁白。Three 1936 negative scans from the Library of Congress lie on a glowing lightbox; the camera pans between them, a loupe lingers on details, an archive card types out the catalogue number and year, and subtitles follow the narration.
Artemis I 发射的三路机位各从不同时刻剪起,sync.py 用三段现场声音的互相关算出时差;片头把三条声波按算出的时差对齐,之后按同一个任务时钟切换近景、塔架、远景;最后换到跟踪镜头,叠上 JPL Horizons 星历里猎户座飞船 25 天的真实地月轨迹和读数。Three camera angles of the Artemis I launch are cut from different start times; sync.py cross-correlates their live audio to find the offsets, the intro slides the three waveforms into alignment, then the edit cuts between close-up, tower and wide on one shared mission clock and ends on a tracking shot overlaid with Orion's real 25-day Earth–Moon trajectory from JPL Horizons.
本仓库介绍页的操作录屏放进浏览器窗口,镜头跟着鼠标在点击前后自动推近、拉回;鼠标由代码按录下的轨迹重画,点击处有涟漪,左上角标第几步,底部字幕跟旁白。A scripted screen recording of this repository's intro page sits in a browser window; the camera pushes in around each click and pulls back, the pointer is redrawn by code from the recorded path with click ripples, step labels mark progress and subtitles follow the narration.
空间站延时拍的夜间城市灯火开场,切到 1900 年时代广场的夜景老照片,最后用 Natural Earth 的城市数据在黑底上一颗颗点亮世界最大的 60 座城市,按人口决定亮度和大小。ISS time-lapse of city lights at night opens, cuts to a c.1900 photo of Times Square at night, then Natural Earth city data lights up the world's 60 largest cities on black, brightness and size set by population.
把 1878 年迈布里奇《奔马》照片版上的 11 格切出来当动画播,像体育转播的慢动作回放——先正常速度,再放慢、定格在四蹄离地的那一格,用白板笔画地面线、圈和箭头,最后排成一条胶片对比。The 11 frames of Muybridge's 1878 Horse in Motion plate are cut out and played like a broadcast replay: normal speed, slow motion, then a freeze on the airborne frame with telestrator lines, a circle and an arrow, ending on a film-strip comparison.
1902 年《彼得兔》的插图一页页翻过去,每页插图轻轻呼吸、摇摆,像纸偶;下面一行童趣字体的文字跟着旁白逐字变色(卡拉 OK 式),翻页用一次纸张翻转。Beatrix Potter's 1902 Peter Rabbit illustrations turn page by page, each gently breathing and swaying like a paper puppet, while a playful line of text below changes colour character by character with the narration.
NASA《系统工程手册》的两页扫描放在工作台上,代码读这一页的文字层(每个词的位置),自己找到要讲的那句话在哪:荧光笔划过、镜头推近、抽成引文卡(原文 + 中文译文 + 页码);图示页按顺序圈出三块、编号配中文要点;结尾三条要点和出处。Two scanned pages of NASA's Systems Engineering Handbook sit on a desk; the code reads each page's text layer to locate the sentence it wants, sweeps a highlighter over it, pushes in and lifts it into a quote card with a Chinese translation and page number, circles the three blocks of the SE engine figure in order, and ends on three takeaways with the source.
Three.js 用 Poly Haven 的 CC0 木箱、油桶搭一块俯视竞技场,按虚构对局数据表(每秒位置、击杀)回放 6 名选手的走位和轨迹;击杀处闪圈、时间线落点、数据面板跳数;第一次阵亡时暂停,像战术板一样画圈画箭头,再沿着路线用滑块对比「实际走位」和「建议走位」。CC0 crates and barrels from Poly Haven build a top-down arena in Three.js; a fictional per-second match table replays six players with fading trails, kill rings, a timeline and a stats panel; at the first death the replay pauses for telestrator circles and arrows, then a slider compares the actual route with the suggested one.
一段 54 秒的 NASA 横屏访谈,edit.py 用 Whisper 出逐词时间,按句打分挑出 3 句、删掉口头禅;片头在文字稿上划掉要删的词、标出挑中的句子和分数,之后按剪辑表跳着播原片,竖屏裁切框跟着人脸检测的轨迹走,字幕逐词点亮;横屏版左边是原片和移动的裁切框,右边是手机里的竖屏成品。edit.py runs Whisper on a 54-second NASA astronaut interview for word timings, scores every sentence, keeps the best three and deletes the fillers inside them; the intro strikes those words out on the transcript and marks the picks with their scores, then the edit plays the source by the cut list while a portrait crop follows the face-detection track and the captions light up word by word. In landscape the source sits on the left with the moving crop box and the phone output on the right.
一个模板函数 card() 加一张三行的数据表(2023、2024、2025),每行出一条年度回顾:空间站拍的地平线做底,年份翻进来,NASA GISTEMP 的全球气温距平数字滚到位、算出「有记录以来第几热」,1880 年以来的柱状图点亮这一年,旁边是 NOAA 的 CO₂ 年均值;三条依次播完,最后把同一模板出的三条排成一排、配上数据表。One template function plus a three-row data table yields three year-in-review clips (2023, 2024, 2025): over a space-station photo of Earth's limb the year flips in, the NASA GISTEMP temperature anomaly counts up and its record rank is computed, a bar chart since 1880 lights up that year next to NOAA's CO₂ annual mean; the sample plays all three and ends with them side by side above the data table.
三张 CC0 的食物照片各占一栏、各自缓慢推近;下面套同一套条形图,读 USDA FoodData Central 每 100 克的营养成分表,7 项逐行长出来,每行最高的那一栏亮起;最后由数据算出一句结论。Three CC0 food photos sit in columns with slow push-ins; one bar-chart template reads USDA FoodData Central per-100 g values and grows seven nutrient rows one by one, lighting the highest column on each row, then writes a conclusion computed from the data.
技术Technique
素材Material
照片Photos
数据Data
风格提示词Style prompt (Chinese)
用「营养成分对比」:三张公共领域、CC0 的食物照片(苹果、香蕉、牛油果)各占一栏,缓慢推近;下面套同一套条形图,数据取自美国农业部 FoodData Central 的每 100 克营养成分——热量、脂肪、碳水、膳食纤维、蛋白质、钾逐项长出来,每一项最高的那栏亮起;最后一项写出一句结论,角落注明数据来源。
美国空军体能测试教学片里一段俯卧撑侧面示范,pose.py 用 MediaPipe 逐帧算出骨骼点和人体遮罩;片头一道擦除把原片(旁边跪着计数的考官)换成代码画的训练房,人按遮罩抠出来放进去;骨骼线和关节点跟着人走,肘角弧线和读数实时变,躯干从肩到踝拉一条直线、按直线度变色,肘角先低于 100° 再撑过 150° 记一次,旁边一条肘角曲线带阈值线和播放头。pose.py runs MediaPipe on a push-up demo from a U.S. Air Force fitness assessment film for per-frame landmarks and a person mask; a wipe swaps the original set (with the kneeling evaluator) for a code-drawn training room with the athlete keyed in by the mask, the skeleton follows him, the elbow-angle arc and readout update live, a shoulder-to-ankle line changes colour with body straightness, reps count when the elbow dips below 100° and pushes back past 150°, and an elbow-angle curve with threshold lines tracks the playhead.
两张 AI 生成的纸拼贴插图(深海背景、白底章鱼)由代码抠掉白底、叠成前后两层错开移动;旁白说到「三颗心」「鳃」「全身」「蓝色」「血蓝蛋白」时,代码在图上贴纸心、红笔圈、手写标签和剪报拼字。Two AI-generated paper-collage illustrations (a deep-sea backdrop and an octopus on white) are keyed and layered by code with offset parallax; when the narration reaches each keyword, code sticks on paper hearts, red marker circles, handwritten labels and ransom-note letters.
AI 生成的原创卡通主播定妆照当首帧,生成一段说话的视频;代码排成演播室版面——主播一侧,另一侧随旁白逐条弹出问题卡和要点卡、关键词高亮,底部字幕,角落节目名牌。视频只有 10 秒,后半段跳切回前面并推近一档。An AI-generated original cartoon host is used as the first frame of a generated talking video; code lays it out like a studio show with the host on one side and question and point cards popping in on cue with the narration, keyword highlights, subtitles and a show badge. The 10-second clip is jump-cut and punched in for the second half.
AI 生成的产品棚拍图和以它为首帧生成的推镜视频,代码加宽银幕黑边、逐字打出的卖点细线标注,最后落版品牌名、口号、价格牌和购买按钮。An AI-generated studio shot of a product and a push-in video generated from it as the first frame; code adds letterbox bars, thin callout lines whose labels type out, and an end card with brand, slogan, price tag and buy button.
Poly Haven 的 CC0 陶瓷花瓶模型(glTF 网格 + 法线、粗糙度贴图)放进 Three.js 转台;。A CC0 ceramic vase model from Poly Haven (glTF mesh with its normal and roughness maps) is parsed in the page and placed on a Three.js turntable. A generated blue-and-white lotus-scroll pattern is wrapped around the body with a cylindrical projection and mirrored tiling so the seam stays continuous, and a glowing glaze line in the shader sweeps from foot to rim, turning the white bisque into blue-and-white porcelain. The 3D layer renders with a transparent background over a generated beige studio backdrop, leaving only the floor shadow; a close-up adds three spec callouts and the camera pulls back for a fictional ceramics brand end card.
两段 AI 生成的空镜(清晨海岸航拍、倒茶的手)按节拍剪在一起,镜头上压整屏的超大描边品牌字,随镜头慢慢滑动、只露出一部分;口号用细衬线体一句句淡入;结尾黑底上的大字当遮罩,海岸镜头从字里透出来,再落标志。Two AI-generated empty shots (a dawn coastline aerial and hands pouring tea) are cut together; oversized outlined brand type drifts across the frame, the tagline fades in letter by letter in a thin serif, and the end card uses the brand name as a mask with the coastline showing through.
两张 AI 生成的日式动画画(女主角、进站的小火车)和以女主角图为首帧生成的转头镜头;代码排成漫画分格——格子依次滑入、格内推拉,关键一格整屏放大并加速度线和闪白,对白用气泡,心里话是旁白加竖排字,雨丝由代码画,结尾片名和「下集」字卡。Two AI-generated anime-style images (the heroine and a train pulling in) plus a head-turn shot generated from the heroine image; code lays them out as manga panels that slide in, blows the key panel up full-screen with speed lines and a white flash, adds a speech bubble, vertical inner-monologue text, code-drawn rain and a title card.
一张分镜表(镜号、景别、画面、旁白)→ 生图出每个镜头的关键帧,其中两格再用图生视频动起来,旁白语音合成;。A four-shot storyboard (shot number, framing, picture, narration) drives everything: an image model makes one keyframe per shot in a shared watercolour style, two of the keyframes become short clips through image-to-video, and the narration is synthesized. The film opens on the storyboard sheet itself, with pencil-sketch versions of the four frames, framings and duration bars, then the first panel zooms up into the real shot. Cut points are not hard-coded: each shot knows the first words of its narration line and cuts where that line starts in the speech timing, stills get a slow push or pull, the animated shots play, and a slate with a mini storyboard marks the current shot. The story is original and has no people.
四张 AI 生成的画,每张正中有一个圆形「洞口」(窗、漩涡、气泡),代码一直往洞口推近,把下一张画缩小后用羽化圆形遮罩嵌在洞里,快推满时圆外也渐渐显出下一张,到头正好变成下一张的全貌,一层层钻进去;歌词跟着推进一个字一个字亮起。Four AI-generated paintings each have a round opening at the center; code keeps pushing into the opening, nests the next painting inside it with a feathered circular mask, and swaps seamlessly when the opening fills the frame, layer after layer; lyric characters light up as the zoom advances.
三张 AI 生成的扁平示意插画(发烫的城区、凉爽的郊外、绿化后的街区),代码排成新闻台版面:顶部栏目条、插画慢推、旁边的数据卡(温度计对比、白天吸热晚上放热、三条降温办法逐条打勾)、底部滚动标题和字幕,换要点时色块擦过画面;角落标明示意图由 AI 生成。Three AI-generated flat explanatory illustrations sit in a news-desk layout built by code: a section bar, slowly pushing illustration, a data card (illustrative thermometers, heat in by day and out by night, three cooling measures ticked off as they are mentioned), a scrolling ticker and subtitles, with colour-block wipes between points and an on-screen note that the illustrations are AI-generated.
技术Technique
素材Material
生图Generated images
语音合成Speech synthesis
风格提示词Style prompt (Chinese)
用「插画新闻解说」:每个要点生成一张扁平插画式的示意图(不画真实人物、不冒充现场照片,画面角落标「示意图 · AI 生成」),代码排成新闻台的版面:顶部栏目条,中间插画慢慢推近、需要对比时左右分屏,旁边的数据卡用代码画(示意温度计、进出的箭头、旁白说到就打勾的清单),底部滚动标题和逐句字幕;换要点时用色块擦过画面。旁白用新闻播报风格的公开音色。
AI 生成的屋顶纸鹤照片和起飞镜头,代码叠一层野外纪录片的取景器:手持晃动、对焦由虚到实、REC 和走动的时间码、物种名下三分之一字幕、「观察第 37 天」场记、数量估计,最后跟着鹤群起飞收在片名上。An AI-generated photo of paper cranes on city rooftops and an AI-generated take-off clip, wrapped in a code-drawn wildlife-documentary viewfinder: handheld shake, a focus pull, REC and running timecode, a lower-third species name, a field-log day counter and a head count, ending on the title as the flock takes off.
三张 AI 生成的手冲咖啡俯拍(以第一张为参考,桌面和器具前后一致),代码叠步骤编号、电子秤读数一路滚到目标克数、闷蒸 30 秒倒计时圆环、注水路径的虚线圆圈和箭头,底部步骤进度条;没有旁白,靠大字和计数讲清楚。Three AI-generated overhead photos of a pour-over (later shots referenced to the first so the table and tools stay consistent), overlaid in code with step numbers, a scale reading that counts up to the target weight, a 30-second bloom countdown ring, a dashed circle tracing the pour path and a four-part progress bar; no narration, the big type and counters carry it.
两段 AI 生成的旅行镜头(清晨水乡、夜晚老街)贴在手账纸上当照片,四角胶带、微微歪着;旁边手绘路线图,虚线跟着旁白从码头走到老街,说到的地方盖一个印章;字幕是手写体,结尾盖「第一天」大章。Two AI-generated travel clips (a misty water town at dawn, a lantern-lit night market) are taped onto journal paper as tilted photos; beside them a hand-drawn route map draws its dashed path from the pier to the old street in step with the narration, stamping each place as it is mentioned, with handwritten subtitles and a big 'Day 1' stamp at the end.
一段 AI 生成的扣篮镜头(虚构球员、无队标),代码剪成集锦:正常速度助跑 → 慢放起跳 → 最高点定格(背景去色、圈出球、弹出数据卡)→ 扣进的一下比分牌翻到 88、闪白 → 「本周最佳」收尾;角上一直挂着转播比分条。One AI-generated dunk clip (a fictional player, no team marks) cut as a highlight in code: approach at full speed, slow-motion take-off, a desaturated freeze at the peak with the ball circled and illustrative stat cards, a flash and score flip to 88 on the dunk, then a 'Play of the Week' end card, with a broadcast score bug throughout.
三张 AI 生成的水彩绘本插画(后两张以第一张为参考,小刺猬前后是同一只),代码排成一本摊开的书:左页插画、右页文字(竖版上图下文),翻页时纸张绕书脊转过去带阴影;文字跟着旁白一个字一个字染色,像卡拉 OK 字幕;最后合上一页写「完」。Three AI-generated watercolour picture-book illustrations (the later two referenced to the first so the hedgehog stays the same) are laid out in code as an open book: picture on the left page, text on the right (picture above text in portrait); pages turn around the spine with shading, and the text fills in character by character with the narration like karaoke, closing on a hand-lettered 'The End'.
生成的办公室插画当底图,代码按旁白的逐字时间逐个圈出隐患、拉出编号标签,再弹一道选择题——先选错的变红轻抖,再亮出正确答案打勾;最后用滑块把同一间办公室整改后的图(以第一张为参考图生成)划进来对比。A generated office illustration is the base; timed from the narration's per-character timings, code circles each hazard and pops a numbered tag, then a quiz card picks the wrong answer (red shake) before ticking the right one; finally a slider wipes in the fixed office, generated from the first image as a reference.
两段生成的游戏画面(自带音效)剪成一条高光:开场对阵卡,比分条和倒计时一直挂着,击杀时右上弹击杀提示、中间弹大字,底部解说字幕条;两段之间用队色斜切转场,最后定格,四周压暗、只留主角一圈亮,比分翻成 3:2;竖屏时取景跟着爆炸往右移。Two generated gameplay clips, each with sound generated alongside the picture, are cut into one highlight: a team-versus card opens, a score bar and round timer stay on top, kills slide into a feed and slam a big callout, a caster subtitle bar runs along the bottom, a team-colour diagonal wipe joins the clips, and a final freeze frame dims everything but a glowing ring around the player while the score flips to 3:2; in portrait the crop pans right to follow the explosion. Teams, players and the tournament are all fictional.
两位虚构主持人的插画头像一左一右(竖屏一上一下);init 里用 Web Audio 把两段旁白解码成波形,算出每 1/60 秒的音量包络;谁在说话,谁的头像外圈一圈声波柱跟着音量起伏、亮起,另一位变暗;下面字幕按逐字时间点亮;答到金句时弹出金句卡,结尾落节目名和期数。Two generated illustrated avatars of fictional hosts sit side by side; Web Audio decodes the two synthesized voice tracks in the browser into a loudness envelope, so the speaker's ring of bars pulses with their voice and glows while the other dims; subtitles light up character by character, a gold quote card pops on the key line, and the show name and episode close it out.
生成一张 4 × 3 的拼图插画,代码按格子切开(格子位置事先从图里量出),一月一页翻过去;每页套同一个数字卡模板读一行月度数据,杯数滚动到位,角落累计全年;翻到八月正好卡在旁白说「八月」;最后十二格缩回原位拼成总览墙,最忙的月份描边。One generated 4 × 3 illustration is sliced along tile bounds measured from the image; each month flips in as a page with the same number-card template reading one row of a monthly table, counts rolling up and a running yearly total in the corner, August timed to the narration; then all twelve tiles fly back into a wall with the busiest month outlined.
生成的成品菜和食材平铺照片画在画布上,语言模型写的四个步骤线条图标(steps.svg)放进盖在上面的 SVG 层,按每一笔的长度用描边虚线一笔一笔描出来;四步出现的时刻从旁白的逐字时间里取,字幕跟着旁白走。Generated photos of the finished dish and the ingredients sit on a cream card; four line icons written as SVG by a language model sit in an SVG layer above the canvas and are drawn on stroke by stroke with dash offsets, each step timed from the narration's per-character timings, with subtitles following the synthesized voice.
生成一位虚构教练的定妆图当首帧,图生视频做一个侧腰拉伸;代码按旁白的逐字时间控制播放——站着等口令、跟着「向左弯」放下去、「保持」时在最低点来回慢放像在呼吸、「回正」再放完;旁边叠动作名、要点清单(逐条随旁白点亮)、倒计时圆环和组数,数到「一」圆环走完,「回正」亮起「完成」。A generated portrait of a fictional coach is the first frame of a 5-second image-to-video clip; code drives playback from the narration's per-character timings — the arm rises on cue, the bend follows the words, the hold rocks slowly at the lowest point like breathing — while a checklist lights item by item, a countdown ring runs through three-two-one and flips to Done.
样片通过以后,这种风格就沉淀成一套可复用的代码,再附一份能抄进项目规范的风格说明。每个包只切换一个维度:纯代码的包换品牌色,素材做的包换画面组织或画风,片头、讲解、数据、转场、字幕都跟着走。下面的演示片由风格包的部件拼成,点视频下面的标签切换,画幅跟着上面的样片区切换;左右滑动或点右侧的 » 看下一个包。Once a sample is approved, the style becomes reusable code, plus a style guide you can paste into your project rules. Each pack switches exactly one dimension: code-only packs swap the brand color, material-based packs swap the layout or the art style, and the opener, explainer, data, transitions and captions all follow. The demos below are built from each pack's parts; use the tabs under a demo to switch, and its frame shape follows the switch in the samples section. Swipe sideways, or tap » on the right, for the next pack.
换品牌色Brand color
dark-keynote
暗色科技发布会风格包Dark tech keynote pack
一个品牌色推出整套配色;45 种分镜(40 种整屏段部件、5 种叠在段上的部件)按分镜表排成一支完整的发布短片,每个镜头 1.5–2.25 秒、切在拍上;背景、粒子、镜头、转场、节拍、角标、字幕是贯穿全片的层,换色只改一个参数。One brand color drives the whole palette; 45 shot forms (40 full-frame segment parts and 5 overlays) are laid out on a shot table as a full launch film, each shot 1.5–2.25 s and cut on the beat; backdrop, dust, camera, transitions, beat grid, corner bug and captions are layers across it. Swapping the brand color is one parameter.由 C-044 沉淀。Built from C-044.
公共领域照片加公开数据做成电视新闻式解说:栏目条、标题、数据卡、标注、滚动出处和字幕固定,切换的是「画面组织」——单图推拉、2.5D 视差分层、多图拼贴分屏,只改一个参数。Public-domain photos plus open data become a TV-style news explainer. The show bug, headline, data card, annotations, source ticker and subtitles stay fixed; what switches is how the pictures are organized (single-image Ken Burns, 2.5D depth-layer parallax, or a multi-image split-screen collage), with one parameter.由 T-007 沉淀。Built from T-007.
提示词写成「镜头段 + 风格段 + 约束段」:分镜、镜头段、约束段和剪辑代码只有一份,切换的是「画风」——只换风格段那一行,写实摄影、水彩插画、3D 黏土各生成一套图,片子跟着换。Prompts are written as shot + style + constraints. The storyboard, the shot and constraint segments, and the editing code exist once; what switches is the art style: change only the style line and a new set of images (photo, watercolour, clay) is generated, and the film follows.由 G-016 沉淀。Built from G-016.
每支样片是一个文件夹里的两份代码,加一条共用的出片管线;用素材的样片另有一个 assets/ 文件夹和一份素材清单 assets.json,记下每份素材的出处、许可或生成参数。横屏 16:9 和竖屏 9:16 用同一份代码,按画幅重新构图,不裁切。Each sample is two code files in one folder plus a shared render pipeline; samples with material also carry an assets/ folder and an assets.json list recording each piece's source, license or generation settings. Landscape 16:9 and portrait 9:16 come from the same code, recomposed for each frame shape rather than cropped.
scene.js
画面Picture
一个 draw(ctx, t) 函数:给定时间 t,画出这一帧。不读随机数、不读时钟;视频素材按帧号取那一帧,所以结果唯一。One draw(ctx, t) function: given time t, draw that frame. No unseeded randomness, no clock; video material is read by frame number, so the result is unique.
sound.py
声音Sound
一个 score(m) 函数。纯代码样片用代码合成的电子音:拨弦、FM 钟、方波、噪声扫频;用素材的样片照清单摆旁白、原声和公开曲库的配乐,说话时自动压低配乐。One score(m) function. Pure-code samples use synthesized sound: plucked strings, FM bells, square waves, noise sweeps. Samples with material place narration, original audio and openly licensed music from their asset list, ducking the music under speech.
render.py
出片Render
无头 Chromium 按 t = 帧号 ÷ 30 逐帧截图,交给 ffmpeg 编成 H.264,再和声音合成 MP4,顺手出静帧和缩略图。Headless Chromium captures each frame at t = frame ÷ 30, ffmpeg encodes H.264 and muxes the sound into an MP4, plus a still and a thumbnail.
两种用法,提示词的重点不一样:风格演示要写清样式,也就是画面长什么样、怎么做;完整出片先说清内容和需求,每段的样式由助手分段时按段定,你看过再点头。The two ways of using it call for different prompts. A style demo needs the look spelled out: what the picture is and how it is made. A full film starts from the content and the brief; the assistant picks a look for each segment while breaking down the storyboard, and you approve it.
风格演示:写清样式的 8 个要点Style demo: eight points that pin down a look
只写风格名,结果常常退化成通用扁平动画。真正起作用的是这 8 个要点,写得越具体越稳。纯代码、真实素材、AI 素材三类都按这 8 点写;用素材的,另外写清素材从哪来、怎么处理。完整出片里每段的样式,也照这 8 点定。A style name alone usually collapses into generic flat animation. These eight points do the work; the more specific, the steadier the result. All three classes (pure code, real material, AI material) follow them; with material, also say where it comes from and how it is handled. In a full film, each segment's look is pinned down the same way.
制作路径Production path纯代码逐帧;或用哪些真实素材(录像、录屏、照片、数据)、出处和许可;或用哪个模型生图、生视频、合成旁白。代码负责剪辑、排版和动效。Pure code frame by frame; or which real material (footage, screen recordings, photos, data) with its source and license; or which model makes the images, clips and narration. Code does the editing, layout and motion.
3–5 个标志元素3–5 signature elements材质、限定调色板(写色值)、线条、留白、字体。用素材时写统一的色调、裁切和字幕样式;AI 素材先出一张定妆图当参考,前后才一致。Material, a limited palette with hex values, line quality, negative space, typeface. With material: one color grade, crop and caption style; for AI material, make a reference image first so every shot matches.
运动语言Motion帧率、缓动、禁止项(不要弹跳、粒子、发光)。素材片段的快慢、照片的推拉平移、数据怎么一步步长出来。Frame rate, easing, and what to avoid (no bounce, particles, glow). How fast clips run, how photos pan and push, how data builds up.
独有的转场A signature transition墨晕开、纸页折叠、网格扫过、漫画分格滑入,放在高潮。Ink bloom, paper fold, grid wipe, comic panels sliding in; place it at the climax.
镜头语言Camera推拉、横移、俯视、结尾拉远。真实素材写剪辑表(哪份素材的第几秒到第几秒、裁哪块);AI 素材给每个镜头写首帧、动作和运镜。Push-ins, pans, top-down views, a closing pull-back. For real material, an edit list (which seconds of which file, cropped where); for AI material, each shot's first frame, action and camera move.
声音Sound配乐乐器、音效跟着材质走、有没有旁白。用素材的写清保不保留原声、旁白用哪个公开音色、配乐的许可。Instruments, effects that match the material, narration or none. With material: keep the original sound or not, which stock voice narrates, the music's license.
参考作品References写清学构图、节奏、配色,不学角色和 Logo。Say what to learn (composition, rhythm, color) and what not to copy (characters, logos).
规格与验收Specs and checks时长、画幅、帧率;先出样片再出整片,每步抽帧自检。用素材的先列素材清单(出处和许可,或模型、参数和提示词),出片前去掉元数据。Length, frame shape, fps; sample before the full film, and check a contact sheet at every step. With material, list every piece first (source and license, or model, settings and prompt) and strip metadata before export.
通用模板,三类各一份(方括号换成你的内容)Templates, one per class (in Chinese, as the Skill uses them; replace the brackets)
不用一开始就选风格。说清给谁看、讲什么,助手先分段(每段讲什么、几秒、用什么样式,一段可以混用几种)、把段拆成分镜(每个画面画什么、几秒、配哪句旁白),再写逐字稿,再定全片统一的色板、字体、字幕、转场、配乐和旁白音色。它补的数据和事实都标「待你确认」,你点头才进片子。No need to choose a style up front. Say who it is for and what it says; the assistant first splits the film into segments (what each says, how long, which looks, several mixed in one segment if needed), breaks segments into shots (what each picture shows, how long, which line it goes with) and writes a script, then sets what stays the same across the film: palette, type, captions, transitions, music and narration voice. Any data or facts it adds are marked for your confirmation and go in only when you approve.
给谁看Who it is for受众是谁、在哪儿看:刚开始做饭的大学生、新员工培训、发在视频号。The audience and where they watch: students who just started cooking, new-hire training, a social video channel.
看完得到什么What they take away一句话:看完知道什么、会做什么、记住什么。One sentence: what they know, can do or remember afterwards.
一句话主线The one-line story整支片子围着哪句话转,比如「水开了不等于够热」。The line the whole film turns on, such as "boiling isn't the same as hot enough".
时长和画幅Length and frame几分钟;横版 16:9(默认)或竖版 9:16,只出一版。How many minutes; landscape 16:9 (the default) or portrait 9:16, one version only.
语言和旁白Language and narration什么语言,要不要旁白。旁白用语音合成的公开音色,也可以用本地 Kokoro;要用自己的声音,请自带克隆声音的第三方工具。Which language, narrated or not. Narration uses a stock voice from a speech service, or local Kokoro; to use your own voice, bring your own voice-cloning tool.
内容素材Your content你手上的稿子、要点、数据、链接,贴给它整理;只有一个主题的,它从主题往外扩展。内容多、要查证的,先用 AI-content-planner 做策划。Drafts, notes, data or links you already have, for it to organize; with only a topic, it expands from there. For heavy, fact-checked content, plan it first with AI-content-planner.
必须有和不要Musts and don'ts一定要出现的品牌色、产品、口播句;不想要的画风、说法、音乐。Brand colors, products or lines that must appear; looks, phrasing or music to avoid.
怎么确认How you sign off先给段落表、分镜表和逐字稿,确认后先做 1–2 段带旁白的典型样片,满意了再出整片。Segment table, shot lists and script first; after sign-off, one or two narrated typical segments; the whole film once you are happy.
完整出片的说法示例(方括号换成你的内容)A full-film request (in Chinese; replace the brackets)
什么是 Skill,这个 Skill 怎么用?What a Skill is, and how to use this one
这个仓库的核心是一个 Skill。下面分三块说:它是什么、怎么装、装好以后的两种用法。At the heart of this repository is a Skill. Three parts below: what it is, how to install it, and the two ways to use it once installed.
1
什么是 SkillWhat a Skill is
Skill(技能包)是写给 AI 编程助手的一份说明书:一个文件夹,核心是一份 SKILL.md,旁边放着它要用的资料和脚本。助手平时只记得它的一句简介;你的话题碰到做视频时,它才把整份说明和用得上的词典条目读进来,照着做。A Skill is a manual written for an AI coding assistant: a folder built around one SKILL.md, with the reference material and scripts it needs. The assistant normally keeps only its one-line summary in mind; when your request touches on making a video, it reads the full manual and the dictionary entries it needs, and follows them.
所以你不用记风格名和参数,也不用把提示词一段段贴给它。说「给一支讲水循环的科普片选个风格」,它会去查词典、给你候选、写代码、出样片。So you don't need to remember style names or parameters, or paste prompts in. Say "pick a style for an explainer on the water cycle" and it looks up the dictionary, offers candidates, writes the code and renders a sample.
你提到做视频You mention a video
助手读 SKILL.mdIt reads SKILL.md
查词典、选风格Looks up styles
写代码、出样片Writes code, renders
ai-coding-video/
SKILL.md给助手的说明书:什么时候用、按什么步骤走The manual: when to use it, which steps to follow
styles/*.md风格词典:每种一句提示词、题材、技术标签The dictionary: a prompt, theme and tags per style
index.md按用途、题材选风格的索引表Lookup tables by purpose and theme
prompting.md提示词写法和通用模板How to write prompts, plus a template
materials.md用真实素材、AI 素材做视频的做法Making videos with real or AI-generated material
sound.md配乐、音效和旁白Music, effects and narration
making.md出样片、做风格包、整片的规矩Making samples, style packs and the whole film
film.md完整出片的六步,分镜脚本和逐字稿的格式The six steps of a full film; storyboard and script formats
scripts/生成索引、检查条目和分镜脚本的脚本Scripts that build the index and check entries and storyboards
2
安装Install
支持 Agent Skills(SKILL.md)格式的助手都能装:Claude Code、Codex、DeepSeek Harness、WorkBuddy 等。Works with any assistant that reads Agent Skills (SKILL.md): Claude Code, Codex, DeepSeek Harness, WorkBuddy and others.
Claude Code
claude plugin marketplace add chans-gh/AI-Coding-Video
claude plugin install ai-coding-video@ai-coding-video
git clone https://github.com/Chans-gh/AI-Coding-Video.git
cd AI-Coding-Video
scripts/install.sh dsh # or: claude · codex · all · zip
装好以后直接问:“给一支讲水循环的 60 秒科普片选个风格”“用 C-013 皮影戏的风格写一段 Canvas 动画”,或者“做一支 3 分钟讲高原煮面的科普片,横版带旁白”。Then just ask: "Pick a style for a 60-second explainer on the water cycle", "Write a Canvas animation in the C-013 shadow-puppet style", or "Make a 3-minute narrated explainer on cooking noodles at altitude, landscape".
3
两种用法Two ways to use it
装好以后,助手在你自己的项目里按你要的走其中一条:只想看看效果、挑一套风格的,走风格演示;要做一支几分钟的片子,走完整出片。每一步你点头才往下,停在哪一步都行。Once installed, your assistant follows one of two tracks in your own project: a style demo if you want to see looks and settle on one, or a full film if you want a video several minutes long. It moves on only when you approve, and you can stop at any step.
风格演示:看看效果、挑风格、定一套风格Style demo: see the looks, choose one, settle on a set
0
选样式Pick a look
235 种风格styles
从词典里挑:每种一句可复制的风格提示词,纯代码的标题材和技术,用素材的标内容类型和素材种类,配几张选风格索引表。样式就是风格加技术路线和素材类型。Choose from the dictionary: each style has a copy-ready prompt (in Chinese); pure-code styles carry a theme and techniques, material styles a content type and kinds of material, with lookup tables for choosing. A look is a style plus its tech route and kind of material.
1
出样片Make a sample
122 种已出样片rendered so far
候选样式套上你的品牌色和内容(用素材的换成你的素材),跑一小段,横竖各一版。本库的样片是示范,代码可以直接改。A candidate look with your colors and content (and your own material where it uses some), a short clip in both frame shapes. The samples here are worked examples you can edit.
通过的风格沉淀成可复用的代码模块,覆盖片头、讲解、数据、转场、字幕;每个包可换一个维度:品牌色、画面组织或画风。An approved style becomes a reusable code module: openers, explainers, data, transitions, captions. Each pack swaps one dimension: brand color, layout or art style.
完整出片:做一支几分钟的片子Full film: a video several minutes long
定内容Settle the content
有策划稿的照着接;没有的,助手整理或扩展你给的内容,补的事实标「待你确认」。With a plan from AI-content-planner, it follows it; without one, it organizes or expands what you give, marking any facts it adds for your confirmation.
分段、分镜与样式Segments, shots and looks
分段、每段讲什么、几秒、用什么样式,一段可以混用几种风格、技术和素材;段里再拆成分镜:每个画面画什么、几秒、配哪句旁白;同时定全片统一。Segments, what each says, how long, which looks, mixing styles, techniques and material within a segment; each segment broken into shots: what each picture shows, how long, which line; plus what stays the same across the film.
逐字稿Script
每段念什么,画面上每个数字和事实从哪来。What each segment says aloud, and where every number and fact on screen comes from.
你确认Your sign-off
一次看段落表、每段的分镜表、全片统一、逐字稿和待确认的事实;两张表由检查脚本打印,不手抄。Segment table, each segment's shot list, film-wide settings, script and facts to confirm, all at once; a check script prints both tables.
典型样片Typical segment
先做 1–2 段最难或最能代表全片的,带旁白和配乐,用整片的画幅。One or two of the hardest or most representative segments first, with narration and music, in the final frame shape.
渲染整片The whole film
配完全部旁白、定好段长,分段渲染、单独检查,再接成整片、统一混音。All narration done and segment lengths set, then render and check segment by segment, join them and mix the sound once.
默认出一版:横版 16:9,要竖版就只出竖版,不另剪短片。做法和格式见 Skill 里的 film.md;下面「真实应用」是完整出片的示范。One version by default: landscape 16:9, or portrait only if you need it, with no extra cut-downs. The method and formats are in the Skill's film.md; "In real work" below shows full films made with it.
AI-Coding-Video 真实应用AI Coding Video in real work
样片演示一种风格、一个技术;这里是把它们拼成一条能交付的完整视频。每支都用到 C 代码画、T 真实素材、G AI 生成三类,各有一个主角类。点卡片开始播放,右边的说明跟着进度切到当前这一段:用了哪几类、哪些技术(点了跳到对应样片)、怎么编排的;进度条按段着色,颜色是那段的主角类。Each sample shows one style or one technique; here they are combined into complete, deliverable videos. Every video uses all three kinds (C code-drawn, T real material, G AI-generated), with one kind in the lead. Click a card to play; the notes on the right follow the playhead to the current part: which kinds and techniques it uses (each links to its sample) and how it was put together. The progress bar is split by part and colored by each part's lead kind. The videos and notes are in Chinese.
编排How it is built全由星历算出:Orion 和月球的地心坐标按 10 分钟一点插值,转到飞掠时月球朝上的视角。旁白每句开口时快进一截任务时间、换一张说明卡,轨迹画到当前时刻,底部读数(东部时间、离地心距离、速度)跟着走;最后一句镜头推近月球,轨迹显出一个个数据点。地球、月球放大画,标明示意。
2:00–2:50第 5 段Part 5
飞掠宇航员拍到的月面、地球落下
C 代码画C · codeT 真实素材T · real materialG AI 生成G · AI-generated
编排How it is built前半是 NASA 录像按旁白句子切:舱内降落伞、溅落空中机位、回收照片、总航程计数器。后半是发布会:59 分钟的长录像先转逐词文字稿挑出两截原话,对照原声核过,切成竖屏;画面和原声按同一组起止秒(场景和 sound.py 共用)摆,中英大字幕按逐词时间出,第二截硬切接上,段尾压黑。
4:15–4:45第 8 段Part 8
接下来后续任务的时间表(2027 年近地轨道对接试验、2028 年南极附近着陆);还没有真实画面的部分用 AI 示意
C 代码画C · codeT 真实素材T · real materialG AI 生成G · AI-generated
编排How it is built上层是一条时间线,4 个节点按旁白句子逐个点亮(2026 已完成);下层是 AI 示意画面:两张插画单图推拉,月面基地先放首帧图,再硬切进它生成的 5 秒视频,最后停在末帧上慢推。右上角一直挂「示意图 · AI 生成」或「AI 生成示意」,说到「AI 生成」那句时画面中间再压一行大字。
编排How it is built编辑器式分屏:左边文件树随命令长出来;中间是助手写出的 scene.js(课上那份的原样开头),逐行写出、语法高亮,四个步骤名那一行高亮;右边先是和助手的对话(给助手的话是示意),跑完快速预览后换成实时预览,出片进度条(示意)和实测用时也在这里;底部小终端是实测的命令和输出原样。说到「片子已经出好了」编辑器让位,横版一张卡、竖版放进手机样机并排播放。
3:30–4:09第 7 段Part 7
原理为什么改一个值就能重出:值可以来自真实数据;生图提示词拆三段,只换风格段
C 代码画C · codeT 真实素材T · real materialG AI 生成G · AI-generated
编排How it is built左边一个三维地球(three.js 代码建的球,贴 NASA SVS 的等距投影地球图),慢慢自转,C、T、G 三个小球跟着「一、二、三」逐个出来、绕轨道转;右边三条要点卡逐张弹出,每张配一个语言模型写的 SVG 图标,标出处。说到「最常见的错」地球退场、三张卡收成一排,下面是「最常见的错」和「课后练习」两张卡。
4:38–4:50第 9 段Part 9
讲师收尾收尾、预告下一节 T 类,片尾写明讲师虚构和出处
C 代码画C · codeT 真实素材T · real materialG AI 生成G · AI-generated
编排How it is built3 层。开头的容量图由代码重画成简笔(原图上有别家的标志);接着 4 张生成的俯拍步骤图,旁白念到哪样东西就切到放它的那张。步骤图里提绳被画在了包身上(真品装在盖上),所以每张放大 2.2 倍只取包口和手,提手和盖子在画外;最后一张合盖图结构是对的,整张用。计数和标注在最上层。