Docs/Primitives/createReducedMotion

createReducedMotion

Returns an accessor for (prefers-reduced-motion: reduce) and updates when the OS setting changes. Use it to replace high-motion effects with a calmer state.

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

function Hero() {
  const reduced = createReducedMotion()
  return (
    <motion.div animate={reduced() ? { opacity: 1 } : { opacity: 1, scale: 1.05, rotate: 4 }} />
  )
}

a11y

prefers-reduced-motion: no-preference

create-reduced-motion.tsxOpen ↗

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

export const meta = {
  slug: 'create-reduced-motion',
  title: 'createReducedMotion',
  category: 'motion-values',
  description: 'Respect the user — fall back to a tame transition.',
  tag: 'a11y',
} as const

export default function UseReducedMotionExample() {
  const reduce = createReducedMotion()

  return (
    <div class="flex flex-col items-center gap-2">
      <motion.div
        class="h-20 w-20 rounded-2xl bg-grad-amber"
        animate={reduce() ? { opacity: [0.5, 1, 0.5] } : { rotate: 360, scale: [1, 1.3, 1] }}
        transition={{ duration: 2.4, repeat: Infinity, ease: 'easeInOut' }}
      />
      <span class="rounded-full border border-border bg-card px-3 py-1 text-[10px] font-mono text-fg-dim">
        prefers-reduced-motion: {reduce() ? 'reduce' : 'no-preference'}
      </span>
    </div>
  )
}