Моушн-лаборатория Opus 5.5: как заставить Claude анимировать на уровне студии

Каждая анимация в этой лаборатории сделана Claude Opus 5.5, и к каждой приложен точный промпт, который её создал, и все правки, которые понадобились потом. Никаких фальшивых «с первого раза» — моушн-дизайн с чеками.

Материал — разбор лабораторного дневника Florence (@flxrnc): все промпты, правки и замеры ниже взяты оттуда.

С выхода Opus 5.5 22 сентября лента заполнилась моушн-роликами с подписью «один промпт». Некоторые и правда были одной строкой. Самый просматриваемый клип — это пять минут разговора и 12 часов работы модели. Середину почти никто не показывает: второй промпт, третий, заметку «кадр 84 достигает пика поздно».

Эта статья — лабораторный журнал как раз этой середины. Три анимации Opus 5.5, картинка и звук, с каждым промптом и каждой правкой. Цифры, которые заставили их работать. И установка, которая ведёт от пустой папки к петле, которую можно выложить в X.

Открывающий кадр: жидкий хром, который сам заливается в надпись, — из промпта, полного цифр.

Шесть секунд, одна петля: хромовая капля сжимается, растягивается и делится на 7 капель, каждая заливается в свою букву, по слову пробегает блик, и буквы снова тают в одну колышущуюся каплю. Жидкость — одна фигура, нарисованная в шейдере методом raymarching, буквы — настоящий TextGeometry из three.js, а видеокарта отрисовала каждый кадр с частотой 60 fps и размытием движения, собранным из промежуточных подкадров.

Точный промпт, вставленный в Opus 5.5 как есть:

Liquid Chrome: 6 s seamless loop, 60 fps, 1080x1080, one HTML file, three.js 0.160.0 via jsdelivr importmap only.

window.renderAt(t) sets everything from t in seconds; all motion and noise periodic in 6 s; with ?t= never start requestAnimationFrame; window.__ready after font and bake. Quarter-pixel camera jitter, 4 offsets from frac(t*60).

Raymarch blob, 7 droplets and text as one SDF in a full-screen shader. Smooth-min k 0.35, falling to 0.1 as droplets part; each droplet becomes its glyph through mix(dropSDF, textSDF, K). Text: TextGeometry "OPUS 5.5" per glyph, helvetiker_bold from the pinned examples/fonts, size 0.52, height 0.12 (r160 reads height, not depth), bevel 0.03, 10 bevel and 24 curve segments, tracking -0.04 em, period optically centered. Bake the same outlines into a 2048x512 signed distance texture on the GPU, extruded as a rounded box to match the mesh. From 3.3 to 4.7 s cross-fade to the real mesh (creased normals, 35 degrees), same GLSL, reflections traced into the SDF.

Chrome: F0 0.92, Schlick fresnel, roughness 0.04, 3 bounces.

Studio: white floor at y -0.8, soft overhead shadow, contact darkening, 6% reflection, black beyond z 4 (camera side) so letter faces reflect dark. Environment in azimuth and elevation, camera at 0: black camera-side panel 86x57 degrees, softboxes overhead (2.4) and upper left (3.0), black flags at 75 degrees left and right, a D97757 rim strip behind at 149 degrees, 24 up, intensity 1.4, a 2 degree glint strip, intensity 6, tilted 40 degrees, sweeping left to right 3.3 to 4.1 s.

Timeline:
0 to 1.2 s: blob radius 0.62 breathes 3% every 1.5 s, simplex noise 0.05.
1.2 to 1.4 s: squash 10%.
1.4 to 2.1 s: stretch 2.4x wide and pinch into 7 droplets sized by glyph area; each arcs 0.2 up to its glyph, overshoots 7%, stretches along its velocity.
2.2 to 2.9 s: droplets become letters left to right, 3 frames apart, 0.4 s each; bevels start 0.07 puffy and spring flat.
2.9 to 4.8 s: hold.
4.8 s: 6-frame swell, letters slump 0.12 and soften, drain to the center with ease-in, merge at 5.62 s with a 3-bounce wobble (14%, damping 0.25) running through frame 0.

Camera: 30 degree lens, dolly 5.6 to 7.2 by 2.6 s, push to 6.95 in the hold, back to 5.6 by 5.9 s; orbit 7 degrees each way centered on the hold; 6 degrees above.

Post: bloom threshold 1.0, strength 0.3; tone curve linear to 0.9, then a soft shoulder; vignette 7%; grain 1.5% seeded by frame index.

Одна строка в нём пришла из реальной ловушки three.js. В версии r160 TextGeometry читает глубину выдавливания из параметра height, а параметр depth перезаписывается значением 50 — буквы, задуманные глубиной 0,12, выходят глубиной 50. Зафиксируйте версию, назовите правильный параметр — и ловушки нет.

Правок: 10, ниже — в точности как их отправляли. Первая сборка уже содержала всю хореографию: капля → капли → буквы → обратно. Правки 1–5 исправили то, что показали стоп-кадры и замеры: белый пластик вместо хрома, блик, стиравший букву P, фаски, склеившие буквы, капли, вылетавшие за кадр. Правки 6–9 появились после покадровой проверки 12 переходов и поймали, например, бугорок, выскочивший на капле на кадре 85. Последняя добавила линию горизонта, которую отражают лицевые грани букв, — чтобы они читались как хром, а не как плоский уголь.

1. It reads as white plastic, the letter faces only see the black floor so the glint never shows, and the mesh caps reflect bent shards. Make the studio dark (0.1 gray) with only a white cyc behind the subject, 140 degrees wide, from 10 below to 40 up. End the white floor at z 4 so camera-side rays reach the black panel. Flatten the mesh cap normals. Rim strip 12x40 degrees. Blob noise frequency 1.0.
2. The glint is a flare that erases the P: make it 0.6 degrees wide at intensity 3. The rim never reaches the letters: move the D97757 strip behind and up (165 degrees, 42 up, 70x16 degrees) and add a soft D97757 kicker on the right, azimuth 55 to 125, elevation -16 to 10, so every right-facing bevel catches it.
3. The 0.03 bevels fuse every letter pair. Space the glyphs by their measured outlines, 0.09 apart and 0.26 for the word space, and hold the camera at 7.8, pushing to 7.55. The mesh speckles on its bevels: shade it with the SDF gradient so it matches the raymarched text.
4. The outer droplets leave the frame by 8 px around frame 112. Start them at 40% of their glyph position, ease the flight with u^2.4 so the 7% overshoot lands at 1.97 s, and dolly from 1.2 to 2.5 s.
5. While the letters form they look like camouflage and the merged blob looks like crumpled foil. Surface ripple 0.008 at frequency 3.2.
6. A bump pops onto the blob at frame 85. Grow the droplets from radius -0.4 over 1.2 to 1.65 s and regrow the blob from -0.4, so their smooth-min pull fades in.
7. mix(sphere, letter) passes through flat coins. Let each droplet pour into its glyph instead: bake one SDF channel per glyph, reveal each letter inside a sphere growing from its droplet (smooth max 0.05, ease-out, 0.4 s), shrink the droplet into it, join them with smooth-min, and start the puff spring only once the letter is full (damping 0.55, 3 Hz). Melt in reverse, draining from 5.2 s.
8. The glint reaches the O late and leaves the last 5 early. Make it touch the O at 3.3 s and clear the last 5 at 4.1 s (calibrated sweep: azimuth -0.083 to 0.302).
9. The letters vanish before their drops exist and the merged ball inflates. Regrow the drops first (4.88 to 5.1 s, 1.15x glyph size), retract the letters after (5.0 to 5.35 s), and grow the central blob from 5.15 s.
10. The letter faces read as flat charcoal. Add a thin 0.5 horizon strip at -6 degrees inside the camera-side panel, and soften the floor's end over z 3.6 to 4.0.

Потом звук — ещё одним промптом. Opus 5.5 не слышит, поэтому озвучил петлю по номерам кадров: каждый звук синтезирован в коде через Web Audio API, без сэмплов, и каждый удар приходит через 1 кадр после своего изображения. Понадобилось 5 звуковых правок — все по замерам декодированного звука, ни одной на слух: первые удары достигали пика на 8–11 мс позже, уровни над подложкой были неровными, лимитер придавил финальный «бульк», а кодек добавил 16 мс тишины на стыке петли.

