Loading video...

Video Failed to Load

Go Home

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...

Oluwaphilemon1's profile picture

FHILY👑

6,361 subscribers

371,676 views • 1 month ago •via X (Twitter)

ArtsEducationScience & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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 have
0:14

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 have

FHILY👑

306,470 views • 2 days ago

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 have
0:14

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 have

FHILY👑

320,607 views • 23 days ago

How I built an Anime.js-style site with Claude 👇 • Ask Claude to plan a minimal interactive website with smooth motion • Install Anime.js → "npm i animejs" • Use Claude to generate timelines, staggered text, and hover animations • Add smooth SVG, scroll, and cursor interactions with Anime.js • Keep UI minimal so motion becomes the focus • Use easing + timing to make animations feel fluid and premium Save this 🚀
0:13

How I built an Anime.js-style site with Claude 👇 • Ask Claude to plan a minimal interactive website with smooth motion • Install Anime.js → "npm i animejs" • Use Claude to generate timelines, staggered text, and hover animations • Add smooth SVG, scroll, and cursor interactions with Anime.js • Keep UI minimal so motion becomes the focus • Use easing + timing to make animations feel fluid and premium Save this 🚀

FHILY👑

346,601 views • 1 month ago

introducing: interactive 3d image distortion for Framer add a smooth distortion effect to your images that reacts to cursor movement—perfect for giving depth and interactivity to your designs. comment "DISTORT" and i’ll send you the component :)
0:10

introducing: interactive 3d image distortion for Framer add a smooth distortion effect to your images that reacts to cursor movement—perfect for giving depth and interactivity to your designs. comment "DISTORT" and i’ll send you the component :)

Framer University

18,691 views • 9 months ago

improving my 3D hand tracking template by adding depth-anything-v2 using mediapipe for X/Y movement and depth-anything for Z movement here i'm controlling a threejs scene in realtime with input from a single webcam
0:15

improving my 3D hand tracking template by adding depth-anything-v2 using mediapipe for X/Y movement and depth-anything for Z movement here i'm controlling a threejs scene in realtime with input from a single webcam

AA

28,068 views • 1 month ago

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 this
0:10

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 this

FHILY👑

164,641 views • 15 days ago

How i build with Claude👇 1. CSS object-fit cover = immersive architecture photography zero cropping Vanilla Tilt.js = 3D parallax on cards zero WebGL needed 2. Two warm colors = luxury restraint excess always looks cheap 3. CSS scroll-snap = each gallery room snaps fullscreen effortlessly 4.SVG path animation = floor plan outlines draw on scroll 5. IntersectionObserver = high resolution photos never slow the page Save this
0:10

How i build with Claude👇 1. CSS object-fit cover = immersive architecture photography zero cropping Vanilla Tilt.js = 3D parallax on cards zero WebGL needed 2. Two warm colors = luxury restraint excess always looks cheap 3. CSS scroll-snap = each gallery room snaps fullscreen effortlessly 4.SVG path animation = floor plan outlines draw on scroll 5. IntersectionObserver = high resolution photos never slow the page Save this

FHILY👑

62,745 views • 10 days ago

I made an animation for bulma past week using camera tracking, this time I wanted to made a new render for it 😁 #animation #3d #bulma
0:14

I made an animation for bulma past week using camera tracking, this time I wanted to made a new render for it 😁 #animation #3d #bulma

Juan Guillermo Cruz

88,030 views • 2 years ago

Ok, this is amazing. I asked Claude 3 to generate an animation of the Pythagorean Theorem and this is what it created:
0:19

Ok, this is amazing. I asked Claude 3 to generate an animation of the Pythagorean Theorem and this is what it created:

Alvaro Cintas

564,481 views • 2 years ago

introducing: text scroll animator component for Framer use this component to animate your text with smooth scroll-triggered effects like blur, rotation, scale, and more! comment "SCROLL" and i’ll send you the component. :)
0:12

introducing: text scroll animator component for Framer use this component to animate your text with smooth scroll-triggered effects like blur, rotation, scale, and more! comment "SCROLL" and i’ll send you the component. :)

Framer University

20,841 views • 1 year ago

Here are a few simple prompt tricks you can use to make videos like this in Grok Imagine: 1) Write like a movie director Use scene verbs: “starts with” “cuts to” “camera follows” “ends with.” 2) Control the camera Mention angles: “wide shot” “overhead” “close-up” “tracking” “handheld” “low-angle” 3) Guide the speed Add words like: “smooth flow” “natural rhythm” “fast transitions” “balanced motion” 4) Set lighting Use: “soft cinematic lighting” “dramatic contrast” “realistic shadows” Finish with keywords like: "ultra-realistic cinematic" "vintage film", etc.
0:18

