Loading video...

Video Failed to Load

Go Home

Introducing Motion for Three.js Animate Three.js objects, materials, shader uniforms, TSL nodes and more, sequenced alongside HTML & SVG elements, batched on Motion's render loop. Now in Motion+ Early Access.

motiondotdev's profile picture

Motion

16,313 subscribers

22,842 views • 1 month ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

🚀 Framer Motion 11.11 introduces object animations. animate() can now accept and animate *any* object. Be it Three.js Object3Ds, Pixi.js Graphics... anything. You can even mix different object types and HTML/SVG elements within animation sequences.
0:10

🚀 Framer Motion 11.11 introduces object animations. animate() can now accept and animate *any* object. Be it Three.js Object3Ds, Pixi.js Graphics... anything. You can even mix different object types and HTML/SVG elements within animation sequences.

Matt Perry

55,251 views • 2 years ago

Open-sourcing the Next.js Nights shader! Live: Source: Made with Three.js TSL
0:18

Open-sourcing the Next.js Nights shader! Live: Source: Made with Three.js TSL

Matias 🧉

12,954 views • 4 months ago

We couldn't hold these back for long. Motion for Three.js and Matias 🧉's vgpu are now available for everyone! I wonder if you can guess what game we're excited for after you see our new Motion x Three.js demo
0:16

We couldn't hold these back for long. Motion for Three.js and Matias 🧉's vgpu are now available for everyone! I wonder if you can guess what game we're excited for after you see our new Motion x Three.js demo

Motion

22,920 views • 1 month ago

how to animate ui in blender: 1. curves for line work 2. planes with textures for ui elements 3. camera for motion 4. geometry nodes for text
0:12

how to animate ui in blender: 1. curves for line work 2. planes with textures for ui elements 3. camera for motion 4. geometry nodes for text

xavier (jack)

122,360 views • 1 year ago

img2threejs - turn one object photo into a code-only procedural Three.js model Open-source toolkit that rebuilds the object in a single reference image as procedural Three.js code (no mesh downloads), quality-gated by a render-vs-reference loop - strong for hard-surface objects
0:11

img2threejs - turn one object photo into a code-only procedural Three.js model Open-source toolkit that rebuilds the object in a single reference image as procedural Three.js code (no mesh downloads), quality-gated by a render-vs-reference loop - strong for hard-surface objects

Nick

303,675 views • 3 months ago

TypeGPU 💜 Three.js TypeGPU 0.9 can integrate with Three.js Shading Language (TSL) on a very granular level, thanks to the @typegpu/three package. So now, you can write shaders in TypeScript while leveraging the rich Three.js ecosystem! To showcase the integration, we prepared docs and ported a handful of official Three.js examples 👇
0:16

TypeGPU 💜 Three.js TypeGPU 0.9 can integrate with Three.js Shading Language (TSL) on a very granular level, thanks to the @typegpu/three package. So now, you can write shaders in TypeScript while leveraging the rich Three.js ecosystem! To showcase the integration, we prepared docs and ported a handful of official Three.js examples 👇

Software Mansion

42,869 views • 9 months ago

GLSL fire shader based on Simplex noise with a static SVG overlay. No interactivity this time, just sketching on Saturday night ¯\_(ツ)_/¯ Live demo & source code: Made with Three.js Hosted on CodePen.IO
0:14

GLSL fire shader based on Simplex noise with a static SVG overlay. No interactivity this time, just sketching on Saturday night ¯\_(ツ)_/¯ Live demo & source code: Made with Three.js Hosted on CodePen.IO

Ksenia Kondrashova

16,008 views • 3 years ago

Tried combining Three.js raymarching with html-in-canvas.
0:16

Tried combining Three.js raymarching with html-in-canvas.

Zsolt Kacso

46,139 views • 5 months ago

My Three.js + TSL shader course — Fragments — is open for registration for the next 2 weeks! It's the perfect way to learn the techniques that power some of the most incredible shaders out there, and how to build them in code.
0:16

My Three.js + TSL shader course — Fragments — is open for registration for the next 2 weeks! It's the perfect way to learn the techniques that power some of the most incredible shaders out there, and how to build them in code.

phobon

13,671 views • 8 months ago

I don't think its usable but it was a fun little experiment built with Three.js Motion Tailwind CSS and Next.js
0:15

I don't think its usable but it was a fun little experiment built with Three.js Motion Tailwind CSS and Next.js

Manu Arora

25,757 views • 9 months ago

hi #PortfolioDay ! made these procedural materials in blender shader nodes #b3d
0:15

hi #PortfolioDay ! made these procedural materials in blender shader nodes #b3d

Mohit Malik🔸

81,224 views • 1 year ago

Interactive Alpha Stirling engine simulation with animated kinematics, heat-driven motion and particle gas dynamics. Coded with ChatGPT 5.5 using Three.js
0:15

Interactive Alpha Stirling engine simulation with animated kinematics, heat-driven motion and particle gas dynamics. Coded with ChatGPT 5.5 using Three.js

Techartist

20,719 views • 4 months ago

