JavaScriptアニメーションメーカー
すべてのフレームを、コードで描く。
あなたは説明するだけ。
Claude Opus 5.5搭載のエージェントが、全フレームをレンダリングするJavaScriptを書き、
サウンドトラックもコードで作曲します。キーフレームも、タイムラインも、ターミナルも不要です。
JavaScriptアニメーションとは？
コードで書かれた映像。
毎フレーム、新しくレンダリングされる。
iArt.aiのAnimationモードは、1文の説明をJavaScriptアニメーションに変えます。Claude Opus 5.5で動くエージェントが書いたコードで、全フレームをレンダリングする短い映像です。文字は実際のテキストとして組版され、図形やパスはSVGで描かれ、手描きの絵やパーティクル、テクスチャはcanvasレイヤーが描きます。各フレームは時間の関数なので、再生・シーク・書き出しのどれでも同じ映像になります。音楽と効果音は、Web Audio APIを使ってコードで合成されます。
iArt.ai は、この手法をブラウザのタブひとつで使えるようにしました。AnimationモードはClaude Opus 5.5搭載のエージェントです。あなたが映像を説明すると、エージェントがビートとショットを計画し、アニメーションのコードと音楽を書き、自分で静止画をチェックして、結果をブラウザで再生します。決まったスタイルはありません。見た目は題材とあなたの言葉から生まれるので、決済の解説動画と2歳児向けのおやすみ絵本が似ることはありません。
なぜ今広まったのか。映像を丸ごとコードで描くには、モデルの空間推論力、センス、長く丁寧なコードを書く力、そして自分が描いたフレームを見て直す力が必要です。Claude Opus 5.5によって、コードで描いた映像は人がシェアしたくなる水準に達し、「全フレームJavaScript」はひとつのジャンルになりました。
定義を詳しく知りたい方は JavaScriptアニメーションとはを、自分で手順どおりに作りたい方は Claude Opus 5.5でアニメーションを作る方法をご覧ください。
Claude Motionがご利用のプランにない場合は、 同じタイプのアニメーションを作る4つの方法をご覧ください。
作品例
すべてコードで描かれた映像。
どの映像も、下に記載したプロンプトの最初の一文からiArtのAnimationモードで制作しました。すべてのフレームとすべての音がコードで書かれています。一文だけでも十分よい映像になります。プロンプトの残りは、完成した映像から書き起こしたブリーフ（カット割り・ルック・サウンド）です。「試す」を押すとプロンプト全文が送られるので、コピーではなく、この映像に近い仕上がりになります。
A 40-second film in two acts about how a seed becomes a tree: act one underground (the seed cracks, roots reach down), act two above ground (the shoot breaks through, seasons pass, a tree). Same character style in both acts, one continuous score.
IDEA: One little acorn with a face is the hero throughout, seen in a fixed side-on cross-section with soil below, sky above. It wakes, roots, sprouts, becomes an oak, lives through the seasons, and ends by dropping a new acorn, closing the loop.
0–4.5s: brown soil layers under rain; a tiny acorn sleeps underground above a pebble. A small grey badge appears top left: "Act I · Below". Drops seep down toward it.
4.5–9s: close-up: three drops land on its cap, its eyes pop open with a smile, the shell cracks and a pale first root pushes downward.
9–19.5s: wide again. The root drives down, curves around the pebble and branches into side roots. A green shoot pushes up through the soil, pausing just below the surface.
19.5–25s: the shoot breaks through. Badge changes to "Act II · Above". Two rounded first leaves unfold and spread; the seedling smiles up at the sky.
25–30s: the stem thickens into a trunk, the acorn's face still at its base. Branches grow and burst into round green leaf clusters with small pink blossom dots; a warm sun rises upper right.
30–33s: autumn. The sky warms; the canopy turns golden orange and leaves drift down to the ground.
33–36s: winter. Bare branches, snow falling, a white layer building on the soil. The face sleeps calmly.
36–40s: spring. The snow melts, green canopies pop back with blossoms, an acorn ripens on a branch, falls and lands on the soil with two small bounces.
LOOK: soil in deep chocolate #4A3322 and umber #5A3D28 with tan flecks #9C8471; sky parchment cream #EBE5D8; acorn golden ochre #D89849 with chestnut cap #8C5A28; stem green #88A878; foliage sage #94B097 and olive #5F8265, autumn orange #C8873E, blossom coral #E28A7A; sun amber #E2A35B. Flat shapes with light paper grain, simple line roots and branches, round canopies. Badge: small grey #7E858C rounded box, white text.
MOTION: calm, readable, with pauses between each stage of growth. Springy squash and stretch on the crack, leaf pops and landing; smooth easing on root and branch growth. Seasons change in place with colour shifts, falling leaves and snow.
SOUND: one unbroken, unhurried fingerstyle acoustic guitar score, thinning in winter, lifting for spring. Drip pings underground, a crisp shell crack, soft pops on eye-open and when the shoot breaks through, birdsong above ground, woody rustles, an autumn breeze, quiet winter wind, a spring chime, and a hollow thud as the new acorn lands. No narration.
プロンプト全文を見る閉じる
How do noise-cancelling headphones actually cancel noise? Short vertical explainer for TikTok, ~20s.
IDEA: One cutaway earcup on a listener's head is the whole diagram. Red noise wave in, mic hears it, chip flips it teal, speaker plays it, red plus teal add to a flat line. A bottom meter drops LOUD, MUFFLED, QUIET.
0–2.4s: an annoyed listener faces a fan-like engine labelled "ENGINE HUM". A red sine wave travels into his ear; the bottom meter "NOISE AT YOUR EAR" fills red to "LOUD". Question card drops in at the top: "How do headphones erase noise?"
2.4–3.8s: over-ear headphones slide down onto his head and open into a cutaway: outer mic, chip, inner speaker. The cushion damps the wave; meter falls to "MUFFLED".
3.8–7.6s: punch in on the earcup. Card: "STEP 1 / A mic outside hears the noise". A pulsing ring marks the mic; a screen on the chip traces the red wave.
7.6–11.3s: card: "STEP 2 / A chip flips it upside down / every peak becomes a dip". The wave on the chip screen flips vertically and turns teal.
11.3–12.6s: card: "STEP 3 / The speaker plays the flipped wave". The speaker sends the teal wave into the ear alongside the red one. Equation: "NOISE" + "FLIPPED" = "YOU HEAR".
12.6–15.2s: card: "PEAK + DIP / They cancel out / the hum mostly disappears". Red and teal overlap and flatten into one grey line; meter shrinks to "QUIET" in green.
15.2–18.8s: slight pull back. Card: "THE CATCH / Best on steady hums like engines & fans / sudden sounds get through more".
18.8–22s: reframe on the now smiling listener. Four lines stamp on one by one: "Hear it." "Flip it." "Play it." "Quiet." Hold.
LOOK: warm off-white paper #F1EFE8 with fine grain. Charcoal #22252A headphones and outlines, warm grey #7F7C77 clothes and parts, coral red #D84337 for the noise wave and LOUD, teal #26B5A1 for the flipped wave, forest green #2D6A4F for QUIET. Minimal flat infographic: cutaway diagram, pill badges, thin line waves. Bold sans headlines, small tracked caps labels, text kept in the upper and lower thirds.
MOTION: clear cause-and-effect pace; each card holds one to two seconds to read, then swaps with a quick slide or dissolve. Props move fast with a snappy ease-out; waves scroll smoothly and continuously.
SOUND: warm fingerstyle acoustic guitar with soft piano and a light beat, around 90–100 BPM, under a steady low engine drone at the start. A click and muffled filter sweep as the headphones seal, blips on the mic, a rising synth whoosh on the flip, then the drone cuts out abruptly at the cancel. Soft woodblock pops on each final line, chords resolving. No narration.
プロンプト全文を見る閉じる
Why is the sky blue? A 20-second explainer in the style of a 1950s science textbook.
IDEA: One illustrated textbook page. Follow a sunbeam into the air: molecules knock the short blue waves off in every direction while red passes straight on, and that scattered blue reaches a boy's eye from all over the sky.
Throughout: header "CHAPTER 7 · LIGHT AND THE AIR", page "143", a title at the top, a "Fig." caption at the bottom, all typed on letter by letter.
0–3.8s: a boy in a blue cap in a field, a crosshatched red sun above. Title: "Why Is the Sky Blue?" Caption: "Fig. 7-1. On a clear day the whole sky looks blue. But sunlight itself looks white. Where does the blue come from?"
3.8–7.6s: push in to the sun; a white beam carries a long red wave and a short blue wave side by side. Labels pop in: "WHITE SUNLIGHT", "RED: LONG WAVES", "BLUE: SHORT WAVES". Title: "1. Sunlight is a mix of colors". Caption: "Fig. 7-2. White sunlight holds every color of the rainbow. Red light travels in long waves; blue light in short ones."
7.6–12.6s: along the beam among paired-circle molecules ("AIR MOLECULE"), the blue wave hits one and sprays out in rings: "BLUE BOUNCES OFF IN ALL DIRECTIONS". The red wave carries on: "RED PASSES STRAIGHT ON". Table top right, "LIGHT SCATTERED BY AIR": RED 1x, BLUE counting up to 6x. Title: "2. Air scatters the short waves". Caption: "Fig. 7-3. Tiny molecules of air knock short blue waves off in all directions, about six times more than long red ones."
12.6–16.4s: back to the field; dashed blue lines run from molecules all over the sky into the boy's eye ("YOUR EYE"). Title: "3. Blue arrives from every direction". Caption: "Fig. 7-4. Wherever you look, scattered blue light is coming toward your eye. So every part of the sky looks blue."
16.4–20s: full diagram holds. Title: "In Short". Caption becomes a bordered box: "The air scatters blue light out of sunlight, all across the sky. That is why the sky is blue." Hold.
LOOK: aged newsprint #EDE7D7, vermilion #D75D4E for sun and red wave, cornflower blue #4B78A4 for blue wave and sky lines, mustard ground #C4B17B, olive tree #8A7D58, faded charcoal #22201E lines and text. Lithograph print feel: fine horizontal ruling, crosshatch shading, a double-ruled diagram frame. Bold sans titles, plain sans captions, caps labels.
MOTION: calm classroom pace with holds for reading. Waves travel at steady speed; scatter rings expand smoothly, no bounce.
SOUND: warm, minimal electric piano chords around 80 BPM. Typewriter clacks on all typing, no whooshes, a resolving chord and one last key strike. No narration.
プロンプト全文を見る閉じる
Black-and-white ink woodcut style, rough carved lines on off-white paper. A girl folds a paper boat and sets it into the rain gutter; as it drifts through the city at night, every window it passes lights up and someone folds another boat. Short hand-lettered captions. 25 seconds, 16:9.
IDEA: One paper boat drifting left to right along the gutter is the spark. Every window it passes snaps on, and the light spreads like a chain reaction until the whole city glows and the gutter is full of boats.
Captions: lowercase hand-lettered white text in a black banner at the bottom, one per shot.
0–2.6s: a dark, hatched, rain-soaked skyline inks in on off-white paper, a small girl sitting on her front steps, rain lines jittering. Caption: "a dark, wet city".
2.6–5.1s: close-up of her mittened hands folding a cream sheet: triangle hat, brim, pop open into a boat. Caption: "she folded one boat".
5.1–7.6s: the girl with pigtails reaches down from the stoop, sets the boat on the gutter stream and lets go; it drifts right, bobbing. Caption: "and let it go".
7.6–12.6s: track right with the boat past dark facades. A ground-floor window bursts on with cream light and pointed rays, a silhouette inside; neighbours pop on; from an upper window someone drops another boat. Caption: "one window woke".
12.6–15.1s: wider street. Windows pop on in a ripple along the whole block; several boats now float together. Caption: "then the next street".
15.1–20.1s: the opening skyline again; light spreads across tenements and far towers until hundreds of windows glow. Caption: "then the whole city".
20.1–22.6s: low tracking shot along the curb: dozens of boats in a tight convoy, silhouettes watching from lit windows. Caption: "boats, and more boats".
22.6–25s: her building, every window lit; the girl sits in the central arched window holding a folded paper bird. Caption: "it started with one." Hold.
LOOK: strictly two tones like a linocut print: off-white paper #F3EFE6, carbon black #161412 for buildings, figures and banners, bright cream #FFFDF8 for window light and boats. Rough carved lines, heavy crosshatching, spiky ray bursts around lit windows. Flat side-on framing, water line low.
MOTION: animated on twos, hand-printed feel. Folds and windows snap on instantly with a short ray burst; boats drift smoothly with a gentle bob. Hard cuts; the only camera move is a slow pan along the water. The light spreads faster and faster.
SOUND: reflective fingerpicked acoustic guitar around 75–80 BPM, melancholy turning hopeful, over continuous rain hiss. Paper creases on each fold, a soft water dip, a warm switch click and small chime per window, clicks multiplying as the city lights up, a last chord ringing into the rain. No narration.
プロンプト全文を見る閉じる
Paper cut-out collage style, like a children's picture book made of construction paper. A little boy at his window can't sleep, so a small friendly cloud drifts down over the rooftops, borrows a bit of moonlight and glows like a nightlight until he dozes off. 20 seconds, square 1:1.
IDEA: One small smiling paper cloud is the hero: it drifts to the moon, soaks up its golden light, then floats down beside the boy's window. The film is the cloud turning from plain cream paper into a glowing nightlight.
0–3.3s: wide shot of a sleepy town at night: purple paper gabled houses, deep blue starry sky, a big textured full moon upper right. In a warm yellow attic dormer, a boy in blue leans out and looks up.
3.3–6.7s: cut to a medium close-up of the boy framed in the glowing dormer. He yawns wide, rubs one eye with his fist, then rests his chin on his folded hands on the sill.
6.7–10s: back to the wide sky. A fluffy cream paper cloud with a smiling face drifts in from the upper left and glides slowly across the stars toward the moon.
10–13.3s: close-up on the moon. The cloud eases up against its left edge and nuzzles it. Soft yellow light pulses between them, sparkles twinkle, and warm gold spreads through the cloud from inside. It blushes and smiles.
13.3–16.7s: medium-wide on the rooftop. The now golden, glowing cloud floats down on a slow eased arc and settles gently right beside the open dormer window.
16.7–20s: medium shot of the window and the glowing cloud. Tiny yellow star sparkles drift around them. The boy's eyes grow heavy and close with a contented smile as he dozes off. Hold in stillness to the end.
LOOK: midnight indigo sky #1E2243 and #262B54, plum and slate-purple rooftops #3C335C and #4D476D, warm lamp yellow windows #FED466 and #F6AD3C, creamy moon #F8E7A2 and #EED37A, cloud cream #F4EEDC turning golden. Everything is cut from textured construction paper: fibre grain, stippled roofs and sky, torn deckled edges. The glowing window anchors the centre; moon and cloud live in the upper third.
MOTION: slow, low-energy, lullaby pace. The cloud drifts smoothly with soft eased stops at the moon and at the window, with a gentle squash and stretch as it floats. The boy moves like a paper puppet: stepped blinks, swapped mouth shapes for the yawn, a simple arm rub.
SOUND: a slow, gentle lullaby on fingerpicked nylon-string guitar and warm acoustic bass with soft celesta and glockenspiel accents. Magical chimes and a soft sparkle sweep when the cloud touches the moon and fills with light, faint twinkles as it descends. The music never stops. No narration.
プロンプト全文を見る閉じる
¿Por qué la Luna cambia de forma cada noche? Un video corto para mi canal de ciencia para niños, texto en español.
IDEA: Un niño mira la Luna; la cámara entra en diagramas sencillos (Luna medio iluminada, órbita, cuatro fases) y vuelve al niño, que dibuja la Luna entera con el dedo. Unos 40 segundos, formato cuadrado 1:1.
0–5s: un niño de espaldas, jersey naranja, en una colina bajo un cielo estrellado, mira una Luna creciente. Se escribe letra a letra "¿Por qué la Luna cambia de forma cada noche?" ("cambia de forma" en amarillo). Una etiqueta bajo la Luna cambia "noche 3", "noche 7", "noche 11", "noche 15", y la Luna crece hasta llena.
5–16s: zoom a la Luna, que se oscurece: "La Luna no tiene luz propia." Un Sol amarillo entra por la izquierda con rayos discontinuos: "La ilumina el Sol." La mitad que mira al Sol se vuelve crema, la otra azul oscuro; etiquetas "mitad iluminada" y "mitad oscura". Luego: "El Sol siempre ilumina la mitad de la Luna."
16–26.5s: diagrama desde arriba: Sol a la izquierda, Tierra al centro, órbita discontinua. Arriba "La Luna gira alrededor de la Tierra." y, en amarillo, "El ciclo completo dura unos 29 días y medio." Abajo a la derecha, "Así la vemos:" muestra la fase. La Luna, entre el Sol y la Tierra ("Luna nueva"), avanza en sentido antihorario a saltos de un cuarto: "Cuarto creciente", "Luna llena" (detrás de la Tierra), "Cuarto menguante" y otra vez "Luna nueva".
26.5–34.5s: "Cada noche vemos un trozo distinto de su lado iluminado." Cuatro círculos en fila se llenan uno a uno con las fases y sus nombres. Debajo, una flecha amarilla curva de derecha a izquierda: "...y vuelta a empezar".
34.5–40s: de vuelta al niño. Señala la Luna creciente y una línea amarilla discontinua recorre su borde oscuro hasta cerrar el círculo. "La Luna no cambia de forma: cambia cuánto vemos de su lado iluminado." ("cambia cuánto vemos" en amarillo). Se mantiene.
LOOK: cielo azul noche #141838 a #0B0E23; Sol y palabras clave #F8C847; lado iluminado crema #F6F2DC con cráteres #D3CEB0; lado oscuro #2B3463; Tierra #2A74D9 con continentes #4AA96C; jersey #E86F45. Ilustración plana con grano suave. Sans geométrica en negrita, texto blanco centrado arriba. Líneas discontinuas; etiquetas redondeadas.
MOTION: tranquilo, una pausa de un segundo tras cada texto. Cámara suave; etiquetas y fases con pequeño rebote; la Luna avanza a pasos.
SOUND: nana de caja de música y celesta, unos 95 BPM. Tecleo en el texto, un pop en cada etiqueta, un soplo al entrar el Sol, tic-tac de engranaje en la órbita con una campanita en cada fase, pops de madera ascendentes en la fila, un brillo en la flecha y el contorno, acorde final. Sin narración.
プロンプト全文を見る閉じる
仕組み
説明する。計画する。描く。仕上げる。
プロンプトから最初のフレームまでに何が起きているのかを紹介します。
01
映像を説明する
作りたいものを普段の言葉で伝えてください。題材、誰に向けたものか、長さ、トーンなどです。16:9、9:16、1:1から選べます。スクリーンショットやロゴを添付すれば映像に登場させられ、写真を添付すればそれをもとにキャラクターを描き起こします。
02
ビートとショットを計画
コードを書く前に、エージェントはショットを決めます。それぞれに何を映し、どれだけの長さ見せ、カットと効果音をどこに置くか。映像と音楽が同じタイミングを参照するので、カットがビートにぴたりと合うのです。
03
描いて、音をつけて、チェック
全フレームをレンダリングするコードと、Web Audioのサウンドトラック（音楽と効果音）を書きます。そのうえで、あなたが見る前に自分の静止画とコンタクトシートを確認し、文字の見切れや重なり、空白のフレームがないかをチェックします。
04
編集・続き・書き出し
チャットで返信すれば何でも変更できます。エージェントがコードを編集してレンダリングし直します。公開リンクで共有でき、有料プランではサウンドトラック付きのMP4（オーバーレイは透過WebM）を書き出せます。
2つのエンジン
iArtのどのエンジンを使うべき？
Animationは、iArtで動画を作る2つの方法のうちのひとつです。文字・データ・タイミングを正確にしたいときに最適ですが、実写のような映像には向きません。
| Animation | AI Video | |
|---|---|---|
| 作り方 | コードが全フレームをレンダリング（組版テキスト、SVG、canvasレイヤー）し、サウンドトラックもコードで合成 | 生成AIの動画モデルが映像をレンダリング |
| 得意分野 | 解説動画、モーショングラフィックス、イラスト調の映像、オーバーレイ | 実写のようなシネマティックなショット |
| 画面上の文字 | 正確（コードで組版） | モデルが描くため、綴りが崩れることがある |
| 素材 | 不要。スクリーンショット、ロゴ、画像、動画クリップを入れることも可能 | 生成された映像 |
| ナレーション | AIナレーション（声を選択） | AIナレーション |
正確なブランドタイポグラフィやデータチャートを使いたい場合は、 解説動画をご覧ください。
自分で動かすか、
セットアップを省くか。
この手法はオープンソースです。ターミナルが日常なら、自分のコーディングエージェントで動かせます。ブラウザで一文を入力するほうがよければ、Animationモードを使ってください。
Claude Code + javascript-animation-skills
オープンソースのスキルパックが、あなたのコーディングエージェントに同じ手法を教えます。ビートグリッドとショットリスト、描画ライブラリ、Web Audioのサウンドトラック、セルフチェック、MP4へのレンダリングまで。Claude Opus 5.5で開発・検証しています。
- – 無料・MITライセンス。Claude CodeのプランやAPI利用料はご自身で用意します
- – Claude Codeやその他のコーディングエージェントで動作
- – Node 18+、ffmpeg、Chrome、playwright-coreが必要
- – 映像はあなたのものになるHTMLファイルで、手で編集できます
同じ手法を、ブラウザのタブで
インストール不要、ターミナル不要。映像を説明し、再生を見て、チャットで返信して変更するだけです。
- ✓ app.iart.aiのCreateページにあるAnimationタブで動作
- ✓ 長さは自由。長い映像はシーンに分けて作成
- ✓ スクリーンショット、ロゴ、サイトを映像に登場させたり、写真からキャラクターを描いたり
- ✓ オプションでAIナレーションも
- ✓ 公開リンクで共有。有料プランではサウンドトラック付きMP4（オーバーレイは透過WebM）を書き出し
JavaScriptアニメーションとは？
コードでレンダリングするアニメーションという意味でのJavaScriptアニメーションとは、すべてのフレームをコードで生成する映像のことです。時間の関数が各瞬間に画面に映るものを決め、組版テキスト、SVGの図形、canvasの描画を使います。音楽と効果音はWeb Audio APIで合成します。iArtのAnimationモードは、テキストプロンプトからそのコードを書いてくれるAIアニメーション生成ツールです。
iArtのAnimationモードはどのモデルを使っていますか？
Claude Opus 5.5です。エージェントがビートとショットを計画し、アニメーションのコードと音楽を書き、映像を見せる前に自分の静止画とコンタクトシートを確認します。この手法のオープンソース版であるjavascript-animation-skillsも、Claude Opus 5.5で開発・検証しました。
映像はどのくらいの長さまで作れますか？
作りたい長さを伝えてください。長い映像は同じプロジェクトの中でシーンに分けて作られ、見た目と音楽はそのままです。どのシーンも、あとからチャットで返信して変更できます。このページの「種が木になるまで」は40秒の映像です。
Animationモードでナレーションは付けられますか？
はい。メッセージ欄で声を選ぶと映像にナレーションが付き、映像は言葉のタイミングに合わせて進みます。声を選ばない場合、サウンドトラックはコードで合成した音楽と効果音になります。
自分の画像や写真は使えますか？
はい。添付したスクリーンショット、ロゴ、製品写真、短い画面録画は、そのまま映像に登場します。人物の写真や好みのテイストの画像は、描き起こすキャラクターやスタイルの参考として使われます。サイトのURLを伝えることもできます。
料金は？動画はダウンロードできますか？
新規アカウントには$2のサインアップクレジットが付与されます。$2あれば30秒未満の映像を1本作れます。どの映像も公開リンクで共有できます。サウンドトラック付きMP4の書き出しには有料プランが必要です（Proは月$20）。テロップなどのオーバーレイは、代わりに透過WebMで書き出されます。
無料のオープンソースで同じことはできますか？
できます。javascript-animation-skills（github.com/iart-ai/javascript-animation-skills、MIT）は、あなたのコーディングエージェントに同じ手法を教え、手元のマシンで映像をMP4にレンダリングするClaude Codeのスキル集です。Node 18+、ffmpeg、Chromeが必要です。iArtのAnimationモードは、同じアプローチをセットアップなしで使えるものです。
映像を説明しよう。
全フレームはエージェントが書きます。
すべてのフレームも音楽もコードで書かれます。$2のサインアップクレジットで始めて、有料プランでMP4を書き出せます。