(05) — Writing05 / 06
Notes
How this site was built
Write-ups of the parts that took the most thought: WebGL type, page transitions and performance. What worked, with the code.
- Notes so far
- 3
- Minutes to read them all
- 9
- Topics
- 7
- Code samples
- 6
Halftone type in WebGL, one draw call per headline
How the dotted display type on this site works: sampling the DOM’s own glyphs, blurring the coverage into dot sizes, and animating thousands of points in a single vertex shader.WebGL · Typography · PerformanceA shared-element page transition in the Next.js App Router
Growing a project cover into the next page without the View Transitions API: measuring the frame, reusing the cached image, and handing control back once the route has changed.Next.js · GSAP · MotionCutting Total Blocking Time from 200–500ms to 60–80ms
What made a WebGL-heavy portfolio feel slow to respond on load, and the changes that brought blocking time and layout shift back under budget without removing the effects.Performance · Next.js · Core Web Vitals