41554 blogs · [ { "id": "01a0874f-84ed-7360-aab6-0b11a9c229d0", "title": "Shading Motion", "url": "https://blog.maximeheckel.com/posts/shading-motion", "published_at": "2026-08-18T08:00:00+00:00" }, { "id": "01a0874f-84ed-7360-aab6-0b11aa2773f7", "title": "On Rendering the Sky, Sunsets, and Planets", "url": "https://blog.maximeheckel.com/posts/on-rendering-the-sky-sunsets-and-planets", "published_at": "2026-05-12T08:00:00+00:00" }, { "id": "01a0e363-307a-72b0-9b07-8f8332039956", "title": "Shades of halftone", "url": "https://blog.maximeheckel.com/posts/shades-of-halftone/", "published_at": "2026-03-04T23:00:00+00:00" }, { "id": "01a0874f-84ed-7360-aab6-0b11aaa62fd0", "title": "Shades of Halftone", "url": "https://blog.maximeheckel.com/posts/shades-of-halftone", "published_at": "2026-02-10T08:00:00+00:00" }, { "id": "01a0874f-84ed-7360-aab6-0b11aaa7f819", "title": "Field Guide to TSL and WebGPU", "url": "https://blog.maximeheckel.com/posts/field-guide-to-tsl-and-webgpu", "published_at": "2025-10-14T08:00:00+00:00" }, { "id": "01a0de09-dc2d-721d-a016-2d4b024d2457", "title": "The Art of Dithering and Retro Shading for the Web", "url": "https://blog.maximeheckel.com/posts/the-art-of-dithering-and-retro-shading-web/", "published_at": "2025-06-14T00:00:00+00:00" }, { "id": "01a0874f-84ed-7360-aab6-0b11ab6f9932", "title": "On Shaping Light", "url": "https://blog.maximeheckel.com/posts/shaping-light-volumetric-lighting-with-post-processing-and-raymarching", "published_at": "2025-06-10T08:00:00+00:00" }, { "id": "01a0874f-84ed-7360-aab6-0b11abe9182f", "title": "Speaking at Figma Config 2025", "url": "https://blog.maximeheckel.com/posts/config-2025", "published_at": "2025-05-08T08:00:00+00:00" }, { "id": "01a0874f-84ed-7360-aab6-0b11abec3836", "title": "Post-Processing Shaders as a Creative Medium", "url": "https://blog.maximeheckel.com/posts/post-processing-as-a-creative-medium", "published_at": "2025-02-04T08:00:00+00:00" }, { "id": "01a0874f-84ed-7360-aab6-0b11ac46c0cb", "title": "On Crafting Painterly Shaders", "url": "https://blog.maximeheckel.com/posts/on-crafting-painterly-shaders", "published_at": "2024-10-29T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f264fbb3bd3", "title": "The Art of Dithering and Retro Shading for the Web", "url": "https://blog.maximeheckel.com/posts/the-art-of-dithering-and-retro-shading-web", "published_at": "2024-08-06T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f26503d718f", "title": "Moebius-style post-processing and other stylized shaders", "url": "https://blog.maximeheckel.com/posts/moebius-style-post-processing", "published_at": "2024-03-26T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f2650af8d51", "title": "Shining a light on Caustics with Shaders and React Three Fiber", "url": "https://blog.maximeheckel.com/posts/caustics-in-webgl", "published_at": "2024-01-23T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f26515928af", "title": "Real-time dreamy Cloudscapes with Volumetric Raymarching", "url": "https://blog.maximeheckel.com/posts/real-time-cloudscapes-with-volumetric-raymarching", "published_at": "2023-10-31T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f26523dc0ae", "title": "Painting with Math: A Gentle Study of Raymarching", "url": "https://blog.maximeheckel.com/posts/painting-with-math-a-gentle-study-of-raymarching", "published_at": "2023-09-12T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f265268cf45", "title": "Building a magical AI-powered semantic search from scratch", "url": "https://blog.maximeheckel.com/posts/building-magical-ai-powered-semantic-search", "published_at": "2023-06-06T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f265362567d", "title": "Beautiful and mind-bending effects with WebGL Render Targets", "url": "https://blog.maximeheckel.com/posts/beautiful-and-mind-bending-effects-with-webgl-render-targets", "published_at": "2023-03-14T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f2653e9d6a7", "title": "Refraction, dispersion, and other shader light effects", "url": "https://blog.maximeheckel.com/posts/refraction-dispersion-and-other-shader-light-effects", "published_at": "2023-01-24T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f265483a77c", "title": "The magical world of Particles with React Three Fiber and Shaders", "url": "https://blog.maximeheckel.com/posts/the-magical-world-of-particles-with-react-three-fiber-and-shaders", "published_at": "2022-11-08T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f2655614d45", "title": "The Study of Shaders with React Three Fiber", "url": "https://blog.maximeheckel.com/posts/the-study-of-shaders-with-react-three-fiber", "published_at": "2022-07-26T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f2655bf8bb1", "title": "Building a Design System from scratch", "url": "https://blog.maximeheckel.com/posts/building-a-design-system-from-scratch", "published_at": "2022-05-10T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f2656637c09", "title": "Everything about Framer Motion layout animations", "url": "https://blog.maximeheckel.com/posts/framer-motion-layout-animations", "published_at": "2022-03-08T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f26569d1f43", "title": "Building a Vaporwave scene with Three.js", "url": "https://blog.maximeheckel.com/posts/vaporwave-3d-scene-with-threejs", "published_at": "2022-01-25T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f26570ab9f3", "title": "Cubic Bézier: from math to motion", "url": "https://blog.maximeheckel.com/posts/cubic-bezier-from-math-to-motion", "published_at": "2021-11-02T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f2657e0163e", "title": "First steps with GPT-3 for frontend developers", "url": "https://blog.maximeheckel.com/posts/first-steps-with-gpt-3-and-beyond", "published_at": "2021-09-28T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f2658cb9d0c", "title": "Building the perfect GitHub CI workflow for your frontend team", "url": "https://blog.maximeheckel.com/posts/building-perfect-github-action-frontend-teams", "published_at": "2021-08-03T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f26596fd790", "title": "Migrating to Next.js", "url": "https://blog.maximeheckel.com/posts/migrating-to-nextjs", "published_at": "2021-06-29T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f265a0c02d0", "title": "Static Tweets with MDX and Next.js", "url": "https://blog.maximeheckel.com/posts/static-tweets-with-mdx-nextjs", "published_at": "2021-06-01T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f265ad25ce8", "title": "Advanced animation patterns with Framer Motion", "url": "https://blog.maximeheckel.com/posts/advanced-animation-patterns-with-framer-motion", "published_at": "2021-04-20T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f265aeed730", "title": "Scrollspy demystified", "url": "https://blog.maximeheckel.com/posts/scrollspy-demystified", "published_at": "2021-03-09T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f265b59555d", "title": "The Power of Composition with CSS Variables", "url": "https://blog.maximeheckel.com/posts/the-power-of-composition-with-css-variables", "published_at": "2021-02-02T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f265c2ec6ac", "title": "My first failed SwiftUI project", "url": "https://blog.maximeheckel.com/posts/first-failed-swiftui-project", "published_at": "2021-01-19T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f265cf9b1ee", "title": "Guide to creating animations that spark joy with Framer Motion", "url": "https://blog.maximeheckel.com/posts/guide-animations-spark-joy-framer-motion", "published_at": "2020-12-15T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f265dc5de0f", "title": "Using Shortcuts and serverless to build a personal Apple Health API", "url": "https://blog.maximeheckel.com/posts/build-personal-health-api-shortcuts-serverless", "published_at": "2020-11-02T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f265ec1a02d", "title": "SEO mistakes I've made and how I fixed them", "url": "https://blog.maximeheckel.com/posts/seo-mistakes-i-have-made-and-how-i-fixed-them", "published_at": "2020-10-13T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f265efc35e7", "title": "Going native: SwiftUI from the perspective of a React developer", "url": "https://blog.maximeheckel.com/posts/swiftui-as-react-developer", "published_at": "2020-09-16T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f265f866602", "title": "Build your own preview deployment service", "url": "https://blog.maximeheckel.com/posts/build-serverless-preview-deployment", "published_at": "2020-08-25T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f265fa696f5", "title": "The little guide to CI/CD for frontend developers", "url": "https://blog.maximeheckel.com/posts/guide-to-cicd-for-frontend-developers", "published_at": "2020-07-28T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f265fc6d09a", "title": "Immigrating to the US", "url": "https://blog.maximeheckel.com/posts/immigrating-to-the-us-my-path", "published_at": "2020-06-26T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f26601997a9", "title": "The physics behind spring animations", "url": "https://blog.maximeheckel.com/posts/the-physics-behind-spring-animations", "published_at": "2020-06-23T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f2660813acd", "title": "Generate screenshots of your code with a serverless function", "url": "https://blog.maximeheckel.com/posts/creating-beautiful-screenshots-source-code-with-serverless-function", "published_at": "2020-06-09T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f26612ce6dc", "title": "How to use Framer Motion with Emotion styled-components", "url": "https://blog.maximeheckel.com/posts/framer-motion-emotion", "published_at": "2020-05-12T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f2661697cfa", "title": "Data Fetching with NextJS: What I learned", "url": "https://blog.maximeheckel.com/posts/data-fetching-with-next-js", "published_at": "2020-05-05T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f26618bbdf8", "title": "Learning in public", "url": "https://blog.maximeheckel.com/posts/learning-in-public", "published_at": "2020-04-21T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f2661a1d36e", "title": "Fixing the dark mode flash issue on server rendered websites", "url": "https://blog.maximeheckel.com/posts/switching-off-the-lights-part-2-fixing-dark-mode-flashing-on-servered-rendered-website", "published_at": "2020-04-16T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f2661b0424c", "title": "How to fix NPM link duplicate dependencies issues", "url": "https://blog.maximeheckel.com/posts/duplicate-dependencies-npm-link", "published_at": "2020-03-31T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f2662653efc", "title": "Running scheduled cross-browser end-to-end tests on Github CI", "url": "https://blog.maximeheckel.com/posts/running-cross-browser-cypress-github-ci", "published_at": "2020-03-10T08:00:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f2662c050a4", "title": "How I built my first custom ESLint rule", "url": "https://blog.maximeheckel.com/posts/how-to-build-first-eslint-rule", "published_at": "2019-11-19T14:01:01+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f26636a5730", "title": "React Lazy: a take on preloading views", "url": "https://blog.maximeheckel.com/posts/preloading-views-with-react", "published_at": "2019-09-24T14:01:01+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f26640a8eae", "title": "Automated UI accessibility testing with Cypress", "url": "https://blog.maximeheckel.com/posts/automated-ui-accessibility-testing-with-cypress-cc2e38231241", "published_at": "2019-07-09T14:01:01+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f26644dfccf", "title": "Building a GraphQL wrapper for the Docker API", "url": "https://blog.maximeheckel.com/posts/building-a-graphql-wrapper-for-the-docker-api-2109f2b9c202", "published_at": "2019-05-28T14:17:39+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f26647baaf4", "title": "Switching off the lights - Adding dark mode to your React app", "url": "https://blog.maximeheckel.com/posts/switching-off-the-lights-adding-dark-mode-to-your-react-app-with-context-and-hooks-f41da6e07269", "published_at": "2019-03-05T16:31:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f2665794cbb", "title": "Getting started with Typescript on Gatsby", "url": "https://blog.maximeheckel.com/posts/getting-started-with-typescript-on-gatsby-8544b47c1d27", "published_at": "2019-02-05T15:01:00+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f2666218be6", "title": "Rebuilding Redux with Hooks and Context", "url": "https://blog.maximeheckel.com/posts/rebuilding-redux-with-hooks-and-context-e16b59faf51c", "published_at": "2018-12-04T16:31:51+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f26668fd55d", "title": "Asynchronous rendering with React", "url": "https://blog.maximeheckel.com/posts/asynchronous-rendering-with-react-c323cda68f41", "published_at": "2018-11-06T16:52:30+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f2666fea78c", "title": "Using Flow generics to type generic React components", "url": "https://blog.maximeheckel.com/posts/using-flow-generics-to-type-generic-react-components-22dd642634d8", "published_at": "2018-10-16T16:07:39+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f2667d37400", "title": "How to efficiently type your styled-components with Flow", "url": "https://blog.maximeheckel.com/posts/https-medium-com-maximeheckel-how-to-efficiently-type-your-styled-components-with-flow-f43930a0dd2b", "published_at": "2018-10-09T15:57:18+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f266891f893", "title": "How I got started with Kubernetes on GKE", "url": "https://blog.maximeheckel.com/posts/how-i-got-started-with-kubernetes-on-gke-5f829eca98bc", "published_at": "2018-06-19T17:33:16+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f2668e1342e", "title": "React sub-components Part 3: Whitelisting sub-components with flow", "url": "https://blog.maximeheckel.com/posts/react-sub-components-part-3-whitelisting-sub-components-with-flow-b04f9bcf80c2", "published_at": "2018-05-01T16:17:42+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f26698466fa", "title": "React sub-components Part 2: Using the new Context API", "url": "https://blog.maximeheckel.com/posts/react-sub-components-part-2-using-the-new-context-api-6f1c089acfe4", "published_at": "2018-04-16T17:08:40+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f266a2406e5", "title": "React sub-components", "url": "https://blog.maximeheckel.com/posts/react-sub-components-513f6679abed", "published_at": "2018-02-26T21:02:23+00:00" }, { "id": "01a0874f-84ee-735b-bb98-9f266ac7550d", "title": "Running Golang tests with Jest", "url": "https://blog.maximeheckel.com/posts/running-golang-tests-with-jest-b5d8f3d43a7", "published_at": "2018-01-10T17:00:17+00:00" } ] posts Claim your blog