Wonder shader in motion ✨
0:11

Wonder shader in motion ✨

Wonder

21,498 views • 8 months ago

i could play with these particles all day portfolio wip made w/ three.js, TSL
0:18

i could play with these particles all day portfolio wip made w/ three.js, TSL

Brice

90,647 views • 4 days ago

Astral Ascent x Dead Cells update will be live on November 27th! Learn more about it here - Big thanks to Motion Twin - WINDBLOWN now in Early Access! for the opportunity 💛
0:18

Astral Ascent x Dead Cells update will be live on November 27th! Learn more about it here - Big thanks to Motion Twin - WINDBLOWN now in Early Access! for the opportunity 💛

Hibernian Workshop | Astral Ascent ⟡ Fallen Fates

35,152 views • 1 year ago

Bts of how @.bigjko used Move AI to animate this Candy Man. No suits or markers, just pure AI-driven motion capture. Motion Capture: Move AI 3D Animation: Houdini Render Engine: Octane Render
0:11

Bts of how @.bigjko used Move AI to animate this Candy Man. No suits or markers, just pure AI-driven motion capture. Motion Capture: Move AI 3D Animation: Houdini Render Engine: Octane Render

Move AI

19,331 views • 2 years ago

Introducing PixVerse 5 💥 Upgraded motion, sharper textures, and more control with preset camera moves up to 1080p resolution Now available on desktop, API & app for all plans
0:19

Introducing PixVerse 5 💥 Upgraded motion, sharper textures, and more control with preset camera moves up to 1080p resolution Now available on desktop, API & app for all plans

Magnific

178,699 views • 1 year ago

Unreal 5.6 Motion tools now make it easy to visualize, reveal, and disassemble complex objects, make exploded views & break-apart animations. More examples are on the way.
0:18

Unreal 5.6 Motion tools now make it easy to visualize, reveal, and disassemble complex objects, make exploded views & break-apart animations. More examples are on the way.

Jesse Pitela

24,252 views • 1 year ago

this is pure f*cking treasure 20 GitHub repos to build your own motion design studio with Opus 5.5 storyboards. typography. assets. character states. keyframes. 3D. rendering here’s the stack from the first sketch to the final frame DESIGN + STORYBOARD 01 Penpot → layouts and reusable components 02 Excalidraw → sketch the storyboard 03 Fontsource → self-host your fonts 04 Lucide → consistent SVG icons ASSETS + CHARACTER ANIMATION 05 SVGO → clean the vector assets 06 sharp → resize, crop, and prepare images 07 Lottie-web → play vector animations 08 Rive Web → control character states TIMELINES + CHOREOGRAPHY 09 Motion → springs and layout transitions 10 GSAP → direct complex timelines 11 Anime.js → choreograph SVG and objects 12 Theatre.js → tune motion visually 3D + VISUAL POLISH 13 Three.js → build the 3D scene 14 React Three Fiber → compose 3D in React 15 Drei → cameras, lighting, and staging 16 Postprocessing → bloom and color grading PRODUCTION + EXPORT 17 Remotion → compose and render the video 18 Remotion Skills → give Claude Code the production playbook 19 FFmpeg → encode and package the output 20 Mediabunny → build browser media pipelines start with Remotion + its skills choose the assets, motion engine, and 3D modules your project needs the clever part: the composition lives in code change the copy, colors, timing, or format → render the next version the loop: brief → storyboard → assets → layout → animate → add depth → preview → refine → render save this, then read the full guide for Opus 5.5 Motion Engineering ↓
0:20

this is pure f*cking treasure 20 GitHub repos to build your own motion design studio with Opus 5.5 storyboards. typography. assets. character states. keyframes. 3D. rendering here’s the stack from the first sketch to the final frame DESIGN + STORYBOARD 01 Penpot → layouts and reusable components 02 Excalidraw → sketch the storyboard 03 Fontsource → self-host your fonts 04 Lucide → consistent SVG icons ASSETS + CHARACTER ANIMATION 05 SVGO → clean the vector assets 06 sharp → resize, crop, and prepare images 07 Lottie-web → play vector animations 08 Rive Web → control character states TIMELINES + CHOREOGRAPHY 09 Motion → springs and layout transitions 10 GSAP → direct complex timelines 11 Anime.js → choreograph SVG and objects 12 Theatre.js → tune motion visually 3D + VISUAL POLISH 13 Three.js → build the 3D scene 14 React Three Fiber → compose 3D in React 15 Drei → cameras, lighting, and staging 16 Postprocessing → bloom and color grading PRODUCTION + EXPORT 17 Remotion → compose and render the video 18 Remotion Skills → give Claude Code the production playbook 19 FFmpeg → encode and package the output 20 Mediabunny → build browser media pipelines start with Remotion + its skills choose the assets, motion engine, and 3D modules your project needs the clever part: the composition lives in code change the copy, colors, timing, or format → render the next version the loop: brief → storyboard → assets → layout → animate → add depth → preview → refine → render save this, then read the full guide for Opus 5.5 Motion Engineering ↓

beamnxw ./

39,214 views • 13 days ago