Motion toggle

The motion toggle holds the page's ambient motion still: the ink field's loops and the blocks' idle moves. Entrances and moments a visitor caused still play. It is always in VisitorControls, and a loop-bearing Art corner at Press and Rave prints one too.

Example#

Usage#

Use the motion toggle wherever something loops: it holds the ambient motion still (the ink field, the blocks' idle moves) while entrances and moments a visitor causes still play. A loop may only run while a toggle is on the page (WCAG 2.2.2, D-E3).

• Where. Always in VisitorControls, and in the corner of art that loops at Press and Rave (Art loops).
• Reduced motion. When the system or the site asks for reduced motion, the toggle shows pressed; pressing it plays again.
• copy can name what it pauses: "Pause the art".

Anatomy#

Volume#

The key is identical at every volume. It shows in art corners from Press, where loops are allowed.

• Quiet

  Docs, forms, legal and long reads. Flat inks, no art in motion.

• Studio

  The site default. Art on its own plates, one display moment per view.

• Press

  Hero moments, covers and campaigns. Halftone fields and the second ink.

• Rave

  Launches, posters and the 404. Every ink, and the words still win.

Content#

• "Pause motion" and "Play motion", or name the thing: "Pause the art".

Do and don't#

Accessibility#

• A real button with aria-pressed: pressed means motion is held. Its name says what a press does next, "Pause motion" or "Play motion", and its glyph follows.
• The choice persists (localStorage mk-motion) and is set on <html data-mk-motion="pause"> before the first paint by PrefsScript.
• While at least one toggle is mounted the ink field may loop at Press and Rave; with none it only bursts, so a loop always comes with a visible control (WCAG 2.2.2).
• Enter and Space press it; focus shows the 2 px ring.

Props#

Tokens#

Changelog#