Animations

Four looks, one tick.

All four instances below share one root — same tick, same freeze, side by side. Pick the one that fits, or bring your own CSS and skip the animation prop entirely.

roll

fade

blur

reel

last → —

import { RafflePick } from 'react-raffle-picker'

export function Demo() {
  return (
    <RafflePick
      min={1}
      max={100}
      interval={90}
      inertia
      autoStart={false}
    >
      <RafflePick.Value animation="roll" />
      <RafflePick.Value animation="fade" />
      <RafflePick.Value animation="blur" />
      <RafflePick.Value animation="reel" />
      <RafflePick.Button startLabel="Spin all" stopLabel="Stop" />
    </RafflePick>
  )
}

Every animation respects prefers-reduced-motion — ticks still update the value, motion just turns off.