Maxime @MaximeHeckel Twitter profile | Pikagi

Pikagi

Maxime

@MaximeHeckel

7,503

Followers

1,867

Following

1,087

Media

13,494

Statuses

🇫🇷 in 🇺🇸 • Frontend @Tango_HQ • Three.js, Shaders, React, Next.js • Writing on 🧑‍💻

New York, NY

https://t.co/CePDMvig2q

Joined February 2010

Don't wanna be here? Send us removal request.

Pinned Tweet

@MaximeHeckel

Maxime

8 months

📝 New Blog Post 📝 I spent this summer studying Raymarching with Signed Distance Fields and compiled it all in this article In it, I show you how to use shaders with a bit of math to build anything from abstract visuals to beautiful endless landscapes✨

Tweet media one

21

97

437

Last Seen Profiles

@SoboAllen

@melody_creep

@LegitimateTech

@JRUrbaneNetwork

@LastStrike_pro

@suzanne_homza60

@SpeakkOut

@Jrev52

@diabetes_chat

@TeddyStayGassin

@gregbettinelli

@MartinE49990911

@fuccsunny

@MassieFootball

@jazaaaan

@zhngyunchn52278

@DarrenL06560271

@Neiman_Lee

@HussainNad69984

@jbarro

@ThaiBLLovers

@Wonzyoung

@Frikassee

@fortekame

@CyrielleBanet

@BochatJack24919

@king_audacity

@gabe_gowder

@BuildLaw_ArtTea

@LeMaraisBakery

@ben_imaging

@rach__mz

@hpheisler

@HabitatIllinois

@EtheridgeNation

@KasiaLobacz

@MaximeHeckel

Maxime

5 months

if you wondered why your google search results suck and whether it will get worse look no further 🫠

Tweet media one

55

314

4K

@MaximeHeckel

Maxime

2 years

Finally managed to build a refraction shader I like✨ Being able to get such an effect was my long term goal when I got started with Three.js/React Three Fiber last year Going to further improve this I have so many ideas on how to make this look better!

@MaximeHeckel

Maxime

2 years

Played some more with R3F and FBO particles: - used curl noise, the resulting scene is just too beautiful✨ - morphing from one shape to another Both scenes render over 250k particles (512^2), M1 Macbook Pro is silent and cool

1

4

73

28

109

2K

@MaximeHeckel

Maxime

7 months

Cloud in a box ⛅ (in ~100 lines of GLSL)

@MaximeHeckel

Maxime

7 months

Spent the past few weeks studying: - Volumetric Raymarching - Rendering beautiful Cloudscapes in GLSL ⛅ - Performance improvement techniques - Render physically accurate clouds I'm putting all that together in a blog post and as you can see... it will be a big one once again

Tweet media one

Tweet media two

Tweet media three

Tweet media four

2

10

90

15

78

789

@MaximeHeckel

Maxime

1 year

📝 New Blog Post 📝 In this article, I share everything I learned to recreate a beautiful dispersion with shaders 🌈 I deep dive into how you can use light and its properties to recreate amazing 3D effects for your next React Three Fiber project 🪄

Tweet media one

18

94

740

@MaximeHeckel

Maxime

1 year

It only takes some well-placed lights and a dash of clever math/GLSL code to get an incredible dispersion effect ✨ My next article will go through each step to get to this result while explaining the physics of those effects! + you'll get to play with my revamped Sandpack 😄

@MaximeHeckel

Maxime

1 year

As promised, here's a first draft for my blog post on Refraction, Dispersion, and other light effects ✍️ This one will show the steps I took to implement the scene featured in and how with a few tricks and a bit of math you can get a fantastic result ✨

Tweet media one

Tweet media two

3

2

74

5

63

679

@MaximeHeckel

Maxime

2 years

📝 New Blog Post 📝 In this article I share *everything* I learned about shaders 🪄 I crafted 8 unique React Three Fiber scenes to guide you through the inner workings of vertex/fragment shaders and how to make them dynamic, interactive and composable✨

Tweet media one

11

87

579

@MaximeHeckel

Maxime

5 months

this kind of behavior so short-sighted, unbelievably short-sighted, brings nothing to the table and actively makes the world worse it's akin to phone scam that made the phone system utterly useless in the US men like these are real parasite omfg

11

4

451

@MaximeHeckel

Maxime

1 year

Finally achieved the color dispersion effect I always wanted✨ It took lots of trial and error and countless hours digging through papers on color and light in WebGL/shaders/R3F to get there Totally worth it! Will write about this on the blog soon ↳

@MaximeHeckel

Maxime

2 years

Finally managed to build a refraction shader I like✨ Being able to get such an effect was my long term goal when I got started with Three.js/React Three Fiber last year Going to further improve this I have so many ideas on how to make this look better!

28

109

2K

7

32

348

@MaximeHeckel

Maxime

2 years

📝 New Blog Post 📝 This article is a guide to *everything* you might want to know about Framer Motion layout animations I deep dive into every concept along with tips & tricks, visual examples, and everyday use cases to up your animation game 🪄

