Maxime Heckel
blog.maximeheckel.com · Personal blog · on HN since 2020
Maxime Heckel writes about graphics and front-end work, including shaders, dithering, WebGPU, Three.js, and animation math.
What HN saysHN commenters list it among well-designed personal sites, citing its interactive code snippets and maximalist style.
36HN people shared it
9linked it in comments
38stories submitted
981story points
3 months agolast shared
2020people per year2026
Most-shared posts
- 1The Art of Dithering and Retro Shading for the Web (2024)5 people · 157 points · first shared 2024 · 20 comments on HN
- 2Cubic Bézier: From Math to Motion3 people · 45 points · first shared 2021 · 5 comments on HN
- 3Field Guide to TSL and WebGPU3 people · 7 points · first shared 2025 · discussion on HN
- 4Building a Vaporwave Scene with Three.js3 people · 6 points · first shared 2022 · discussion on HN
- 5Real-time dreamy Cloudscapes with Volumetric Raymarching3 people · 2 points · first shared 2023 · discussion on HN
- 6Going native: SwiftUI from the perspective of a React developer3 people · 1 points · first shared 2020 · discussion on HN
- 7SEO mistakes I've made and how I fixed them2 people · 308 points · first shared 2020 · 125 comments on HN
- 8Crafting Painterly Shaders2 people · 248 points · first shared 2024 · 21 comments on HN
- 9Post-Processing Shaders as a Creative Medium2 people · 70 points · first shared 2025 · 3 comments on HN
- 10Painting with Math: A Gentle Study of Raymarching (2023)2 people · 63 points · first shared 2023 · 5 comments on HN
- 11Rendering the Sky, Sunsets, and Planets2 people · 17 points · first shared 2026 · discussion on HN
- 12The Study of Shaders with React Three Fiber2 people · 2 points · first shared 2022 · discussion on HN
- 13Shaping Light – Volumetric Lighting1 people · 40 points · first shared 2025 · 1 comments on HN
- 14Shades of Halftone1 people · 2 points · first shared 2026 · discussion on HN
- 15Moebius-style post-processing and other stylized shaders1 people · 2 points · first shared 2024 · discussion on HN
What HN people wrote when they linked it
kragen · 2025-10-28
The major dithering algorithm that's missing from this list is blue-noise dithering. This is very similar to "ordered dithering"; you can think of ordered dithering as either thresholding the pixel values with a different threshold value on each pixel, following a regular pattern, or as adding a different offset value to each pixel, following a regular pattern, and thresholding the result with a constant threshold. Blue-noise dithering replaces the regular pattern with a random pattern that's been high-pass filtered. This has all the advantages of ordered dithering, in particular avoiding "crawling" patterns during animation, but avoids the repetitive patterns and line artifacts it introduces.
https://nelari.us/post/quick_and_dirty_dithering/ is the best quick introduction to the technique that I've seen. There's a more comprehensive introduction at https://momentsingraphics.de/BlueNoise.html. https://bartwronski.com/2016/10/30/dithering-part-three-real-world-2d-… also demonstrates it, comparing it to other dithering algorithms.
Ulichney introduced blue noise to dithering in 01988 as a refinement of "white-noise dithering", also known as "random dithering", where you just add white noise before thresholding: https://cv.ulichney.com/papers/1988-blue-noise.pdf. Ulichney's paper is also a pretty comprehensive overview of dithering algorithms at the time, and he also makes some interesting observations about high-pass prefiltering ("sharpening", for…
RickS · 2026-06-09
Lesswrong for both sidebars: the heading based TOC on the left, and the margin notes on the right: https://www.lesswrong.com/posts/bJ2haLkcGeLtTWaD5/welcome-to-lesswrong
For interactive / code snippets
Maxime Heckel: https://blog.maximeheckel.com/posts/the-study-of-shaders-with-react-th…
Honorable mentions
Maggie Applebaum https://maggieappleton.com/ai-enlightenment
Marek Chotoborski https://zanlib.dev/blog/number-inputs-in-react/
Line width, sane fonts, avoiding clever shit unless very polished, gets you a long way.
wonger_ · 2026-03-09
Tasteful: https://colly.com/
Artsy: https://anhvn.com/
Simple yet elegant: https://www.lkhrs.com/ and https://arun.is/blog/
Maximalist: https://henry.codes/ and https://garden.bradwoods.io/ and https://blog.maximeheckel.com/
Old-school / indie web: https://ribo.zone/
Text mode / ASCII art: https://adelfaure.net/
Typography: http://davidcole.me/ and https://www.petemillspaugh.com/
I have more. You can keep rolling the dice on https://indieblog.page/random and eventually you'll stumble across some pretty sites. Usually the nicest ones are from frontend / design engineer types of people. EDIT - oh and the sites in the internet phone book! https://internetphonebook.net/ as well as browsing screenshots at https://personalsit.es/
_ache_ · 2025-04-13
I did the same like 2 weeks ago. In Rust. ^^
I'm still trying to improve it a little. https://git.ache.one/dither/tree/?h=%f0%9f%aa%b5
I didn't published it because it's hard to actually put dithered images on the web, you can't resize a dithered image. So on the web, you have to dither it on the fly. It's why, in the article, there is some artifacts in the images. I still need to learn about dithering.
Reference: https://sheep.horse/2022/12/pixel_accurate_atkinson_dithering_for_imag…
Cool links about dithering: - https://beyondloom.com/blog/dither.html - https://blog.maximeheckel.com/posts/the-art-of-dithering-and-retro-sha…
jmiskovic · 2024-12-02
It is a common pattern in rendering. You achieve your desired results, but it is nowhere near realtime. You try to lower the sampling resolution which helps a lot with speed, but you end up with ugly visual artifacts. Introducing the blue noise in the right place helps with attenuating these sampling artifacts. Only usually you would sample the premade "blue noise" texture rather than using the shader to compute it.
This article does a good job of explaining how it helps in raymarching:
https://blog.maximeheckel.com/posts/real-time-cloudscapes-with-volumet…
dtjb · 2022-01-27
Unrelated but similar, https://blog.maximeheckel.com/posts/cubic-bezier-from-math-to-motion/.
Includes hands-on examples to help understand the math behind bezier curves.
nyanpasu64 · 2021-03-03
I don't see what your child comment has to do with my parent comment.
- You brought up "OnSelect" and binding "this" in JS, but they don't seem related to picking one way to propagate state through a GUI (either "push", "pull" (signals and slots), pseudo-immediate-mode and state diffing (React), FRP, property binding, ReactiveX, or something else).
- https://blog.maximeheckel.com/posts/swiftui-as-react-developer does discuss state, but you brought it up in the context of app layout. App layout is another area with multiple choices, but it's more linked to visual design, and less to functional correctness (which is vulnerable to state-propagation bugs which I was talking about).
- Automated code updates, and test generation, are not related either.
lstamour · 2021-03-03
Well, the animation under "Basic usage" at https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/functions… highlights how the bar along the top changes based on what which button or control is selected. In turn, you can pick properties or events by name on the left (like "OnSelect" for when the button is clicked) and then type in a function that should run on the right, such as Notify(). You might think OnSelect is an odd name for an "OnClick" but it makes sense when you look at how many different types of controls could conceivably use "OnSelect" as a "primary action" of a control: https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/controls/…
By comparison, with React or ReactiveX, you can do very similar things, but by default, complications creep in because of how the language works. In JavaScript, for instance, you have to worry about binding "this" for example: https://reactjs.org/docs/faq-functions.html In ReactiveX, you have to think about how you're going to structure your code, and maybe even occasionally draw flow graphs.
I would also compare this to SwiftUI or Flutter, but more from the app layout perspective, where both platforms are much more mature than when they started. Here's an example comparing React and SwiftUI: https://blog.maximeheckel.com/posts/swiftui-as-react-developer One could imagine a meta-article that compares Power-Fx to SwiftUI to Flutter, etc. Actually ... I went hunting for how state works in…