Docs/Primitives/createReducedMotionConfig

createReducedMotionConfig

Returns an Accessor<boolean | null> that resolves the nearest MotionConfig's reducedMotion setting against the OS-level prefers-reduced-motion query:

'never' returns false
'always' returns true
'user' (or no override) returns the OS preference

import { createReducedMotionConfig, motion } from 'motion-solidjs'

function Card() {
  const shouldReduce = createReducedMotionConfig()

  return <motion.div animate={{ x: 100 }} transition={{ duration: shouldReduce() ? 0 : 0.6 }} />
}

Use this primitive when you need to read the resolved preference inside a component. To set the mode, render a <MotionConfig reducedMotion="..."> higher in the tree.

reducedMotion

reduced motion: no

create-reduced-motion-config.tsxOpen ↗

import { MotionConfig, motion, createReducedMotionConfig } from 'motion-solidjs'
import { createSignal } from 'solid-js'

export const meta = {
  slug: 'create-reduced-motion-config',
  title: 'createReducedMotionConfig',
  category: 'animations',
  description:
    'Read the resolved reduced-motion preference — combines the OS setting with MotionConfig.',
  tag: 'reducedMotion',
} as const

function ReadOut() {
  const shouldReduce = createReducedMotionConfig()

  return (
    <div class="flex flex-col items-center gap-2">
      <motion.div
        class="h-20 w-20 rounded-2xl bg-grad-rose shadow-glow"
        animate={{ rotate: 360 }}
        transition={{
          duration: shouldReduce() ? 0 : 1.4,
          repeat: Infinity,
          ease: 'linear',
        }}
      />
      <span class="rounded-full border border-border bg-card px-3 py-1 text-[10px] font-mono text-fg-dim">
        reduced motion: {shouldReduce() ? 'yes' : 'no'}
      </span>
    </div>
  )
}

export default function UseReducedMotionConfigExample() {
  const [forced, setForced] = createSignal(false)

  return (
    <div class="flex flex-col items-center gap-3">
      <MotionConfig reducedMotion={forced() ? 'always' : 'never'}>
        <ReadOut />
      </MotionConfig>
      <button
        onClick={() => setForced((v) => !v)}
        class="rounded-full border border-border bg-card px-4 py-1.5 text-xs text-fg-muted hover:text-fg"
      >
        force: {forced() ? 'always' : 'never'}
      </button>
    </div>
  )
}