Ascent: AI Course Landing
A single-screen landing for a fictional 'Vibe Design' AI course: a full-bleed looping video hero, scroll-linked parallax across the copy and a liquid-glass dashboard mock (a working chat panel beside a live-preview hero that runs its own fade-looping video), and a full-width grass image repurposed as the page footer.
A self-directed demo built to practice AI-native delivery. Not a real product or client project.
Overview
Ascent is a single-screen landing for a fictional “Vibe Design” AI course. A full-screen looping video sits behind the intro and a liquid-glass dashboard mock, which pairs a working chat panel (seeded messages, live input, canned replies) with a live-preview hero that runs its own fade-looping video. A full-width grass image anchors the bottom of the page as the footer.
Stack & what's notable
React, Vite, TypeScript, Tailwind CSS, Framer Motion, lucide-react. Scroll-linked useScroll / useTransform drive the parallax, the dashboard and glass surfaces are pure-CSS liquid-glass, and every button label runs a hover slide-swap.
Project stack
React
UI library
TypeScript
Typed end to end
Vite
Build tool + dev server
Tailwind CSS
Utility-first styling
Motion
Animation
