Maxime Heckel's Blog

A deep dive into detecting, extracting, and stylizing motion with WebGPU and TSL, covering motion masking, blob tracking, optical flow, and velocity-based motion blur.

This article explores how to render realistic skies and atmospheres in real time in the browser with shaders, from simple sky domes, to entire planets using shaders, raymarching, Rayleigh and Mie scattering, and ozone absorption.

An interactive deep dive into building halftone shaders in GLSL, covering everything from classic dot patterns and CMYK color separation to Moiré interference, gooey effects, and animated displacement.

A comprehensive guide to building 3D web experiences with TSL and WebGPU, covering shader development, compute shader applications, and practical examples for particle systems and post-processing effects.

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.

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.

A detailed compilation of my post-processing and custom stylized shader experiments — from pixel patterns and optical illusions to dynamic, animated effects.

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.

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.

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.

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.

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.

A compilation of my Raymarching and Signed Distance Field learnings and work.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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

Take ownership of your Apple Watch health data with a only few lines of code.

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

Approaching native iOS development with a React developer mindset

Do you want to increase your team's development velocity and collaboration?

How to ship your app faster, more reliably and make your team unstoppable with good testing practices and automation.

US immigration explained for American citizens by an immigrant.

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

Programmatic Carbon images generation from a simple API

Framer Motion x Emotion → animated styled-components

GetServerSideProps vs GetStaticProps vs GetStaticPaths.

Here's an up to date list of what I'm currently learning and what I plan to learn.

Bringing a proper solution to dark mode flashing without an ugly hack.

Dealing with dependencies when developing a package and using it through npm link.

Github actions + Cypress + cross-browser testing = 🚀

A guide to get started with AST (Abstract Syntax Tree) and custom built ESLint plugins

How to add preloading to your route based code split apps

Make sure your UI projects follow accessibility standards before deploying to production

From REST calls to powerful queries

In this post, I’m going to share with you how I built dark mode support for a sample React app with Emotion themes.