Building a Minimal Architecture Studio Landing Page with Astro & GSAP

A minimal landing page for a fictional architecture studio, built with Astro and GSAP, with a scroll-driven pixel transition between sections and a canvas-based pixel reveal for the project images. By Kaisei Sadatoki.

Article on Codrops

Demo

Installation

Requires Node.js 22.12 or newer.

npm install
npm run dev

To build for production:

npm run build
npm run preview

Credits

• Astro
• GSAP and ScrollTrigger
• Lenis for smooth scrolling
• Fonts: Kode Mono and Anton from Google Fonts

Misc

Follow Kaisei Sadatoki: Website, Instagram, GitHub

Follow Codrops: X, LinkedIn, Instagram, Facebook, GitHub

License

MIT