Here are a few simple prompt tricks you can use to make videos like this in Grok Imagine: 1) Write like a movie director Use scene verbs: “starts with” “cuts to” “camera follows” “ends with.” 2) Control the camera Mention angles: “wide shot” “overhead” “close-up” “tracking” “handheld” “low-angle” 3) Guide the speed Add words like: “smooth flow” “natural rhythm” “fast transitions” “balanced motion” 4) Set lighting Use: “soft cinematic lighting” “dramatic contrast” “realistic shadows” Finish with keywords like: "ultra-realistic cinematic" "vintage film", etc.

DogeDesigner

7,484,866 views • 8 months ago

What if anatomy explorers felt alive? This 3D dog, including the skeleton, organs and rig, was generated with ai and reacts to the cursor in real time with head tracking and tail movement. - Used GPT Images 2 for consistency - Omma for 3D generation and code using Three.js Lmk if you’d like to try it!
0:14

What if anatomy explorers felt alive? This 3D dog, including the skeleton, organs and rig, was generated with ai and reacts to the cursor in real time with head tracking and tail movement. - Used GPT Images 2 for consistency - Omma for 3D generation and code using Three.js Lmk if you’d like to try it!

Gábor Pribék

202,812 views • 1 month ago

They using a lot of 3D and weird animation this episode. That 6 month break really was for nothing
0:19

They using a lot of 3D and weird animation this episode. That 6 month break really was for nothing

Leo | Sengoatku No. 1

163,803 views • 9 months ago

introducing: text decrypt scroll effect for Framer add this to reveal text with a sleek decryption animation as you scroll. comment "DECRYPT" and I'll send you the component :)
0:11

introducing: text decrypt scroll effect for Framer add this to reveal text with a sleek decryption animation as you scroll. comment "DECRYPT" and I'll send you the component :)

Framer University

16,358 views • 1 year ago

Fantastic work Vinicius Araújo! 😍 Vinicius Araújo is a Portugal-based Digital Designer with a passion for 3D and motion. He created this caramel animation using Flip in #Houdini.
0:15

Fantastic work Vinicius Araújo! 😍 Vinicius Araújo is a Portugal-based Digital Designer with a passion for 3D and motion. He created this caramel animation using Flip in #Houdini.

Houdini.School

22,281 views • 2 years ago

This is Ray3.14 with Image-to-Video. Now in native 1080p, transform still images into cinematic motion. Create depth, parallax, and scene structure with detailed movement, transforming images into expressive, dimensional video with visual clarity. Available now in Dream Machine.
0:17

This is Ray3.14 with Image-to-Video. Now in native 1080p, transform still images into cinematic motion. Create depth, parallax, and scene structure with detailed movement, transforming images into expressive, dimensional video with visual clarity. Available now in Dream Machine.

Luma

13,979 views • 4 months ago

Scroll-based 3d landing page. If you have a GLB/GLTF 3d file, you can ask Omma to build a scroll-based landing page and keep iterating by adding more details.
0:19

Scroll-based 3d landing page. If you have a GLB/GLTF 3d file, you can ask Omma to build a scroll-based landing page and keep iterating by adding more details.

Omma

27,864 views • 2 months ago

✨ Created this amazing scroll animation for project section using Framer What you think!! Like, Repost, Comment "Project" for the Remix link (Must follow so I can DM you)
0:18

✨ Created this amazing scroll animation for project section using Framer What you think!! Like, Repost, Comment "Project" for the Remix link (Must follow so I can DM you)

Sai Satvik

17,221 views • 1 year ago

A funny 3D animated scene, from storyboard to final animation GPT Image 2 created the full storyboard sheet: characters, shots, camera moves, timing and visual direction Then Seedance 2.0 animated it All inside Leonardo Prompts below ⤵️
0:15

A funny 3D animated scene, from storyboard to final animation GPT Image 2 created the full storyboard sheet: characters, shots, camera moves, timing and visual direction Then Seedance 2.0 animated it All inside Leonardo Prompts below ⤵️

MayorkingAI

16,493 views • 15 days ago

Claude Opus 4.6 is no joke 🫠 Just asked for a great F1 animation for Redbull using Claude Opus 4.6 on Capacity . Took like 3 minutes to get it.
0:15

Claude Opus 4.6 is no joke 🫠 Just asked for a great F1 animation for Redbull using Claude Opus 4.6 on Capacity . Took like 3 minutes to get it.

Samuel Rondot

315,172 views • 4 months ago