Bluestudio — Marketing Agency Site
The site for my own digital agency — an animation-led showcase of our work and services, built with Next.js, Tailwind, GSAP, and Three.js.
An agency site is the agency’s proof of work
A marketing agency’s own site is its loudest pitch — it has to feel more crafted than anything in the portfolio while staying fast and legible. Motion for its own sake reads as noise; the challenge was animation that sells the work without getting in its way.
Placeholder: expand on the brief — the services to showcase, the audience, and the bar set by competitor sites.
GSAP for motion, Three.js for depth, Tailwind for speed
Scroll-driven GSAP timelines choreograph the page section by section, while Three.js adds 3D depth at the moments that matter. Tailwind keeps the styling system tight and consistent so the build stays fast to iterate on.
Placeholder: describe a signature interaction — the hero scene, a scroll-pinned sequence, or the services reveal.
1// scroll-pinned hero: GSAP drives the Three.js scene 2gsap.timeline({ 3 scrollTrigger: { trigger: '#hero', scrub: true, pin: true }, 4}) 5 .to(camera.position, { z: 6, ease: 'none' }) 6 .to('.hero-title', { yPercent: -40, opacity: 0 }, 0);A Next.js site with a motion layer on top
Next.js renders fast, SEO-friendly pages; a motion layer of GSAP timelines and a Three.js canvas mounts on top, gated behind reduced-motion preferences so the content always stands on its own.
A site that wins the brief before the meeting
The agency leads with a site that demonstrates the craft it sells. Placeholder: add inbound-lead lift, time-on-page, or client reactions.