How i build with Claude👇 Three.js = 360 rotatable... product zero plugin needed WebGL PointLight = UVC glow reacts to scroll position CSS scroll-snap = buttery infinite horizontal product scroll GSAP ScrollTrigger = product pins while copy scrolls alongside Lottie via lottie-web = After Effects animations play in browser Save thisshow more

How I build with Claude Fable 5 1. Three.js... = rotate and explore any product in 3D in the browser 2. Color swatches = swap a material value to change the model live 3. CSS radial-gradient = premium spotlight glow zero images 4. GSAP ScrollTrigger = scroll turns one screen into a full story 5. Monospace fonts = signal precision and luxury instantly 6. AudioContext = ambient sound toggle in one call Save thisshow more

How I build with Claude Fable 5 1. CSS... position sticky = how a product follows you down the page 2. Monospace fonts = instantly signal raw and authentic 3. CSS object-fit cover = full bleed photography fills any screen 4. GSAP ScrollTrigger = pins product while background scrolls position fixed + transform = floating centered label 5. CSS grid + z-index = editorial depth flat sites lack Save this 🏔️show more

How I built with Claude 👇 1. Prompt: "Build... a storytelling website where each scroll section reveals a new chapter with fluid color transitions" 2. Use Three.js for the painted texture background that reacts to cursor 3. Prompt: "Add GSAP ScrollTrigger so each section animates in as a cinematic scene" 4. Use Lenis.js for that buttery smooth scroll that premium sites haveshow more

How I built with Claude 👇 1. Prompt: "Build... a storytelling website where each scroll section reveals a new chapter with fluid color transitions" 2. Use Three.js for the painted texture background that reacts to cursor 3. Prompt: "Add GSAP ScrollTrigger so each section animates in as a cinematic scene" 4. Use Lenis.js for that buttery smooth scroll that premium sites haveshow more

How I built with Claude 👇 Prompt: "Design an... agency site where services are presented as supermarket product packaging in 3D" Use Three.js with WebGL to render all products in real time in the browser Use Blender to model the packaging then export as GLTF to load in Three.js Use GSAP for the smooth product rotation and hover interactions Save this if you want a portfolio that makes clients feel they are buying something premium 🛒show more

How I built with Claude 👇 Prompt: "Design an... agency site where services are presented as supermarket product packaging in 3D" Use Three.js with WebGL to render all products in real time in the browser Use Blender to model the packaging then export as GLTF to load in Three.js Use GSAP for the smooth product rotation and hover interactions Save this if you want a portfolio that makes clients feel they are buying something premium 🛒show more

You can enable scroll snapping with CSS scroll-snap-type and... scroll-snap-align 🚀show more

How i build with Claude👇 1. CSS blend-mode =... text over photography in one line 2. GSAP ScrollTrigger = hero pins while content scrolls over it 3. Splitting.js = title arrives letter by letter on load 4. video autoplay muted = forest feels alive without user interaction 5. CSS clamp() = typography scales mobile to desktop zero media queries 6. linear-gradient overlay = text readable at any screen brightness Save thisshow more

How I use Claude for 2D website animations 👇... 1. Ask Claude to create CSS keyframes for floating or bounce effects 2. Use Claude to write fade-up animations on scroll 3. Ask Claude for parallax code for backgrounds 4. Generate hover effects like glow, scale, rotate buttons 5. Use Claude to animate text word by word 6. Paste the code, adjust timing, launch Save this tutorial 🚀show more

Built a React Aria Calendar with swipe gestures to... navigate between months! Uses CSS scroll snap for native 120fps animations, with a neat trick to enable infinite scrolling in both directions. 👇show more

I created this using Claude + 3D animation: 1.... Ask Claude for a scroll-based cinematic animation pla 2. Generate prompts for depth, parallax, and camera movement 3. Install Three.js + GSAP + ScrollTrigger 4. Use scroll to control zoom, scale, and scene transitions 5. Add layered images for 3D depth illusion 6. Apply smooth easing, lighting, and shadows for realism 7. Refine until it feels like one continuous scene Save thisshow more

Scroll animation build in claude code.

After my previous articles, I wondered: how many other... items from various CSS wishlists could I solve with scroll-driven animations? Styling rows and columns, staggered animations, wrap detection, and more — in my new article — “Position-Driven Styles”.show more

Scroll-Triggered Animations … with nothing but CSS … oh... yeah 🤩 (Blogpost coming soon)show more

wavy carousel with CSS scroll driven animations not exactly... like OP but fun to try replicateshow more

Every site has a story to scroll 📖 With... the new Scroll-Triggered Animations, you can transform your site into an immersive narrative that keeps your users engaged. Create beautiful time-based animations with zero JS, all natively in CSS. Break free from static UI and create your story in minutes. #GoogleIOshow more

🚨BREAKING: You can now turn a single product link... into a talking video ad… without a camera, crew, or script Create everything from quick ad variations to scroll-stopping product videos for under $10 Here’s how:show more

Vibe coded an infinite 3D tunnel scroll using Three.js... with object pooling and GSAP animations, all created with Google Gemini 3 Pro AI in under 30 minutes :D It’s a fully procedural, mathematically generated world that renders endlessly as you scroll up and down without eating your device memory (that's what at least AI said 😆) Live: Code: now returning to the job that funds my ability to overwork myself :)show more

Introducing text-to-lottie: an open source skill and harness for... generating production ready Lottie animations with codex/claude code. $ npx skills add diffusionstudio/lottie Prompts guide and repo in the comments.show more