Motion presets reference
Studio Arcana motion tokens, page transitions, and reduced-motion behavior.
Motion intensity, distance, duration, and easing come from **Theme settings → Motion**. Merchants can choose subtle, standard, or expressive presets; animation scale adjusts timing globally. The header animation toggle respects `prefers-reduced-motion` and stores shopper preference in `studio_arcana_motion`.
Page transition presets (`sa-fade`, `sa-curtain`, `sa-wipe-up`) apply when enabled in theme settings. Per-link overrides use `data-sa-vt` attributes rendered by the `sa-html-vt-attrs` snippet. Scroll reveals, card hover, edge glow, and marquee/slideshow carousels all honor the `motion-disabled` class on `<html>`.
Before/after sliders use a spring animation when motion is allowed; preset buttons snap instantly for clarity. Portfolio and product image lightboxes add open/close motion via `motion.css` unless reduced motion is active.
Sales channels > Online Store > Themes > Customize > Theme settings > Motion
Was this page helpful?
Content is maintained by Arcanum Hollow Labs. For internal engineering notes, see the docs/ folder in the monorepo.