Back to blog.maximeheckel.com

Blog · corpus.blog/blogs/blog.maximeheckel.com/posts

blog.maximeheckel.com

blog.maximeheckel.com

2026

Shading Motion original ↗

18 Aug 2026

On Rendering the Sky, Sunsets, and Planets original ↗

12 May 2026

Shades of halftone original ↗

4 Mar 2026

Shades of Halftone original ↗

10 Feb 2026

2025

Field Guide to TSL and WebGPU original ↗

14 Oct 2025

The Art of Dithering and Retro Shading for the Web original ↗

14 Jun 2025

On Shaping Light original ↗

10 Jun 2025

Speaking at Figma Config 2025 original ↗

8 May 2025

Post-Processing Shaders as a Creative Medium original ↗

4 Feb 2025

2024

On Crafting Painterly Shaders original ↗

29 Oct 2024

The Art of Dithering and Retro Shading for the Web original ↗

6 Aug 2024

Moebius-style post-processing and other stylized shaders original ↗

26 Mar 2024

Shining a light on Caustics with Shaders and React Three Fiber original ↗

23 Jan 2024

2023

Real-time dreamy Cloudscapes with Volumetric Raymarching original ↗

31 Oct 2023

Painting with Math: A Gentle Study of Raymarching original ↗

12 Sept 2023

