How to Build Animated Websites With Claude Code

👉 Speak, don't type with Typeless: https://www.typeless.com/?via=chyrkov

👀 View website: https://iphone-duo-landing.vercel.app
📝 Get the blueprint: https://buymeacoffee.com/sergeichyrkov/e/592026

💌 Join my newsletter: https://sergeichyrkov.com/newsletter
🎙️ Want to learn more? Book 1:1 session: https://sergeichyrkov.com/learn

Claude can build a 3D, scroll-animated, award-style landing page in under 15 minutes. In this video, I build an iPhone Duo landing page with Claude Opus 5.5, Three.js, and GSAP.

I start with what Claude Sonnet 5.5 builds from a simple one-line prompt: a clean but static page with no motion and no depth. Then I show how a proper master prompt turns it into a page with a 3D phone that rotates as you scroll, animated sections, and a polished finish.

What you’ll learn:
- The animation stack explained simply: WebGL (the engine), Three.js (3D on the page), GSAP (motion and scroll animations), and Remotion (video output)
- How to write a detailed master prompt by voice, covering motion, timing, typography, visual effects, and UX direction
- How to build the full landing page in Claude Code with Opus 5.5 at high effort, from one prompt
- How to make follow-up edits by voice: drag-to-rotate on the 3D phone, a minimal navigation bar, a hero gradient, a footer disclaimer, and an Awwwards-style page loader

______________________________
Check out my links ⬇️
▸ My website — https://sergeichyrkov.com
▸ My studio — https://chyrkov.studio
▸ My curated resources library — https://designsweets.co
▸ Twitter — https://twitter.com/sergeichyrkov
▸ Instagram — https://instagram.com/chyrkov
▸ Behance — https://www.behance.net/chyrkov
▸ Linkedin — https://linkedin.com/in/sergeichyrkov
______________________________
Useful stuff:
👉 Build websites in minutes with Framer — https://framer.link/chyrkov
👉 Get -20% on Mobbin Pro plan — http://mobbin.com/chyrkov
👉 Record your screen like a Pro — https://screenstudio.lemonsqueezy.com?aff=GO290
👉 Best music for your videos (get 30 days for free) — https://www.epidemicsound.com/referral/am81qn
______________________________
📝 Chapters:
0:00 – Intro
1:00 – Basic results by Sonnet
1:35 – The animation stack explained: WebGL, Three.js, GSAP, and Remotion
2:57 – Typeless interface overview
3:40 – Typeless vs. built-in dictation
4:48 – Using master prompt with Opus 5.5
5:28 – Reviewing the result: 3D phone and scroll animations
7:04 – Adding drag-to-rotate and a navigation bar
7:55 – Replacing placeholders with real images
8:12 – Typeless features: ask anything and translate
10:52 – Building a website loader
11:05 – Final result and comparison
______________________________
😍 Monetarily Supporting The Channel:
If you like what I do and wish to support the channel monetarily, you can donate me with some coffee here: https://www.buymeacoffee.com/sergeichyrkov
This is appreciated and helps the channel, but please don't feel that it is necessary to enjoy my content.
______________________________
📃 Disclaimer:
Some of the links in my video descriptions are affiliate links, which means at no extra cost to you, I will make a small commission if you click them and make a qualifying purchase.

______________________________
#claude #typeless #uxui #webdesign #claudecode