Motion

Help people understand state and the next step while expressing brand character. Distinguish functional UI transitions from expressive brand animation.

The panel offers Use system, Less and More. Baseline transition tokens are 180/220/280 ms; the expressive mode uses 240/300/380 ms. Sections expand in 160 or 240 ms. These are short feedback effects without continuous decorative loops.

Less disables motion and transitions. System prefers-reduced-motion takes priority in every mode, including More. Text does not fade in from reduced opacity, preserving readability during expansion.

Logo Motion 1.0 reveals the mark with a directional glide over 1.2 s, followed by lettering. All page headers play the entrance once on the first visit in the current tab, then continuously play the six-second snowboarder loop. Reloading starts directly with the loop. Navigation is immediately available and logo space is reserved. Reduced motion shows a static mark.

The final promotional block uses a square composition with a 6-second loop and an accessible pause button. The loop stops offscreen and in hidden tabs. A manual pause persists on return. Reduced motion shows the static mark.

Motion does not hide information, obstruct controls or add unnecessary loops. Use active tokens; check mobile scenarios and reduced motion whenever a component changes.

Avoid parallax and flashing. The Logo Motion promotional loop is controllable and does not run with reduced motion. Information and actions remain immediately available.

Key poses: rest → first carve → edge change → second carve → rest. The rig connects head, shoulders, torso, pelvis, arms, thighs, shins and board. Feet use board-local coordinates and knees are solved from leg lengths. Moving contour masks restore colour behind the silhouette.

The loop is seamless: start and end poses match and scale returns to 100%. Subtle snow dust stays within the symbol. Letter shapes and proportions are preserved; overall scale peaks at 100.6%.

Five states: static, 0.48 s entry, 3.2 s loop, 0.56 s feedback and 0.28 s exit. A small gesture reinforces meaning: delivery glides, equipment lifts and the snowboard turns. The outline remains simple and the accent changes intensity smoothly. Critical red retains its meaning.

The Graphics and icons library includes search, state and colour selection, play, pause, scrubbing, frame stepping and downloads. Only the selected sample loops; reduced motion makes it static. Exported SVG uses the same timeline and a system-controlled static fallback.

Exit lasts 0.6 s and ends on an empty transparent frame. The 7.8 s sequence combines entry, one complete loop and exit. Use straight alpha and preserve clear space. Video files and archives download on request, never automatically.

The preview supports pause, replay, scrubbing and frame stepping. Reduced motion retains scrubbing and downloads. Standalone SVG includes a static fallback through prefers-reduced-motion.

Navigation and operational forms convey meaning before animation. Continuous loops belong in a dedicated preview or promotional block with pause; never start multiple moving samples simultaneously.

Do not use animation duration to delay order confirmation artificially. Stop playback offscreen and in hidden tabs; returning does not cancel manual pause. The site never starts sound without user action.