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

  1. 1
    The Art of Dithering and Retro Shading for the Web (2024)
    5 people · 157 points · first shared 2024 · 20 comments on HN
  2. 2
    Cubic Bézier: From Math to Motion
    3 people · 45 points · first shared 2021 · 5 comments on HN
  3. 3
    Field Guide to TSL and WebGPU
    3 people · 7 points · first shared 2025 · discussion on HN
  4. 4
    Building a Vaporwave Scene with Three.js
    3 people · 6 points · first shared 2022 · discussion on HN
  5. 5
    Real-time dreamy Cloudscapes with Volumetric Raymarching
    3 people · 2 points · first shared 2023 · discussion on HN
  6. 6
  7. 7
    SEO mistakes I've made and how I fixed them
    2 people · 308 points · first shared 2020 · 125 comments on HN
  8. 8
    Crafting Painterly Shaders
    2 people · 248 points · first shared 2024 · 21 comments on HN
  9. 9
    Post-Processing Shaders as a Creative Medium
    2 people · 70 points · first shared 2025 · 3 comments on HN
  10. 10
    Painting with Math: A Gentle Study of Raymarching (2023)
    2 people · 63 points · first shared 2023 · 5 comments on HN
  11. 11
    Rendering the Sky, Sunsets, and Planets
    2 people · 17 points · first shared 2026 · discussion on HN
  12. 12
    The Study of Shaders with React Three Fiber
    2 people · 2 points · first shared 2022 · discussion on HN
  13. 13
    Shaping Light – Volumetric Lighting
    1 people · 40 points · first shared 2025 · 1 comments on HN
  14. 14
    Shades of Halftone
    1 people · 2 points · first shared 2026 · discussion on HN
  15. 15
    Moebius-style post-processing and other stylized shaders
    1 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…

Keyboard shortcuts

/Search
j kNext / previous blog
EnterOpen selected blog
vVisit the blog site
fFollow / unfollow
lSwitch grid / list view
dSwitch dark mode
g hHome
g pTop posts
g tTopics
g fFollowing
g lLiked
g yHistory
g qFAQ
EscBack / close