Tweet card media

Everything about Framer Motion layout animations - Maxime Heckel's Blog

A complete guide to Framer Motion layout animations showcasing every concept, from the layout prop, shared layout animations and LayoutGroup, to complex drag-to-reorder interactions.

blog.maximeheckel.com

11

62

334

@MaximeHeckel

Maxime

2 years

Understanding attributes is key to creating great particles scenes with Three.js/React Three Fiber✨ Spent the evening iterating on an interactive way to illustrate how attributes arrays work for my next blog post Happy with it so far! It's also very satisfying to use 😄

@MaximeHeckel

Maxime

2 years

✍️ Early draft for my upcoming blog post This one will focus on Particles, Attributes and how to use them to create amazing scenes with React Three Fiber and shaders ✨ I'll showcase everything I learned to build the scenes below:

Tweet media one

Tweet media two

1

2

36

11

30

322

@MaximeHeckel

Maxime

7 months

Morphing cloud ⛅ Felt that the article needed a fun demo/a little treat before diving into more complex concepts Originally inspired from

@MaximeHeckel

Maxime

7 months

Cloud in a box ⛅ (in ~100 lines of GLSL)

15

78

789

3

37

318

@MaximeHeckel

Maxime

2 years

📝 New Blog Post 📝 This article is a look into my experience building my own design system✨ In it, I document everything from defining tokens, creating the right level of abstraction, building variant-driven composable components, and how I ship it

Tweet media one

9

44

305

@MaximeHeckel

Maxime

1 year

also if you feel like playing with different ways to distribute your particles within a sphere, this is the cheatsheet I use for my mini-projects (can't remember who originally shared it on Twitter sadly, but whoever this was: thank you!)

Tweet media one

@MaximeHeckel

Maxime

1 year

Fixed a little bug in my React Three Fiber particle blog post (thank you @0x_prosciutto for letting me know!) I messed up the math to distribute my particles within a sphere in a "balanced" way which led to missing particles (see the before/after below)

Tweet media one

Tweet media two

1

2

47

7

31

307

@MaximeHeckel

Maxime

3 years

A great combo I keep using in my NextJS projects: next/dynamic + react-intersection-observer 🪄 This allows me to only import a component once it's "in view". I use this pattern on my blog for my webmentions since they are at the bottom of the page

Tweet media one

5

18

308

@MaximeHeckel

Maxime

1 year

When in doubt, listen to @pixelbeat on how you can spice up your React Three Fiber scenes, he's o̶f̶t̶e̶n̶ always right ↳ New code playgrounds for

5

26

295

@MaximeHeckel

Maxime

3 months

After last week's demo, I had another stupid idea: what if moving your browser window could "shake" the objects in your React Three Fiber scene? Turns out with Rapier, a well placed camera and a dash of math it's not too hard

@MaximeHeckel

Maxime

3 months

A stupid little idea I had recently: what if resizing the browser could have an effect on your scene with physics enabled? Built with Rapier (and a more than questionable hack to allow resizing RigidBodies) and React Three Fiber Link to the code 👇

7

8

160

9

24

297

@MaximeHeckel

Maxime

2 years

📝 New Blog Post 📝 In this article, I tell you all about creating stunning 3D particle scenes with React Three Fiber 🎊 Through 8 unique code playgrounds, you'll learn *everything* from attributes, buffer geometries, animating with shaders and more!

Tweet media one

10

48

291

@MaximeHeckel

Maxime

1 year

📝 New Blog Post 📝 This article covers everything about the tool behind some of my favorite React Three Fiber creations: Render Targets 🎯 In it, I share all my tricks on how to use this tool to create mind-bending scenes with truly magical effects🪄

Tweet media one

14

39

287

@MaximeHeckel

Maxime

6 months

📝 New Blog Post 📝 Over the past few month I experimented building beautiful shaders of cloudscapes with Volumetric Raymarching This article covers what I learned and worked on, from the basics to advanced techniques to render physically based clouds ⛅

Tweet media one

12

51

276

@MaximeHeckel

Maxime

2 years

When working with particles, you only need a few lines of code to get something that looks magical 🪄 And I hope to show you that straight in the middle of my next article! Here's a preview of a scene rendering 5000 particles, smoothly, in @codesandbox 's Sandpack, mindblowing!

@MaximeHeckel

Maxime

2 years

Understanding attributes is key to creating great particles scenes with Three.js/React Three Fiber✨ Spent the evening iterating on an interactive way to illustrate how attributes arrays work for my next blog post Happy with it so far! It's also very satisfying to use 😄

11

30

322

2

35

259

@MaximeHeckel

Maxime

2 years

Just wrapped up this one which should be ready for a release on Tuesday! In this article, I go through everything I've learned while building my personal design system for the past year. 3.5k words ✍️ turns out I had a lot to say about this project 😄

Tweet media one

6

7

234

@MaximeHeckel

Maxime

5 months

light refraction dispersion caustics ✨

8

18

230

@MaximeHeckel

Maxime

1 month

📝 New Blog Post 📝 It only takes some post-processing and shader code to give any React Three Fiber scene a unique aesthetic ✨ This article details the process and techniques to rebuild Moebius' distinct visual art as a Stylized Shader for the web

Tweet media one

6

34

230

@MaximeHeckel

Maxime

8 months

rasterized blob (2022) from my first shader blog post vs raymarched blob (2023) from my upcoming (very heavy on shader) raymarching blog post

@MaximeHeckel

Maxime

8 months

Summarizing an entire summer's worth of work in just under 5000 words ✅ I wish I could be more succinct but there's just so much to say/explain about Raymarching! (might or might not have gotten a bit too philosophical towards the end of this draft)

Tweet media one

2

0

38

3

15

215

@MaximeHeckel

Maxime

3 months

Took some time to rebuild the drawing effect @basementstudio did for Made with React Three Fiber, Drei, a dash of shaders, and a couple of FBOs How would you improve it to get it closer to the original effect? 🔗 to the Codesandbox below 👇

9

20

215

@MaximeHeckel

Maxime

4 months

📝 New Blog Post 📝 I've been obsessing with Caustics ever since I started studying shaders and light effects Rebuilding these beautiful light patterns for the web has always been a goal so I'm happy to show you in details how I did it in this article☀️

Tweet media one

9

38

199

@MaximeHeckel

Maxime

10 months

More shader raymarching work! This time tinkering with colors to get a nice neon effect (originally from a great stream from @akella ) I promise I'll try using something else than the signed distance function of a sphere soon! 😄

@MaximeHeckel

Maxime

11 months

Back to messing around with shaders 🧪 Going to spend the next few weeks trying to learn as much as I can about raymarching and signed distance functions and see where it leads me

9

9

179

5

13

191

@MaximeHeckel

Maxime

3 years

Next.js 12 with Edge Functions Framer Motion 5 Github CMD+K interface what a week

4

12

187

@MaximeHeckel

Maxime

10 months

You can create entire procedurally generated worlds with shaders with a couple of well-placed math formulas! From the sharpness of the terrain, the light, the fog, and the shadows of those mountains: it's all GLSL (don't run this on your phone pls)

