Kitchen overhaul: Building the new site
A walk through the look, mascot, motion, and decisions behind the relaunched catsoupmedia.com — what we kept, added, and left off the menu.
The old site was a single landing page that did the job for about a year. It loaded fast, said roughly what we did, and sent people to a contact form. It was also a flat brochure pretending to be a studio.
This is the lap around the new one — what changed, what we added, and the calls we’d make again.
The room
Three anchors hold the whole site together: cream-warm for the body, navy for display type, and purple for the mascot’s territory. Everything else is a spice rack — a pinch of saffron on a CTA, a sliver of teal for signals, chartreuse if a button needs to wake up.
A note on the cream choice: it’s counter-trend for 2026. Pinterest’s official 2026 palette swap reads as “move over, butter yellow” toward persimmon, wasabi, plum noir, and jade. Pantone’s Color of the Year for 2026 is the cool white “Cloud Dancer”. So our warm cream isn’t us chasing the year — it’s us saying this is the room we keep. Trend years pass; a brand canvas should outlast them.
The two big rules we followed:
- No more than two purples on screen at once. Brand purple for surfaces, a brighter one for accents. The deep one only shows up in shadows and the services backdrop.
- Display type is Urbanist, body is Titillium Web, micro is JetBrains Mono. Three families is already one too many, but each carries a different job and we couldn’t fold them in.
The mascot
The cat was always going to be there. The question was how much room to give it.
Old site: a flat logo mark in the corner. New site: a 3D cat head rendered with React Three Fiber, pinned next to the services list while you scroll through it, and a floating mascot overlay that hangs on the edge of the viewport the whole way down.
The decision wasn’t aesthetic. There’s measurable evidence that a recurring brand character outperforms generic ads — not by a hair, by a meaningful margin.
System1’s analysis of insurance ads found campaigns with a “fluent device” — their term for a consistent brand character — are 37% more likely to grow market share, 27% more likely to gain customers, and 30% more likely to grow profit. Ipsos puts characters at “over 6× as effective” for branded recall. B2B-specific research from June 2025 calls mascots “a secret weapon you’re probably ignoring”. We weren’t ignoring it.
The mascot stopped being a logo and started being a character. That’s the shift the whole site is built around.
The 3D head runs off a single Draco-compressed GLB (about 180 KB) with a soft point light. It only mounts when the services section enters the viewport — there’s no point loading three.js on the homepage if the user never scrolls past the hero.
A few small things we tried and kept:
- The mascot blinks. Once every 4–7 seconds, randomized. Costs nothing, sells the character.
- It looks at the cursor on desktop. Tiny rotation budget — five degrees in each direction. More than that and it crosses into uncanny.
- It goes still on
prefers-reduced-motion. No exceptions.
The motion
The intro animation is GSAP, not Lottie. We tried Lottie first — it’s the right tool for self-contained pieces, but our intro overlaps the hero text and reacts to font load. GSAP lets us stagger the headline letters, fade the eyebrow, and dispatch one custom event when it’s done so the rest of the page can take over.
GSAP itself became a different decision in 2025: Webflow’s acquisition closed and the entire GSAP toolkit — including every former Club plugin — went 100% free on April 30, 2025. The old “we can’t afford SplitText” argument is gone; an estimated 12 million sites already use it, and it remains the default behind most award-winning studio work.
A flag in window.name remembers that the intro played, so you only see it once per tab. Refresh, and you land on the post-intro state directly.
The work carousel runs on WebGL — a custom shader that handles the masked image transitions between case studies. It’s the only piece on the home page that uses client:load instead of client:visible; the rest of the islands lazy-mount.
What we cut
The first version of the design had:
- A scroll-pinned process section with five animated steps, each pulling in a different illustration.
- A live testimonials ticker on the homepage.
- A “studio status” widget showing which projects were in the kitchen this week.
All three got pulled. The process section we cut from five steps to four because the fifth was “we keep iterating” — true, but not a step. The testimonials ticker we cut because the homepage already has the Marquee and one ribbon of moving text is plenty. The status widget felt cute in Figma and read as noise once shipped.
What’s left is closer to the bone. Hero, marquee, services, process, work, packages, FAQ, blog, contact, footer. Each section earns its own scroll.
Mobile
Mobile got its own pass — the desktop nav becomes a GSAP-driven hamburger drawer, the scroll-pinned services section disables on small screens (the sticky 3D cat was getting stuck), and the hero type clamps down hard so “BIG APPETITES” still reads as the loudest thing on screen.
Performance
The median mobile page on the web in 2024 weighs 2,311 KB, and only about half of pages (~48%) pass all three Core Web Vitals. That’s the bar we’re competing against — half the web fails it.
We chose Astro on purpose. State of JS 2025 puts Astro as the satisfaction leader for content sites by a 39-point margin over Next.js, and the architectural reason is simple: Astro ships 0 KB of JavaScript by default, where comparable Next.js apps ship 90–130 KB of framework runtime before your code runs. For a marketing site that doesn’t need React on every page, that’s free performance.
Cloudflare acquired the Astro team on January 16, 2026. Picking that horse a few months earlier paid off — the framework is now backed by the same company hosting it.
The whole site, section by section
A quick tour — swipe through the pieces in one place:
What’s next
A few things we know we’ll come back to:
- Reduce the homepage payload further. The WebGL portfolio is the biggest single island; we want to ship a lighter fallback for slow connections.
- More posts. This one is the first of a small batch. The next ones go deeper into specific pieces — the shader, the intro, the mascot rig.
- A second case study format. The current
/work/[slug]template fits big launches well; we need a shorter one for hot-take projects.
If something on the site catches your eye and you want to know how it’s wired, the contact form is the fastest way to get a longer answer than this post has room for.
— The Designer Cat
