Загрузка видео...

Не удалось загрузить видео

На главную

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,707 subscribers

377,479 просмотров • 1 месяц назад •via X (Twitter)

ИскусствоОбразованиеНаука и технологии
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 0

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

Похожие видео

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 просмотров • 1 месяц назад

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 просмотров • 1 месяц назад

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👑

340,599 просмотров • 23 дней назад

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 просмотров • 22 дней назад

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 просмотров • 1 месяц назад

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 просмотров • 10 месяцев назад

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,255 просмотров • 2 месяцев назад

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 просмотров • 1 месяц назад

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,527 просмотров • 2 лет назад

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 просмотров • 2 лет назад

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 просмотров • 8 месяцев назад

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 просмотров • 1 год назад

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 просмотров • 1 год назад

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 просмотров • 1 месяц назад

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 просмотров • 10 месяцев назад

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 просмотров • 1 год назад

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 просмотров • 2 лет назад

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

14,005 просмотров • 5 месяцев назад

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 просмотров • 23 дней назад

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 просмотров • 23 дней назад