7

14

177

@MaximeHeckel

Maxime

11 months

Back to messing around with shaders 🧪 Going to spend the next few weeks trying to learn as much as I can about raymarching and signed distance functions and see where it leads me

9

9

179

@MaximeHeckel

Maxime

2 years

Wrapping up my latest blog post ✍️ It should be ready to be released this coming Tuesday! In this one, I wrote about pretty much everything I've learned about particles in React Three Fiber, from the basics to using advanced techniques like FBO 7 R3F scenes, lots of examples 🪄

Tweet media one

2

11

175

@MaximeHeckel

Maxime

8 months

✍️ Releasing my blog post on Raymarching this coming Tuesday! I spent this summer studying this technique to create shader-powered scenes ranging from abstract shapes to beautiful landscapes Everything I learned is compiled in this article along with demos from my own work 🙂

Tweet media one

7

12

170

@MaximeHeckel

Maxime

1 year

✍️ Adding the final touches to my upcoming dispersion and refraction blog post it should land this coming Tuesday (earlier than expected!) Excited to share with you everything I learned about those shader light effects, step by step, through interactive examples

Tweet media one

4

2

163

@MaximeHeckel

Maxime

3 months

A stupid little idea I had recently: what if resizing the browser could have an effect on your scene with physics enabled? Built with Rapier (and a more than questionable hack to allow resizing RigidBodies) and React Three Fiber Link to the code 👇

7

8

160

@MaximeHeckel

Maxime

3 years

📝 New Blog Post! 📝 Ever wondered how to improve your Github CI workflows to save your frontend team's precious time? ⏱ This article contains all my favorite tips to build efficient workflows, share build artifacts, avoid unnecessary runs, and more!

Tweet card media

Building the perfect GitHub CI workflow for your frontend team - Maxime Heckel's Blog

A guide with some of the best Github CI tips I could find to the power best CI pipeline for your frontend team's needs.

blog.maximeheckel.com

5

30

157

@MaximeHeckel

Maxime

1 year

✍️ Wrapping up my upcoming blog post on one of my favorite WebGL tools: Render Targets! It condenses *weeks* of learning/trial and error into a short article where I share a lot of code and techniques to create mind-bending scenes with magical effects 🪄 Will be out by Tuesday!

Tweet media one

5

5

154

@MaximeHeckel

Maxime

1 year

After postponning this for years, I'm finally working on a new version of my portfolio ✨ I want it to not only be about my work but also showcase my craft and what I learned It might take a while to be ready, but you can follow along my progress 😊 ↳

3

4

155

@MaximeHeckel

Maxime

10 months

Can't get enough of Raymarching these days! In this one I attempted a more "liquid" looking result by combining noise and smoothing functions These effects would be tough to achieve in a more classic three.js scene, but with SDFs, it's almost too easy!

@MaximeHeckel

Maxime

10 months

More shader raymarching work! This time tinkering with colors to get a nice neon effect (originally from a great stream from @akella ) I promise I'll try using something else than the signed distance function of a sphere soon! 😄

