Motion recordK–INSP–006 · Inspiration
Cursor Training Compute Bars
A stacked proportion broken across three rows, where each bar grows at a length-derived pace and its own readout counts with it.
View studyBack to Explore Cursor Section
K–INSP–005 · Inspiration · Interaction
Cursor Section
Index Dot
A sticky page index whose single accent mark springs diagonally to the end of the current section label.
- Authorship
- Third-party inspiration
- Techniques
- Shared-layout marker · Intersection-observer band · Spring layout transition · Current-entry semantics
- Creator
- Cursor / Anysphere
- Observed method
- Shared-layout marker / intersection-observer scrollspy
Kaki reconstruction / Live
Read the panel.
Watch the mark.
Scroll the reading panel, or choose an entry in the contents column. The source indexes a whole page and appears only above 80rem; this specimen holds the same behavior inside a bounded panel so it can be read at any width. The section copy is Kaki’s own.
01 / Opening
An index is a reading instrument.
A list of sections is usually treated as furniture: it sits beside the text, it is correct, and nobody looks at it twice. Giving it one moving part changes what it is for.
The mark below travels to whichever entry is being read. Nothing else in the list moves — the labels hold their positions and only their weight changes.
02 / Paper grain
The surface should stay quiet.
A hairline runs the height of the column and a short tick meets it at every entry. The armature is what makes a six-pixel circle legible at all.
If the rule or the ticks also moved, the mark would lose the fixed frame it is being read against.
03 / Ink weight
Three steps of ink, not two.
Resting entries sit at 40% ink, a hovered entry lifts to 60%, and the current entry settles at 78%. The current entry is never full black.
Holding the active state below full weight keeps the column subordinate to the text it indexes, and leaves hover legible as a separate signal.
04 / Margin notes
One mark, moved diagonally.
Because the mark follows the end of each label, and labels are different lengths, it does not slide down a straight channel. It crosses the column on a diagonal.
That diagonal is the whole effect. A dot fading in and out of a fixed right-hand column would be tidier and would say considerably less.
05 / The fold
A band, not a line.
Selection is decided by a band across the upper-middle of the reading area — the top 15% and bottom 60% are excluded — and the topmost section inside it wins.
When no section is inside the band, the previous entry simply stays current. The mark never falls back to nothing between sections.
06 / Closing mark
It should survive being ignored.
The whole effect is one six-pixel circle and a colour ramp. If a visitor never notices it, the index still functions as a plain list of links.
That is the test for this class of motion: remove it and nothing breaks; keep it and the page becomes easier to hold in mind.
Behavior verified in the supplied Cursor Composer archive · Kaki-authored interface and section copy · still transitions on reduced motion
Observed interaction / 03
Six pixels of
wayfinding.
These diagrams describe the source mechanism without reproducing its screenshots, page copy, or bundled application code.
Why it is here
The smallest
possible signal.
The source spends one small accent circle on a problem most long pages solve with a heavier bar, a highlight, or nothing at all. Because the mark moves rather than reappears, a reader who glances at the column once already knows both where they are and which direction they came from — and because it trails the label rather than sitting in its own channel, that move reads as a diagonal across the index.
The mark rests after the label rather than in a column of its own, so unequal section names turn a vertical change of state into a diagonal move. It is the smallest gesture in the collection and the one that most clearly rewards being watched.
- Origin
- Cursor Composer product page, sticky “Page contents” index
- Creator
- Cursor / Anysphere
- Source evidence
- User-supplied Safari web archive of cursor.com/composer, including the rendered index and its component source
- Observed behavior
- A desktop-only sticky index ruled by a hairline with a ten-pixel tick per entry; a three-step label ramp at 40%, 60% on hover, and 78% when current; one six-pixel accent mark held in the current entry after its label and animated between entries as a shared layout element on a spring; and selection read from an intersection band excluding the top 15% and bottom 60% of the viewport, resolving to the topmost section and holding its last value when the band is empty
- Kaki treatment
- Kaki-authored reconstruction of the observed marker behavior using original Kaki section labels, editorial copy, layout, palette, and code. The supplied archive informed the behavior; no Cursor screenshot, page copy, class name, media, or bundled source is republished.
- Rights boundary
- No redistribution license identified. Kaki presents an attributed interaction study and original reconstruction only.
- Reviewed
- August 5, 2026