# Sound prompt
Score this seamless 6 s loop (360 frames, 60 fps). Synthesize everything in code with the Web Audio API, no samples, no downloads. Each hit lands 1 frame after its visual event.
Bed: 120 BPM, four 3/4 bars of 90 frames starting on frames 67, 157, 247 and 337. Kick on 67, 247 and 337, offbeat shaker only where no hit plays, sub and pad on Bm, G, A, D.
Events: squash inhale peaking at 84, stretch glide 84 to 112, pinch bloops at 112, 113, 114 and 120, pour bloops rising through D major pentatonic at 136, 138, 141, 145, 147, 150 and 153, metallic ting at 200 (partials under 8 kHz), shimmer panned left to right until 245, liquid swell from 288 peaking at 303, drips at 309, merge blups at 319, 321, 322 and 325, slurp into a gloop at 337 wobbling at 2.4 Hz.
48 kHz stereo WAV, about -14 LUFS, peak -1 dBTP, no click at the seam. Mux into the MP4.
# Sound follow-ups (5), exactly as they were sent
1. Measured on the isolated hits: the kick and the gloop peak 8 to 11 ms late (a 4x waveshaper and sines that start at phase 0), and the levels over the bed are uneven (ting +10 dB, gloop +1 dB, drips -8 dB, dot drop +1 dB). Build every tonal hit as a buffer whose attack ends on a cosine crest at exactly (F + 1) x 800 samples, with no waveshaper. Put every hit, or pair of hits on the same frame, 3 to 6 dB above the bed (K-weighted, first 60 ms). The mix loses 4.5 dB through a 150 Hz high-pass: cut the sub 4 dB, the kicks 1.5 dB and the kick under the gloop 4 dB, and raise the pad 1.5 dB.
2. Timing is exact now. The hits sit 6.5 to 9 dB over the quieter bed: trim the hit bus 2.5 dB, then the two pinch pairs 1.4 dB, the U and S pinch 1 dB, the swell 1.2 dB and the last pour bloop 0.5 dB, and raise the drips 2.5 dB and the gloop 3 dB, so every hit reads 3 to 6 dB over the bed.
3. The limiter takes 3.4 dB off the gloop because all its partials and the kick crest on the same sample. Put the gloop's even harmonics in sine phase and lower the kick under it 2.7 dB, so the limiter stays under 1.5 dB and the gloop keeps 3 to 6 dB over the bed.
4. Sine-phase harmonics moved the gloop's biggest waveform peak 4 ms after its frame. Keep every gloop harmonic in cosine phase so the peak is on sample 270400, set the 2nd harmonic to 0.2 and the 3rd to 0.08, drop the 4th, and lower the gloop 0.5 dB.
5. The MP4's audio runs 16 ms of codec padding past the video, so the file starts on a hard step and a looping player stops the sound hard at 6.000 s, plays 16 ms of silence and restarts hard. Keep the seamless loop as the master WAV for the two-loop post, and for the single-loop article MP4 add a 2 ms raised-cosine fade to the first and last 96 samples only.

Итог: около 2 часов от первого промпта до готовой петли, включая 12 проверок переходов, плюс около 45 минут на звук. Колыхание, которым заканчивается петля, проходит прямо через кадр 0 — поэтому шов не виден.

Каждая капля, каждый источник света и каждое движение камеры в этой петле взялись из числа в промпте или в правке. В этом вся лаборатория — в одной петле.

Что внутри:

• Эксперимент 1: один и тот же 3D-продуктовый кадр из общего и режиссёрского промпта, бок о бок.
• Как это работает: почему Opus 5.5 пишет код, а не пиксели, и чем это вам помогает.
• Установка с нуля: без установки, Mac или Windows.
• Анатомия промпта: строки, которые нужны режиссёрскому моушн-промпту.
• Цифры: кривые, пружины, длительности, шаг сдвига, сетка битов.
• Эксперимент 2: подготовка, сжатие и растяжение, захлёст, доводка и дуги на 3D-маскоте.
• Цикл лаборатории: как Opus 5.5 проверяет собственные кадры.
• Оборудование: Remotion, HyperFrames, GSAP, Motion, Three.js.
• Последняя миля: звук, идеальные петли, экспорт для X.
• Исправления: сбои, на которые вы наткнётесь, и промпт для каждого.

After Effects не нужен. Для старта хватит браузера и Claude.

Эксперимент 1: общий промпт против режиссёрского

Самый копируемый моушн-промпт недели запуска — 26 слов: сделай 15-секундный шоурил, который докажет, «какой ты невероятный моушн-дизайнер». Его выложил kirill sh 24 сентября — с Opus 5.5 и GPT 6 Astra бок о бок, с аккаунта на 885 подписчиков. Пост набрал больше 1,8 млн просмотров.

За считаные дни появилось множество повторов. Это отличная демонстрация модели, потому что тема — сама модель: нет брифа, который можно не выполнить, значит, ничего не может выйти «не так».

Теперь направьте тот же трюк на свой запуск. Шоурил — жанр с известными правилами и без клиента. А ваш продукт, ваши слова и ваш тайминг могут выйти не так, и однострочник ничего не говорит ни об одном из них.

На другом конце шкалы — самый просматриваемый клип на Opus 5.5 от Donald. Отдадим должное: песня «Claude-Pop» и её первый клип — работа deckard, опубликованная 9 сентября, ещё до выхода Opus 5.5. Donald сделал версию на Opus 5.5.

Клип перевалил за 3,6 млн просмотров. Donald называет его «одним промптом» — и в том же посте пишет, что пять минут говорил со своим компьютером, а Claude работал 12 часов. Один промпт — это голосовой бриф плюс 12 часов автономной работы: основную работу сделала режиссура.

Поэтому лаборатория поставила контролируемый тест. Та же модель, тот же предмет (пара беспроводных наушников), та же техническая строка: один HTML-файл, three.js, 960×1080 на сторону, петля 6 секунд. Меняется только режиссура.

Посмотрите по одной полной петле каждой стороны, прежде чем читать промпты. Слева — то, что покупают три прилагательных. Справа — то, что покупают 448 слов режиссуры.

Промпт A, общий (левая сторона):

Create a cool 3D product animation for a pair of wireless earbuds. Make it look premium and modern. One self-contained HTML file using three.js, 960x1080, 6-second loop.

Промпт B, режиссёрский (правая сторона):

GOAL: a studio product film for wireless earbuds: case opens, buds rise to the viewer, everything clicks shut.
OUTPUT: one self-contained HTML file, three.js 0.160.0 from jsdelivr (importmap), 960x1080.
TIME: 6-second loop, 60 fps = 360 frames, 120 BPM (1 beat = 30 frames). Hits land on beats.

MODEL (1 unit = 1 cm, primitives with bevels): case 6.0 x 4.6 x 2.2, 1.0 edge radius, split at 3.3, back-hinged lid, 0.06 split bevel, 0.045 chrome wire around the seam. Inside: D97757 deck, two dark elliptical wells. Buds: ellipsoid head 1.6 x 1.5 x 1.5, lathed silicone tip, 1.6 oval stem with a chrome end cap, dark grille. Seated heads sit flush with the deck.

LOOK: satin ceramic white F4F1EC (roughness 0.38, clearcoat 0.35), chrome (metalness 1, roughness 0.05), D97757 on the deck only, ink 1C1B1A, tips E4E0DA. Backdrop F0EDE8 center to DEDAD3 corners, dithered. Key FFF4E8 3.0 upper front left, soft shadows; fill E8EEF5 0.6 low right; rim FFFFFF 4.0 upper back right. Reflections: PMREM studio built in code (warm gray dome, overhead and key softboxes, rim strip). Contact shadows, opacity 0.55. Neutral tone mapping, 8% vignette, 2% grain seeded per frame.

SHOTS:
0.0 to 0.5 s: a 2.4-wide studio strip (from 5.5 s) sweeps left to right, glinting across the closed lid and seam.
0.72 to 0.95 s: anticipation: lid presses 1.5 degrees shut, case squashes 2%, hold 3 frames.
1.0 s: lid springs to 100 degrees (damping 0.6, about 10% overshoot, settled by 1.4 s).
1.5 s: buds rise 4.0 out of the wells, right first, left 4 frames later (damping 0.7). From rise frame 8 they tilt 14 degrees outward and turn 35 degrees to camera on a looser spring (damping 0.5): stems swing through and settle.
2.0 s: camera push-in.
2.4 to 4.0 s: hold, buds float 0.05 on a 1 s sine. 3.0 s: second glint crosses the buds.
4.0 s: buds straighten (0.2 s) and descend (easeInOutCubic, 0.45 s), seating with a 0.05 magnetic dip.
4.75 s: lid falls (easeInCubic), shuts exactly at 5.0 s, bounces 3 degrees, settles by 5.3 s; case recoils 1.5%.
5.5 s: next glint starts.

