Decrease the motion

Use this procedure to control the motion of the effects. The default value of theme.motion is full. To obey the prefers-reduced-motion media query of the visitor, set the value auto.

Procedure

1. Select a value for theme.motion from the table in Result.

2. Put the value in the config option:

   import { createWand } from 'magic-cursor-wand';
   
   const wand = createWand({ config: { theme: { motion: 'reduced' } } });

3. To stop all effects at runtime, set the value off:

   wand.setConfig({ theme: { motion: 'off' } });

Result

Value	Behavior
auto	The wand follows prefers-reduced-motion and updates when the media query changes.
full	The wand shows all motion.
reduced	The wand shows reduced motion.
off	The effects stop. The plugins continue to get the pointer events, thus the cursor plugin continues to show the pointer.

With reduced motion, each effect operates as this table shows:

Effect	Behavior
Glitter	Off
Cloud	Off
Chalk	On. The line fades without drift.
Cursor glow	Static