K–INSP–005 · Inspiration
Cursor Section Index Dot
A sticky page index whose single accent mark springs diagonally to the end of the current section label.
View studyKaki catalogue
K–INSP–012 · Inspiration · Animation
A canvas that samples a moving field to a character grid, choosing each glyph by brightness from a ramp with the wordmark inside it.
Kaki reconstruction / Live
The renderer is reproduced as written: grid sizing, cell-aspect measurement, luminance, per-frame contrast stretch, the alpha table, font sizing, the frame throttle, the draw-then-read-back sampling path, and the in-view lifecycle. Kaki field runs the source’s procedural fallback through a Kaki ramp. Rotating cube runs a drawn subject through the source’s own thirteen-character ramp, quoted verbatim because a substitute cannot show what the ramp is for. CSS cube drops the canvas entirely and builds the same solid from six elements and one keyframe — the cheapest honest alternative to a rendered asset, and a demonstration of what it costs.
Every glyph is chosen by brightness alone: the subject is sampled to a character grid, the frame is stretched to fill the ramp, and each cell is drawn at an opacity equal to its own value.Kaki fieldruns the source’s procedural fallback through Kaki’s ramp;Rotating cuberuns a drawn subject through the source’s own ramp and its draw-then-read-back sampling path. CSS cubeis the comparison: the same solid with no canvas, no asset and no sampling — six elements and one keyframe. Watch the shading as it turns, and you can see what a renderer buys.
Behavior verified in the supplied Cursor CLI archive · Kaki-authored ramp and subject · one still frame on reduced motion
Observed interaction / 03
These diagrams describe the source mechanism. The ramp is quoted in the live specimen because it is the mechanism; no loader media, logo path, or bundled application code is reproduced.
Why it is here
ASCII rendering is an old trick and most versions of it stop at novelty. What lifts this one is that the character set is not arbitrary: it is a brightness scale that happens to spell something, so the branding is not laid over the effect but is the ordering principle inside it. The rest is unglamorous discipline — a per-frame contrast stretch so dim moments still read, a throttle so a decorative canvas never runs at full rate, and a loop that is not scheduled at all when the panel is off screen.
The third mode on the specimen is an argument rather than a reproduction. A cube is the one solid CSS 3D handles well, so six elements and a keyframe get most of the way for no bytes at all — and then the shading turns with the object instead of staying with the light, because there is no light, only six fixed colours. That single tell is what a renderer is actually being paid for. It is also why the source’s choice looks less like laziness on inspection: the loader video is a physically rendered asset that already existed, and here it is being spent on an effect that throws almost all of its detail away.
The ramp is the joke and the method at once: thirteen characters ordered from lightest to densest, with the company name sitting in the middle of the scale where the mid-tones fall. A brand appears only where the image is half lit — which is why the record quotes the ramp rather than paraphrasing it, since a substitute ramp cannot demonstrate the idea.