I built the Making Websites Better website from the supplied design. It was a demanding project because so much of its character lives in the details: the liquid buttons, the movement of the typography, and the way different parts of a page respond to scrolling. Those details needed the same care as the larger page layouts.
Getting the liquid buttons right
The buttons were one of the trickiest parts. I used an SVG filter with blur and a colour matrix to make the shapes merge, then GSAP to move and rotate the arrow. The label and the visual effect have separate layers, so the lettering stays clear while the shape moves around it.
I made this a reusable Twig component. That meant the effect could work across different labels, colours and links without rebuilding it for every page. A small interaction becomes a much more interesting development problem when it has to hold together throughout an entire website.
Motion and a manageable WordPress build
The site uses WordPress and ACF blocks, with PHP, Timber and Twig for the templates. I built the content into reusable sections so the team could assemble and update pages through the editor. Tailwind CSS and Alpine.js support the layout and interface behaviour, with Vite handling the asset build.
For the more involved animation, I used GSAP, ScrollTrigger and SplitText. The work included scroll-driven sequences and word-level movement, alongside the smaller interactions that run through the site. Keeping those pieces organised in their own modules made it easier to work on one effect without disturbing the rest.
Deciding when the work happens
The animation loader also matters. On desktop, the site can schedule that work when the browser is idle. On mobile, the animation bundle waits for the first interaction, keeping its initial setup out of an untouched page load.
I am pleased with how the build carries the design through to the small details. There is a lot of engineering behind an interaction that should only take a moment of someone’s attention. The goal was to give the website that character while keeping the everyday work of publishing content straightforward.
Technologies
WordPress, ACF blocks, PHP, Timber / Twig, JavaScript, GSAP / ScrollTrigger / SplitText, SVG filters, Tailwind CSS, Alpine.js, Vite.
A closer look