CAMERA: fov 30, never parked. Azimuth 34 to 10 degrees from 5.6 s to 4.0 s (easeInOutSine), back by 5.6 s (easeInOutCubic). Distance creeps 21 to 20.2, pushes to 16 at 2.0 s (easeOutExpo, 0.8 s), returns 4.0 to 5.6 s (easeInOutCubic). Buds up: elevation 12 to 19 degrees, target height 2.3 to 4.2.

BANNED: purple or blue gradients, glow orbs, bloom, neon, lens flares, particles, generic spinning turntables, dark backgrounds, text.

QA: renderAt(t) draws exactly time t, seeded noise only. Stills around every hit; frame 359 flows into frame 0.

Правки: слева — 0, намеренно. Это нетронутый первый результат отдельного контекста, который видел только промпт A. Он вернул тёмно-синий космос, светящееся кольцо, свечение, частицы, вращающиеся наушники и выдуманный слоган — почти весь список запретов промпта B. Справа — 15 правок в 4 раунда, ниже точно в том виде, в каком их отправляли. Подписи и разделение экрана добавлены после рендера.

# Round 1, after the first build (stills at 0, 1.25, 2.9 and 4.9 s)
The white case melts into the backdrop and the chrome reads gray. Drop the studio dome to about a third and push the softboxes, so the unlit sides fall off and the chrome shows dark and bright bands.
The open lid reads as a flat slab. Hollow it: 0.16 rim, 0.62 deep cavity, 0.22 fillet at the ceiling.
The round dark grille reads as an eye. Make it a slim slot.
Two dark marks poke through the bottom of the case: the well floors at 0.3 sit outside the bottom arc, which insets the wall by 0.29 at that height. Raise the floors to 0.5.
The deck reads salmon. Roughness 0.7.
# Round 2, after measuring pixels
Front and top are the same value and the right side vanishes into the backdrop. Key to (-7, 12, 8), rim to (2, 8, -12), still upper front left and upper back right. Overhead softbox 2.2, exposure 0.8.
The glint is a flood light: strip on vs off changes 178,864 pixels because the 60-tall strip lights the whole face. Keep the strip in reflections only (a second PMREM for the specular lookup, the static studio for diffuse) and go back to the 2.4 width from the brief.
Exposure 0.9 and key softbox 4.5 so the ceramic reads white. Deck specular 0.3 so the grazing reflection stops washing out D97757.
Give the wells a 0.07 machined round-over.
The buds read as mouse heads. Move the stem to the outer side, replace the ball tip with a short nozzle and a flattened silicone cap, and move the grille off the head (it read as an eye twice) onto the stem.
Crane faster: reach the high target by 2.3 s, so the heads keep headroom during the push.
# Round 3, after isolating each glint
The first glint is too shy for a hook. Clearcoat roughness 0.08, strip peak 24, and shift the sweep to -80 to 0 degrees so the band is mid-face on frame 0.
The second glint flashes the whole lid cavity (207,791 pixels at 3.3 s) because the strip crosses the mirror direction of the flat faces. Raise it to 8 to 61 degrees elevation, 4.8 wide: only the curved heads and stems catch it.
The hold parks the camera: add a 0.4 dolly creep from 2.8 to 4.0 s. Float the left bud 4 frames behind the right, like its rise.
# Round 4, frame-perfect pass
The anticipation holds 4 frames (57 to 60), not 3: the spring starts at rest exactly on 1.0 s, so the beat frame is still the pressed pose. Release half a frame early (59.5/60 s): frames 57 to 59 hold, including their motion-blur subframes, and frame 60 is the first open frame.

Звук — ещё один промпт с теми же правилами: одна дорожка на весь сплит-экран, каждый удар на битах режиссёрской стороны. Понадобилось 12 звуковых правок в 4 раунда, все по замерам: первый микс держал 80% энергии ниже 60 Гц, где динамики телефона не играют ничего, а удары стояли всего на 0,5–1,6 дБ выше подложки.

# Sound prompt
Score the A/B video. Synthesize everything in code with the Web Audio API, no samples, no downloads. 120 BPM, 6 s loop, 360 frames at 60 fps. Each hit lands 1 frame after its visual event, and so does the bed.
Bed: kick every 60 frames, 16th shaker, bass and pad F, B flat at 120, G minor at 240, C at 300.
Right half only:
44 to 60 reverse swell.
60 lid snap: click, 880 Hz body, 120 Hz thump.
90, 94 magnetic pops, air lift to 119.
96 to 120 push-in swell.
180 to 216, 330 to 30 glint shimmer.
240 to 267 falling swish, 270 seat click.
285 to 300 whoosh into the shut: click, 200 Hz thock, 70 Hz thump; ticks 306, 312.
Hits 3 to 6 dB over the bed, nothing above 8 kHz, mono-safe. Render twice, keep the second pass. 48 kHz stereo WAV, about -14 LUFS, peak -1 dBTP. Mux into the MP4 and check every hit in its decoded audio.
# Sound follow-ups (12), exactly as they were sent
# Round 1, after measuring the first render (80.6% of the energy under 60 Hz, 3.5% in 150 Hz to 6 kHz, median 58 Hz; hits 0.5 to 1.6 dB over the bed; bodies peaking 2.5 to 5 ms after the frame)
1. The sub buries everything. Play B flat, G and C an octave higher (117, 98, 131 Hz), open the bass to 900 Hz, shorten the kick to 80 ms and give it a 190 Hz knock. Raise the pad 5 dB and every hit 6 dB, ticks 6 and 10 dB under the shut.
2. Start every body and thump in cosine phase with a 0.5 ms attack, so the first waveform peak sits on frame + 1.
3. Give the push-in swell a clear peak: 60 ms exponential rise into frame 121, then a 25 ms drop into the camera tail.
4. Duck the bed 4 dB from the shut through tick 2 (frames 301 to 313).
5. Remove the DC: subtract each channel's loop mean.
# Round 2, after measuring the second render (full mix -14.0 LUFS but only -22.9 LUFS in the 200 Hz to 6 kHz phone band; hit stem minus bed stem, K-weighted: snap -0.3, pops -3.1 and -5.2, seat -6.9, shut +2.6, ticks -0.8 and -4.3, push-in -9.3 dB; kick peak 5 ms and snap thump 2.4 ms after frame + 1)
6. The bass still carries the loudness. Drop its sine to a third, open the saw to 1200 Hz, bass 2 dB down, pad 4 dB up and brighter (1600 Hz).
7. Hits to 3 to 6 dB over the bed: push-in swell +8 dB, seat click +6 dB, pops +4 dB, ticks 4 and 8 dB under the shut.
8. Phase every tone so its first waveform peak lands exactly on frame + 1, the kick included (cosine start, 1 ms attack).
# Round 3, after measuring the third render (phone band -17.5 LUFS against -14.0 full; phone-band hit minus bed: snap 6.4, pops 5.6 and 3.5, seat 2.3, shut 8.4, ticks 3.0 and 1.8, push-in 3.0 dB; the kick's first peak is on frame + 1 but its wider second lobe is 10% louder, 2.5 ms later; limiter up to 4.4 dB)
9. Give the kick a 3 ms transient (its level falls to 65% within 3 ms of frame + 1) and the knock 3 dB more, so its largest peak is the first one.
10. Shut 2.5 dB down with the ticks kept where they are (tick 2 then 3 dB up), seat click +2 dB, push-in swell +2 dB.
11. The kick's second lobe is still 6% louder: the knock's negative half lands on it. Knock decay 4 ms, kick attack 0.5 ms. Tick bodies decay in 12 ms so earlier tails cannot flip their lobes.
# Round 4, after decoding the muxed article MP4 in Chrome (offset -0.002 ms, every hit 0.0 to 1.3 ms after frame + 1, but the AAC encode lifts the true peak from -1.3 to -0.4 dBTP)
12. Limit the WAV to -2.2 dBTP so the decoded MP4 stays under -1 dBTP; keep -14 LUFS.

Итог: около 30 минут на левую сторону и около 90 на правую, включая раунды проверки, плюс около 90 минут на звук. Последняя правка картинки — из тех ошибок, что ловит только покадровая проверка: один лишний удержанный кадр на бите.

Что изменилось между A и B:

• «Премиально» стало материалами: сатиновая керамика с шероховатостью 0,38 и лаком 0,35, хром с шероховатостью 0,05, фирменный оранжевый Claude — только на панели внутри.
• «Круто» стало студией: рисующий, заполняющий и контровой свет с точными цветами и силой, отражения от студии, собранной в коде, мягкие контактные тени. Никакого свечения.
• «Современно» стало камерой: поле зрения 30 градусов, камера, которая никогда не стоит на месте, облёт от 34 до 10 градусов и один наезд по кривой easeOutExpo на 2,0 с.
• «Анимация» стала битами и пружинами: 120 BPM, 3-кадровая подготовка перед тем, как крышка пружинисто откроется с коэффициентом затухания 0,6, затем наушники поднимаются на 0,7 с более свободной доводкой 0,5.
• Штампы названы по именам: свечение, светящиеся шары, неон, частицы, вращающиеся подставки, тёмные фоны и текст — запрещены поимённо. Левая сторона показывает почти каждый из них.

