This September, the Three.js community gathers in Paris for the very first Three.js Conference 🎉
We asked some of the speakers what's currently occupying their brains and what they're excited to share in Paris 👀
Meet the full lineup, get to know some of the people behind the talks, and don't miss our exclusive 15% ticket discount. Check it out
We asked some of the speakers what's currently occupying their brains and what they're excited to share in Paris 👀
Meet the full lineup, get to know some of the people behind the talks, and don't miss our exclusive 15% ticket discount. Check it out
❤1
Media is too big
VIEW IN TELEGRAM
How do you turn more than 1GB of production 3D assets into a WebGL experience under 10MB that runs smoothly on mobile?
Today, Sindhur Dutta from BUNQ LABS breaks down the engineering, shaders, and performance techniques behind ZERO, the defiant interactive narrative that's as much an engineering feat as a creative one.
Today, Sindhur Dutta from BUNQ LABS breaks down the engineering, shaders, and performance techniques behind ZERO, the defiant interactive narrative that's as much an engineering feat as a creative one.
This media is not supported in your browser
VIEW IN TELEGRAM
Great digital work has the power to make even the most complex subjects feel intuitive, engaging, and memorable.
In our latest Studio Spotlight, Unseen Studio takes us through the projects, journey, and creative philosophy behind their distinctive approach to digital craft.
In our latest Studio Spotlight, Unseen Studio takes us through the projects, journey, and creative philosophy behind their distinctive approach to digital craft.
Media is too big
VIEW IN TELEGRAM
What does it take to bring real alpine terrain to the web? 🏔️
Filip Zrnzevic takes us behind the scenes of Ridgeline, exploring how Webflow, the Webflow MCP, Three.js, React Three Fiber and GSAP came together to create a cinematic 3D journey, without sacrificing editability.
Follow along
Filip Zrnzevic takes us behind the scenes of Ridgeline, exploring how Webflow, the Webflow MCP, Three.js, React Three Fiber and GSAP came together to create a cinematic 3D journey, without sacrificing editability.
Follow along
This media is not supported in your browser
VIEW IN TELEGRAM
How do you make serverless AI infrastructure feel tangible?
That was the challenge behind Cerebrium's website, and the result is a beautiful blend of storytelling, 3D, and WebGL.
Célia Lopez and Mathis Biabiany take us behind the scenes.
That was the challenge behind Cerebrium's website, and the result is a beautiful blend of storytelling, 3D, and WebGL.
Célia Lopez and Mathis Biabiany take us behind the scenes.
This media is not supported in your browser
VIEW IN TELEGRAM
Some studios have a signature you recognize instantly. Garden Eight is one of them.
Based in Tokyo, they've built a body of work defined by calm, thoughtful interactions and a distinctive sense of flow.
In our latest spotlight, they offer a rare look into their creative process, sharing some of their favorite projects and explaining how design, development, and motion come together as one continuous practice.
Based in Tokyo, they've built a body of work defined by calm, thoughtful interactions and a distinctive sense of flow.
In our latest spotlight, they offer a rare look into their creative process, sharing some of their favorite projects and explaining how design, development, and motion come together as one continuous practice.
👍1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Between print and digital, structure and movement, silence and interaction.
FLOT NOIR’s website for architecture studio MERSI turns a generic Webflow foundation into a deeply tailored digital experience.
Clément Merouani shares the story behind the project, with development insights from Thomas Carré.
FLOT NOIR’s website for architecture studio MERSI turns a generic Webflow foundation into a deeply tailored digital experience.
Clément Merouani shares the story behind the project, with development insights from Thomas Carré.
This media is not supported in your browser
VIEW IN TELEGRAM
What does it take to build work that moves people and missions forward?
Step inside Studio Freight’s world to explore their thoughtful approach to strategy, digital experiences, and the craft behind projects for ElevenLabs, Perplexity, Psyop, and more.
Step inside Studio Freight’s world to explore their thoughtful approach to strategy, digital experiences, and the craft behind projects for ElevenLabs, Perplexity, Psyop, and more.
This media is not supported in your browser
VIEW IN TELEGRAM
Some interactions feel effortless, but they're often made up of several small systems working together.
In today's tutorial, Surya Aditya breaks down an infinite scrolling gallery built with GSAP, from the looping scroll to the parallax, reveal animations, and FLIP transitions.
Follow along
In today's tutorial, Surya Aditya breaks down an infinite scrolling gallery built with GSAP, from the looping scroll to the parallax, reveal animations, and FLIP transitions.
Follow along
This media is not supported in your browser
VIEW IN TELEGRAM
✨ The first Three.js Conference is coming to Paris!
To celebrate, we’re highlighting the incredible creativity of the community with a series of Three.js gems from wonderful people who are generously sharing their experiments, techniques, and creative ideas with us.
First up: Sujen Phea and her endlessly scrolling glass xylophone, a mesmerizing experiment built with Three.js, shaders, fluid simulation, interaction, and sound.
Explore the tutorial and join us for more Three.js inspiration from the community.
🎟️ Going to Paris? Use CODROPS for 15% off your ticket.
To celebrate, we’re highlighting the incredible creativity of the community with a series of Three.js gems from wonderful people who are generously sharing their experiments, techniques, and creative ideas with us.
First up: Sujen Phea and her endlessly scrolling glass xylophone, a mesmerizing experiment built with Three.js, shaders, fluid simulation, interaction, and sound.
Explore the tutorial and join us for more Three.js inspiration from the community.
🎟️ Going to Paris? Use CODROPS for 15% off your ticket.
🔥3❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Desperate for some truly human-designed website inspiration?
Together with our friends at Readymag, we picked out a collection of websites that are playful, unique, unexpected, and full of personality.
An antidote to the sameness of the web, with a little treat from Readymag waiting for you at the end. Check it out
Together with our friends at Readymag, we picked out a collection of websites that are playful, unique, unexpected, and full of personality.
An antidote to the sameness of the web, with a little treat from Readymag waiting for you at the end. Check it out
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
As part of our celebration of the upcoming Three.js Conference, we're highlighting wonderful creators from the Three.js community.
This time, Frank Reitberger shares Garden Anomaly, a playful WebGPU & TSL experiment combining physics, glass deformations, and procedurally generated sound into a mesmerizing interactive sphere.
Take a look
This time, Frank Reitberger shares Garden Anomaly, a playful WebGPU & TSL experiment combining physics, glass deformations, and procedurally generated sound into a mesmerizing interactive sphere.
Take a look
❤2
This media is not supported in your browser
VIEW IN TELEGRAM
We’re continuing our celebration of the first Three.js Conference in Paris with more creative work from the Three.js community. ✨
Today, Chiro Visuals takes us behind his Geometry Painter, an exploration of painting, procedural growth, and WebGPU/TSL.
Read the tutorial & explore the demos.
Today, Chiro Visuals takes us behind his Geometry Painter, an exploration of painting, procedural growth, and WebGPU/TSL.
Read the tutorial & explore the demos.
❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Summer is turning out Three-mendous! ☀️🎨
We continue our Three.js conference celebration with yet another amazing tutorial!
Today, Francesco Michelini takes us step-by-step through the process of turning a simple icosahedron into a dynamic, interactive 3D cluster, exploring Three.js, TSL, WebGPU, and three-start along the way.
Follow along
We continue our Three.js conference celebration with yet another amazing tutorial!
Today, Francesco Michelini takes us step-by-step through the process of turning a simple icosahedron into a dynamic, interactive 3D cluster, exploring Three.js, TSL, WebGPU, and three-start along the way.
Follow along
❤1
Motion, typography, and visual storytelling are at the heart of Denis Avramenko’s approach to creating immersive digital experiences.
Today he takes us behind the scenes of his creative process, exploring the ideas, experimentation, and technology that shape his award-winning digital work.
Today he takes us behind the scenes of his creative process, exploring the ideas, experimentation, and technology that shape his award-winning digital work.
Codrops
From Motion to Meaning: Denis Avramenko’s Approach to Interactive Design | Codrops
A behind-the-scenes look at Denis Avramenko’s creative process, exploring his approach to motion, typography, interaction, and technology through a selection of digital projects.
❤3
A childhood fascination with the iMac G3 became one of the sparks behind Haoqi Wen’s portfolio.
That early fascination evolved into a space shaped by glass, color, motion, and code.
Haoqi takes us into the technical thinking behind the work, from synchronizing DOM and WebGL to building custom shaders, refraction, pointer interactions, and performance conscious effects.
A fantastic weekend read
That early fascination evolved into a space shaped by glass, color, motion, and code.
Haoqi takes us into the technical thinking behind the work, from synchronizing DOM and WebGL to building custom shaders, refraction, pointer interactions, and performance conscious effects.
A fantastic weekend read
Codrops
Inside HAOQI.DESIGN: Letting DOM and WebGL Share a Retro-Futurist Stage | Codrops
A technical look at the making of HAOQI.DESIGN, exploring scroll sync, glass shaders, and the interplay of DOM, CSS, and WebGL in a retro-futurist portfolio.
❤2
What does it take to stay creatively ambitious as a studio grows?
OFF+BRAND. has gone from two founders in a small Glasgow office to a 30-person studio working with names like Microsoft, Lando Norris and Trevor Noah.
They take us through the work, the journey, and what they’ve learned about making great digital experiences at scale.
OFF+BRAND. has gone from two founders in a small Glasgow office to a 30-person studio working with names like Microsoft, Lando Norris and Trevor Noah.
They take us through the work, the journey, and what they’ve learned about making great digital experiences at scale.
Codrops
Creativity at Enterprise-Scale, Without Compromise: The OFF+BRAND. Story | Codrops
Telling stories on some of the biggest canvases on the web, from Awwwards Site of the Year to the front door of Microsoft.
A Webflow CMS collage with a slot-machine counter, looping member swaps, and a 3D GSAP animation? Yes, please. ✨
Built for his stunning course page, Jonas Arleth’s animated member showcase brings real CMS data to life through playful motion, 3D effects, and clever Webflow techniques.
Learn how he brought it all together with Webflow CMS, CSS container queries, JavaScript, and the visual GSAP timeline.
Built for his stunning course page, Jonas Arleth’s animated member showcase brings real CMS data to life through playful motion, 3D effects, and clever Webflow techniques.
Learn how he brought it all together with Webflow CMS, CSS container queries, JavaScript, and the visual GSAP timeline.
Codrops
Building an Animated Testimonial Hero Using the GSAP Timeline and Dynamic CMS Data | Codrops
Learn how to build a dynamic testimonial hero in Webflow using CMS data, a custom JavaScript counter, and GSAP’s visual timeline.
🗼 Paris is calling, and our little Three.js Conference party rolls on!
This time, Dominik Fojcik has a neat trick up his sleeve: what if your images could actually feel the light?
He explores depth maps, TSL, and WebGPU to make flat images respond like 3D surfaces, complete with lighting, detail, and shadows.
Read the tutorial
This time, Dominik Fojcik has a neat trick up his sleeve: what if your images could actually feel the light?
He explores depth maps, TSL, and WebGPU to make flat images respond like 3D surfaces, complete with lighting, detail, and shadows.
Read the tutorial
Codrops
Relighting Images with Depth Maps and Three.js | Codrops
Explore how depth maps, TSL, and WebGPU can be combined to turn flat 2D images into dynamic surfaces with realistic lighting, surface detail, and self-shadowing.
This media is not supported in your browser
VIEW IN TELEGRAM
Audio-reactive motion is easy. Making it feel intentional is the hard part.
For Run Rob Run, Robert Aperios built a system that decides which sounds should move the form, how strongly they should hit, and how the object settles back.
Today, he gives us a closer look at the thinking behind the motion—from custom deformation and damping to scroll morphing and WebGPU.
For Run Rob Run, Robert Aperios built a system that decides which sounds should move the form, how strongly they should hit, and how the object settles back.
Today, he gives us a closer look at the thinking behind the motion—from custom deformation and damping to scroll morphing and WebGPU.
This media is not supported in your browser
VIEW IN TELEGRAM
Our Three.js celebration ahead of the first conference in Paris this September continues! ✨
Today, a special feature from incredible multi-talent Filip Zrnzevic: music, 3D worlds, and cinematic experiences pushed to the limit.
A playable Space Invaders, seven atmospheric fly-throughs, a wall of dying CRTs—and plenty of hard-won rendering lessons.
Step inside Filip’s lab
Today, a special feature from incredible multi-talent Filip Zrnzevic: music, 3D worlds, and cinematic experiences pushed to the limit.
A playable Space Invaders, seven atmospheric fly-throughs, a wall of dying CRTs—and plenty of hard-won rendering lessons.
Step inside Filip’s lab