A design studio's website has to prove the studio can design. I built Verq's — WebGL, scroll-driven motion, and a headless CMS the team updates without touching code.

Verq is a design and development studio offering product design, full-stack builds, and a fixed-price UX Audit service. They needed a marketing site that did three things at once: look like the work they sell, load fast enough not to undercut that impression, and let the team change copy, media, and case studies themselves.

I designed the front-end architecture and built the whole thing — front end, CMS, integrations, and deployment — and it's live at verq.co.

Motion-heavy sites usually fail one of two ways. Either the effects are bolted on and the page stutters, or everything is hard-coded and the client is back in your inbox every time a headline changes. The brief was to avoid both: every animation had to be scroll-native and smooth, and every piece of content had to live in a CMS with proper draft/publish, media handling, and fallbacks so an empty field never breaks a page.

Home — A WebGL fluid simulation reacts to the cursor across the hero, the Verq logo resolves out of particles, and a 280-frame image sequence plays back on a canvas driven purely by scroll position. Below that: pinned reveal sections, a parallax collage of the studio's principles, services, a client-logo flipper, portfolio highlights, team, and FAQ — all on a Lenis smooth-scroll foundation with GSAP ScrollTrigger orchestrating timing.

UX Audit — A dedicated sales page for the studio's audit product. The hero plays video, a horizontal card rail pins to the viewport and scrubs sideways as you scroll (with a synced progress bar), the audit-criteria band slides over the section beneath it, and a timeline with stats leads into the pricing banner. Every card, stat, and label is CMS-managed.

Works — A portfolio index plus a case-study page per project, with autoplay video, scroll-driven presentation, and a next-project panel so visitors never dead-end. Project slugs feed the sitemap automatically.

Insight — An editorial section with categories, read time, author profiles, and a custom renderer for the CMS's rich-text blocks. Each article carries its own SEO and social metadata.

About — Video hero, showreel, founder grid, and a how-we-work section, all editable.

Contact — Video hero beside a brief form. Submissions are recorded in the CMS and simultaneously posted to a Google Apps Script that emails the team and logs a spreadsheet row, so a lead is never lost to a single point of failure. Enquiry and location cards and the FAQ come from the CMS.

Front end: Next.js (App Router), React, TypeScript, Tailwind CSS

Motion: GSAP + ScrollTrigger, Framer Motion, Lenis, custom WebGL (fluid sim, particles, canvas frame sequence)

CMS: Strapi 5 on PostgreSQL, Cloudinary for media, draft/publish on every page, image or video accepted in hero slots and rendered accordingly

Resilience: every CMS field has a typed fallback, so a missing image or empty section degrades gracefully instead of taking the page down

SEO: per-page and per-article metadata, Open Graph and Twitter cards, dynamic sitemap, robots, web manifest

Deployment: Dockerised front end and CMS, PostgreSQL, TLS-terminating reverse proxy — site and API on their own subdomains

Verq shipped a site that demonstrates their craft rather than describing it, and the team publishes case studies, articles, and page changes without a developer in the loop.