Kinetic design: motion as explanation, not decoration

Kinetic design doesn't mean "make everything fly". It means motion has a job: telling the visitor where they are, what is clickable, what just arrived.

The one-colour rule

This site has exactly one accent colour, defined in exactly one place:

@theme {
  --color-primary: #6d5ef8;
}

Buttons, links, card borders, the cursor glow, the selection colour, even the scrollbar — all fed from that variable. Change one line and the whole site changes.

Why one colour? Because an accent is only an accent while it stays rare. On a page with five colours, the eye has nowhere obvious to go. On a page with one, that colour means "look here". Everything else is carried by greys.

What each motion is doing here

The progress bar (that thin line at the top). It answers "how much is left" in a long post. We don't use the raw scroll value directly — it goes through a spring function, so the line flows instead of jumping.

The glow that follows the cursor. It adds depth and keeps you from losing the pointer. The key detail: it lags behind. Sticking to the cursor exactly would feel oppressive.

Magnetic buttons. As the cursor approaches, the button drifts slightly toward it. That's a wordless way of saying "I'm clickable".

Blocks that rise into view. Each block enters 24 pixels from below. The critical setting is once: true — it plays a single time and doesn't repeat when you scroll back. Repeating would make the page restless.

The marquee strip. We print the list twice and shift it by exactly half with CSS. The copy lands precisely where the original ended, so the seam is invisible. No JavaScript needed at all.

For people who don't want motion

Some visitors have "reduce motion" turned on in their operating system; for people with vestibular disorders this is an accessibility matter, not a preference. One CSS block respects it:

@media (prefers-reduced-motion: reduce) {
  .kd-marquee, .kd-breathe { animation: none; }
  html { scroll-behavior: auto; }
}

The site stays fully functional for them — it just calms down.