Building a magical AI-powered semantic search from scratch original ↗

6 Jun 2023

Beautiful and mind-bending effects with WebGL Render Targets original ↗

14 Mar 2023

Refraction, dispersion, and other shader light effects original ↗

24 Jan 2023

2022

The magical world of Particles with React Three Fiber and Shaders original ↗

8 Nov 2022

The Study of Shaders with React Three Fiber original ↗

26 Jul 2022

Building a Design System from scratch original ↗

10 May 2022

Everything about Framer Motion layout animations original ↗

8 Mar 2022

Building a Vaporwave scene with Three.js original ↗

25 Jan 2022

2021

Cubic Bézier: from math to motion original ↗

2 Nov 2021

First steps with GPT-3 for frontend developers original ↗

28 Sept 2021

Building the perfect GitHub CI workflow for your frontend team original ↗

3 Aug 2021

Migrating to Next.js original ↗

29 Jun 2021

Static Tweets with MDX and Next.js original ↗

1 Jun 2021

Advanced animation patterns with Framer Motion original ↗

20 Apr 2021

Scrollspy demystified original ↗

9 Mar 2021

The Power of Composition with CSS Variables original ↗

2 Feb 2021

My first failed SwiftUI project original ↗

19 Jan 2021

2020

Guide to creating animations that spark joy with Framer Motion original ↗

