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 more.

Link redirects to my portfolio https://maximeheckel.com.

Link redirects to my Twitter profile page https://twitter.com/MaximeHeckel.

Get a behind the scenes look at what I'm currently learning, exploring, and creating.

Subscribe to my newsletter to receive a monthly digest containing:

Deep dives into some of my ideas and secret projects that will inspire you
Exclusive previews of upcoming articles on frontend development, React, Shaders, React Three Fiber and more.
Some of my favorite resources and tips on frontend development or anything I'm currently interested in to further expand your skillset as a developer

Featured

Real-time dreamy Cloudscapes with Volumetric Raymarching
This article is a deep dive into my experimentations with Volumetric rendering and how to leverage it to render beautiful raymarched cloudscapes in React Three Fiber and WebGL. In it, I walk you through everything from the basics of Volumetric Raymarching to the techniques used in video games to render physically accurate clouds.
Refraction, dispersion, and other shader light effects
A guide on how to reproduce a chromatic dispersion effect for your React Three Fiber and shader projects with FBO, refraction, chromatic aberration, specular, and other tricks through 9 interactive code playgrounds.
The Study of Shaders with React Three Fiber
A complete guide on how to use shaders with React Three Fiber, work with uniforms and varyings, and build dynamic, interactive and composable materials with them through 8 unique 3D scenes.

All articles

2024
Oct 29
On Crafting Painterly Shaders
Aug 06
The Art of Dithering and Retro Shading for the Web
Mar 26
Moebius-style post-processing and other stylized shaders
Jan 23
Shining a light on Caustics with Shaders and React Three Fiber
2023
Oct 31
Real-time dreamy Cloudscapes with Volumetric Raymarching
Sep 12
Painting with Math: A Gentle Study of Raymarching
Jun 06
Building a magical AI-powered semantic search from scratch
Mar 14
Beautiful and mind-bending effects with WebGL Render Targets
Jan 24
Refraction, dispersion, and other shader light effects
2022
Nov 08
The magical world of Particles with React Three Fiber and Shaders
Jul 26
The Study of Shaders with React Three Fiber
May 10
Building a Design System from scratch
Mar 08
Everything about Framer Motion layout animations
Jan 25
Building a Vaporwave scene with Three.js
2021
Nov 02
Cubic Bézier: from math to motion
Sep 28
First steps with GPT-3 for frontend developers
Aug 03
Building the perfect GitHub CI workflow for your frontend team
Jun 29
Migrating to Next.js
Jun 01
Static Tweets with MDX and Next.js
Apr 20
Advanced animation patterns with Framer Motion
Mar 09
Scrollspy demystified
Feb 02
The Power of Composition with CSS Variables
Jan 19
My first failed SwiftUI project
2020
Dec 15
Guide to creating animations that spark joy with Framer Motion
Nov 02
Using Shortcuts and serverless to build a personal Apple Health API
Oct 13
SEO mistakes I've made and how I fixed them
Sep 16
Going native: SwiftUI from the perspective of a React developer
Aug 25
Build your own preview deployment service
Jul 28
The little guide to CI/CD for frontend developers
Jun 26
Immigrating to the US
Jun 23
The physics behind spring animations
Jun 09
Generate screenshots of your code with a serverless function
May 12
How to use Framer Motion with Emotion styled-components
May 05
Data Fetching with NextJS: What I learned
Apr 21
Learning in public
Apr 16
Fixing the dark mode flash issue on server rendered websites
Mar 31
How to fix NPM link duplicate dependencies issues
Mar 10
Running scheduled cross-browser end-to-end tests on Github CI
2019
Nov 19
How I built my first custom ESLint rule
Sep 24
React Lazy: a take on preloading views
Jul 09
Automated UI accessibility testing with Cypress
May 28
Building a GraphQL wrapper for the Docker API
Mar 05
Switching off the lights - Adding dark mode to your React app
Feb 05
Getting started with Typescript on Gatsby
2018
Dec 04
Rebuilding Redux with Hooks and Context
Nov 06
Asynchronous rendering with React
Oct 16
Using Flow generics to type generic React components
Oct 09
How to efficiently type your styled-components with Flow
Jun 19
How I got started with Kubernetes on GKE
May 01
React sub-components Part 3: Whitelisting sub-components with flow
Apr 16
React sub-components Part 2: Using the new Context API
Feb 26
React sub-components
Jan 10
Running Golang tests with Jest

#BlackLivesMatter

Click here to find out how you can help.

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 more.

Newsletter

Get a behind the scenes look at what I'm currently learning, exploring, and creating.

Featured

Real-time dreamy Cloudscapes with Volumetric Raymarching

Refraction, dispersion, and other shader light effects

The Study of Shaders with React Three Fiber

All articles

#BlackLivesMatter

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 more.