Build a Dark Modern Animated Website with Next.js 14, GSAP, Prismic and TypeScript

Prismic YouTube

video

Mar 15, 2024

5 hours 29 minutes

Role: Designer, Developer & Instructor

With: Next

Glisten AI is a fictional developer-tools brand I designed in the visual language of Linear, Raycast, and Clerk, then built in this course. The site is slice-based: Hero, Bento Box, Showcase, Case Studies, Integrations, and Call to Action, each editable through Prismic’s page builder so a marketing team could rearrange pages without touching code.

On the animation side, I walk through a choreographed GSAP hero entrance, a scroll-triggered integration reveal, and the visual polish (typography, spacing, gradients) that gives the site its expensive feel. The course ends with SEO checks, Vercel deployment, on-demand revalidation, and live visual editing, so students see the full path from Figma file to production site instead of stopping at “it runs locally.”

Watch the full course