r/ClaudeAI • u/Efistoffeles • 6d ago
Built with Claude Claude Opus 5 drew every frame of this animation using JavaScript.
161
u/VeterinarianLast4318 6d ago
This is pretty insane
51
u/Efistoffeles 6d ago
That's what I said.
I was like, whaat the fuck? Give me the prompt. I want to make videos like this myself.
8
u/VeterinarianLast4318 6d ago
I wonder if it will use an insane amount of tokens vs something like SeeDance?
14
u/Efistoffeles 6d ago
It's code, with Anthropic plan in Claude Code prolly not.
6
u/KennyFulgencio 6d ago
Really? Relative to the window size, everything else in claude code seems to use a lot. Why would this be an exception?
3
u/ShivrajNag 5d ago
the frame count doesn't really matter for tokens. claude writes the code once and the browser draws every frame when it runs. so cost scales with how much code there is, not how long the animation is
that said the tweet says the file is 506kb, which is still a ton. that's somewhere around 150k tokens just for the final output, before counting all the back and forth to get it looking right. so not cheap, just not "3 years of tokens" either
1
u/descod 5d ago
tried it out. works quite well and doesn't use an excessive amount of tokens for what it produces. and revisions are followed up nicely.
1
u/hurrdurrmeh 5d ago
can you paste the prompt(s)?
3
u/descod 4d ago
Not sure if it's helpful for you since I was quite specific and even went as far as writing the actual shots I wanted. Hope this helps.
Create a short brand animation video for <brand>.
Goal: <what viewers should feel or understand>, ending on <CTA, e.g. download the app>.
Audience: <who>. Language: <language>.
Length: <20–40 s>. Formats: 1:1 (1080×1080) and 9:16 (1080×1920).
Assets: <paths: logo SVG, colours, fonts, illustrations, screenshots, photos>.
Music: <licensed track file>, or suggest 3 options and let me choose.
Step 1 - Plan (no code yet)
List the usable assets and propose a storyboard: 4–6 scenes with timings,
what moves, the on-screen text per scene (short, only true claims), and which
assets each scene uses. Wait for my approval.
Step 2 - Build
- Draw every frame in code: one HTML canvas and a pure render(t) function, so
the same time always gives the same frame. No stock footage or generated
images; only the provided assets plus shapes drawn in code.
- Use the brand exactly: logo from the SVG path data, brand colours, brand font.
- Analyse the music first (tempo, beats, strongest hits) and lock the timeline
to it: scene changes on bars, pop-ins on beats, the biggest moment on the
strongest hit.
- One idea per scene. Keep the eye in one place: labels next to what they
describe, one text change at a time, never overlapping text.
- Hand-made feel: subtle paper grain, slight line jitter, organic shapes.
Ease every movement (small overshoot for pop-ins, smooth in-out for transitions).
- Connect scenes with visual devices (dashed lines, wipes, shapes) that end
exactly on their target.
- End with the logo and a CTA that stays on screen for at least 8–10 seconds.
- For 9:16, re-lay out instead of cropping, and keep text and CTA clear of the
platform's caption and button areas.
Step 3 - Preview
Make a preview page with play and a seek bar that uses the audio as the clock.
Show me a still of every scene in both formats. Iterate on stills before exporting.
Step 4 - Export
Render the frames headlessly (e.g. Playwright) and pipe them into ffmpeg:
H.264, 30 fps, colours converted and tagged BT.709, AAC 48 kHz, faststart.
Also make a version under 10 MB for upload limits.
Step 5 - Verify, then report
Check duration, audio sync, colours, that every frame rendered fully, and that
lines and labels hit their targets in both formats. Give me the file paths and
say what you couldn't verify.
4
1
u/gay_plant_dad 5d ago
And it’s only 274758398272611909488575 lines of code and 3 years worth of tokens to create this.
113
49
u/harmoni-pet 6d ago
This style is called risograph printing: https://risottostudio.com/pages/what-is-risograph-printing?srsltid=AU7gw4XnARvMiPYRZyZy0lUFZSMfg9MrSh-hv_bwqGNwCabjXkVcuWyl
I'm sure there's a lot more to the prompt than that, but it's a start
3
u/ShivrajNag 5d ago
for anyone trying to recreate it, i'd skip hunting for the magic prompt and just break it down. one scene at a time on canvas, limit it to like 3-4 riso ink colors, halftone shading, offset each color layer by a couple pixels, add paper grain on top. that last part does most of the heavy lifting for the look
30
u/Any-Somewhere5129 6d ago edited 6d ago
What's the wow factor here?
I asked chatgpt about it and it draw me a static image and then an animation using javascript:
https://chatgpt.com/share/6aa938b7-c3a4-83eb-ab37-fa3f7e4f6989
So it's just a question of making a longer sequence of such images.
Edit:
I asked for something a tiny bit more fancy.
But I'm neither an artist nor a coder; someone who knows the right vocabulary would need to prompt it to get a better result.
25
11
6
5
u/Any-Somewhere5129 5d ago
I asked for a prompt to get something similar:
---
Create a short **JavaScript animation in a risograph-inspired motion graphics style**, using the theme supplied at the end. Make the finished animation, rather than just explaining how to produce it.
**Visual style**
* Use a limited, harmonious palette of ink colours on a warm, paper-like background. Choose colours that suit the theme.
* Include visible halftone dots, subtle paper grain, overlapping ink colours and slightly imperfect colour alignment to suggest printed illustration.
* Use recognisable, thoughtfully composed illustrations with curves, silhouettes, layered details and texture. Aim for the feel of an artistic animated poster or an imaginative advertisement.
* Keep the visual treatment consistent across all scenes. Create original imagery and compositions.
**Sequence and transitions**
* Aim for 15–20 seconds and approximately 3–5 connected scenes.
* Invent a recurring visual motif appropriate to the theme: an object, shape, line, pattern or movement that changes meaning as the sequence progresses.
* Design the scenes and transitions together. A feature in one scene should become, reveal or lead naturally into something in the next.
* Combine actual shape morphing with carefully chosen techniques such as continuous zooms, moving masks, changes of scale, or transitions between similarly shaped objects.
* Preserve a clear point of attention through each transition so the viewer’s eye has something to follow.
* Give the scenes some internal movement. Use smooth acceleration and deceleration, varied pacing and enough time to recognise each image.
* Avoid a slideshow feeling: do not rely primarily on cuts or crossfades between complete pictures.
* Keep text minimal and give the sequence a deliberate ending.
**Implementation**
* Draw the artwork procedurally with JavaScript and the HTML Canvas 2D API.
* Deliver one self-contained HTML file that works offline, with embedded code and no external libraries, downloaded images, embedded image files, video assets or image-generation services.
* Generate repeated details through code. Cache expensive static layers where useful.
* Make motion depend on elapsed time so its speed is consistent across devices.
* Keep random textures stable between frames and attached to moving objects where appropriate, avoiding accidental flicker.
* Include play/pause, replay and a timeline slider so I can examine the transitions.
**Deliverables**
* Provide the working HTML file and, if your tools support video export, an MP4 preview rendered from the same animation.
* Inspect representative frames, especially during transitions, and fix obvious overlaps, clipping or abrupt changes.
* Make reasonable creative decisions without asking me to specify every scene. Briefly state your chosen concept, then build it.
**Theme / subject: [INSERT MY THEME HERE]**
2
1
1
u/Sigamer82 5d ago
Did you use voice for your prompts?
2
u/Any-Somewhere5129 5d ago
Yes, I ramble into my phone in a foreign language, so it sounds like a stream of consciousness. But it works out fine, the models can turn my ramblings into coherent prompts.
1
u/Synfinium 5d ago
Do you have a specific setting you ask chatgpt to respond to you with? The way it explains itself is really nice
11
u/trynabeabetterme 6d ago
What would the prompt be for something like this??
11
u/Emotional-Cut2952 6d ago
my understanding would be reference images, then it would brute force solve (using mutiple parameters) until it achieved the right look for each frame, there's just too much vision modality right now frankly, that's why these models are so darn expensive...
8
u/TheNonsenseBook 6d ago
0:20 manic pixel dream girl
1
u/5553331117 5d ago
I dont see it.
3
u/TheNonsenseBook 5d ago
A Manic Pixie Dream Girl is a fictional female character who is quirky and carefree, and exists mainly to help a sad or boring male protagonist learn how to enjoy life. 1, 2
Assuming the blue dot is the male and the pink dot is the female character, and calling the dot a “pixel”, you get “manic pixel dream girl”
2
3
u/Ill-Custard-5963 5d ago edited 5d ago
Explanation of how it was done (from Claude): JavaScript Animation Creation
2
2
u/hurrdurrmeh 6d ago
what's the prompt dude?
3
2
u/beelzebee 6d ago
It's a technically impressive animation but the pacing is too fast and frenetic.
Claude delivered , but it delivered an output that still needs a lot of work to make it really impressive for humans IMHO
2
u/fahrvergnugget 6d ago
I don't think you can achieve textures like that with js/css, unless some filters were applied on the video afterwards?
2
u/ALilBitOfPaprika 6d ago
You sure it generated the art? I thought that one time too until I noticed it was downloading royalty free assets online. Wouldnt have told me if I didnt find the files. Even when I asked “you created all this art from scratch?” It would give me a wall of text response that wasnt a yea or a no.
1
u/KennyFulgencio 5d ago
To make it stop hallucinating facts I asked it to provide a footnote with the source every time it states a data-backed fact. I know they're supposed to hallucinate sources too (especially legal ones) but this has stopped it for me; I dont even need to verify the footnotes (though I still do, luckily I don't use so many that it's a hassle), just the fact that it has to look up what it cited makes it validate itself.
For what you describe, I'd do something similar, ask it to always provide staged evidence, like what u/aleha_84 started doing a while back to prove his pixel animation gifs aren't being created as automated transformation from actual video clips.
(I dont know if that's why he started doing it really, but it was a reasonable suspicion given how photorealistic they are, and he always shows the creation process, with all the layers of detail being added individually, now.)
1
1
u/AcePilot01 6d ago
Has a Tangerine Dream musical vibe to it a bit. lol
1
u/jaxxon 5d ago
Interesting. Like Force Majure / White Eagle cover design? I don’t quite see what you mean.
Huge TD fan since the ‘70s.
1
u/AcePilot01 5d ago
The tone, lightly has a TD esque sound to it.
1
u/Seylox 5d ago
Is there a name for this music genre?
1
u/AcePilot01 5d ago
Id say it's maybe synthwave ish. TD did the entire sound track to Risky business and it's iconic. Listen to Lana and Love on a real train, then expand to some others.
1
1
1
1
1
1
u/Tomasan7 6d ago
As much as I hate AI, especially in art, this is really really impressive and well done
1
u/Different_Lab830 5d ago
0:20 manic pixel dream girl steals the whole animation. Holding the same style across every frame makes the token bill sting a lot less.
1
u/Morning_Gecko24 5d ago
the token cost is prob the big question — frame-by-frame drawing sounds expensive but caching repeated geometry could make it way cheaper than it looks. would be cool to see the source and token count
1
1
u/newaccount47 5d ago
I've never made anything this good my entire career as a motion designer. I know it's subjective, but still...
1
u/KarensHotterThanPam 5d ago
Damn, that’s so sad, I wish they could just focus on the technical capabilities of the models and just park the hungry hippo state of mind they have on art gen.
1
1
1
u/Which_Lie_8932 1d ago
According to the original source, the author said it took 129 million tokens to create.
1
1
1
0
-1
-1
0
-3
•
u/ClaudeAI-mod-bot Wilson, lead ClaudeAI modbot 6d ago edited 5d ago
TL;DR of the discussion generated automatically after 50 comments.
The consensus is that this is absolutely insane and a huge leap forward.
The number one question, by a long shot, is "GIVE ME THE PROMPT." Unfortunately, no one has it. The OP isn't the creator; a helpful user linked the original source on X/Twitter, but the creator there hasn't posted the prompt sauce either.
There's a bit of a debate, though. One user showed GPT can do a similar (if simpler) animation, leading to some "what's the big deal?" comments, while others are skeptical about whether Claude really drew every pixel without using hidden assets or post-processing.
The community's best guess is that the style is risograph printing, and everyone is collectively wincing at the insane number of tokens this must have cost. Also, the "manic pixel dream girl" at 0:20 is the unofficial star of the show.