Прилагательные — это место, где живёт стандартная картинка. Каждое прилагательное, которое вы заменили числом, — это решение, которое вы забрали у модели.

Как Claude Opus 5.5 на самом деле делает движение

Opus 5.5 выдаёт текст. Каждый моушн-ролик в ленте — это программа, которая рисует кадры, а браузер их записывает. Гидеон Фрост из OrcaRouter сказал это одной строкой: «Claude Opus 5.5 не генерирует пиксели. Он пишет код, который рисует пиксели».

На практике программа обычно — один HTML-файл. Откройте его в браузере — и он проигрывается. Направьте на него браузер без интерфейса, остановите на каждом кадре, сохраните PNG — и ffmpeg сошьёт их в GIF или MP4.

У кода вместо пикселей три следствия, которыми можно пользоваться:

1. Каждый кадр воспроизводим. Правило Эрика Кана из блога Hugging Face: «Каждый пиксель — чистая функция от t». Отрендерите кадр 84 дважды — получите одинаковую картинку дважды.
2. Правки дешёвые. Меняете одно число и перерендериваете. Никакой новой генерации видеомодели с надеждой на удачу.
3. Opus 5.5 может проверять свою работу. Anthropic пишет, что даже на минимальном уровне усилий он читает плотные графики точнее, чем Opus 5 на максимальном, и лучше видит, что изменилось между двумя версиями схемы. Контактный лист вашей анимации — именно такая картинка.

В день запуска Кевин Нго выложил ролик с подписью «Claude Opus 5.5 нарисовал каждый кадр этой анимации на JavaScript». Это 28-секундная история, в которой целый город шлёт Claude запросы, и она набрала больше 640 тысяч просмотров. Кадры, нарисованные кодом, могут нести и персонажа, и историю.

Контракт рендера. Вставляйте его под любым моушн-промптом, чтобы каждый кадр можно было отрендерить, проверить и исправить:

# Контракт рендера: вставьте под любым моушн-промптом
Выдай один самодостаточный HTML-файл. Только библиотеки, которые названы в промпте, с зафиксированной версией.
Никаких сетевых запросов, кроме шрифтов и этих зафиксированных библиотек.
Каждый кадр — чистая функция от времени t в секундах.
Если движение задаёт JavaScript, открой window.renderAt(t), которая рисует ровно этот кадр.
Анимируй через CSS keyframes, Web Animations API, SVG, Canvas 2D или WebGL.
Никаких Date.now, никаких запусков setTimeout или setInterval, никакого Math.random без сида.
Петли: рендерь только кадры от 0 до N-1, и кадр N-1 должен перетекать в кадр 0.

Каждая строка закрывает один из способов испортить рендер. Часы или таймер делают кадр 84 разным при каждом запуске. Случайность без сида заставляет фигуры дрожать от кадра к кадру.

Рендер кадра N в петле показывает первый кадр дважды — это и есть заикание на шве. Все три случая есть в таблице исправлений в конце, потому что каждый случится с вами хотя бы раз.

Лаборатория Opus 5.5 с нуля (без установки, Mac или Windows)

Три пути. Выбирайте по тому, сколько хотите устанавливать.

Путь 1: без установки, в приложении Claude

1. Откройте Claude и выберите Opus 5.5 в меню моделей.
2. Вставьте промпт открывающего кадра из начала статьи.
3. Claude напишет HTML и проиграет его в панели предпросмотра.
4. Просите исправления с номерами кадров, например: «удар на кадре 84 достигает пика поздно, сдвинь его на 2 кадра раньше».
5. Скачайте файл, откройте в Chrome и запишите экран (Cmd+Shift+5 на Mac, режим видео в «Ножницах» на Windows).

Совет для приложения: попросите счётчик кадров в углу и паузу по пробелу — тогда в заметках можно называть точные кадры. Перед финальной записью уберите и то и другое.

Запись экрана подойдёт для первого поста. Она не точна по кадрам и может их терять, поэтому для всего, что идёт в портфолио, берите путь 2 или 3.

Пути 2 и 3: Claude Code на Mac или Windows

Claude Code умеет рендерить кадры, открывать их и править код без того, чтобы вы что-то копировали. Поставьте его однострочным установщиком из документации Anthropic по Claude Code, затем соберите лабораторию:

# macOS: Node, ffmpeg и браузер без интерфейса (Claude Code уже установлен)
brew install node ffmpeg
mkdir motion-lab && cd motion-lab
npm init -y
npm i -D playwright
npx playwright install chromium
claude            # затем наберите /model и выберите Opus 5.5

# Windows 11, PowerShell: та же лаборатория (после winget откройте НОВЫЙ терминал)
winget install OpenJS.NodeJS.LTS
winget install Gyan.FFmpeg
mkdir motion-lab; cd motion-lab
npm init -y
npm i -D playwright
npx playwright install chromium
claude            # затем наберите /model и выберите Opus 5.5

Две заметки для Windows. В Windows PowerShell 5.1 нет &&, поэтому команды разделены точкой с запятой. Если PowerShell отказывается запускать npx, наберите npx.cmd.

Затем сохраните этот рендерер как render.mjs. Он открывает ваш HTML в браузере без интерфейса, останавливает его на каждом кадре и сохраняет PNG. Адрес файла строится через pathToFileURL, так что пути Windows тоже работают.

// render.mjs   запуск: node render.mjs anim.html 6 24   (файл, секунды, fps)
// Останавливает страницу в момент t = i / fps и сохраняет каждый кадр в PNG.
import { chromium } from 'playwright';
import { pathToFileURL } from 'node:url';
import { mkdirSync } from 'node:fs';

const [file = 'anim.html', secs = '6', fps = '24'] = process.argv.slice(2);
const FPS = Number(fps), N = Math.round(Number(secs) * FPS);   // кадры от 0 до N-1
mkdirSync('out/frames', { recursive: true });

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1200, height: 675 } }); // ваш холст
await page.goto(pathToFileURL(file).href, { waitUntil: 'networkidle' });
await page.evaluate(async () => { await document.fonts.ready; });

for (let i = 0; i < N; i++) {
  await page.evaluate((t) => {
    if (window.renderAt) window.renderAt(t);
    document.getAnimations().forEach((a) => { a.pause(); a.currentTime = t * 1000; });
  }, i / FPS);
  await page.screenshot({ path: `out/frames/${String(i).padStart(4, '0')}.png` });
}
await browser.close();

// Затем соберите кадры в видео:
// ffmpeg -framerate 24 -i out/frames/%04d.png -c:v libx264 -pix_fmt yuv420p -crf 18 -movflags +faststart out/anim.mp4

Одна команда — node render.mjs anim.html 6 24 — и в out/frames лежат 144 PNG. Строка ffmpeg внизу превращает их в MP4. Каждый кадр точен, потому что каждый PNG — это страница, остановленная в одном точном t, как бы медленно ни работал ваш компьютер.

3D-работы этой лаборатории используют ту же идею рендерера с двумя улучшениями. Браузер рисует на настоящей видеокарте (здесь RTX 4060 Ti), а не программно, и в 60 fps. А каждый итоговый кадр усредняет несколько подкадров, распределённых по половине кадра, смешанных в линейном свете, — так киноплёночный обтюратор на 180 градусов записывает размытие движения.

Дальше вы редко набираете команды сами. Скажите Claude Code: «отрендери anim.html через render.mjs, открой кадры 0, 24 и 48 и опиши, что видишь, прежде чем что-то менять» — и дальше он сам ведёт цикл.

Теперь уровень усилий. Opus 5.5 стартует со среднего. Anthropic пишет, что средний уровень соответствует или превосходит Opus 5 на высоком в их тестах по программированию и интеллектуальной работе, и советует оставлять xhigh и max для задач, где вы измерили выигрыш. Правило лаборатории: средний для всего; поднимать, только если работа с нуля дважды не попала.

Быстрый режим (/fast в Claude Code) работает до 2,5 раза быстрее по цене $8 и $40 за миллион токенов вместо $4 и $20. В тарифах Pro, Max, Team и Enterprise он списывается из кредитов использования, а не из лимитов тарифа. Он для спринтов итераций, когда скорость важнее стоимости.

