Maxime Heckel
-
On Shaping Light
A deep dive into Volumetric Lighting implemented via Post-Processing leveraging a custom shader with raymarching to create beautiful light and atmospheric effect for your React Three Fiber and Three.js scenes.
Published
-
Speaking at Figma Config 2025
An overview of the talk I had the chance to give the Figma Config, sharing my passion and learning journey around shaders and real-time 3D on the web.
Published
-
Post-Processing Shaders as a Creative Medium
A detailed compilation of my post-processing and custom stylized shader experiments — from pixel patterns and optical illusions to dynamic, animated effects.
Published
-
On Crafting Painterly Shaders
A detailed essay on my research and process of building a shader to mimic paint, watercolor, and aquarelle by exploring various implementations of the Kuwahara image smoothing filter.
Published
-
The Art of Dithering and Retro Shading for the Web
A detailed walkthrough of the inner workings of dithering and other shading techniques to give a retro look and feel to your WebGL and React Three Fiber work.
Published
-
Moebius-style post-processing and other stylized shaders
A detailed essay on the process of building a post-processing stylized shader reproducing the style of legendary artist Jean Giraud a.k.a Moebius for your React Three Fiber projects. In it, I detail the process of drawing outlines with a Sobel Filter as well as custom shadow and lighting patterns to…
Published
-
Shining a light on Caustics with Shaders and React Three Fiber
A step-by-step guide on how to build a caustic light effect for your React Three Fiber project using shaders, render targets, normal maps, and custom materials.
Published
-
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…
Published
-
Painting with Math: A Gentle Study of Raymarching
A compilation of my Raymarching and Signed Distance Field learnings and work. In it, I teach you how to leverage those techniques along with lighting models, smoothmin, soft shadows, and some math to create beautiful 3D raymarched scenes ranging from abstract shapes to infinite realistic-looking landscapes…
Published
-
Building a magical AI-powered semantic search from scratch
An end-to-end walkthrough on how to build a semantic search from your own MDX or Markdown based content using Postgres vector similarity search and OpenAI's text embeddings and chat completion APIs.
Published
-
Beautiful and mind-bending effects with WebGL Render Targets
A deep dive into WebGL Render Targets and how to leverage their capabilities in combination with the render loop to create scenes with post-processing effects, transition, and many types of optical illusions to trick the viewer's eyes.
Published
-
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.
Published
-
The magical world of Particles with React Three Fiber and Shaders
An interactive introduction to Particles with React Three Fiber and Shaders where you'll learn anything going from attributes, buffer geometries, and more advanced techniques like Frame Buffer Object through 8 unique 3D scenes.
Published
-
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.
Published
-
Building a Design System from scratch
A deep dive into my experience building my own design system that documents my process of defining tokens, creating efficient components, and shipping them as a package.
Published
-
Everything about Framer Motion layout animations
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.
Published
-
Building a Vaporwave scene with Three.js
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, animations, and post-processing effects.
Published
-
Cubic Bézier: from math to motion
A deep dive into the math behind Bézier curves, from simple linear interpolations to Cubic Bézier and how they are used to describe motion. This article introduces the concepts underneath cubic-bezier and easing timing functions that are used in CSS and Framer Motion transitions through easy-to-understand…
Published
-
First steps with GPT-3 for frontend developers
A beginners guide to OpenAI's API that eases frontend developers into the world of GPT-3 and gives all the tools needed to start building AI-powered Next.js apps.
Published
-
Building the perfect GitHub CI workflow for your frontend team
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.
Published
-
Migrating to Next.js
Some thoughts on my experience using Gatsby for my blog and migrating it to Next.js, and why this was the right call for me going forward.
Published
-
Static Tweets with MDX and Next.js
A solution to remove sluggish Twitter embed iframes and load the tweets in your blog posts at the speed of light.
Published
-
Advanced animation patterns with Framer Motion
A deep dive into Framer Motion's propagation, exit transitions and layout animation patterns through curated examples and interactive playgrounds.
Published
-
Scrollspy demystified
A deep dive into how the inner workings of a Scrollspy, Intersection Observers, and how to integrate it with Markdown-based static sites without the need of third party libraries.
Published
-
The Power of Composition with CSS Variables
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.
Published
-
My first failed SwiftUI project
A reflection on my experience building my first SwiftUI app, what I learned, the challenges I faced, and the reasons that made me not release it.
Published
-
Guide to creating animations that spark joy with Framer Motion
An interactive guide introducing everything I've learned about Framer Motion through fun examples and little case studies of animations I built.
Published
-
Using Shortcuts and serverless to build a personal Apple Health API
Take ownership of your Apple Watch health data with a only few lines of code.
Published
-
SEO mistakes I've made and how I fixed them
A look back at what I learned fixing my terrible SEO mistakes on my Gatsby websites
Published
-
Going native: SwiftUI from the perspective of a React developer
Approaching native iOS development with a React developer mindset
Published
-
Build your own preview deployment service
Do you want to increase your team's development velocity and collaboration? Preview Deployments are one of the key pieces for that, and this post details how to implement your own serverless deployment service based on Google Cloud Run.
Published
-
The little guide to CI/CD for frontend developers
How to ship your app faster, more reliably and make your team unstoppable with good testing practices and automation.
Published
-
Immigrating to the US
US immigration explained for American citizens by an immigrant.
Published
-
The physics behind spring animations
A deep dive into the inner workings of spring animations in Framer Motion.
Published
-
Generate screenshots of your code with a serverless function
Programmatic Carbon images generation from a simple API
Published
-
How to use Framer Motion with Emotion styled-components
Framer Motion x Emotion → animated styled-components
Published
-
Data Fetching with NextJS: What I learned
GetServerSideProps vs GetStaticProps vs GetStaticPaths.
Published
-
Learning in public
Here's an up to date list of what I'm currently learning and what I plan to learn.
Published
-
Fixing the dark mode flash issue on server rendered websites
Bringing a proper solution to dark mode flashing without an ugly hack.
Published
-
How to fix NPM link duplicate dependencies issues
Dealing with dependencies when developing a package and using it through npm link.
Published
-
Running scheduled cross-browser end-to-end tests on Github CI
Github actions + Cypress + cross-browser testing = 🚀
Published
-
How I built my first custom ESLint rule
A guide to get started with AST (Abstract Syntax Tree) and custom built ESLint plugins
Published
-
React Lazy: a take on preloading views
How to add preloading to your route based code split apps
Published
-
Automated UI accessibility testing with Cypress
Make sure your UI projects follow accessibility standards before deploying to production
Published
-
Building a GraphQL wrapper for the Docker API
From REST calls to powerful queries
Published
-
Switching off the lights - Adding dark mode to your React app
In this post, I’m going to share with you how I built dark mode support for a sample React app with Emotion themes.
Published
-
Getting started with Typescript on Gatsby
A step by step guide to get Typescript, tslint and Prettier working on any existing Gatsby project.
Published
-
Rebuilding Redux with Hooks and Context
A simple global state management package based on React constructs
Published
-
Asynchronous rendering with React
How the new React Suspense API might reshape the way we build components
Published
-
Using Flow generics to type generic React components
How Flow generics help typing complex multi-purpose components
Published
-
How to efficiently type your styled-components with Flow
Adding Flow on top of styled components to avoid misusages before they hit production, and make developers’ and designers’ life easier.
Published
-
How I got started with Kubernetes on GKE
How I deployed, published, scaled and setup SSL certificates for my personal projects
Published
-
React sub-components Part 3: Whitelisting sub-components with flow
Adding more control to the sub-component pattern with Flow types
Published
-
React sub-components Part 2: Using the new Context API
Further simplifying the sub-component pattern using contexts to make flexible, easily testable and reusable React components
Published
-
React sub-components
Making flexible, easily testable and reusable views in React without ending in “markup hell”
Published
-
Running Golang tests with Jest
How to use the Jest platform to run Golang test
Published
-
No title