← All work

Macatting Studio.

The studio's own site: a multi-page portfolio with a WebGL cat that watches your cursor, a 3D scroll scene, and SEO and accessibility built in.

Type
Interactive portfolio website
Year
2026
Status
Live
Role
Design and build

(01)The problem

A creative technology studio has to prove it on its own site. The brief: feel alive and playful, load fast, read clearly on a phone, and be found on search, without the effects getting in the way of the work.

(02)What I built

  1. 01A hero cat brought to life from one still image in a single WebGL shader: it follows your cursor, blinks, breathes, flicks its ears and tail, and naps when left alone
  2. 02A scroll-driven 3D scene where the camera spirals down a cat toy wand to introduce the three services
  3. 03Five pages built with Next.js and Tailwind CSS: home, work, services, about and contact, with calmer fallbacks for anyone who prefers reduced motion
  4. 04A contact form with spam protection and server-side validation, sending through Resend
  5. 05SEO set up properly: page titles and descriptions, structured data, sitemap, robots, llms.txt and a share image
  6. 06Privacy policy in English and Bahasa Malaysia, plus terms of use
  7. 07A maintenance page on Cloudflare with a small cat runner game, kept live while the new site was built
  8. 08Studio email on the macatting.com domain through Cloudflare Email Routing

(03)Built with

  • Next.js
  • TypeScript
  • WebGL
  • three.js
  • Tailwind CSS
  • Framer Motion
  • Resend
  • Cloudflare
  • Vercel

(04)Where it stands

Live at macatting.com and still growing. Case studies for the other projects are being written next.

Next project

Meowopoly.

In-house app→

Start a project.

A new website, a web app or a workflow that needs fixing. Tell me what you have in mind and I'll reply personally with honest next steps.

Get in touch→