Two different versions of the same problem.
If you build for clients: someone sends you a link to a site with real animation on it and says make ours like this, same feel, but for our brand. That's not a lazy ask either, it's a lot of the front end work that actually pays (3k-4k Euros).
If you build for yourself: you asked an AI for a landing page and got a purple blue gradient, a glowing orb, a badge pill above the headline, three feature cards with rounded icons. You typed "no purple." You got purple anyway. You got what we call "UI slop."
Same issue underneath. And it should be the simplest thing an artificial intelligence can do. Because in both cases the answer is already there, at a public URL.
It's not easy. So I tried a real test.
Why the output is always converging
A model hands you the most likely answer. Right now the most likely landing page on the internet is that purple blue gradient, so that's what comes back. It isn't bad taste. It's average taste, on purpose. That's the job.
Which is why you can't prompt your way out. "Sleek," "premium," "modern," "clean" all point at the same place. You're not under-describing it. You're just moving around inside the average.
And the average keeps tightening. Every new site built out of that gradient becomes training data for the next model, which makes the gradient likelier still. UI slop isn't a phase the models are passing through, it's a loop they're in.
The obvious fix is to stop describing and start pointing: hand the model the real reference instead. So I tested how far that actually gets you.
The setup
Reference: ycombinator.com. Public, well built, real scroll behavior, nothing exotic.
Five models got a 1,552-character brief. Layout, typography, the exact YC orange, responsiveness, and an explicit ANIMATIONS section spelling out that images and text should fade and slide into view on scroll. Seven full-page screenshots attached on top of that.
Platho got one line:
Copy the exact look of the "https://www.ycombinator.com/" home page fully
Ninety-four characters. No brief, no screenshots, no mention of animation at all.
So the test is lopsided, and not in our favor. Everyone else got told exactly what to do. We got told where to look.
The results
Start with the section that made me want to run this test in the first place.
Scroll a little way down ycombinator.com and you hit a row of paired photos: During YC on the left, Now on the right. Same founders, years apart. Airbnb in a cramped apartment, then Airbnb. Behind the pair, a column of company names parallax-fades past at a different speed than the photos, Airbnb, Stripe, Coinbase, DoorDash, Scale AI, Dropbox, Reddit, Instacart, GitLab, Kalshi, Replit, Twitch. The whole thing is tied to scroll position. It ends when you end scrolling.
Platho rebuilt that section with the photo pairs in the right order, the captions under each one, the logo column moving behind them at its own rate, and the reveal still tied to scroll. From one line of instruction that never used the word animation.
Claude Fable 5 is the interesting failure, because it's not a weak model and this isn't a weak attempt. The serif italic headline, the superscript, the nav, the spacing, the orange, all correct. It even understood the During-YC section conceptually: paired cards, company names arranged behind them, the right structural idea. But the founder photos are grey hatched placeholder boxes, and the parallax is gone. It's a diagram of the section instead of the section.
Fable had 1,552 characters telling it to animate on scroll, and seven screenshots. It still couldn't, because you cannot photograph timing.
GPT falls the same way. Right typography, right orange, placeholder boxes where the photos go, nothing moving. Kimi gets further on layout than the others, roughly the right section order and some real images, but rendered in its own visual language rather than the reference's, and still static. Gemini and Grok never made it past the hero.
Six rebuilds, one scroll animation between them.
Why the screenshot was never going to work
A screenshot is one frame. Layout, color, type and spacing all survive being flattened into an image. That's exactly why the static parts came out fine nearly everywhere, and why five models could clear most of the grid above.
Timing doesn't survive. It was never in the picture.
"Reproduce the scroll-triggered animations" isn't a spec, it's a wish. The spec is the easing curve, the stagger delay, the ratio between the photo's scroll rate and the logo column's, the scroll range the whole thing is bound to. You can't write that down unless something measured the page first.
That's the gap, and it isn't a gap in the models. Fable proved that. It's a gap in what a description can carry.
What my cofounder and I are building
Platho AI is an AI that measures real websites and rebuilds them in your codebase, animation included. It reads the live page instead of a picture of it, and writes the section into your project as a stylesheet and a component.
Here it is running on three heavily animated sites:
The last one is the interesting case, a live 3D scene. There's nothing to copy in terms of markup, it's a scene graph and a render loop. You don't get there by describing it.
It's a waitlist right now, and I'd rather show you than tell you. If you want to see it run on a site you pick, drop the URL in the comments and I'll record it rebuilding a section, animation and all, and post it back here.
Bring something hard. A parallax section, a scroll-locked sequence, a canvas thing. The nastier the motion, the more interesting the answer.
Join the waitlist at platho.io if you want it in your own editor.
And if you point a model at a site and get better output than I did, post that too, I genuinely want to see it.
Top comments (0)