Can AI models rebuild an animation from screenshots?

We gave 13 AI models screenshots of animated components from 21st and asked each one to write the component back. Almost every model handled the simple animations. Of the harder components, which react to the mouse or run on shaders, GPT-6.1 Sol rebuilt every one. The shaders were where the models split, and seeing their own render helped Claude Opus 5.5 and Claude Sonnet 5.5 the most.

The task

Each model got screenshots of one component, without its code or name, and had to write it back as a React file. For components that react to the mouse, the mouse is drawn into the screenshots.

We ran 13 models, each at its highest reasoning setting: GPT-6.1 Sol, GPT-6 Astra, Claude Opus 5.5, Claude Sonnet 5.5, Claude Fable 5.1, Kimi K3.1 Pro, Kimi K3, Gemini 4 Argon, Gemini 3.8 Flash, Qwen 3.8 Max, Muse Spark 1.3, MiMo v2.6 Pro and Grok 4.7.

For the harder components each model then got two rounds to fix its answer: we rendered its code, showed it screenshots of its own version next to the original, and asked it to fix the differences. The simple animations got one answer with no fixes.

We put each version next to the original and gave it one of three grades:

1. Match: hard to tell apart from the original.
2. Close: the same layout, colours and kind of motion, but details differ, like the number of blades in a shader or the speed of a loop.
3. Off: a different picture, like rings where the original has blades.

An example of what a model got, the screenshots and the prompt:

Six of the screenshots a model got for Story scroll

Prompt# Task: recreate a scroll-driven React page from frames

The folder `frames/` holds screenshots of one full page built in React, viewport 1280x800, captured
at the window scroll position in each file name (scrollY in pixels, 0 to 2400, every 80 px). The
page does nothing on its own; everything you see changes only because the user scrolls.

Write ONE file that recreates it as closely as you can: the same sections, colors, text,
layout and typography, and the same scroll behaviour (what moves at which scroll position,
from where to where, how it rotates, what stays in place, what covers what).

Rules:
- React 19 + TypeScript, Tailwind CSS v4 classes. Available packages: `react`, `framer-motion`,
  `gsap` (including `gsap/ScrollTrigger`), `@gsap/react`, `lucide-react`. Nothing else, no
  external URLs, images or fonts.
- `export default function App()` with no props. It is rendered full-page as the only thing on
  the page; the page itself must scroll (use the window scroll, not an inner scroll container).
- Write the file to the output path you were given. Do not build or run anything.

1. Simple animations

Four components with a fixed timeline: letters that fly apart, cards that turn in on scroll, a grid of looping widgets, and a hero over a moving gradient. Almost every model got them right. Each model answered once, with no revision.

All 13 models got the order and the timing of the flying letters. In every version the letters start to fly at the same moment as in the original. The differences are in the details:

• Gemini 3.8 Flash set the letters at about half the size with wide spacing, so the word reads like a caption.
• Grok 4.7 turns them only half as far on the way out, and blurs them instead of letting them fly off.
• Kimi K3.1 Pro matched the timing most closely: its letters disappear and its heading lands at the same moments as the original's.

2. Components that react to the mouse

Eight of the harder components change when the mouse moves.

Woven Light Hero is a knot of dotted rings behind a headline, and the dots scatter around the mouse. The final versions of all 13 models:

• GPT-6.1 Sol is hard to tell apart from the original, down to the dots scattering around the cursor.
• Kimi K3 lets the knot fall apart into dust that fills the screen.
• Muse Spark 1.3 draws a different knot, one tall twisted tube.

GPT-6.1 Sol, GPT-6 Astra and Claude Opus 5.5 got all eight in the end, and Grok 4.7 got none.

3. Shader backgrounds

Nine shader backgrounds that ignore the mouse. Most models matched the palette and missed the structure.

Radial Shader is a fan of curved blades turning around the centre. The final versions of all 13 models:

• GPT-6.1 Sol and GPT-6 Astra match it, blade for blade.
• MiMo v2.6 Pro draws cream petals, like a rose.
• Grok 4.7 draws one huge bright spiral around the cursor.

Claude Opus 5.5 first drew rings, then replaced them with blades after seeing its render next to the original:

Shaders are where seeing their own render helped most. GPT-6.1 Sol went from 6 to all 9, and Claude Sonnet 5.5 from 4 to 8. GPT-6 Astra had 8 in its first answers and didn't need it. The hardest were Dithered Shader Background and Iridescent Braided Shader: only three and four models got them.

4. Canvas and 3D animations

A 3D gallery, three canvas animations, a loader and falling beams, none of which react to the mouse. This was the easiest group.

Flickering Grid Hero hides the 21st logo in a grid of faint, flickering dots. The final versions of all 13 models:

• GPT-6.1 Sol, GPT-6 Astra, Claude Sonnet 5.5 and Gemini 4 Argon match.
• Models that couldn't make out the logo drew their own: Grok 4.7 writes "20" in a grey circle, Muse Spark 1.3 writes "3D", and Kimi K3 a lowercase "a".

Seven models got all six. Background Beams With Collision is the only component all 13 models got.

Results

How many of the mouse, shader and canvas components each model matched or came close to, first from the screenshots alone and then after the two rounds of fixes:

The fixes helped the Claude models most: Claude Opus 5.5 matched or came close to 16 components in its first answers and 21 after the fixes, and Claude Sonnet 5.5 went from 14 to 20. GPT-6 Astra had 22 both times: its first answers were already right, and the fixes repaired one component and broke another.

All the numbers in one table. First answers is what a model wrote from the screenshots alone, and final is after the two rounds of fixes. Cost is the price of every call a model made in this test, failed attempts included:

Some of what went wrong:

• GPT-6 Astra: revising broke Dithered Shader Background, which its first answer had matched.
• Claude Fable 5.1: on Spiral Loader it spent all 128k output tokens reasoning and wrote no code. It worked at medium reasoning.
• Grok 4.7: on both dithering shaders it replied that it would inspect the frames and wrote no code, even when asked again. It took medium reasoning on one and low on the other. Three revision rounds came back without code.

Four models at their highest reasoning setting returned no code at least once, mostly because reasoning used up all the output tokens; retries at a lower setting got code from all four.

What the models remembered

Background Beams With Collision is the only component all 13 models got. It is a widely used open-source component from Aceternity UI, and in an earlier run Claude Opus 5.5 wrote back the original code nearly line for line. Neural Noise, a widely copied shader, came back almost pixel for pixel from five models. None of the more than 1,100 files the models wrote embeds or downloads an image.

Takeaways

• GPT-6.1 Sol got every component right or close after the fixes, and it was the cheapest of the six models that got 20 or more.
• Seeing its own render next to the original mattered almost as much as the model: with it, Claude Sonnet 5.5 went from 14 to 20 and caught up with Claude Fable 5.1, which cost eight times more.
• Simple animations are mostly solved. Shaders split the models: GPT-6 Astra got 8 of the 9 in its first answers and GPT-6.1 Sol all 9 after the fixes, while most other models got the colours right and the structure wrong.

Browse shaders on 21st