3D-мир в браузере от Shikhar набрал больше 1,75 млн просмотров. Он собрал его из ассетов Blender, сгенерированных картинок и Three.js и подписал: «Третья итерация на Opus 5.5 medium» (пост). Средний уровень усилий и третья итерация сделали одну из главных работ недели запуска.

Анатомия режиссёрского моушн-промпта

Режиссёрский промпт длинный не ради длины. Каждая строка снимает одно решение, которое модель иначе приняла бы за вас, а собственные решения модели — это и есть стандартная картинка.

Гайд Anthropic по промптингу Opus 5.5 говорит прямо: без дизайн-направления Opus 5.5 «откатывается к нескольким стандартным стилям», а общая строка вроде «избегай типичного AI-вида» в основном меняет один стандарт на другой. Работает другое: назвать конкретные шаблоны, которых нужно избегать, проверить, какие стандарты использовал первый результат, и расширить список.

Шаблон. Заполните каждую строку, прежде чем жать Enter:

GOAL: что зритель должен почувствовать или сделать — одним предложением
OUTPUT: один самодостаточный HTML-файл (или Remotion, HyperFrames), W x H
TIME: секунды x fps = всего кадров. Петля: да или нет
LOOK: палитра в hex, один акцент, гарнитура + начертание + кегль + трекинг
MOTION: изинг как cubic-bezier, пружины как коэффициент затухания, длительности в кадрах
SHOTS: диапазоны кадров, одно главное движение на план, как план передаёт эстафету
BANNED: стандартные приёмы, которые вы никогда не хотите видеть
QA: стоп-кадры на названных кадрах, контактный лист, правка, потом полный рендер

Промпт B из эксперимента 1 — это заполненный шаблон плюс строки MODEL и CAMERA для 3D.

Сначала пишите GOAL. Если вы не можете одним предложением сказать, что зритель должен почувствовать или сделать, Opus не сможет это анимировать, и никакая кривая изинга работу не спасёт. Затем TIME, потому что на число кадров опираются все остальные числа.

В SHOTS живёт история. Дайте каждому плану диапазон кадров, одно главное движение и передачу эстафеты: жёсткую склейку на бит, монтаж по форме, где одна фигура становится следующей, или вытеснение маской. По умолчанию — склейка. Переход должен быть решением.

Строка QA важнее, чем кажется. Она заставляет Opus проверять стоп-кадры до рендера всего ролика — и отсюда начинается цикл лаборатории, о котором ниже.

Список запретов, с которого начинает лаборатория:

• фиолетовые и синие градиенты, свечение, блики объектива;
• летающие частицы как украшение;
• всё появляется одновременно;
• «проявиться и подъехать снизу» на каждом элементе (скилл frontend-design от Anthropic называет это стандартным приёмом, который читается как сгенерированный ИИ);
• всё по центру;
• текст, который движется, пока его читают.

Держите список живым. После каждого первого рендера называйте, что модель всё равно использовала, и добавляйте в список. Это совет самой Anthropic, и для движения он работает так же, как для веб-страниц.

Одно главное движение на план. Тот же скилл хорошо формулирует: один срежиссированный момент работает лучше россыпи эффектов. Всё остальное ждёт, приглушается до 40% или стоит на месте.

Остальному дайте ранг. Второстепенные движения проходят 50–70% пути главного и начинаются на 100–200 мс позже. Фоновое движение — меньше 5% пути главного, идёт по медленной синусоиде и никогда не останавливается.

Рексан Вонг, чей разбор тренда набрал около 600 тысяч просмотров: «профессиональный вид даёт контекст, который вы ей передаёте».

🗺 Собрать маркетинг-план на 90 днейБесплатно, в Telegram-боте @uspeshnyybot

Шпаргалка: движение в цифрах

Моушн-дизайнеры говорят кривыми и кадрами — так что давайте Opus 5.5 кривые и кадры. Ниже — числа и откуда каждое взялось.

Изинг. Значения ниже — из стандартного справочника Easings Андрея Ситника.

Название	cubic-bezier	Для чего
ease-out-expo	0.16, 1, 0.3, 1	Появление текста и логотипа
ease-out-quint	0.22, 1, 0.36, 1	Премиальные появления
ease-in-out-quart	0.76, 0, 0.24, 1	Перемещения и наезды камеры
ease-in-expo	0.7, 0, 0.84, 0	Быстрые уходы
ease-out-back	0.34, 1.56, 0.64, 1	Игривый «поп» с перелётом

Правила: появление — с ease-out, уход — с ease-in, и уходы на 40–50% короче (Material 3 ставит в пару 400 мс на появление и 200 мс на уход); движение через экран — ease-in-out. Линейный изинг — только для вращения, полос прогресса и фазы петли. Линейный изинг на перемещении — самый быстрый способ сделать так, чтобы рендер выглядел как рендер.

Пружины. Каждая библиотека называет свои ручки по-своему. Одно число переводит между всеми: коэффициент затухания (формула в коде ниже). 1,0 — никогда не пружинит. 0,7–0,85 — ощущается премиально. 0,4–0,6 — игриво. Меньше 0,3 — мультфильм.

Пружина Remotion по умолчанию (масса 1, затухание 10, жёсткость 100) даёт 0,5; react-spring по умолчанию (tension 170, friction 26) — 1,0. Правило Material 3 стоит украсть: положение и размер могут пружинить, прозрачность и цвет — никогда.

// motion.js: один файл токенов, импортируется везде, никаких чисел в коде
export const EASE = {
  enter: 'cubic-bezier(0.16, 1, 0.3, 1)',    // ease-out-expo
  move:  'cubic-bezier(0.76, 0, 0.24, 1)',   // ease-in-out-quart
  exit:  'cubic-bezier(0.7, 0, 0.84, 0)',    // ease-in-expo
  pop:   'cubic-bezier(0.34, 1.56, 0.64, 1)' // ease-out-back
};
export const MS = { feedback: 150, move: 400, hero: 750, exit: 240 };
export const STAGGER = { letter: 30, word: 90, item: 60 };

// Коэффициент затухания из чисел любой библиотеки: 1 = без отскока
export const dampingRatio = (k, d, m = 1) => d / (2 * Math.sqrt(k * m));

// Пружина как чистая функция времени, от 0 до 1.
// zeta: коэффициент затухания (1 — без отскока, 0.7 — премиально, 0.5 — игриво). f: скорость в Гц.
export function spring(t, zeta = 0.7, f = 2) {
  if (t <= 0) return 0;
  const w = 2 * Math.PI * f;
  if (zeta >= 1) return 1 - Math.exp(-w * t) * (1 + w * t);   // без отскока
  const wd = w * Math.sqrt(1 - zeta * zeta);
  return 1 - Math.exp(-zeta * w * t) *
    (Math.cos(wd * t) + (zeta * w / wd) * Math.sin(wd * t));
}

Функции пружины не нужна симуляция. Она сразу возвращает прогресс в любой момент t, поэтому кадр 84 рендерится сам по себе, без расчёта кадров 0–83, — ровно то, чего требует контракт рендера. Отдайте файл Opus 5.5 с одной строкой: используй только эти токены, никаких чисел в коде.

Длительности и шаг сдвига. Отклик интерфейса — 100–200 мс (Nielsen Norman Group: 100 мс ощущаются мгновенными). Остальное — стартовые значения лаборатории: сдвиги UI — 200–500 мс, появление главного — 600–900 мс, буквы — с шагом в 1 кадр, слова — 60–120 мс, пункты списка — 40–80 мс. Начинайте следующий элемент, когда предыдущий готов на 30–50%: строго по очереди выглядит роботизированно, всё сразу — дёшево.

Для видео говорите в кадрах. При 24 fps один кадр — около 42 мс, так что движение на 400 мс — это 10 кадров, а появление на 750 мс — 18.

Сетка битов. Кадров на бит = fps × 60 / BPM. При 120 BPM и 24 fps это 12 кадров. При 128 BPM и 30 fps — 14,06, поэтому считайте каждый бит от времени и округляйте каждый отдельно. Если раз за разом прибавлять округлённые 14, вы уедете от музыки: через 32 бита расхождение составит 2 кадра.

Склейка — на бит, смена раскладки — на такт, каждые 4 бита. Если менять всё на каждом бите, зритель устаёт.

Паузы. Текст на экране держится не меньше 0,3 с на слово плюс 0,5 с, так что заголовку из двух слов нужно 1,1 с. Во время паузы медленный наезд на 2% держит кадр живым, а слова — читаемыми.

Камера. Движениям камеры — самые мягкие кривые, вроде ease-in-out-quart; объектам — более резкие. Для параллакса начните со скоростей 1,0 для переднего плана, 0,5 для среднего и 0,2 для фона.

