Comparison recordEARLIER FILE
Fixed edition
- One fixed filing window
- A single review threshold
- The format decides the pace
- Extra work waits for the next edition
Back to Explore X Developer
K–INSP–019 · Inspiration · Animation
X Developer
Comparison Border
A quiet old-versus-new comparison gives only the preferred card a moving border, turning one pixel of light into hierarchy, direction, and emphasis.
- Authorship
- Third-party inspiration
- Techniques
- Masked border beam · CSS offset path · Four-second perimeter loop · Asymmetric emphasis
- Creator
- X Corp.
- Observed method
- CSS motion path / dual mask border clipping / linear perimeter animation
Kaki reconstruction / Live
Let one edge
make the choice.
The full specimen restores both sides of the comparison. Its claims are fictional Kaki edition notes; only the structural contrast and preferred-card border behavior come from the source.
CURRENT FILE
Open edition
- File only what earns a place
- Let each record keep its own depth
- The work decides the pace
- The index grows one study at a time
The revised card border is moving.
Behavior verified from the supplied archive · fictional Kaki comparison copy · original palette and code · pause control added · fixed border highlight under reduced motion
Observed system / 03
Baseline. Mask.
Perimeter.
These diagrams separate the comparison structure from the mask and the traveling gradient square.
Why it is here
Motion becomes
an argument.
The effect works because it is unequal. Both cards hold the same title-and-list anatomy, but the old option remains visually dormant while the preferred option gains a quiet surface lift and a moving perimeter. The border does not explain the new model; it tells the eye where the explanation is.
The masked beam is more disciplined than a rotating conic-gradient border. Only a small gradient square exists, and only the portion touching the border survives the mask. That keeps the highlight local: one short segment moves, while the rest of the edge stays calm.
The border earns attention because almost everything else stays still. The old card establishes a low-contrast baseline; the new card adds only a faint surface lift and one traveling highlight. Motion therefore reads as editorial preference rather than ambient decoration.
- Origin
- X Developer Platform old-versus-new pricing comparison
- Creator
- X Corp.
- Source evidence
- User-supplied Safari web archive of developer.x.com/#comparison, including rendered HTML and the matching preserved page bundle
- Observed comparison
- A two-column grid at medium widths and above with a 24-pixel gap, stacking below the breakpoint; both cards use a rounded eight-pixel corner and 28-pixel padding; the old card has a one-pixel #151619 border; the new card adds a five-percent white surface and twenty-percent white border
- Observed border motion
- An absolute full-card layer with a transparent border; two masks clipped to padding-box and border-box then intersected; one 64-pixel square with a diagonal white, slate, and pale-blue gradient; a rounded rectangular CSS offset path using the same 64-pixel radius; offset distance animated from zero to one hundred percent; and a four-second linear infinite transition
- Kaki treatment
- Kaki-authored reconstruction of the observed paired comparison, inert old card, subtly raised new card, one-pixel masked border, 64-pixel gradient beam, rounded rectangular offset path, and four-second linear infinite loop using fictional Kaki edition copy, an original palette, pause behavior, reduced-motion handling, and original code. The homepage preview intentionally isolates only the selected moving card; the dialog and full record restore the comparison. No X pricing claim, benefit or drawback copy, screenshot, logo, class name, font, media asset, or bundled source is republished.
- Accessibility addition
- The homepage preview shows only the selected moving card as requested. The dialog and full record restore the inert comparison card, provide one explicit pause control, expose one concise alternative instead of reading duplicate decorative lists, and hold the border beam at a representative point under reduced-motion preferences.
- Rights boundary
- No redistribution license identified. Kaki presents an attributed interaction study and original reconstruction only.
- Reviewed
- August 14, 2026