15 Dec 2020

Using Shortcuts and serverless to build a personal Apple Health API original ↗

2 Nov 2020

SEO mistakes I've made and how I fixed them original ↗

13 Oct 2020

Going native: SwiftUI from the perspective of a React developer original ↗

16 Sept 2020

Build your own preview deployment service original ↗

25 Aug 2020

The little guide to CI/CD for frontend developers original ↗

28 Jul 2020

Immigrating to the US original ↗

26 Jun 2020

The physics behind spring animations original ↗

23 Jun 2020

Generate screenshots of your code with a serverless function original ↗

9 Jun 2020

How to use Framer Motion with Emotion styled-components original ↗

12 May 2020

Data Fetching with NextJS: What I learned original ↗

5 May 2020

Learning in public original ↗

21 Apr 2020

Fixing the dark mode flash issue on server rendered websites original ↗

16 Apr 2020

How to fix NPM link duplicate dependencies issues original ↗

31 Mar 2020

Running scheduled cross-browser end-to-end tests on Github CI original ↗

10 Mar 2020

2019

How I built my first custom ESLint rule original ↗

19 Nov 2019

React Lazy: a take on preloading views original ↗

24 Sept 2019

Automated UI accessibility testing with Cypress original ↗

9 Jul 2019

Building a GraphQL wrapper for the Docker API original ↗

28 May 2019

Switching off the lights - Adding dark mode to your React app original ↗

5 Mar 2019

Getting started with Typescript on Gatsby original ↗

5 Feb 2019

2018

Rebuilding Redux with Hooks and Context original ↗

4 Dec 2018

Asynchronous rendering with React original ↗

6 Nov 2018

Using Flow generics to type generic React components original ↗

16 Oct 2018

How to efficiently type your styled-components with Flow original ↗

9 Oct 2018

How I got started with Kubernetes on GKE original ↗

19 Jun 2018

React sub-components Part 3: Whitelisting sub-components with flow original ↗

1 May 2018

React sub-components Part 2: Using the new Context API original ↗

16 Apr 2018

React sub-components original ↗

26 Feb 2018

Running Golang tests with Jest original ↗

10 Jan 2018