One link, one sentence, one animated landing page

A link to a reference site, and one line: match this design language, build a landing page. That was the whole ask.

The realistic version of this job is a marketer with a reference they like, no brief written, and no appetite for opening a dev ticket to get motion on a page.

It opened the reference and studied it before building — layout, type, palette, motion. It worked out the animation was CSS and JavaScript rather than WebGL, which determines whether the effect is reproducible at all, pulled the design tokens straight off the page, and spotted the counters that count up on scroll.

Then it laid theme tokens first: bone, charcoal, and a single acid-lime accent, with Red Hat Display throughout. The product mock-ups were built in real DOM rather than dropped in as screenshots, specifically so they could animate. The motion layer sits behind a prefers-reduced-motion gate.

Every colour comes from theme tokens, so retinting the palette recolours the entire page.

The animation layer broke, and the way it was caught is the point. Headlines were not splitting and counters were stuck at zero. WPOS traced it to WordPress itself: the widget pipeline was HTML-encoding every ampersand, so a double ampersand shipped as an entity code and killed the entire script.

The server-side test had reported success. It could not have done otherwise — JavaScript is never parsed on the server. Only the browser console saw the error. WPOS said so explicitly rather than trusting its own green tick.

It then found two more problems in its own screenshots: a button label rendering dark on dark, traced to a colour-inherit reset outranking the button rule, and a floating card sitting over a badge.

• Eleven sections: hero, bento feature grid, three-step explainer, testimonials, pricing, FAQ, closing CTA and footer
• A hero product interface built as live DOM rather than a screenshot, with counters that animate on scroll
• Motion gated behind prefers-reduced-motion
• Every colour from theme tokens — retint the palette, recolour the page
• Three bugs found and fixed, including one that server-side testing structurally could not detect
• Desktop, tablet and phone verified with no console errors

What this build actually used.

• Platform: WordPress with WPOS, eleven sections
• Reference analysis: the reference opened and studied first — and its motion identified as CSS and JavaScript rather than WebGL, which is what made it reproducible at all
• Theme: design tokens pulled straight off the reference page — bone, charcoal and a single acid-lime accent, with Red Hat Display throughout. Retinting the tokens recolours the entire page
• Product UI: hero mock-ups built in real DOM rather than dropped in as screenshots, specifically so they could animate
• Motion: scroll-triggered counters, word-splitting headlines, and the whole motion layer gated behind prefers-reduced-motion
• Components: bento feature grid, three-step explainer, testimonials, pricing and a working FAQ accordion
• Debugging: the animation layer traced to WordPress HTML-encoding every ampersand. Worth noting what caught it — the server-side test passed, because JavaScript is never parsed on the server. Only the browser console saw the error
• Verification: desktop, tablet and phone checked with no console errors

Can WPOS build a genuinely animated landing page, not just a static one?

Yes. Here it built the product mock-ups in real DOM specifically so they could animate, added scroll-triggered counters, and gated the whole motion layer behind prefers-reduced-motion.

Does WPOS actually check its work in a browser?

Yes, and in this build that was the only thing that caught the bug. The server-side test passed because JavaScript is never parsed on the server; the browser console was what surfaced the broken animation layer.

How much of a brief does it need?

This one was a URL and half a sentence. It studied the reference for everything else.

Start free for 30 days with 10,000 credits at wpos.ai. No card required, and nothing charges automatically. WPOS connects to any WordPress site, new or existing, on any host, and works alongside Gutenberg, Elementor, WooCommerce and Divi. Book a call with the founders at cal.com/algorismus/30min.