Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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👑

7,414 subscribers

375,468 görüntüleme • 1 ay önce •via X (Twitter)

SanatEğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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 🚀
0:13

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 🚀

FHILY👑

135,666 görüntüleme • 1 ay önce

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👑

323,298 görüntüleme • 1 ay önce

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👑

337,934 görüntüleme • 22 gün önce

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

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 this

FHILY👑

149,179 görüntüleme • 20 gün önce

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 görüntüleme • 1 ay önce

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 görüntüleme • 10 ay önce

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,216 görüntüleme • 2 ay önce

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👑

165,398 görüntüleme • 1 ay önce

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 görüntüleme • 2 yıl önce

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,507 görüntüleme • 2 yıl önce

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,485,252 görüntüleme • 8 ay önce

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,850 görüntüleme • 1 yıl önce

Exito 3D website full scroll animation web design ⬇️ The design of this site was done for a 1 month subscription
0:18

Exito 3D website full scroll animation web design ⬇️ The design of this site was done for a 1 month subscription

Alex Bender

24,229 görüntüleme • 1 yıl önce

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 AI 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 AI for 3D generation and code using Three.js Lmk if you’d like to try it!

Gábor Pribék

203,777 görüntüleme • 1 ay önce

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 görüntüleme • 10 ay önce

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,369 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 5 ay önce

Claude fable 5 is cooked Claude fable 5 Vs Gemma 4 26b a4b qat MTP Gemma 4 26b running locally on my 8GB vram single RTX 4060 built this using three.js in a single session and 3 prompts. no cloud, no subscription 100% private unlimited use. how long until it can catch up completely?
0:19

Claude fable 5 is cooked Claude fable 5 Vs Gemma 4 26b a4b qat MTP Gemma 4 26b running locally on my 8GB vram single RTX 4060 built this using three.js in a single session and 3 prompts. no cloud, no subscription 100% private unlimited use. how long until it can catch up completely?

Alok

30,782 görüntüleme • 21 gün önce

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 🏔️
0:14

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 🏔️

FHILY👑

109,796 görüntüleme • 21 gün önce