Foundations / motion

Motion confirms state. It never supplies meaning.

Finite CSS-first utilities acknowledge focus, press, disclosure, status, and loading while the settled text, source, and boundary remain authoritative.

8 package utilities · prefers-reduced-motion covered

Package-owned metadata

Eight finite assists. One repeating loading signal.

Every class below comes from the exported utility inventory; the live specimens use the emitted class rather than a gallery imitation.

once · motion.duration.instant

focus-feedback

.sk-motion-focus-feedback

Adds restrained spatial acknowledgement to an existing visible focus indicator.

Trigger: :focus-visible
Properties: transform
Reduced motion: The transform and transition are removed; the focus outline remains primary.

once · motion.duration.instant

press-feedback

.sk-motion-press-feedback

Confirms direct activation without adding bounce, lift, or delayed action.

Trigger: :active on enabled controls
Properties: transform
Reduced motion: The transform and transition are removed; native pressed state remains.

once · motion.duration.slow

fade-entrance

.sk-motion-fade-in

Softens the first paint of newly rendered, already-visible supporting content.

Trigger: Class present when content enters the document
Properties: opacity
Reduced motion: Content is immediately and fully visible.

once · motion.duration.slow

rise-entrance

.sk-motion-rise-in

Provides a short, one-pass spatial cue for newly rendered supporting content.

Trigger: Class present when content enters the document
Properties: opacity, transform
Reduced motion: Content is immediately visible in its settled position.

once · motion.duration.fast

disclosure-continuity

.sk-motion-disclosure-continuity

Acknowledges native disclosure opening without animating layout dimensions.

Trigger: Content inside an open native details element
Properties: opacity, transform
Reduced motion: Disclosed content appears immediately in its settled position.

once · motion.duration.standard

status-highlight

.sk-motion-status-highlight

Briefly reinforces a visible settled status without repeating or changing its meaning.

Trigger: Class present when a visible settled status is rendered
Properties: background-color, border-color
Reduced motion: The settled status remains visible without animation.

once · motion.duration.standard

copy-confirmation

.sk-motion-copy-confirmation

Reinforces the existing copied state after explicit clipboard activation.

Trigger: copied state class or data-copy-state=copied
Properties: opacity, transform
Reduced motion: Copied wording remains immediately visible without movement.

repeating · motion.duration.loading

skeleton-loading

.sk-motion-skeleton-loading

Indicates an unresolved loading region while preserving stable placeholder geometry.

Trigger: Class present inside a truthfully busy owner
Properties: opacity
Reduced motion: A static outlined placeholder remains visible.

Live CSS proof

State stays truthful when motion disappears.

Focus and press

Keyboard focus keeps the package outline; enabled press receives a short acknowledgement.

Fade entrance

Supporting content is in the document and visible even when animation is removed.

Short rise entrance

Travel uses the package motion distance and settles after one pass.

Why is review still required?

Native disclosure state remains authoritative. No height is animated.

Settled feedback

Synthetic source checkedCopied to clipboard.

Loading synthetic review rows

The owner names loading while decorative shapes stay assistive-hidden.

Semantic first

The assist is optional; the responsibility is not.

Situation	Semantic first	Optional assist	Consumer responsibility
Result counts	A settled visible count and a polite, atomic status only when dynamically warranted.	status-highlight	Do not announce every keystroke or imply remote verification.
Inline validation	Associated visible error or success text with truthful invalid state.	status-highlight	Keep focus stable and do not rely on motion for severity.
Error recovery	State what failed, the safe next action, and any sanitized reference.	none	Prefer immediate legibility over urgent animation.
Disclosure	Native details and summary with a descriptive accessible name.	disclosure-continuity	Never animate height or clip revealed focusable content.
Copy confirmation	Explicit activation, visible copied wording, and a polite status.	copy-confirmation	Retain denial handling, focus, and the existing bounded reset timer.
Safe pending work	A truthfully busy owner and readable pending text.	skeleton-loading	Use the repeating utility only for a real unresolved loading region.
Human approval	Visible pending, approved, or rejected wording plus accountable evidence.	status-highlight	Motion must never imply that approval happened.

Use and avoid

Use

Short, one-pass acknowledgement where spatial continuity or settled status benefits comprehension.

Avoid

Whole-page reveals, ambient loops, large travel, critical-action choreography, or movement as the only focus/status cue.