Crew — AI Teammates
The front door of an AI team you brief in one message: a dark, animated landing page built on its own design system, and sign-up and sign-in pages with a live crew activity panel. The database, auth and agents come next.
Chapters, description and comments are on YouTube.Watch on YouTube instead
One request, end to end.
Select a stage to read what it decides.
The palette is decided before the first section
Colours, type and keyframes are declared once as Tailwind v4 theme tokens, so every section after it is composed from the same night, sand and ember scale rather than from hex values chosen on the spot.
The first screen carries the product
The headline arrives word by word over a twinkling starfield and a glowing horizon, with two calls to action that land on sign-up and on how it works.
Motion without a motion library
How it works pins its heading while the steps pass, cards rise as they enter through CSS scroll-driven animation, the feature grid needs no breakpoints, and the FAQ is a Radix accordion — with reduced motion switching the effects off.
The page lifts like a curtain
The footer is sticky beneath the content, so scrolling to the end slides the page up and reveals it rather than appending one more block.
The pages the backend will plug into
Sign-up and sign-in forms with a show-password toggle and a GitHub button, beside a panel of what the crew is doing. They are interface only in this part — the database and authentication come next.
Three things you can point at afterwards.
Build a design system first
A token layer in Tailwind v4 and shadcn/ui components on top of it, so the whole page draws from one palette.
Make an interface feel alive in CSS
Word-by-word reveals, scroll-driven entrances, a kinetic marquee, a pinned section and a curtain footer — no animation library.
Ship the front door of a SaaS
A landing page and the sign-up and sign-in screens, ready for the database, auth and AI crew in the parts that follow.
Where to go from here.
Closest to this one by what it teaches, then by what it is built on.
A browser video editor for product videos: record or upload your app, let an AI director plan the camera, cuts and text, refine it on a multi-track timeline, then export an MP4 or share a link.
A course marketplace in the shape of Udemy: instructors author courses that go live through an admin review, learners buy through Stripe and earn certificates anyone can verify, and every sale records the instructor's share.
A document workspace where Claude answers only from the files in the chat, every claim opens the exact passage it quotes, and questions are metered by plan through Stripe.