Контраст и вспышки. Держите контраст текста не ниже 4,5:1 на каждом кадре, в том числе поверх движущегося фона, и никогда не мигайте чаще 3 раз в секунду. Оба числа — из WCAG, стандарта доступности веба.

Эту картинку стоит сохранить.

Эксперимент 2: пять принципов анимации на 3D-маскоте

Фрэнк Томас и Олли Джонстон записали 12 принципов анимации Disney в книге «The Illusion of Life» (1981). Пять из них делают основную работу в короткой петле, и каждый можно записать кадрами и размерами. Этот эксперимент дал Opus 5.5 пиксельного маскота Claude, пересобранного из вокселей, миниатюрную студию и ничего, кроме чисел.

Восемь секунд, одна петля: щёлкают три студийных света, маскот прыгает с площадки на площадку по полу, который одновременно является таймлайном моушн-программы, затем делает сальто обратно на первую площадку по пунктирной дуге. Подпись каждого принципа загорается на том кадре, где он происходит, а метка плейхеда показывает номер кадра. Сделано на three.js, отрендерено на видеокарте в 60 fps с размытием движения из подкадров.

Точный промпт:

Build a 3D animation-principles loop. One HTML file, three.js 0.160.0 via jsDelivr importmap, Geist Mono from Google Fonts. 1080x1080, 8 s at 60 fps (480 frames), frame 480 equals frame 0. window.renderAt(t) draws any frame from t alone; seeded random only.

Set: a miniature studio. A floating white 12x6 slab on an F4F2EE backdrop. Its top is a timeline: 3 tracks of 0.25 frame cells (EFEEEA), a ruler with frame numbers, 5 keyframe diamonds 2 units apart on the middle track (white fill, 0F0F0F outline). Around it on stands: a key softbox, a rim strip light, a top spot on a boom.
Hero: the pixel Claude mascot as 0.1 voxels: D97757 body 14x10x8, two 3x2 arms, four 2x3 legs, 0F0F0F 2x3 eyes; roughness 0.45, clearcoat 0.3.

Lights, 0 to 1 s: key 3200 K with soft shadows at 0.1 s, rim 7500 K at 0.4 s, top spot 5000 K at 0.7 s. Each clicks on with a 3-frame flicker, and the mascot's eyes glance at it.
Hops, 1 to 5 s: 4 hops to diamonds 2 to 5, landing on frames 105, 165, 225 and 285. Each hop: 11-frame crouch (1.2x0.75), stretch 0.85x1.28 at takeoff, 25 frames of air, squash 1.25x0.7 on landing, spring back at damping 0.55; arms lag 4 frames, legs 6. Each landing lights its diamond FF6A2B, ripples the cells 0.08 high and throws 12 voxel sparks. An FF6A2B playhead carrying a point light moves at constant speed and crosses each diamond on its landing frame.
Flip, 5 to 6.4 s: a dotted arc from diamond 5 back to diamond 1 draws in, then an 18-frame deep crouch and a 360° flip along the arc, 3.5 high, landing on frame 384 while the playhead rewinds under it.
Labels, top left, Geist Mono 28 px: a checklist 01 ANTICIPATION, 02 SQUASH & STRETCH (& in D97757), 03 OVERLAPPING ACTION, 04 FOLLOW-THROUGH, 05 ARCS, in 8E8A83. Each row turns 0F0F0F and fills its FF6A2B diamond on its exact frame: 69 (first crouch), 140 (stretch), 200 (limbs trail), 285 (arms settle), 303 (arc draws).
End: hold, blink at 7.2 s; on frame 468 the lights, diamonds and labels snap off.
Camera: FOV 18, 30° elevation, ±10° orbit over 8 s, 25% push-in tracking the hops, 4% punch-in on the flip landing.
Post: bloom on emissives, depth of field focused on the mascot, 2% grain, 10% vignette, dithered backdrop.

Правок: 4, ниже в точности как их отправляли. Первая сборка уже содержала всё, что перечислено в промпте: воксельного маскота, таймлайн, 5 ромбов, плейхед, 3 стойки со светом, подписи, дугу и сальто. Правки исправили вид и кадрирование: блёклую цветокоррекцию, реквизит, пересекающий блок подписей, контровой свет, который был виден с ребра, и верхний свет, щелчок которого не читался. Отдельно числовой аудит прочитал живую сцену на всех 480 кадрах и сверил её с числами промпта: 71 проверка, от моргания на кадре 432 до касания лапами каждой площадки. Первый прогон провалил 6 проверок, и все 6 были исправлены до финального рендера.

1. The render is washed out and cramped. Grade so the lit front face reads D97757 and lit diamonds read FF6A2B; drop the fill so lights-off sits near 50% and each click is obvious; lower the key to 28 degrees from the front right and put the cool rim at the back left so it edges the side we see. Pull the wide shot back to 44 units so the whole floating slab and all three stands are in frame, add a soft shadow under the slab, and make sparks 0.075 to 0.12 and ruler numbers bigger.
2. Frame check fixes. Keep every prop out of the label block: track the hops at 45% and hang the top spot at 5.8 on a boom from the back right corner, above the flip. Light each lit diamond with a soft glow from its face, move the playhead light to the front edge of the track and run its line under the diamonds. Start the dotted arc above the mascot's head, keep every tripod foot on the slab, and give the arms a bigger, slower settle (2.2 Hz, damping 0.22) so the follow-through reads.
3. Turn the rim strip's panel toward the camera so its click reads.
4. Make the top spot's click read too: narrow it to a 34 degree pool at 45 cd and give the lamp a glowing lens rim.

Звук — ещё один промпт с теми же правилами. Звуковых правок не понадобилось: первая сборка сразу совпала с числами промпта. Технические исправления — например, узел усиления Web Audio, стартующий на полной громкости, и компрессор, добавляющий 6 мс задержки, — записаны отдельно.

# Sound prompt
Score this 8 s loop, 480 frames at 60 fps. Synthesize everything in code with the Web Audio API, no samples, no downloads. 120 BPM, 4 bars, F major. Each hit lands 1 frame after its visual event.
Bed: pad voices A3 E4 (key light), C5 (top), G5 (rim), each following its light's flicker. Shaker 8ths from 45, kick and bass from 60, roots F D Bb F by bar; kick and shaker rest 330 to 420, bass holds C, then F at 384.
Clicks: lights 6, 24, 42, off 468.
Crouches 69, 129, 189, 249, 312: creak, inhale riser.
Takeoffs 80, 140, 200, 260, 330: upward swish.
Landings 105, 165, 225, 285, 384: rubber squash pitched by the squash scale, spark tings, 384 biggest.
Label pings A5 C6 D6 F6 A6: 69, 140, 200, 285, 303.
Dot ticks 303 to 318, flip whoosh 330 to 384, blink blip 432.
48 kHz stereo WAV, about -14 LUFS, peak -1 dBTP, seamless loop, mux into the MP4.

Итог: около 2 часов от первого промпта до готовой петли, включая рендеры, плюс около 70 минут на звук. Все 71 проверка пройдены: каждая подпись загорается на своём кадре, каждое приземление касается площадки в запланированный кадр.

Пять принципов из чек-листа плюс два, которые сопровождают каждое движение, — в том виде, как их записывает промпт:

Принцип	Что делает	Как записать в промпте
Подготовка	Замах перед движением	присед на 11 кадров (1,2×0,75)
Сжатие и растяжение	Показывает вес и скорость	растяжение 0,85×1,28 при отрыве, сжатие 1,25×0,7 при приземлении
Захлёст действия	Конечности стартуют позже тела	руки отстают на 4 кадра, ноги на 6
Доводка движения	Части продолжают двигаться после остановки тела	руки успокаиваются на 2,2 Гц, затухание 0,22 (правка 2)
Дуги	Делают движение естественным	сальто по пунктирной дуге высотой 3,5
Разгон и торможение	Ускоряется и мягко останавливается	возврат пружиной с затуханием 0,55
Тайминг	Число кадров задаёт вес	25 кадров в воздухе на прыжок, 18 кадров приседа перед сальто

Подписи заодно служат тестом. Промпт привязывает каждую к кадру (69, 140, 200, 285 и 303), поэтому запоздавшее движение видно на экране как подпись, загоревшаяся раньше своего движения.

Промпт также говорит, что менять нельзя. Маскот в точности сохраняет пиксельные пропорции: тело 14×10, руки 3×2, ноги 2×3 и глаза 2×3, собранные из вокселей 0,1 глубиной 8. Эта строка — ограничитель, который сохраняет персонажа узнаваемым в 3D. Каждому стилю, который вам дорог, нужна такая строка.

