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

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

How I use Claude to build luxury real estate... websites 👇 • Create a cinematic luxury real estate experience • Use fullscreen hero sections + smooth scroll • Add layered visuals + parallax for depth • Keep typography minimal and premium • Use GSAP + ScrollTrigger + Lenis • Add fades, reveals, and image expansion on scroll • Include subtle hover + cursor interactions • Keep motion slow, smooth, Save this 🚀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

How i build with Claude + Higsfield 🐉 Step... 1: generate all scenes in Higsfield as MP4 Step 2: paste URLs into Claude, say embed as scroll-triggered WebGL textures Step 3: Claude writes Three.js, Higsfield supplies the visuals Step 4: tell Claude trigger each video at 25% 50% 75% scroll Step 5: ask Claude to wrap hero video in autoplay muted loop Step 6: Higsfield does the art, Claude does the code Save thisshow 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

STUDIOS QUOTE $35,000 FOR THIS WEBSITE. A FULLY ANIMATED,... SCROLL-DRIVEN BUILD - CINEMATIC CLIPS, FILM GRAIN, GLASS CARDS - SHIPPED IN ONE SESSION FOR $12. Scroll it and one question won't leave: did an AI really assemble all of this in a single pass? For studios quoting $35,000 and billing $100-149/hr, that question lands like a verdict. Here's what the page actually runs: → Motion clips generated from 30+ models - not stock, not hand-shot → Scroll animations written automatically - zero hand-coded keyframes → Six cinematic effects baked in with no config: film grain, particles, vignette, glass cards, color tints, scroll pacing What that used to require: → A designer, a motion artist, and a developer → Weeks of handoffs → Six systems wired by hand - GSAP ScrollTrigger, Lenis, frame extraction, asset optimization, layout, copy That pipeline was the moat. It justified the invoice. It just collapsed into Claude Code + Higgsfield running in one pass. The gap nobody wants to say out loud: → Agency build: $6,000-$35,000+ → Real cost now: a Claude sub + a few dollars of credits → Timeline: weeks → a single session Follow me + reply "web-site" to this post and I will send you the step-by-step Playbook 👇show 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