Motion

Feedback you can follow.

Small movements acknowledge an action. Keep reading and navigation immediate. Try a curve and duration, then replay it once.

Your device allows motion. Replay runs one complete movement.

.example {
  transition: transform 420ms var(--ease-interface);
  /* cubic-bezier(0.2, 0.8, 0.2, 1) */
}

@media (prefers-reduced-motion: reduce) {
  .example { transition: none; }
}

Content opens at its own height.

This is the same Disclosure component and stylesheet used on the Minecraft page. It works with Enter, Space and no JavaScript.

An atmosphere you can stop.

The shared landscape uses two alternating aurora layers and a bounded water effect. It stops working offscreen or in a hidden tab. The original image remains if WebGL is unavailable.

This is the real saved site setting. Your device’s reduced-motion preference always takes priority. Escape also stops the aurora and water.

Timing by purpose.

--duration-feedback

240ms

Small hover and press feedback

--duration-disclosure

300ms

Native disclosure height, where supported

--duration-arrow

420ms

One arrow pass on a prominent link

--duration-scene

900ms

Initial landscape settle

--duration-aurora

12s

First alternating sky layer

--duration-aurora-secondary

15s

Second alternating sky layer

--ease-interface

cubic-bezier(0.2, 0.8, 0.2, 1)

Link arrows and small controlled movement

--ease-disclosure

ease

Content expansion and collapse

--ease-atmosphere

ease-in-out

Continuous alternating atmosphere

Animate specific properties, never transition: all. Use transforms for small spatial feedback. Keep text visible at first paint. Do not add scroll hijacking or staggered reveals to ordinary reading sections.