Декорация — сама по себе урок. Моушн-программы показывают ключевые кадры и плейхед, чтобы аниматоры проверяли тайминг. Здесь они стали полом, и плейхед пересекает каждый ромб в кадр приземления. Для своих работ просите у Opus плейхед и подписи кадров на время итераций, а для финального рендера отключайте их.

Остальные из двенадцати принципов тоже работают. Постановка — это правило «одно главное движение» из анатомии промпта. Преувеличение важнее на экране телефона: доводите ключевые позы на 10–30% дальше, чем кажется правильным, потому что лента всё уменьшает.

Цикл лаборатории: рендер, взгляд, правка

Первый рендер — черновик. Его доводит цикл: отрендерить стоп-кадры, посмотреть на них, записать заметки с номерами кадров, исправить и перерендерить только изменённое. Нормально — два-четыре раунда.

Приём, который делает цикл дешёвым: останавливать любой кадр по адресу. Вставьте это перед закрывающим тегом body, откройте anim.html?t=2.5 — и вы видите ровно тот кадр, что на 2,5 секунде. Opus может сделать скриншот и прочитать его.

<script>
// Вставьте перед </body>. Откройте anim.html?t=2.5, чтобы увидеть ровно кадр на 2,5 с.
(function () {
  var q = new URLSearchParams(location.search);
  if (!q.has('t')) return;
  var t = parseFloat(q.get('t')) || 0;
  function freeze() {
    if (typeof window.renderAt === 'function') window.renderAt(t);
    document.getAnimations().forEach(function (a) { a.pause(); a.currentTime = t * 1000; });
  }
  freeze();
  if (document.fonts && document.fonts.ready) document.fonts.ready.then(freeze);
  window.addEventListener('load', freeze);
})();
</script>

Для всего ролика сразу контактный лист кладёт 12 кадров на одну картинку. Opus читает его как раскадровку:

# Контактный лист: каждый 12-й кадр, 4 в ряд, 3 ряда
ffmpeg -framerate 24 -i out/frames/%04d.png -vf "select='not(mod(n\,12))',scale=400:-1,tile=4x3" -frames:v 1 out/contact.png

Два вида, позаимствованные у аниматоров, делают заметки точнее. Луковая кожура накладывает кадры с низкой прозрачностью: равные промежутки — роботизированное движение, промежутки, сжимающиеся у ключей, — изинг работает. График скорости рисует положение по кадрам: прямые линии — линейное движение, острые углы — мёртвые старты и остановки. Opus 5.5 умеет и рисовать оба вида, и читать их.

Правки, которые работают лучше всего, — готовые к вставке. Каждая указывает на кадры, а не на ощущения:

Отрендери стоп-кадры 0, 24, 48, 72 и 96. Опиши каждый одним предложением так, как его увидит зритель. Совпадает ли это со списком планов? Исправь то, что не совпадает.
Сделай контактный лист из каждого 12-го кадра. Отметь каждый кадр, где одновременно движутся две вещи, затем исправь иерархию.
Сделай луковую кожуру кадров 24–47 с прозрачностью 25%. Промежутки должны сжиматься у ключей. Подстрой изинг, пока так не станет.
Построй график x-позиции и масштаба главного объекта по кадрам в PNG. Покажи, где движение линейное или обрывается, затем исправь это нашими токенами.
Проверь как старший моушн-дизайнер: 10 заметок по степени важности, у каждой номер кадра и точное изменение кода. Примени первые 5.
Слишком суетливо. Убери 30% движения и оставь только движения, которые ведут взгляд.
Концовка резкая. Добавь паузу на 36 кадров с наездом 2%, затем дай ей успокоиться на пружине с коэффициентом затухания 0,8.

Берите одну-две за раунд. Если вставить все семь сразу, правка превратится в переписывание.

Когда заметка приходит к вам как ощущение, переведите её до отправки:

• «Сделай, чтобы цепляло»: масштаб 1,0 → 1,08 → 1,0 за 6 кадров, пик на бите.
• «Сделай премиально»: ease-out-quint на появлениях, пружины с затуханием 0,8, никакого перелёта на тексте.
• «Затянуто»: сократи каждую паузу на 12 кадров — один бит при 120 BPM и 24 fps, чтобы каждая склейка осталась на сетке.
• «Суетливо»: одно главное движение за раз; всё остальное стартует на 150 мс позже и проходит 60% пути.
• «Выглядит как ИИ»: перечисли по именам стандартные приёмы, которые использованы, запрети каждый и отрендери заново.

Чеки лаборатории, прямо из логов:

Эксперимент	Слов в промпте	Творческих правок	Кадров
Открывающий кадр, жидкий хром	416	10	360
Эксперимент 1, общая сторона	27	0 (намеренно)	360
Эксперимент 1, режиссёрская сторона	448	15	360
Эксперимент 2, 3D-маскот	399	4	480

Творческая правка — любая заметка, которая меняет то, как работа выглядит или движется. Технические исправления, вроде хука захвата или загрузки шрифтов, тоже записаны, но отдельным списком, и здесь не считаются.

Звук шёл последним, по одному промпту на работу, написанному под номера кадров: 5 звуковых правок для хромовой петли, 12 для эксперимента 1 и 0 для маскота — все приведены рядом со своими видео.

Чужие цифры выглядят так же, когда люди честно их называют.

Майлз руководит дизайн-студией. Его ролик о запуске занял 3 промпта и набрал больше 590 тысяч просмотров, а сам он называет Opus 5.5 «безумно хорошим» в моушн-дизайне (пост). Профессионалы считают промпты, и 3 — хорошее число.

Vox попросил Opus 5.5 объяснить гравитационное линзирование: один промпт, затем три ночных раунда полировки, 5 часов 28 минут от начала до конца, около $90 по ценам API (пост). Раунды полировки и есть продукт.

Считайте свои правки и публикуйте каждый промпт вместе с работой. Чеки убеждают, а «один промпт» вызывает подозрения.

Оборудование лаборатории: выберите движок

Opus 5.5 умеет писать под любой движок из списка. Назовите нужный в промпте — иначе он выберет за вас.

Three.js — то, на чём сделаны три главные работы этой лаборатории: 3D-сцены, свет, материалы и шейдеры на WebGL, которые рисует видеокарта (r186 вышла 24 сентября). Для видео ведите время от номера кадра, а не от часов. Камере тоже дайте числа: поле зрения 35–50 градусов — хорошая стартовая точка.

Remotion превращает видео в React-компоненты с точностью до кадра и имеет официальные Agent Skills для Claude Code. Бесплатен для частных лиц и компаний до 3 сотрудников; компаниям больше нужна коммерческая лицензия.

HyperFrames от HeyGen открыли 17 апреля 2026 года под лицензией Apache 2.0. Агенты пишут HTML, CSS и таймлайны GSAP, а его CLI рендерит MP4. Правила про коммерческую лицензию нет.

GSAP — библиотека таймлайнов для веба, теперь на 100% бесплатная, включая SplitText, MorphSVG, DrawSVG и ScrollTrigger. Её лицензия запрещает только делать no-code-конструктор анимаций, конкурирующий с Webflow.

Motion (бывший Framer Motion) анимирует React-приложения под лицензией MIT. Он анимирует живые интерфейсы и не имеет видеорендерера.

Чистый HTML и CSS не требуют установки и покрывают 2D-петли короче 10 секунд: типографику, фигуры и интерфейс. Рендерер выше превращает их в GIF или MP4.

# Remotion: видео как React-компоненты
npx create-video@latest          # выберите шаблон, назовите my-video
cd my-video
npm i
npx remotion skills add          # Agent Skills для Claude Code
npm run dev                      # Remotion Studio в браузере
npx remotion render MyComp out/video.mp4   # MyComp — id вашей композиции

# HyperFrames: на входе HTML + GSAP, на выходе MP4 (нужны Node 22+ и FFmpeg)
npx hyperframes init my-video
cd my-video
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
npx hyperframes preview
npx hyperframes render

Практическое правило лаборатории: одна идея короче 10 секунд — чистый HTML. Серия, шаблон или видео на данных — Remotion. Если вы мыслите веб-страницами и GSAP — HyperFrames. Всё в 3D — Three.js. А когда движение живёт внутри продукта, а не в видео, — Motion или GSAP.

Затем впишите движок в строку OUTPUT шаблона вместе с его числами. «Композиция Remotion, 1920 × 1080, 30 fps, 450 кадров» не оставляет Opus ничего для догадок.

Трёхминутная история ИИ от Chubby: «каждый кадр отрендерен из кода», сделано в Claude Code и Remotion, около 7400 строк React и TypeScript, без стоковых видео и без генераторов картинок и видео, около 196 тысяч просмотров (пост). Тот же подход масштабируется от 6-секундной петли до трёхминутного фильма.