5

13

191

2

11

147

@MaximeHeckel

Maxime

4 months

✍️ Releasing my blog post on Caustics this Tuesday! It condenses weeks of work attempting to rebuild from scratch this beautiful light effect that I've been obsessing with since I got started with Three.js Just need to add a few final touches to make sure it's perfect

Tweet media one

7

3

151

@MaximeHeckel

Maxime

7 months

⛅ Revisited my first Volumetric rendering raymarched scene to improve it with some concepts I recently learned: - lower res raymarching - blue noise dithering - bicubic filtering - sample a texture for the noise - lighting with directional derivative

@MaximeHeckel

Maxime

9 months

My first attempt at Volumetric rendering with Raymarching 😶‍🌫️ I wanted to render clouds using noise derivatives and FBM which you can do by raymarching "inside" a volume I was stuck in the "Pit of Dispair" a long time for this one 😅 but I think I got it

11

11

132

3

14

144

@MaximeHeckel

Maxime

3 years

📝 New Blog Post: "Guide to creating animations that spark joy with Framer Motion" Getting started with animations can be overwhelming so I created this little guide with fun examples to introduce you to everything I've learned about Framer Motion ✨

Tweet card media

Guide to creating animations that spark joy with Framer Motion - Maxime Heckel's Blog

An interactive guide introducing everything I've learned about Framer Motion through fun examples and little case studies of animations I built.

blog.maximeheckel.com

5

14

144

@MaximeHeckel

Maxime

2 months

I had this scene in my mind for over 5 months Now it runs on my browser Made with React Three Fiber, (a lot of) shaders, and a very well done spaceship model. Article coming soon, but in the meantime 👇

13

9

142

@MaximeHeckel

Maxime

9 months

My first attempt at Volumetric rendering with Raymarching 😶‍🌫️ I wanted to render clouds using noise derivatives and FBM which you can do by raymarching "inside" a volume I was stuck in the "Pit of Dispair" a long time for this one 😅 but I think I got it

@MaximeHeckel

Maxime

9 months

A look at some of my recent shader Raymarching work 🧪 I learned how to use noise derivatives to create better procedural terrains Combined with fog and light scattering you can achieve some gorgeous results like this beautiful Martian landscape

2

12

127

11

11

132

@MaximeHeckel

Maxime

9 months

☁️ Third attempt at rendering a cloud with Raymarching This time I think I got the lighting right! I also added a phase function for more realistic scattering although I had to do tweaks to make the result pleasing Yes, there will be a post about this!

@MaximeHeckel

Maxime

9 months

☁️ Second attempt at Volumetric rendering I added light sampling and applied some more physically based principles to render this cloud, like transmittance Not 100% sure my lighting is applied correctly, but now we have some nice shadows and more depth

2

5

69

7

11

130

@MaximeHeckel

Maxime

8 months

Mars in a box 🌔🪐

@MaximeHeckel

Maxime

8 months

rasterized blob (2022) from my first shader blog post vs raymarched blob (2023) from my upcoming (very heavy on shader) raymarching blog post

3

15

215

2

7

128

@MaximeHeckel

Maxime

9 months

Took a stab at building a simple Raymarching visualizer to help me introduce the concept for my next blog post It's not really "accurate" yet but I hope it can make this rendering method feel less intimidating for people not familiar with it 🙂 Will keep iterating on it!

@MaximeHeckel

Maxime

9 months

Figured out how to add camera controls on my raymarching work Turns out that to have an OrbitControl-like experience in this situation you can just use ... OrbitControl itself 😄 - Create a camera - Attach it to your OrbitControl - Pass its position to your raymarching scene

5

2

48

4

9

124

@MaximeHeckel

Maxime

9 months

A look at some of my recent shader Raymarching work 🧪 I learned how to use noise derivatives to create better procedural terrains Combined with fog and light scattering you can achieve some gorgeous results like this beautiful Martian landscape

@MaximeHeckel

Maxime

10 months

You can create entire procedurally generated worlds with shaders with a couple of well-placed math formulas! From the sharpness of the terrain, the light, the fog, and the shadows of those mountains: it's all GLSL (don't run this on your phone pls)

7

14

177

2

12

127

@MaximeHeckel

Maxime

4 months

Got Dynamic Caustics working with normal recomputation after vertex displacement I also forked and modified MeshTransmissionMaterial to get that same displacement and the result just looks 🤌 Will add that as a last example of the upcoming blog post

@MaximeHeckel

Maxime

4 months

