Control recordK–INSP–018 · Inspiration
X Developer Response Marquees
Three continuous rows of API response cards use four-copy tracks, different pacing, and one reversed direction to make live data feel abundant without becoming frantic.
View studyBack to Explore X Developer
K–INSP–020 · Inspiration · Interaction
X Developer
Glow Button
A nearly white action pill uses one tight shadow and one broad blurred halo to stay luminous at rest, then sharpens only its outer glow on hover.
- Authorship
- Third-party inspiration
- Techniques
- Layered white halo · Inset face layer · Box-shadow transition · Visible focus outline
- Creator
- X Corp.
- Observed method
- Layered CSS surfaces / box shadow / blur / 200ms hover transition
Kaki reconstruction / Live
Hold the light.
Do not jump.
The specimen keeps its glow at rest and changes only the tighter shadow on hover. Keyboard focus adds the source's explicit outline instead. Its fictional action opens nothing and reports that boundary when pressed.
Behavior verified from the supplied archive and compiled stylesheet · fictional Kaki label · original palette adjustment and code · real button focus · transitions removed under reduced motion
Observed system / 03
Face. Halo.
One real change.
These diagrams separate the constant layered glow from the single shadow value that responds.
Why it is here
Brightness can
stay composed.
The button is already luminous before the pointer arrives. That makes the resting hierarchy honest: the primary action does not wait for interaction to reveal its importance. A dark surround, nearly white pill, close edge shadow, and wide faint halo build four distinct depths without a gradient surface or animated pulse.
The hover is deliberately smaller than it looks in a screenshot. Geometry never moves. The halo does not brighten. Only five pixels of blur radius and ten percentage points of shadow opacity change, and they do so over 200ms. The result feels responsive without making the button swell.
The glow is present before interaction, so the button does not need to jump, pulse, or scale to announce itself. Hover merely tightens the emphasis. That restraint is the useful detail: luminance establishes priority while geometry and text remain completely stable.
- Origin
- X Developer Platform closing call-to-action
- Creator
- X Corp.
- Source evidence
- User-supplied Safari web archive of developer.x.com/#comparison, including rendered HTML, compiled stylesheet, and the matching preserved page bundle
- Observed construction
- A relatively positioned inline-flex pill; fully rounded corners; eighty-percent white border; ninety-five-percent white base; 32-pixel horizontal and 16-pixel vertical padding; sixteen-pixel medium neutral text; an absolute pure-white inset face; a relative label row with eight-pixel gap; and a separate arrow icon
- Observed glow
- A 25-pixel zero-offset white box shadow at thirty-five-percent opacity; a second absolute halo inset by minus twelve pixels, filled with twenty-percent white, blurred by 40 pixels and held at thirty-five-percent opacity; and a hover shadow of 30 pixels at forty-five-percent opacity
- Observed transition
- Box shadow and transform are declared over 200ms, but no hover or focus transform is supplied, so geometry stays fixed. The halo declares its own 200ms opacity transition, but both its resting and group-hover classes resolve to thirty-five-percent opacity. Keyboard focus adds a two-pixel, eighty-percent-white outline offset by two pixels.
- Kaki treatment
- Kaki-authored reconstruction of the observed rounded action, eighty-percent white border, ninety-five-percent white surface, 25-pixel white rest shadow at thirty-five-percent opacity, separate halo extending twelve pixels beyond the button with twenty-percent white fill, 40-pixel blur and thirty-five-percent opacity, and a 200ms hover change to a 30-pixel shadow at forty-five-percent opacity. Kaki uses an original label, palette adjustment, inert editorial action, and code. No X call-to-action text, pricing claim, screenshot, logo, icon geometry, class name, font, media asset, destination, or bundled source is republished.
- Accessibility addition
- Kaki keeps the reconstruction as a genuine keyboard-focusable button, replaces the destination with a clear inert editorial status, retains the visible outline, and removes both transitions under reduced-motion preferences. The homepage preview is non-interactive and removed from the tab order.
- Rights boundary
- No redistribution license identified. Kaki presents an attributed interaction study and original reconstruction only.
- Reviewed
- August 14, 2026