Kitty graphics placement transforms, mocked in CSS
Terminal file managers and editors could do something no terminal does today: take an image the terminal already holds, a code minimap say, and animate it from one place and orientation to another without re-sending a single pixel. The kitty graphics protocol separates an image from its placements, and a placement already carries a source crop and a cell position. The proposal is to let a placement also carry a transform and a transition, so the terminal interpolates the geometry itself.
This page is the interactive half of that proposal. Two CSS mocks stand in for the terminal so the timing can be felt rather than argued about. The ribbons are real: each is a minimap of a source file from the spike, rendered with nearest-neighbour scaling on the Ghostty background colour, one pixel per source column and one pixel per wrapped line. Every image below is shown at 1:1.
Placement transforms, mocked in CSS
The interaction the proposal is about: a selected file's horizontal ribbon travels and turns 90° into a vertical minimap beside a source preview, at 1:1 the whole way. The terminal would interpolate the placement's geometry; the image itself is never re-sent. Here CSS does the interpolating so the timing can be felt. Once docked, scroll the source. The viewer does not wrap but the ribbon was wrapped at 80, so a long line owns several minimap pixels; the slider covers exactly the pixels of the visible lines, the minimap scrolls with long files, and clicking the minimap jumps there.
j / k select · Enter opens or closes · with a file open j / k / d / u / g / G scroll it
kittyspike.rs
render.rs
input.rs
e2e.sh
These ribbons come from ansi2png --minimap --rotate 270 --wrap 80: source lines along x, column 0 at the bottom, a skyline rather than icicles. A transposed minimap is a rotation plus a mirror, so a terminal that can only rotate needs this orientation; a plain 90° clockwise turn then lands the minimap upright, which is exactly what the mock does. Collapsed rows show the bottom 34 columns, the first 34 of the source, and the crop widens to all 80 during the move. That widening is a change to the placement's source rectangle, not to its transform, so a transition primitive that only interpolates translate, rotate, and scale would still make the crop pop; the proposal should let the crop interpolate too.
Following a cell-snapped setpoint
Click in the well for a single move, or drag the ribbon. The pointer is only ever reported at cell granularity, so the setpoint (dashed) jumps by whole 16 × 34 cells. A normal transition restarts its easing at every jump, while the hacked variant restarts partway through the easing curve to skip its slow beginning. The exponential approach has no duration and no start, only a heading, so a new setpoint changes the heading and nothing else. The trail is one dot per frame: even spacing is smooth motion, bunching is a restart.
CSS has no switch that seeks into a timing function without also jumping the animated value. The hacked mode instead uses an exactly cropped and rebased cubic Bézier tail for the remaining (1-a)d. At the defaults, a=.50 turns ease-in-out into cubic-bezier(.29,.5,.58,1) over 225 of the configured 450 ms. Its first control point is above the origin, so its initial velocity is not zero; the dashed tangent in the plot makes that visible. In the third mode a click uses the full curve, while rapid drag retargets use the cropped tail. Read as a protocol sketch, duration, easing, and a can be sticky placement state; each pointer update then sends only a new transform endpoint. The exponential follower is a different kind of transition, approach, with a time constant instead of duration plus easing.