Last month, I finally managed to build a Caustic light effect with R3F and custom shaders I’ve been obsessing with this effect ever since I started working with shaders (ask @pixelbeat he'll tell you) so I'm excited to finally start writing about it ✍️

Tweet media one

Tweet media two

Tweet media three

3

3

59

1

13

118

@MaximeHeckel

Maxime

6 months

✍️ Releasing my blog post on Volumetric Raymarching this coming Tuesday! I experimented with this technique over the past few months to render beautiful cloudscapes and physically accurate clouds This article features everything I learned and the shader code behind my work 🙂

Tweet media one

3

4

111

@MaximeHeckel

Maxime

3 years

📝 New Post 📝 Tired of dealing with super slow Twitter embed iframes that trigger a lot of CLS in your blog posts? In this article, I detail how you can get Static Tweets for your MDX-based content 🧑‍💻 Kudos to @leeerob for the original inspiration!

Tweet card media

Static Tweets with MDX and Next.js - Maxime Heckel's Blog

A solution to remove sluggish Twitter embed iframes and load the tweets in your blog posts at the speed of light.

blog.maximeheckel.com

5

10

113

@MaximeHeckel

Maxime

3 years

built this little showcase for Framer Motion's "AnimatePresence" last night - 1st card doesn't use it: no exit animation 😕 - 2nd card is wrapped in an AnimatedPresence component: super fluid exit animation and transition between cards 😄 This next blog post is going to be 🔥

2

6

111

@MaximeHeckel

Maxime

10 months

Experimenting with some new Opengraph image designs I could generate on the fly with @vercel /og Not 100% happy with it yet, but it's the first iteration I kind of like

Tweet media one

Tweet media two

Tweet media three

Tweet media four

3

4

110

@MaximeHeckel

Maxime

11 months

📝 New Blog Post 📝 In this article, I'm thrilled to introduce my AI-powered semantic search: ask a question and get an answer crafted from my own writing 🪄 In it, I deep dive into how you can use embeddings, OpenAI, and some good UX to build your own!

Tweet media one

3

21

110

@MaximeHeckel

Maxime

1 year

👀

3

5

99

@MaximeHeckel

Maxime

3 years

I think I really like Styled Components + CSS variables i.e. no theme provider, theme context, or JS-based theme. It looks much cleaner! The only downside here though is that I lose typing (and autocomplete in VSCode for variables)

Tweet media one

13

6

102

@MaximeHeckel

Maxime

2 months

by far the most satisfying thing I included in a blog post in a long time 🤤

@MaximeHeckel

Maxime

2 months

Spent yesterday evening in Figma making these Trying my best to illustrate the more "math-y" aspect of this blog post so it's easier to understand

Tweet media one

Tweet media two

Tweet media three

3

5

67

2

8

100

@MaximeHeckel

Maxime

8 months

Started planning my next shader article on Volumetric rendering Here's the shader of the cloud I posted a while ago I that I plan to write about If you know a lot on this subject I'd love some feedback on the code, methods used, and how to improve it 🙂

@MaximeHeckel

Maxime

9 months

My blue noise dithering implementation as of now 👇 You can clearly see the "very not granular" raymarching loop with blue noise dithering disabled Once enabled I almost get back the quality I had with a more granular raymarching loop A good read:

0

6

55

2

4

99

@MaximeHeckel

Maxime

7 months

my dream is to make a shader/scene as pretty as this one day

@80Level

80 LEVEL

7 months

. @Blender 4.0 has officially entered Beta, featuring an amazing painterly-like 3D illustration from @Gakutadar on its splash screen. Try out Blender 4.0 in beta: #blender #blender3d #b3d #blendercommunity #blender4 #3d #3dart #3dsoftware #blenderart

4

219

2K

2

4

98

@MaximeHeckel

Maxime

3 months

With just a few line of React Three Fiber, Rapier, and a bit of math you can build very satisfying scenes! Made this little fidget toy that once displaced by your cursor/finger, resets itself to its original state using impulse/torque with some spring 😌

4

8

94

@MaximeHeckel

Maxime

7 months

Spent the past few weeks studying: - Volumetric Raymarching - Rendering beautiful Cloudscapes in GLSL ⛅ - Performance improvement techniques - Render physically accurate clouds I'm putting all that together in a blog post and as you can see... it will be a big one once again

Tweet media one

Tweet media two

Tweet media three

Tweet media four

@MaximeHeckel

Maxime

7 months

⛅ Revisited my first Volumetric rendering raymarched scene to improve it with some concepts I recently learned: - lower res raymarching - blue noise dithering - bicubic filtering - sample a texture for the noise - lighting with directional derivative

3

14

144

2

10

90

@MaximeHeckel

Maxime

10 months

Among all the 3D/shader blog posts I read @maya_ndljk 's article on Custom Toon Shader is the one I keep getting back to on a regular basis It explains so well how to do lighting and shadows in GLSL, I always use it as a base for my work

Tweet card media

Custom Toon Shader in Three.js [Tutorial]

Step-by-step tutorial for creating a stylized cartoon shader in Three.js from scratch

www.maya-ndljk.com

1

12

91

@MaximeHeckel

Maxime

3 years

📝 New Blog Post: “Advanced animation patterns with Framer Motion In this one, I share some of the greatest advanced Framer Motion patterns and tools I learned about and use through fun and interactive code snippets ✨

Tweet card media

Advanced animation patterns with Framer Motion - Maxime Heckel's Blog

A deep dive into Framer Motion's propagation, exit transitions and layout animation patterns through curated examples and interactive playgrounds.

blog.maximeheckel.com

1

11

89

@MaximeHeckel

Maxime

3 years

📝 Latest write-up! “The Power of Composition with CSS variables” Managing your colors in a large codebase can be messy 😥 Composing them can bring order to all that and help you define complex themes with meaningful colors and all that with just CSS ✨

Tweet card media

The Power of Composition with CSS Variables - Maxime Heckel's Blog

How leveraging CSS variable composition and HSLA colors helped me build a more efficient way to theme my apps and rely less on CSS-in-JS.

blog.maximeheckel.com

7

14

90

@MaximeHeckel

Maxime

3 months

Early work on an outline shader using Sobel filter on both depth and normals of a scene Next step is shading using a crosshatched pattern via texture to achieve a Moebius style on the web @UselessGameDev 's Moebius video is a great guide for this project

4

7

89

@MaximeHeckel

Maxime

2 years

Finally wrapped up this one, should be ready to publish by Tuesday after I add some final touches✍️ My aim for this one is to serve as a guide to help you implement complex Framer Motion layout animations Stay tuned!

Tweet media one

0

1

82

@MaximeHeckel

Maxime

2 years

Coming soon 👀 In it, we'll take a look at the steps I took to build my very first Three.js project/scene from scratch: One of my most ambitious write-ups to date, a lot of pieces fell into place at the right time 🙌

Tweet media one

3

8

80

@MaximeHeckel

Maxime

1 year

As promised, here's a first draft for my blog post on Refraction, Dispersion, and other light effects ✍️ This one will show the steps I took to implement the scene featured in and how with a few tricks and a bit of math you can get a fantastic result ✨

Tweet media one

Tweet media two

@MaximeHeckel

Maxime

1 year

Finally achieved the color dispersion effect I always wanted✨ It took lots of trial and error and countless hours digging through papers on color and light in WebGL/shaders/R3F to get there Totally worth it! Will write about this on the blog soon ↳

7

32

348

3

2

74

@MaximeHeckel

Maxime

2 years

Finally got some time to play with shaders on React Three Fiber again 🤤

1

5

76

@MaximeHeckel

Maxime

4 years

SEO is hard! And it's easy to get it wrong when starting your blog or product and slowing down your growth I got it wrong countless times 😅 but learned a lot through my mistakes So here's a look back at my worst SEO mistakes and how I fixed them:

Tweet card media

SEO mistakes I've made and how I fixed them - Maxime Heckel's Blog

A look back at what I learned fixing my terrible SEO mistakes on my Gatsby websites

blog.maximeheckel.com

9

19

73

@MaximeHeckel

Maxime

2 years

Finally wrapped my head around Three.js render targets and layers 🥵 and managed to rebuild @pschroen 's hologram scene in R3F✨ His work on is an absolute gold mine for shaders and various rendering techniques, so much to learn!

@MaximeHeckel

Maxime

2 years

The result is still worth the trouble though ✨

0

1

11

2

5

73

@MaximeHeckel

Maxime

2 years

Played some more with R3F and FBO particles: - used curl noise, the resulting scene is just too beautiful✨ - morphing from one shape to another Both scenes render over 250k particles (512^2), M1 Macbook Pro is silent and cool

@MaximeHeckel

Maxime

2 years

Turns out positioning particles with a fragment shader (yes not a typo!) allows you to do very cool stuff 🧪 The concept that makes this scene possible is called Frame Buffer Object (FBO) and now that I know its existence I have a lot of things to try 👨‍💻

2

6

58

1

4

73

@MaximeHeckel

Maxime

3 months

Early preview, still needs some work Suggested by @Anemolito , originally from @lusionltd

@MaximeHeckel

Maxime

3 months

After last week's demo, I had another stupid idea: what if moving your browser window could "shake" the objects in your React Three Fiber scene? Turns out with Rapier, a well placed camera and a dash of math it's not too hard

9

24

297

2

6

72

@MaximeHeckel

Maxime

1 year

First draft for my upcoming blog post on Render Targets ✍️ In this one, I hope to share more about one of my favorite R3F/Three.js tools, and how to leverage it to create scenes that can be truly magic/mind-bending 🪄 You can get a preview here:

Tweet media one

Tweet media two

7

6

71

@MaximeHeckel

Maxime

3 months

Just spun up a new scene based of last week's little demo: Using window.screenX/screenY and window.screen you can move your R3F scene's camera by ... dragging the window around! Makes for a very cool effect especially with the orthographic camera 🪄

@MaximeHeckel

Maxime

3 months

After last week's demo, I had another stupid idea: what if moving your browser window could "shake" the objects in your React Three Fiber scene? Turns out with Rapier, a well placed camera and a dash of math it's not too hard

9

24

297

1

6

71

@MaximeHeckel

Maxime

5 months

work scheduled for 2024: - caustics ✨ - ascii/dithering shaders - moebius and watercolor shader study - integrating raymarched shaders into R3F scenes - adding delightful interactivity to WebGL scenes and if time allows: building my personal website

Tweet media one

6

1

71

@MaximeHeckel

Maxime

4 years

New blog post published today! ✍️ The physics behind spring animations

The physics behind spring animations - Maxime Heckel's Blog

A deep dive into the inner workings of spring animations in Framer Motion.

blog.maximeheckel.com

3

13

71

@MaximeHeckel

Maxime

9 months

☁️ Second attempt at Volumetric rendering I added light sampling and applied some more physically based principles to render this cloud, like transmittance Not 100% sure my lighting is applied correctly, but now we have some nice shadows and more depth

@MaximeHeckel

Maxime

9 months

My first attempt at Volumetric rendering with Raymarching 😶‍🌫️ I wanted to render clouds using noise derivatives and FBM which you can do by raymarching "inside" a volume I was stuck in the "Pit of Dispair" a long time for this one 😅 but I think I got it

11

11

132

2

5

69

@MaximeHeckel

Maxime

4 months

- Interactive demos are built ✅ - Diagrams are drawn ✅ - 1st draft turned to 2nd, and now 3rd and final ✅ Your guide to caustics on the web is coming together!

@MaximeHeckel

Maxime

4 months

Got Dynamic Caustics working with normal recomputation after vertex displacement I also forked and modified MeshTransmissionMaterial to get that same displacement and the result just looks 🤌 Will add that as a last example of the upcoming blog post

1

13

118

2

3

70

@MaximeHeckel

Maxime

3 years

Coming next week 📝 You'll soon learn some of my favorite tips to build great Github workflows!

Tweet media one

2

2

68

@MaximeHeckel

Maxime

9 months

Draft of my upcoming Raymarching blog posts ✍️ It's a big one, I prefer this rather than a 5 part series In it, I'll share the raymarching techniques I learned over the summer: - lighting/shadows - combining SDFs - FBM, noise derivatives - and more! along with demo scenes!

Tweet media one

Tweet media two

Tweet media three

@MaximeHeckel

Maxime

9 months

Took a stab at building a simple Raymarching visualizer to help me introduce the concept for my next blog post It's not really "accurate" yet but I hope it can make this rendering method feel less intimidating for people not familiar with it 🙂 Will keep iterating on it!

4

9

124

3

3

68

@MaximeHeckel

Maxime

2 years

📝 New Blog Post! 📝 In this article, I walk you through the steps I took and everything I learned while building my first Three.js scene✨ Looking for a sleek project to get started with and learn about meshes, animation, and light? It's right there👇

Tweet card media

Building a Vaporwave scene with Three.js - Maxime Heckel's Blog

A step-by-step tutorial documenting my attempt at reverse-engineering the vaporwave WebGL scene from the Linear 2021 release page using solely fundamental concepts of Three.js like textures, lights,...

blog.maximeheckel.com

4

8

66

@MaximeHeckel

Maxime

2 years

Another little component for my next Framer Motion blog post that will be used to showcase: - How to add multiple shared layout animations - Make it reusable thanks to the ability to namespace layout animations by wrapping the component in LayoutGroup with a unique id ✨

@MaximeHeckel

Maxime

2 years

First iteration of a little widget to visualize the layout animations you may get with Framer Motion based on the value of the "layout" prop 👀 There're a lot of things to consider when using layout animations. I plan on adding more complex examples with edge cases in my article

1

0

27

1

4

69

@MaximeHeckel

Maxime

4 years

Today is my last day as part of the @Docker team after 4 years of hard work. I’m officially looking for new opportunities in NYC or remote. If you’re looking for a frontend engineer to work on React and help your team develop, test, ship your product, my DMs are open!

6

32

67

@MaximeHeckel

Maxime

6 months

Next thing I'd want to build on top of my dispersion shader 👀

@active_theory

Active Theory

6 months

WebGPU caustics test 🌈

19

103

873

1

2

66

@MaximeHeckel

Maxime

2 months

Spent yesterday evening in Figma making these Trying my best to illustrate the more "math-y" aspect of this blog post so it's easier to understand

Tweet media one

Tweet media two

Tweet media three

@MaximeHeckel

Maxime

2 months

Built this little widget to demonstrate how an edge detection filter with the Sobel operator works 😊 - Select a pixel, and see the Sobel matrix overlayed on top of it and its neighboring pixel - Switch between x/y direction kernel to detect edges alongside other directions

2

6

60

3

5

67

@MaximeHeckel

Maxime

2 months

This is getting very close to what I originally had in mind: Moebius style spaceships, and nice shading 🤌 All that through a small custom post-processing effect I also managed to get specular lighting to render nicely and experimented with multiple shadow patterns

@MaximeHeckel

Maxime

3 months

Slowly getting there Not 100% satisfy with how the shadow pattern looks but still pretty happy what I was able to pull off in 1 evening 😊 Also the current implementation does not yet work well with darker colors, the crosshatched pattern is always be displayed for those

2

1

47

6

4

65

@MaximeHeckel

Maxime

4 months

Improving my blog is a very meditative/relaxing experience for me 😌 Here are some of the tiny updates I made during the break that to me make the whole difference - new and improved dark/light color palette - expandable images - GLSL support in my demos

Tweet card media

Maxime Heckel's Blog

Hi I'm Maxime, and this is my blog. Here, I share through my writing my experience as a frontend engineer and everything I'm learning about on React, Shaders, React Three Fiber, Framer Motion, and...

blog.maximeheckel.com

2

2

64

@MaximeHeckel

Maxime

11 months

✍️ Wrapped up my upcoming blog post on my latest project: an AI-powered semantic search! It goes through all the steps and concepts necessary to build a truly magical search experience using embeddings and OpenAI's completion API Coming this Tuesday! 👀

Tweet media one

1

2

63

@MaximeHeckel

Maxime

5 months

finally got a caustic effect that looks good ✨ - subtle blur - subtle chromatic abberation - dynamic scale/placement based on the light position relative to the mesh It even takes into account the backside of the mesh! Really happy with the result

@MaximeHeckel

Maxime

6 months

fixed some math, polished a bit my shader code and the light patterns are now even prettier the more complex the geometry the nicer the caustic pattern 🙂 still lots to do

1

1

40

2

2

62

@MaximeHeckel

Maxime

2 months

You can do so much with Preserve Drawing Buffer Used it for: - - a very underrated technique 👇

@Anemolito

Daniel Velasquez

2 months

Learn how to create feedback effects and more fun stuff about Preserve Drawing Buffer in today's newsletter! Check your email inbox! #threejs #webgl #creativecoding

2

6

121

0

2

62

@MaximeHeckel

Maxime

2 months

Built this little widget to demonstrate how an edge detection filter with the Sobel operator works 😊 - Select a pixel, and see the Sobel matrix overlayed on top of it and its neighboring pixel - Switch between x/y direction kernel to detect edges alongside other directions

2

6

60

@MaximeHeckel

Maxime

3 years

Never thought I’d ever say this but … the new Apple Maps is sick ✨

Tweet media one

Tweet media two

5

7

59

@MaximeHeckel

Maxime

2 years

Turns out positioning particles with a fragment shader (yes not a typo!) allows you to do very cool stuff 🧪 The concept that makes this scene possible is called Frame Buffer Object (FBO) and now that I know its existence I have a lot of things to try 👨‍💻

@MaximeHeckel

Maxime

2 years

Finally wrapped my head around Three.js render targets and layers 🥵 and managed to rebuild @pschroen 's hologram scene in R3F✨ His work on is an absolute gold mine for shaders and various rendering techniques, so much to learn!

2

5

73

2

6

58

@MaximeHeckel

Maxime

4 months

Last month, I finally managed to build a Caustic light effect with R3F and custom shaders I’ve been obsessing with this effect ever since I started working with shaders (ask @pixelbeat he'll tell you) so I'm excited to finally start writing about it ✍️

Tweet media one

Tweet media two

Tweet media three

3

3

59

@MaximeHeckel

Maxime

1 year

You can do some pretty sweet magic tricks with render targets in R3F and a dash of shaders🪄 Like gracefully transitioning between 2 scenes, inspired by the beautiful ! I have a lot of exciting use cases like this one to show you in the next blog post 👀

@MaximeHeckel

Maxime

1 year

First draft for my upcoming blog post on Render Targets ✍️ In this one, I hope to share more about one of my favorite R3F/Three.js tools, and how to leverage it to create scenes that can be truly magic/mind-bending 🪄 You can get a preview here:

Tweet media one

Tweet media two

7

6

71

4

2

59

@MaximeHeckel

Maxime

4 months

Just counted: with yesterday's release, I've finally reached 50 articles! Very happy about this milestone 😊

1

0

58

@MaximeHeckel

Maxime

3 years

With the recent release of Framer Motion 5 and the new Shared Layout Animation API it was time to revisit my last Framer Motion post ✍️ I rewrote the entire last section with new examples and rebuilt the shared layout animation demo widget from scratch✨

Tweet card media

Advanced animation patterns with Framer Motion - Maxime Heckel's Blog

A deep dive into Framer Motion's propagation, exit transitions and layout animation patterns through curated examples and interactive playgrounds.

blog.maximeheckel.com

1

6

57

@MaximeHeckel

Maxime

9 months

My blue noise dithering implementation as of now 👇 You can clearly see the "very not granular" raymarching loop with blue noise dithering disabled Once enabled I almost get back the quality I had with a more granular raymarching loop A good read:

@MaximeHeckel

Maxime

9 months

Spent the evening implementing some of the performance improvement tips suggested by @N8Programs and @Cody_J_Bennett 👉 so much faster! - rendered at a lower resolution - use blue noise dithering I still need to try - re-upscale the scene - try variable raymarching step size

3

3

45

0

6

55

@MaximeHeckel

Maxime

2 months

Spent a few weeks rebuilding the Moebius style with shaders for this R3F scene On the way I learned a lot about - depth textures - custom shader pass - sobel filters - shadow patterns and more Here's the outline of the upcoming article covering it all ✍️

Tweet media one

Tweet media two

Tweet media three

Tweet media four

2

0

53