I reverse engineered Apple's thermal logo effect. It’s a Three.js shader that combines 4 inputs:
- A video texture heat map
- A mouse-driven heat map
- An Apple logo mask
- A thermal-style color palette
Explanation below https://t.co/uCLdLlH5tn
The mouse heat map uses ping-pong rendering. Two 256x256 textures swap roles each frame. One holds current heat data; the other gets written to. This prevents feedback loops and creates smooth heat trails that build up and decay over time.
Heat accumulation works like this:
- Mouse movement adds heat to pixels under the cursor
- Each frame multiplies all heat values by decay rate (0.95 = lose 5% per frame)
- New heat gets added on top of existing heat
- Values < 0.001 are clamped to 0 https://t.co/s3hUADSmlX
The video texture [1] provides base temperature, so even when your mouse is stationary, there’s still movement. Bright pixels = hot zones, dark pixels = cold zones.
And the alpha mask texture [2] clamps heat within the logo. The mouse texture adds interactive heat on top. https://t.co/ZYAINSnJcG
In pseudocode, the final pixel color is something like `ColorGradient(max(VideoHeat, MouseHeat)) * LogoMask`
The gradient uses these seven colors that run from cool to hot. https://t.co/q6RaDo9Weo
Code and live demo:
https://t.co/aW0Jy1Esij
https://t.co/Gcch8wyv0t
i’m open to product design/design engineering full-time roles :) nyc or remote, DMs open