Игровая прогулка на лодке по японским пейзажам от Мэна То — с погодой, сменой дня и ночи и отражениями в воде, собранная на Three.js и просмотренная около 473 тысяч раз (пост). Когда работа в 3D, назовите Three.js и дайте Opus построить сцену.

Последняя миля: звук, петли и экспорт для X

Та часть, которую туториалы обычно пропускают, а зрители замечают первой.

Звук. Лента проигрывает видео без звука, пока на него не нажмут, поэтому картинка сначала должна работать в тишине. Когда добавляете звук, сведите музыку и эффекты, нормализуйте до -14 LUFS (распространённая цель громкости для веб-видео) и ставьте каждый визуальный удар на 1 кадр раньше его звука, никогда не позже.

Звук, пришедший раньше своей картинки, ощущается неправильным быстрее, чем звук, чуть опоздавший. В жизни порядок тот же: свет опережает звук.

Три видео лаборатории следуют этому правилу с точностью до сэмпла: каждый звук синтезирован в коде через Web Audio API, каждый удар достигает пика через 1 кадр после своей картинки, сведение на -14 LUFS с пиками -1 dBTP. Opus 5.5 не умеет слушать, поэтому проверял синхронность, декодируя готовый MP4 и сверяя каждый удар с его кадром.

# Музыка + звуковые эффекты: свести, нормализовать до -14 LUFS, подложить под картинку
ffmpeg -i out/anim.mp4 -i music.wav -i sfx.wav -filter_complex "[1:a][2:a]amix=inputs=2:duration=first,loudnorm=I=-14:TP=-1:LRA=11[a]" -map 0:v -map "[a]" -c:v copy -c:a aac -b:a 192k -shortest -movflags +faststart out/final.mp4

Петли. Рендерите кадры от 0 до N-1, никогда до N. Кадр N — это снова кадр 0, и показ его дважды — то самое заикание, которое видят на шве. Ведите каждую петлю от фазы = кадр / N с целым числом циклов.

Квадрат, поворачивающийся ровно на 90 градусов за петлю, или волна, проходящая ровно 2 цикла, возвращаются к первому кадру. Для органического дрейфа берите шум по окружности — тогда он вернётся туда, откуда начал.

И сделайте кадр 0 законченной композицией. Это первое, что видно на экране, пока грузится GIF.

Экспорт. MP4 — для постов, GIF — для статей X и встроенных петель. Одна палитра на весь GIF не даёт цветам мерцать между кадрами.

# MP4 для поста в X: H.264 High, yuv420p, начинает играть сразу
ffmpeg -framerate 24 -i out/frames/%04d.png -c:v libx264 -profile:v high -pix_fmt yuv420p -crf 18 -movflags +faststart out/anim.mp4

# GIF для статьи X: одна палитра на весь ролик, ширина 1200 px
ffmpeg -framerate 24 -i out/frames/%04d.png -vf "scale=1200:-1:flags=lanczos,split[a][b];[a]palettegen=stats_mode=diff[p];[b][p]paletteuse=dither=bayer:bayer_scale=5:diff_mode=rectangle" -loop 0 out/anim.gif

# Проверка петли: проиграть три раза подряд и смотреть на шов
ffmpeg -stream_loop 2 -i out/anim.mp4 -c copy out/loop_check.mp4

Ограничения X, которые имеют значение, — из документации X по медиа и справочного центра:

Параметр	GIF	Видео
Ограничение размера	15 МБ	140 с без Premium
Размер кадра	до 1280 × 1080	1920 × 1080 для 16:9
Кадры и скорость	не больше 350 кадров	до 60 fps
Формат	одна палитра, бесконечная петля	H.264 High, yuv420p, звук AAC
Стандарт лаборатории	ширина 1200 px, 24 fps	CRF 18, faststart

При 24 fps лимит в 350 кадров означает, что GIF ограничен примерно 14,5 секунды. Петля на 4–6 секунд — это 96–144 кадра, с большим запасом.

Одна ловушка тайминга в GIF: задержки хранятся в сотых долях секунды, поэтому кадр при 24 fps (41,7 мс) нельзя сохранить точно. Округлите каждый кадр до 40 мс — и петля пойдёт на 4% быстрее, уехав с сетки битов. Решение: пять кадров по 40 мс, затем один на 50 мс — так 6-секундная петля держится ровно 6,00 секунды.

Выберите холст до первого кадра, потому что поменять его потом — значит заново режиссировать каждый план. Частые размеры: 1920 × 1080 для 16:9, 1080 × 1080 для 1:1, 1080 × 1350 для 4:5 и 1080 × 1920 для 9:16. X принимает видео с соотношением сторон от 1:3 до 3:1.

Леон Лин попросил Claude Code на Opus 5.5 сделать ролик о запуске выдуманного приложения-календаря: название, логотип, интерфейс, анимация, саундтрек и звуковые эффекты — всё в коде, из одного промпта примерно за 8 часов. Ролик набрал больше 85 тысяч просмотров (пост). Звук тоже может быть кодом.

Когда эксперимент ломается

В каждом проекте возвращаются одни и те же сбои. Вот они — каждый с промптом, который его исправляет.

Симптом	Вставьте это исправление
Мерцание или дрожь	Сделай каждое значение чистой функцией от t. Замени Math.random генератором с сидом. Убери таймеры и CSS-переходы.
Не тот или запасной шрифт	Загружай шрифт с display=block и жди document.fonts.ready перед первым кадром.
Заикание на шве петли	Рендерь только кадры от 0 до N-1. Веди петлю от фазы = кадр / N с целыми циклами.
Звук уезжает с бита	Считай каждый бит как n × 60 / BPM и округляй каждый отдельно. Никогда не прибавляй округлённое число кадров.
Рывки или выпавшие кадры	Анимируй только transform и opacity. Никаких width, height, top и left.
Полосы в GIF	Без градиентов. Только плоские цвета или дизеринг палитры.
Размытый или мерцающий текст	Привязывай неподвижный текст к целым пикселям. Рендерь в 2× и уменьшай.
Текст едет до того, как его прочли	Держи каждое состояние текста 0,3 с на слово плюс 0,5 с, прежде чем оно сдвинется.
Всё движется одновременно	Одно главное движение за раз. Остальные стартуют на 150 мс позже и проходят 60% его пути.

Если исправление не держится, попросите Opus отрендерить два кадра по обе стороны от проблемы и описать разницу. Видеть, что изменилось между двумя картинками, — как раз то, для чего у него улучшенное зрение.

Исправление на кадре 84 не удержалось. Отрендери кадры 83 и 85 в PNG, поставь рядом и перечисли все различия, которые видишь. Найди строку кода, которая это вызывает, исправь только её и отрендери оба кадра снова.

Когда исправление работает, добавьте его в контракт рендера. Контракт — это память лаборатории: каждая строка в нём — сбой, который вам больше не придётся видеть.

Эксперимент 3 — ваш

Лаборатория открыта. План на сегодняшний вечер:

1. Скопируйте промпт открывающего кадра и замените слова на свой продукт или своё имя.
2. Запустите его на Opus 5.5 со средним уровнем усилий — в приложении Claude или в Claude Code.
3. Отрендерите стоп-кадры 0, 24, 48, 72 и 96 и напишите две заметки с номерами кадров.
4. Исправьте, перерендерите и повторяйте, пока заметки не кончатся.
5. Экспортируйте командой для GIF и выложите вместе с промптом и всеми правками в первом комментарии.

В первом прогоне сохраните числа и меняйте только слова. Во втором меняйте по одному числу за раз — так будет видно, что делает каждое.

Модель у всех одинаковая. Числа, которые вы ей даёте, — ваши.

Автор лаборатории публикует каждую новую работу с точным промптом и всеми правками — картинку и звук — в X (@flxrnc).

Бонус: промпт-пак «Погоня за жуком»

Ещё один фильм из той же лаборатории: воксельный маскот гоняется за жуком по огромной механической клавиатуре, каждое приземление нажимает клавишу с настоящим щелчком, а в финале жук накрыт банкой — и машет лапкой. 15,5 секунды, 930 кадров, один HTML-файл. В PDF на русском — промпт, готовый к копированию, все 6 правок картинки и 2 правки звука дословно, раскадровка «каждый бит на своём кадре» и блок BRAND, который нужно заменить, чтобы сделать такой же фильм про свой продукт.

Скачать промпт-пак «Погоня за жуком»PDF на русском, 5 страниц, 2,4 МБ

Читайте также

🗺 Собрать маркетинг-план на 90 днейБесплатно, в Telegram-боте @uspeshnyybot