Turn.io — Webflow → Next.js
A pipeline that converts the published Webflow site into static Next.js pages, with automated visual and performance QA.
- Role
- Design & Development
- Tech stack
- Next.js · TypeScript · Playwright
Goals
Leave Webflow without visitors noticing: same layout, content, images and animations.
Gain full control over the code and bring mobile performance to an excellent level.
Make the result verifiable, not just 'similar'.
The challenge
Keep all 15 pages visually identical to the published original, animations included.
Start from a mobile PageSpeed of 35 with console errors inherited from the platform.
Prove fidelity: automated visual diffs at 1440 and 375 px, plus broken-link and horizontal-scroll checks.
The solution
Turn.io's website ran on Webflow with a mobile PageSpeed of 35 and several console errors. The goal was to leave the platform while keeping the site identical — layout, content, images and animations — and gain full control over code, performance and hosting.
Instead of rewriting by hand, I built a pipeline that converts the published HTML into Next.js pages: static HTML with no React in the browser, per-page purged and inlined CSS, images at display size and scripts loaded on first interaction. CMS collections become templates.
Quality is enforced by tooling: original vs. local visual diffs at 1440 and 375 px with Playwright, Lighthouse, axe for accessibility and an audit that scans for broken links and horizontal scroll.
Result: mobile PageSpeed from 35 to 98 on the home page (95 average across 15 pages), desktop 98–100, SEO and best practices 100 and zero console errors. I also delivered a PDF report for the leadership.
Key takeaways
Automating the conversion is safer and more repeatable than rewriting page by page.
Automated visual QA turns 'identical to the original' into something verifiable.
Most performance gains come from shipping less: CSS, JS and image bytes.
Inside the project
- Next.js
- TypeScript
- GSAP
- Rive
- PurgeCSS
- Lightning CSS
- esbuild
- Playwright
- Lighthouse
- axe
- Vercel
Like what you see?
Berilo Café
