Scrolltide Academy
Learn to build animated
websites with AI.
Free tutorials on the part nobody explains properly: how you get from a reference image to a site that actually moves. Every lesson is a real build, recorded start to finish — including the takes where the animation breaks and has to be fixed.
Each one is written up here as well as filmed, so you can read the workflow, copy the tool order, and skip to the moment in the video where the interesting part happens. The stack is whatever the job needs: Claude Code, ChatGPT, Gemini, Antigravity, Next.js, Tailwind and Framer Motion.
When a lesson uses a design from the Scrolltide library, it links straight to it — so you can start from the same prompt instead of rebuilding it by eye.
Start here
6 lessonsHow to build an animated website from a single prompt
The whole workflow in two minutes: pick a design, copy its prompt, paste it into an AI editor, and watch the typography, animation and scroll effects arrive together.
- Scrolltide
- Lovable
- Claude Code
- Cursor
Every lesson
Short builds and full tutorials. Each one names the exact tools, in the order they were used.
4:18BeginnerGoogle Antigravity + GeminiHow to build an interactive landing page for free with Google Antigravity
A free agentic coding tool, a Gemini-generated character whose head follows the cursor, and a complete hero landing page in about five minutes for nothing.
5:36IntermediateChatGPT + Gemini Veo 3How to build a website with an AI-generated video hero section
No stock footage and no camera: prep the still in ChatGPT, animate it with Veo 3, host it on Cloudinary, and let Claude Code build the site around it section by section.
6:44IntermediatePinterest + ChatGPTHow to build a cursor-reactive interactive website with Claude Code
A physics-based text curtain that reacts to your cursor, built with ChatGPT art and Claude Code — with the three takes where the physics broke left in.
8:54IntermediatePinterest + ChatGPTHow to build a 3D portal scroll effect with Claude Code
Three image layers — background, door, clouds — and a scroll that zooms you through the portal. The layering is what makes the depth real.
9:32AdvancedPinterest + ChatGPTHow to build a scroll-scrubbing video animation with AI
The effect big agencies charge for: video converted to a frame sequence and scrubbed by the scroll position, so the animation moves exactly as fast as the reader does.
Skip the build, keep the result
Every design in the library ships with the prompt that generates it. Paste it into Claude, Cursor or v0 and you get working code — no reference hunting, no back-and-forth.
Browse 61 designsNew build every week
The lessons here are the written versions of what goes up on YouTube. Subscribe there to get each build as it lands, mistakes and all.
Watch on YouTube