---
id: "2113199807112355981"
source: https://x.com/akella/status/2113199807112355981
author: "akella (@akella)"
media: "video, 1920x1080, 1655.2s"
model: claude-opus-5-5
generated: 2026-10-22
---
# Animated Shader Explainer Diagrams

## Summary
A long-form explainer that walks through how a real-time water and lighting shader works, one chapter at a time, using calm animated diagrams on a near-black canvas: rays from a camera, sphere tracing, grid cells and a pipeline of boxes, each with a plain-language caption. It is a strong model for teaching technical ideas with motion and very few colors.

## Style
- Theme: dark
- Mood: clear, patient, technical, editorial
- Tags: explainer, diagrams, ray-tracing, shaders, educational, code-annotations, chapters
- Category: Motion

## Palette
| Role | Hex |
|---|---|
| Canvas | #121318 |
| Panel | #26272C |
| Rule | #2F373D |
| Caption grey | #A4A6AE |
| Ray yellow | #F2C14E |
| Cyan outline | #4FC3E8 |
| Coral | #E86A5A |
| Lime | #9BC53D |
| Violet | #9B7BE0 |

## Typography
- Chapter titles: small grey sans at the top left with a number (for example "9 Shadows made of rays"). Inter (400).
- Captions: centred, two or three lines, light grey sans near the bottom. Inter (400).
- Diagram labels: tiny lowercase sans; coordinates in a serif. Inter (400) and Source Serif (400).
- Code: monospaced in yellow. JetBrains Mono (500).

## Layout
- 16:9 frame (1920x1080); every chapter uses the same template: title top left, diagram in the middle 60%, caption bottom centre.
- Lots of empty space; diagrams use thin 2px strokes and a single baseline.

## Elements
- Camera icon (white triangle) with a ray line and points along it.
- Semicircles for water drops sitting on a flat green baseline.
- Grids of rounded cells tinted red and blue with (x,y) labels, and an arrow to a merged grid.
- Pipeline boxes with coloured outlines (violet, cyan, faded teal) linked by small arrows.
- Highlighted warning labels in coral.

## Motion
- Each chapter fades in its diagram, then builds it step by step: lines draw on (about 600ms), points slide along rays, cells recolour.
- Captions change in sync with the build, cross-fading over about 300ms.
- Chapters are separated by a short fade through the background colour.

## Rebuild it
1. Make a slide component with fixed slots: title (top left), stage (centre), caption (bottom centre), on `#121318`.
2. Draw diagrams as SVG with `stroke-width: 2` and animate `stroke-dashoffset` for line draw-ons.
3. Sequence steps with Motion timelines (`animate` with delays) or a scroll-driven stepper; tie each step to a caption string.
4. Use one accent per idea (yellow for rays, cyan for surfaces, coral for failure cases) and keep everything else grey.
5. Show code snippets in JetBrains Mono, yellow, centred under the figure.

## Generation prompt
A calm technical explainer animation on a near-black background: thin-line diagrams of a camera casting a yellow ray toward cyan semicircle droplets on a green baseline, grids of red and blue cells with coordinate labels, and pipeline boxes outlined in violet and cyan, each scene with a small numbered chapter title and a centred grey caption; minimal, clear, educational, smooth line-drawing animation.