Components / KATAYABURI / Newton's Cradle

Newton's Cradle beta

The desk toy, in pure CSS: five steel balls, one endless argument about momentum.

Preview 
<div class="k-cr" role="img" aria-label="A Newton's cradle, swinging">
  <div class="k-cr-frame" aria-hidden="true">
    <div class="k-cr-bar"></div>
    <div class="k-cr-row">
    <span class="k-cr-p end l"><span class="k-cr-b"></span></span>
    <span class="k-cr-p"><span class="k-cr-b"></span></span>
    <span class="k-cr-p"><span class="k-cr-b"></span></span>
    <span class="k-cr-p"><span class="k-cr-b"></span></span>
    <span class="k-cr-p end r"><span class="k-cr-b"></span></span>
    </div>
  </div>
</div>
/* KATA Newton's Cradle — KATAYABURI. Momentum, the desk toy. */
.k-cr{width:100%;border:1px solid var(--k-line);border-radius:14px;background:var(--k-bg);padding:20px 0 16px;font-family:var(--k-font)}
.k-cr-frame{width:236px;margin:0 auto}
.k-cr-bar{height:7px;border-radius:4px;background:var(--k-ink)}
.k-cr-row{display:flex;justify-content:center}
.k-cr-p{width:40px;height:128px;transform-origin:top center;display:flex;flex-direction:column;align-items:center}
.k-cr-p::before{content:"";width:1.5px;height:92px;background:var(--k-zinc-400)}
.k-cr-b{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 34% 30%, var(--k-zinc-100), var(--k-zinc-400) 78%);box-shadow:0 3px 7px rgba(16,24,40,.25);flex:none}
.k-cr-p.end.l{animation:k-cr-l 2.4s ease-in-out infinite}
.k-cr-p.end.r{animation:k-cr-r 2.4s ease-in-out infinite}
@keyframes k-cr-l{0%,50%,100%{transform:rotate(0)}25%{transform:rotate(-27deg)}}
@keyframes k-cr-r{0%,50%,100%{transform:rotate(0)}75%{transform:rotate(27deg)}}
@media (prefers-reduced-motion:reduce){.k-cr-p.end{animation:none}}

Installation

CLI

node kata-ui.mjs add newtons-cradle

Writes the part’s CSS into your project. New to the CLI? See the CLI doc.

Manual

  1. Load tokens.css once, before any part.
  2. Copy the CSS tab into your stylesheet.
  3. Copy the HTML where it belongs.

Usage

No script at all — two keyframes and a delay keep the end balls trading blows forever. It belongs wherever a page waits: loading states, "we are thinking" panels, the footer of a site with confidence. The middle three balls do nothing, beautifully, which is also a management style.

Accessibility

A silent, looping ornament: aria-hidden, with the page’s real status carried in words beside it. Under prefers-reduced-motion the balls hang still — momentum, conserved at zero.

Anatomy

The public surface of this part, read from its own source. Class names are the API — the CSS tab above is the full contract.

.k-crclass
.k-cr-frameclass
.k-cr-barclass
.k-cr-rowclass
.k-cr-pclass
.k-cr-bclass
.endclass
.lclass
.rclass
aria-labelARIA
aria-hiddenARIA

Related parts

Bounce Letters beta

A headline whose letters hop when touched — and do the wave when you click.

lettersbouncetextheadlineplayful

Carousel Ring beta

A merry-go-round of cards in real 3D: eight panels riding a ring that never stops turning.

carousel3dringcardsrotate

Confetti Cannon beta

A button that fires confetti out of both corners of its stage. You already pressed it twice.

confetticelebrationcanvasbuttonparty

Fireworks beta

Click the night and it blooms: rockets, bursts and falling sparks on one canvas.

fireworkscanvascelebrationnightinteractive
Previous
Kata Rain