Skip to main content
ShadcnUI
Navigation

Motion preferences

A gallery-only motion-preference composition with complete content in system and reduced modes.

Semantic page baseline The route renders authored landmarks, headings, content, and ordinary destinations.

System respects your operating-system preference; it never forces animation. Reduce removes decorative motion. Both links retain the selected color theme and work without JavaScript.

Try a finite preview

Check to preview once; uncheck to stop and reset, then check again to replay. Checked means enabled, not currently playing. Reduced motion or unavailable CSS keeps the complete static list.

  • Angular mountain ridges beneath a warm sun Mountain walks
  • Harbor stories
  • A longer grove journal title that wraps without losing its complete text

Stop/reset persists locally while unchecked. A completed preview leaves the checkbox checked, not a false playing indicator. Reloading or replacing markup can reset it; saving preferences belongs to your application.

Try native content inside an entrance effect

Content is always available; focus cancels an item effect. The entrance finishes within one second, even when it is below the viewport. There is no visibility observer or animation-once promise.

Compare scroll decoration and image depth

Note 1: reduced motion leaves this native content complete.

Note 2: reduced motion leaves this native content complete.

Note 3: reduced motion leaves this native content complete.

Note 4: reduced motion leaves this native content complete.

Note 5: reduced motion leaves this native content complete.

Note 6: reduced motion leaves this native content complete.

Note 7: reduced motion leaves this native content complete.

Note 8: reduced motion leaves this native content complete.

Note 9: reduced motion leaves this native content complete.

Note 10: reduced motion leaves this native content complete.

Note 11: reduced motion leaves this native content complete.

Note 12: reduced motion leaves this native content complete.

  1. Angular mountain ridges beneath a warm sun
    Angular mountain ridges beneath a warm sun. Original local illustration; open the complete image.
    Angular mountain ridges beneath a warm sun
  2. A white sailboat crossing a blue harbor
    A white sailboat crossing a blue harbor. Original local illustration; open the complete image.
    A white sailboat crossing a blue harbor
  3. Three evergreen trees on a low green hill
    Three evergreen trees on a low green hill. Original local illustration; open the complete image.
    Three evergreen trees on a low green hill
Scroll Indicator API and source Cover Flow API and source Marquee API and source Stagger API and source Inspect capability evidence and fallbacks

Support and exact fallback

Motion preferences support and fallback
Feature Locked-engine evidence When missing
Semantic page baseline Controller and static-export tests exercise the same closed route. Without optional gallery presentation, complete content and ordinary destinations remain in document order.

Without optional gallery presentation, complete content and ordinary destinations remain in document order.