Docs/Components/RowValue

RowValue

RowValue renders a MotionValue as text and updates whenever the value changes. Use it for animated counters, scroll progress, drag offsets, and other readouts that would otherwise need value.on('change', ...) plus a signal.

RowValue

Progress

row-value-counter.tsxOpen ↗

import { animate, motionValue, RowValue, motion, createTransform } from 'motion-solidjs'

export const meta = {
  slug: 'row-value-counter',
  title: 'RowValue counter',
  category: 'motion-values',
  description: 'Animate a MotionValue and read it inline with <RowValue>.',
  tag: 'RowValue',
} as const

export default function RowValueCounter() {
  const count = motionValue(0)
  const rounded = createTransform(count, (v) => Math.round(v))
  const width = createTransform(count, [0, 100], ['0%', '100%'])

  const run = () => {
    count.set(0)
    animate(count, 100, { duration: 2, ease: 'easeOut' })
  }

  return (
    <div class="flex w-64 flex-col items-center gap-4 rounded-2xl border border-border bg-card p-5 shadow-glow">
      <div class="flex w-full items-baseline justify-between">
        <span class="text-sm text-fg-muted">Progress</span>
        <span class="font-mono text-3xl tabular-nums">
          <RowValue value={rounded} />
        </span>
      </div>
      <div class="h-2 w-full overflow-hidden rounded-full bg-grad-violet/20">
        <motion.div class="h-full rounded-full bg-grad-mint" style={{ width }} />
      </div>
      <button
        type="button"
        onClick={run}
        class="w-full rounded-xl bg-grad-rose px-3 py-2 text-sm font-medium text-white shadow-glow"
      >
        Run
      </button>
    </div>
  )
}

Props

value - the MotionValue to read. Required.

The value is coerced with String(...) for rendering, so any scalar MotionValue<T> works. Wrap with createTransform first if you want to format (e.g. Math.round for integer counters).