Motion Cues — Motion Cues

Demo 01

FPS Health Bar

Videogame parallelogram vitals HUD with cue-driven damage, pulse, and moving armor segments

loading cue…

Source

health-bar.tsx

import { useEffect, useId, useRef, useState, type CSSProperties, type PointerEvent } from 'react'
import { LazyMotion, domAnimation, m, useMotionValue, useSpring } from 'motion/react'
import { defineCue, observeCue } from 'motion-cues'
import { useMountEffect } from '../../hooks/useMountEffect'
import { useAutoPlay } from '../../hooks/useAutoPlay'
import DemoControls from './DemoControls'
 
type HealthStatus = 'full' | 'high' | 'medium' | 'low' | 'critical'
 
const healthCue = defineCue('health', {
  critical: 0.02,
  low: 0.15,
  medium: 0.34,
  high: 0.67,
  full: 1,
} satisfies Record<HealthStatus, number>)
 
const AMMO_THRESHOLDS = [0.88, 0.72, 0.56, 0.4, 0.24, 0.08] as const
const BLASTER_OFFSETS = [-18, 6, 22] as const
const statusAccent: Record<HealthStatus, string> = {
  full: '#f4f4f4',
  high: '#f4f4f4',
  medium: '#ffb020',
  low: '#ff5d2f',
  critical: '#ff2d55',
}
 
function clamp01(value: number) {
  return Math.max(0, Math.min(1, value))
}
 
function getHealthStatus(value: number): HealthStatus {
  if (value >= 0.96) return 'full'
  if (value >= 0.67) return 'high'
  if (value >= 0.34) return 'medium'
  if (value >= 0.15) return 'low'
  return 'critical'
}
 
function statusClass(status: HealthStatus) {
  return `game-health game-health--${status}`
}
 
type HealthHudStyle = CSSProperties & {
  '--health-accent': string
  '--hurt-opacity': string
  '--aim-x': string
  '--aim-y': string
}
 
export default function HealthBar() {
  const progress = useMotionValue(1)
  const spring = useSpring(progress, { stiffness: 150, damping: 24 })
  const [combinedVitals, setCombinedVitals] = useState(1)
  const [impact, setImpact] = useState(false)
  const [aim, setAim] = useState({ x: 50, y: 47 })
  const previousVitalsRef = useRef(1)
  const shieldMaskId = useId().replace(/:/g, '')
 
  const { isPlaying, toggle, containerRef } = useAutoPlay(progress, { duration: 5600, from: 1, to: 0.02 })
 
  useMountEffect(() => observeCue(spring, healthCue, {
    onEnter: () => setImpact(true),
  }))
 
  useMountEffect(() => spring.on('change', (value: number) => {
    const nextVitals = clamp01(value)
    if (nextVitals < previousVitalsRef.current - 0.04) setImpact(true)
    previousVitalsRef.current = nextVitals
    setCombinedVitals(nextVitals)
  }))
 
  useEffect(() => {
    if (!impact) return
    const timeout = window.setTimeout(() => setImpact(false), 260)
    return () => window.clearTimeout(timeout)
  }, [impact])
 
  const handleAim = (event: PointerEvent<HTMLElement>) => {
    const bounds = event.currentTarget.getBoundingClientRect()
    setAim({
      x: clamp01((event.clientX - bounds.left) / bounds.width) * 100,
      y: clamp01((event.clientY - bounds.top) / bounds.height) * 100,
    })
  }
 
  const handleFire = () => {
    progress.set(clamp01(progress.get() - 0.075))
    setImpact(true)
  }
 
  const status = getHealthStatus(combinedVitals)
  const shield = clamp01((combinedVitals - 0.52) / 0.48)
  const health = clamp01(combinedVitals / 0.52)
  const hurtOpacity = clamp01((0.58 - combinedVitals) / 0.58)
  const heartbeatSpeed = status === 'critical' ? 0.42 : status === 'low' ? 0.58 : status === 'medium' ? 0.78 : 1.05
  const activeRounds = AMMO_THRESHOLDS.map((threshold) => combinedVitals >= threshold)
  const hudVars: HealthHudStyle = {
    '--health-accent': statusAccent[status],
    '--hurt-opacity': String(hurtOpacity),
    '--aim-x': `${aim.x}%`,
    '--aim-y': `${aim.y}%`,
  }
 
  return (
    <LazyMotion features={domAnimation}>
      <m.section
        ref={containerRef}
        className={statusClass(status)}
        style={hudVars}
        aria-label="Interactive FPS health HUD demo"
        onPointerMove={handleAim}
        onPointerDown={handleFire}
      >
        <div className="game-health__vignette" aria-hidden="true" />
        <m.div className={`game-health__blood${impact ? ' is-hit' : ''}`} aria-hidden="true" />
 
        <m.div
          className="game-health__crosshair"
          aria-hidden="true"
          animate={impact ? { scale: [1, 0.86, 1.08, 1] } : { scale: 1 }}
          transition={{ duration: 0.22 }}
        >
          <span />
        </m.div>
 
        <div className={`game-health__incoming${impact ? ' is-active' : ''}`} aria-hidden="true">
          {BLASTER_OFFSETS.map((offset, index) => (
            <m.span
              key={offset}
              style={{ '--blast-y': `${offset}vh` } as CSSProperties}
              animate={impact ? { opacity: [0, 1, 0], x: ['34vw', '0vw'], scaleX: [0.2, 1, 0.35] } : { opacity: 0 }}
              transition={{ duration: 0.34, delay: index * 0.045, ease: 'easeOut' }}
            />
          ))}
        </div>
 
        <div className="game-health__ammo" aria-label={`${activeRounds.filter(Boolean).length} rounds active`}>
          {activeRounds.map((active, index) => (
            <m.span
              key={index}
              className={active ? 'is-active' : ''}
              animate={active && impact ? { y: [0, -2, 0], opacity: [1, 0.68, 1] } : { y: 0, opacity: active ? 1 : 0.22 }}
              transition={{ duration: 0.18, delay: index * 0.025 }}
            />
          ))}
        </div>
 
        <section className="game-health__hud-deck" aria-label={`${status} health. Shield line drains first, then health drains.`}>
          <div className="game-health__corebar">
            <div className="game-health__health-track" role="meter" aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(health * 100)} aria-label="Health level">
              <m.i animate={{ scaleX: health }} transition={{ duration: 0.18, ease: 'easeOut' }} />
              <svg className="game-health__shield-line" viewBox="0 0 100 24" preserveAspectRatio="none" aria-hidden="true">
                <defs>
                  <linearGradient id={`${shieldMaskId}-stroke`} x1="0" x2="1" y1="0" y2="1">
                    <stop offset="0%" stopColor="#ffffff" />
                    <stop offset="48%" stopColor="#9ee9ff" />
                    <stop offset="100%" stopColor="#ffffff" stopOpacity="0.18" />
                  </linearGradient>
                  <linearGradient id={`${shieldMaskId}-shim`} x1="0" x2="1" y1="0" y2="0">
                    <stop offset="0%" stopColor="#ffffff" stopOpacity="0" />
                    <stop offset="45%" stopColor="#ffffff" stopOpacity="0" />
                    <stop offset="52%" stopColor="#ffffff" stopOpacity="0.95" />
                    <stop offset="62%" stopColor="#9ee9ff" stopOpacity="0.18" />
                    <stop offset="100%" stopColor="#ffffff" stopOpacity="0" />
                  </linearGradient>
                  <mask id={`${shieldMaskId}-mask`} maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="24">
                    <m.rect
                      x="0"
                      y="0"
                      height="24"
                      fill="#fff"
                      animate={{ width: Math.max(4, shield * 100) }}
                      transition={{ duration: 0.2, ease: 'easeOut' }}
                    />
                  </mask>
                </defs>
                <path className="game-health__shield-base" d="M5 3 H98 L94 21" />
                <g mask={`url(#${shieldMaskId}-mask)`}>
                  <path className="game-health__shield-active" d="M5 3 H98 L94 21" stroke={`url(#${shieldMaskId}-stroke)`} />
… 21 more lines

Demo 02

Dashboard

Open

Real-time data simulation with cue-driven sparklines

loading cue…

Source

dashboard.tsx

import { useMemo, useState, type CSSProperties } from 'react'
import { LazyMotion, domAnimation, m, useMotionValue, useMotionValueEvent, useSpring } from 'motion/react'
import { defineCue, observeCue } from 'motion-cues'
import { useMountEffect } from '../../hooks/useMountEffect'
import { useAutoPlay } from '../../hooks/useAutoPlay'
import DemoControls from './DemoControls'
 
type DashboardMode = 'quiet' | 'live' | 'load' | 'incident'
 
const dashboardCue = defineCue('dashboard.mode', {
  quiet: 0,
  live: 0.22,
  load: 0.58,
  incident: 0.86,
} satisfies Record<DashboardMode, number>)
 
const modeColor: Record<DashboardMode, string> = {
  quiet: '#64748b',
  live: '#00cc6a',
  load: '#ffb020',
  incident: '#ff2d55',
}
 
const panels = [
  { label: 'requests', base: 18, unit: 'k', color: '#7dd3fc' },
  { label: 'latency', base: 42, unit: 'ms', color: '#ffb020' },
  { label: 'errors', base: 2.4, unit: '%', color: '#ff2d55' },
  { label: 'workers', base: 128, unit: '', color: '#00cc6a' },
] as const
 
const regions = ['iad', 'fra', 'sin', 'gru', 'syd'] as const
 
function clamp01(value: number) {
  return Math.max(0, Math.min(1, value))
}
 
function sparkPath(index: number, value: number) {
  return Array.from({ length: 34 }, (_, i) => {
    const x = (i / 33) * 180
    const wave = Math.sin(i * 0.55 + index * 0.8 + value * 4.2) * 0.5 + 0.5
    const pulse = Math.sin(i * 0.18 + value * 7 + index) * 0.5 + 0.5
    const y = 38 - (8 + wave * 18 + pulse * value * 18)
    return `${x.toFixed(1)},${y.toFixed(1)}`
  }).join(' ')
}
 
export default function Dashboard() {
  const progress = useMotionValue(0)
  const spring = useSpring(progress, { stiffness: 185, damping: 24 })
  const [value, setValue] = useState(0)
  const [mode, setMode] = useState<DashboardMode>('quiet')
  const { isPlaying, toggle, containerRef } = useAutoPlay(progress, { duration: 6200 })
 
  useMountEffect(() => observeCue(spring, dashboardCue, {
    onEnter: (key) => setMode(key),
  }))
  useMotionValueEvent(spring, 'change', setValue)
 
  const rows = useMemo(() => regions.map((region, index) => {
    const load = clamp01(0.16 + value * 0.72 + Math.sin(value * 8 + index) * 0.12)
    return { region, load, color: load > 0.82 ? '#ff2d55' : load > 0.58 ? '#ffb020' : '#00cc6a' }
  }), [value])
 
  return (
    <LazyMotion features={domAnimation}>
      <section ref={containerRef} className="dashboard-demo" style={{ '--dashboard-accent': modeColor[mode] } as CSSProperties} aria-label="Operational dashboard demo">
        <div className="dashboard-demo__shell">
          <header className="dashboard-demo__topline">
            <span>edge telemetry</span>
            <strong>{mode}</strong>
          </header>
 
          <div className="dashboard-demo__grid">
            {panels.map((panel, index) => {
              const metric = panel.base + value * panel.base * (index === 2 ? 2.4 : 1.8)
              return (
                <m.article
                  key={panel.label}
                  className="dashboard-demo__metric"
                  animate={{ y: mode === 'incident' && index === 2 ? [-2, 2, 0] : 0 }}
                  transition={{ duration: 0.18 }}
                >
                  <span>{panel.label}</span>
                  <strong>{metric.toFixed(index === 2 ? 1 : 0)}{panel.unit}</strong>
                  <svg viewBox="0 0 180 44" aria-hidden="true">
                    <polyline points={sparkPath(index, value)} stroke={panel.color} />
                  </svg>
                </m.article>
              )
            })}
          </div>
 
          <div className="dashboard-demo__main">
            <section className="dashboard-demo__traffic" aria-label="Regional traffic load">
              {rows.map((row) => (
                <div key={row.region}>
                  <span>{row.region}</span>
                  <i style={{ '--row-load': row.load, '--row-color': row.color } as CSSProperties} />
                  <strong>{Math.round(row.load * 100)}%</strong>
                </div>
              ))}
            </section>
 
            <section className="dashboard-demo__radar" aria-label="System pressure radar">
              {Array.from({ length: 24 }, (_, index) => (
                <m.i
                  key={index}
                  animate={{ scaleY: 0.18 + clamp01(value + Math.sin(index * 0.7 + value * 5) * 0.24) }}
                  transition={{ duration: 0.12, ease: 'easeOut' }}
                />
              ))}
            </section>
          </div>
        </div>
 
        <DemoControls progress={progress} isPlaying={isPlaying} onToggle={toggle} />
      </section>
    </LazyMotion>
  )
}

Demo 03

Terminal

Open

Sequential cue-driven output with phase indicators

loading cue…

Source

terminal.tsx

import { useMemo, useState } from 'react'
import { LazyMotion, domAnimation, m, useMotionValue, useMotionValueEvent, useSpring } from 'motion/react'
import { defineCue, observeCue } from 'motion-cues'
import { useMountEffect } from '../../hooks/useMountEffect'
import { useAutoPlay } from '../../hooks/useAutoPlay'
import DemoControls from './DemoControls'
 
type TerminalPhase = 'boot' | 'install' | 'compile' | 'serve' | 'ready'
 
interface TerminalLine {
  phase: TerminalPhase
  at: number
  text: string
}
 
const terminalCue = defineCue('terminal.text', {
  boot: 0.06,
  install: 0.24,
  compile: 0.46,
  serve: 0.68,
  ready: 0.88,
} satisfies Record<TerminalPhase, number>)
 
const lines: TerminalLine[] = [
  { phase: 'boot', at: 0.06, text: '$ pnpm dev --filter playground' },
  { phase: 'boot', at: 0.14, text: 'loading workspace graph...' },
  { phase: 'install', at: 0.24, text: 'resolving motion-cues package' },
  { phase: 'install', at: 0.34, text: 'linking local library build' },
  { phase: 'compile', at: 0.46, text: 'compiling demo islands' },
  { phase: 'compile', at: 0.56, text: 'hydrating terminal stream' },
  { phase: 'serve', at: 0.68, text: 'serving /motion-cues/demos' },
  { phase: 'serve', at: 0.78, text: 'waiting for file changes' },
  { phase: 'ready', at: 0.88, text: 'ready in 428ms' },
]
 
function pct(value: number) {
  return `${Math.round(Math.max(0, Math.min(1, value)) * 100)}%`
}
 
export default function Terminal() {
  const progress = useMotionValue(0)
  const spring = useSpring(progress, { stiffness: 155, damping: 24, mass: 0.72 })
  const [springProgress, setSpringProgress] = useState(0)
  const [phase, setPhase] = useState<TerminalPhase>('boot')
  const { isPlaying, toggle, containerRef } = useAutoPlay(progress)
 
  useMountEffect(() => observeCue(spring, terminalCue, {
    onEnter: (key) => setPhase(key),
  }))
 
  useMotionValueEvent(spring, 'change', setSpringProgress)
 
  const visibleLines = useMemo(
    () => lines.filter((line) => springProgress >= line.at - 0.035),
    [springProgress],
  )
  const loadingWidth = pct(springProgress)
 
  return (
    <LazyMotion features={domAnimation}>
      <section ref={containerRef} className="terminal-stream-demo" aria-label="Terminal text loading demo">
        <m.div
          className="terminal-stream-demo__window"
          animate={{ y: phase === 'compile' ? [-1, 1, 0] : 0 }}
          transition={{ duration: 0.18, ease: 'easeOut' }}
        >
          <div className="terminal-stream-demo__scan" aria-hidden="true" />
          <div className="terminal-stream-demo__body">
            {visibleLines.map((line, index) => (
              <m.p
                key={line.text}
                className={line.phase === phase ? 'is-current' : ''}
                initial={{ opacity: 0, y: 12, filter: 'blur(2px)' }}
                animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
                transition={{ type: 'spring', stiffness: 360, damping: 34, mass: 0.8, delay: index * 0.018 }}
              >
                <span aria-hidden="true">›</span>{line.text}
              </m.p>
            ))}
            <m.p
              key={`loader-${phase}`}
              className="terminal-stream-demo__typing"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.12 }}
            >
              <span aria-hidden="true">›</span>loading<span className="terminal-stream-demo__dots">...</span>
            </m.p>
          </div>
          <div className="terminal-stream-demo__bar" aria-label={`Loading ${loadingWidth}`}>
            <m.i style={{ scaleX: spring }} />
          </div>
        </m.div>
 
        <DemoControls progress={progress} isPlaying={isPlaying} onToggle={toggle} />
      </section>
    </LazyMotion>
  )
}

Demo 04

Blast Shapes

Open

Interactive shape field with shockwave rings and drag physics

loading cue…

Source

blast-shapes.tsx

import { useState, useRef, useCallback, useEffect } from 'react'
import { useMotionValue, useSpring, LazyMotion, m, domAnimation } from 'motion/react'
import { defineCue, observeCue } from 'motion-cues'
import { useMountEffect } from '../../hooks/useMountEffect'
import { useAutoPlay } from '../../hooks/useAutoPlay'
import DemoControls from './DemoControls'
import CueReadout, { cueItemsFromSchema } from './CueReadout'
 
const blastCue = defineCue('blast', { idle: 0, expanding: 0.35, peak: 0.7, fading: 1 })
 
const shapeTypes = ['circle', 'square', 'triangle', 'hexagon', 'diamond'] as const
type ShapeType = (typeof shapeTypes)[number]
const palette = ['#64748b', '#06b6d4', '#f59e0b', '#f43f5e']
const cueColors: Record<string, string> = { idle: '#64748b', expanding: '#06b6d4', peak: '#f59e0b', fading: '#f43f5e' }
 
const W = 280
const H = 260
const MAX_RADIUS = 160
 
const initialNodes = [
  { id: 0, shape: 0, color: 0, rx: 55, ry: 100, size: 24 },
  { id: 1, shape: 2, color: 1, rx: 140, ry: 50, size: 26 },
  { id: 2, shape: 4, color: 2, rx: 225, ry: 100, size: 24 },
  { id: 3, shape: 1, color: 3, rx: 100, ry: 200, size: 22 },
  { id: 4, shape: 3, color: 0, rx: 200, ry: 200, size: 28 },
]
 
function dist(a: { x: number; y: number }, b: { x: number; y: number }) {
  return Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2)
}
 
function ShapeSVG({ type, size, fill, stroke, strokeW }: {
  type: ShapeType; size: number; fill: string; stroke: string; strokeW: number
}) {
  const r = size
  switch (type) {
    case 'circle':
      return <circle r={r} fill={fill} stroke={stroke} strokeWidth={strokeW} />
    case 'square':
      return <rect x={-r} y={-r} width={r * 2} height={r * 2} fill={fill} stroke={stroke} strokeWidth={strokeW} />
    case 'triangle': {
      const h = r * 1.55
      return <polygon points={`0,${-r * 1.33} ${h},${r * 0.67} ${-h},${r * 0.67}`} fill={fill} stroke={stroke} strokeWidth={strokeW} />
    }
    case 'hexagon': {
      const pts = Array.from({ length: 6 }, (_, i) => {
        const a = (Math.PI / 3) * i - Math.PI / 6
        return `${Math.cos(a) * r},${Math.sin(a) * r}`
      }).join(' ')
      return <polygon points={pts} fill={fill} stroke={stroke} strokeWidth={strokeW} />
    }
    case 'diamond':
      return <polygon points={`0,${-r * 1.2} ${r},0 0,${r * 1.2} ${-r},0`} fill={fill} stroke={stroke} strokeWidth={strokeW} />
  }
}
 
export default function BlastShapes() {
  const progress = useMotionValue(0)
  const spring = useSpring(progress, { stiffness: 200, damping: 20 })
  const [activeCue, setActiveCue] = useState('idle')
 
  const [nodes, setNodes] = useState(initialNodes)
  const [blastId, setBlastId] = useState<number | null>(null)
  const [blastR, setBlastR] = useState(0)
  const [affected, setAffected] = useState<Set<number>>(new Set())
  const [quiverIds, setQuiverIds] = useState<Set<number>>(new Set())
 
  const nodesRef = useRef(nodes)
  nodesRef.current = nodes
 
  const dragRef = useRef<{ id: number; sx: number; sy: number } | null>(null)
  const posRefs = useRef(new Map<number, { x: number; y: number }>())
  const autoRef = useRef<ReturnType<typeof requestAnimationFrame>>(0)
  const autoIdx = useRef(0)
  const blastAnimRef = useRef<ReturnType<typeof setTimeout> | null>(null)
  const affectedAccRef = useRef(new Set<number>())
 
  const { isPlaying, toggle, containerRef } = useAutoPlay(progress)
 
  useMountEffect(() => observeCue(spring, blastCue, { onEnter: (key) => setActiveCue(key) }))
 
  const triggerBlast = useCallback((nodeId: number) => {
    if (blastAnimRef.current) {
      clearTimeout(blastAnimRef.current)
      blastAnimRef.current = null
    }
 
    const currentNodes = nodesRef.current
    const srcNode = currentNodes.find((n) => n.id === nodeId)
    if (!srcNode) return
 
    const src = { x: srcNode.rx, y: srcNode.ry }
 
    setBlastId(nodeId)
    setBlastR(0)
    setAffected(new Set())
    setQuiverIds(new Set())
    affectedAccRef.current = new Set()
 
    const start = performance.now()
    const duration = 800
 
    function tick(now: number) {
      const elapsed = now - start
      const v = Math.min(elapsed / duration, 1)
      const ease = 1 - (1 - v) ** 3
      const r = ease * MAX_RADIUS
 
      const aff = new Set<number>()
      const qv = new Set<number>()
      const curNodes = nodesRef.current
 
      curNodes.forEach((n) => {
        if (n.id === nodeId) return
        const pos = posRefs.current.get(n.id) ?? { x: n.rx, y: n.ry }
        const d = dist(src, pos)
        if (d <= r + n.size) {
          aff.add(n.id)
          affectedAccRef.current.add(n.id)
          if (Math.abs(d - r) < n.size + 10) qv.add(n.id)
        }
      })
 
      setAffected(aff)
      setQuiverIds(qv)
      setBlastR(r)
 
      if (v < 1) {
        blastAnimRef.current = setTimeout(() => tick(performance.now()), 16)
      } else {
        setNodes((prev) =>
          prev.map((n) => {
            if (n.id === nodeId || !affectedAccRef.current.has(n.id)) return n
            return {
              ...n,
              shape: (n.shape + 1) % shapeTypes.length,
              color: (n.color + 1) % palette.length,
            }
          }),
        )
        setBlastId(null)
        setBlastR(0)
        setAffected(new Set())
        setQuiverIds(new Set())
        blastAnimRef.current = null
      }
    }
 
    blastAnimRef.current = setTimeout(() => tick(performance.now()), 16)
  }, [])
 
  useEffect(() => {
    posRefs.current.clear()
    nodes.forEach((n) => posRefs.current.set(n.id, { x: n.rx, y: n.ry }))
  }, [nodes])
 
  useEffect(() => {
    if (!isPlaying) return
    let frame = 0
    const loop = () => {
      frame++
      if (frame % 90 === 0 && blastAnimRef.current === null) {
        const idx = autoIdx.current % nodesRef.current.length
        autoIdx.current++
        triggerBlast(nodesRef.current[idx].id)
      }
      autoRef.current = requestAnimationFrame(loop)
    }
    autoRef.current = requestAnimationFrame(loop)
    return () => cancelAnimationFrame(autoRef.current)
  }, [isPlaying, triggerBlast])
 
  useEffect(() => {
    return () => {
      cancelAnimationFrame(autoRef.current)
      if (blastAnimRef.current) clearTimeout(blastAnimRef.current)
    }
  }, [])
 
  const handlePointerDown = useCallback((e: React.PointerEvent, nodeId: number) => {
… 109 more lines

Demo 05

Nav Morph

Open

Navigation bar morphing with sliding indicator

loading cue…

Source

nav-morph.tsx

import { useState } from 'react';
import { useMotionValue, useSpring, useTransform, LazyMotion, m, domAnimation } from 'motion/react';
import { defineCue, observeCue } from 'motion-cues';
import { useMountEffect } from '../../hooks/useMountEffect';
import { useAutoPlay } from '../../hooks/useAutoPlay';
import DemoControls from './DemoControls';
import CueReadout, { cueItemsFromSchema } from './CueReadout';
 
const navCue = defineCue("nav", {
  compact: 0,
  normal: 0.3,
  expanded: 0.7,
  full: 1,
});
 
const navItems = ['Home', 'Projects', 'About', 'Contact'];
const cueColors: Record<string, string> = { compact: '#64748b', normal: '#00d4ff', expanded: '#00cc6a', full: '#f4f4f4' };
 
const contentByCue: Record<string, string> = {
  compact: 'Compact navigation bar',
  normal: 'Standard navigation',
  expanded: 'Expanded with more space',
  full: 'Full-size navigation',
};
 
export default function NavMorph() {
  const progress = useMotionValue(0);
  const spring = useSpring(progress, { stiffness: 200, damping: 20 });
  const [activeCue, setActiveCue] = useState('compact');
  const [activeNav, setActiveNav] = useState(0);
 
  const { isPlaying, toggle, containerRef } = useAutoPlay(progress);
 
  useMountEffect(() => observeCue(spring, navCue, {
    onEnter: (key) => setActiveCue(key),
  }));
 
  const navHeight = useTransform(spring, [0, 0.3, 0.7, 1], [48, 56, 72, 96]);
  const indicatorWidth = useTransform(spring, [0, 0.3, 0.7, 1], [40, 60, 80, 100]);
  const fontSize = useTransform(spring, [0, 0.3, 0.7, 1], [12, 14, 16, 18]);
 
  return (
    <LazyMotion features={domAnimation}>
      <div ref={containerRef} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '2rem' }}>
        <m.div
          style={{
            height: navHeight,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: '1.5rem',
            background: '#111',
            borderRadius: '12px',
            border: '1px solid #1a1a1a',
            padding: '0 1rem',
            position: 'relative',
            overflow: 'hidden',
          }}
        >
          <m.div
            style={{
              position: 'absolute',
              bottom: 0,
              left: `${activeNav * 25}%`,
              width: indicatorWidth,
              height: 3,
              background: '#00ff88',
              borderRadius: '3px 3px 0 0',
            }}
          />
          {navItems.map((item, i) => (
            <m.button
              key={item}
              onClick={() => setActiveNav(i)}
              style={{
                fontSize,
                padding: '0.5rem 1rem',
                background: 'none',
                border: 'none',
                cursor: 'pointer',
                color: activeNav === i ? '#00ff88' : '#888',
                fontWeight: activeNav === i ? 'bold' : 'normal',
                textTransform: 'uppercase',
                letterSpacing: '0.1em',
              }}
            >
              {item}
            </m.button>
          ))}
        </m.div>
 
        <div
          style={{
            padding: '3rem',
            textAlign: 'center',
            border: '1px solid #1a1a1a',
            borderRadius: '8px',
            fontSize: '1rem',
            color: '#aaa',
            width: '100%',
          }}
        >
          {contentByCue[activeCue]}
        </div>
 
        <CueReadout title="Navigation cue map" cues={cueItemsFromSchema(navCue.schema, cueColors)} active={activeCue} progress={progress} />
        <DemoControls progress={progress} isPlaying={isPlaying} onToggle={toggle} />
      </div>
    </LazyMotion>
  );
}

Demo 06

Card Stack

Open

3D spatial choreography with depth and rotation

loading cue…

Source

card-stack.tsx

import { useMemo, useState, type CSSProperties } from 'react'
import { LazyMotion, domAnimation, m, useMotionValue, useMotionValueEvent, useSpring } from 'motion/react'
import { defineCue, observeCue } from 'motion-cues'
import { useMountEffect } from '../../hooks/useMountEffect'
import { useAutoPlay } from '../../hooks/useAutoPlay'
import DemoControls from './DemoControls'
 
type StackPhase = 'deck' | 'fan' | 'focus' | 'stack'
 
const stackCue = defineCue('cards.stack', {
  deck: 0,
  fan: 0.24,
  focus: 0.58,
  stack: 0.86,
} satisfies Record<StackPhase, number>)
 
const cards = [
  { title: 'Observe', meta: 'thresholds', accent: '#7dd3fc' },
  { title: 'Resolve', meta: 'direction', accent: '#00cc6a' },
  { title: 'Compose', meta: 'spring lag', accent: '#ffb020' },
  { title: 'Paint', meta: 'motion cue', accent: '#ff2d55' },
  { title: 'Settle', meta: 'callback', accent: '#f4f4f4' },
] as const
 
function lerp(a: number, b: number, t: number) {
  return a + (b - a) * t
}
 
function clamp01(value: number) {
  return Math.max(0, Math.min(1, value))
}
 
function cardPose(index: number, progress: number) {
  const center = index - (cards.length - 1) / 2
  const fan = clamp01(progress / 0.58)
  const stack = clamp01((progress - 0.58) / 0.42)
  const spreadX = center * 42 * fan
  const spreadY = Math.abs(center) * 12 * fan
  const focusLift = index === 2 ? -26 * stack : Math.abs(center) * 10 * stack
 
  return {
    x: lerp(spreadX, center * 10, stack),
    y: lerp(spreadY, index * 9, stack) + focusLift,
    rotateZ: lerp(center * 8 * fan, center * 1.6, stack),
    rotateX: lerp(0, 7, stack),
    scale: lerp(1 - Math.abs(center) * 0.025, 1 - index * 0.018, stack),
    zIndex: index === 2 && progress > 0.5 ? 10 : cards.length - index,
  }
}
 
export default function CardStack() {
  const progress = useMotionValue(0)
  const spring = useSpring(progress, { stiffness: 170, damping: 24, mass: 0.8 })
  const [value, setValue] = useState(0)
  const [phase, setPhase] = useState<StackPhase>('deck')
  const { isPlaying, toggle, containerRef } = useAutoPlay(progress, { duration: 5200 })
 
  useMountEffect(() => observeCue(spring, stackCue, {
    onEnter: (key) => setPhase(key),
  }))
  useMotionValueEvent(spring, 'change', setValue)
 
  const poses = useMemo(() => cards.map((_, index) => cardPose(index, value)), [value])
 
  return (
    <LazyMotion features={domAnimation}>
      <section ref={containerRef} className="card-stack-demo" aria-label="Card stack choreography demo">
        <div className="card-stack-demo__stage" data-phase={phase}>
          {cards.map((card, index) => {
            const pose = poses[index]
            return (
              <m.article
                key={card.title}
                className="card-stack-demo__card"
                style={{ '--card-accent': card.accent, zIndex: pose.zIndex } as CSSProperties}
                animate={{
                  x: pose.x,
                  y: pose.y,
                  rotateX: pose.rotateX,
                  rotateZ: pose.rotateZ,
                  scale: pose.scale,
                }}
                transition={{ type: 'spring', stiffness: 260, damping: 30, mass: 0.76 }}
              >
                <span>{card.meta}</span>
                <strong>{card.title}</strong>
                <i aria-hidden="true" />
              </m.article>
            )
          })}
        </div>
 
        <DemoControls progress={progress} isPlaying={isPlaying} onToggle={toggle} />
      </section>
    </LazyMotion>
  )
}

Demo 07

Audio Sync

Open

Three.js FFT particle field driven by arrangement, bass, drums, lead, and CueBus events

loading cue…

Source

audio-sync.tsx

import { useEffect, useMemo, useRef, useState, type CSSProperties } from 'react'
import * as THREE from 'three'
import { LazyMotion, domAnimation, m, type MotionValue, useMotionValue, useSpring } from 'motion/react'
import { defineCue, observeCue } from 'motion-cues'
import { useMountEffect } from '../../hooks/useMountEffect'
import DemoControls from './DemoControls'
 
declare global {
  interface Window {
    webkitAudioContext?: typeof AudioContext
  }
}
 
const AUDIO_SRC = '/motion-cues/audio/technological-messup.ogg'
const arrangementCue = defineCue('arrangement', { intro: 0, build: 0.2, drop: 0.46, bloom: 0.72, outro: 0.9 })
const beatCue = defineCue('beat', { rest: 0, ghost: 0.22, pulse: 0.42, hit: 0.68, slam: 0.86 })
 
const arrangementColors: Record<string, string> = {
  intro: '#7dd3fc',
  build: '#00cc6a',
  drop: '#ff2d55',
  bloom: '#f4f4f4',
  outro: '#ffb020',
}
 
const voiceColors = {
  bass: '#ffb020',
  beat: '#ff2d55',
  lead: '#7dd3fc',
}
 
const notePaths = [
  'M10 4h3v19a5 5 0 1 1-3-4.58V4Zm3 2v3.2l8-2.4V3.6L13 6Z',
  'M14 3h3v16.6a4.7 4.7 0 1 1-3-4.2V3Zm3 2.4v2.9l6-1.8V3.6l-6 1.8Z',
  'M8 6h3v14a4.6 4.6 0 1 1-3-4.34V6Zm11-2h3v14a4.6 4.6 0 1 1-3-4.34V4ZM11 7.2l8-2.1v3.2l-8 2.1V7.2Z',
] as const
 
interface AudioFrame {
  step: number
  phrase: number
  energy: number
  bass: number
  beat: number
  lead: number
  space: number
}
 
type AudioStyle = CSSProperties & {
  '--audio-accent': string
  '--audio-energy': number
  '--audio-bass': number
  '--audio-space': number
}
 
function clamp01(value: number) {
  return Math.max(0, Math.min(1, value))
}
 
function cueFor(schema: Readonly<Record<string, number>>, value: number) {
  return Object.entries(schema)
    .sort((a, b) => b[1] - a[1])
    .find(([, threshold]) => value >= threshold)?.[0] ?? Object.keys(schema)[0]!
}
 
function computeIdleFrame(value: number): AudioFrame {
  const p = clamp01(value)
  const subStep = Math.floor(p * 128) % 128
  const step = subStep % 16
  const phrase = Math.floor(subStep / 16)
  const lfo = (Math.sin(p * Math.PI * 18) + 1) / 2
  const build = p < 0.46 ? 0.32 + p * 1.2 : p < 0.72 ? 0.9 : 0.62
  const bass = clamp01(build * (0.22 + lfo * 0.3))
  const beat = clamp01(build * (0.18 + Math.max(0, Math.sin(p * Math.PI * 32)) * 0.5))
  const lead = clamp01(0.18 + lfo * 0.32)
  const space = clamp01(0.26 + p * 0.45 + lfo * 0.12)
 
  return {
    step,
    phrase,
    energy: clamp01(bass * 0.34 + beat * 0.38 + lead * 0.18 + space * 0.16),
    bass,
    beat,
    lead,
    space,
  }
}
 
function averageBand(data: Uint8Array, from: number, to: number) {
  let total = 0
  const start = Math.max(0, Math.min(data.length - 1, from))
  const end = Math.max(start + 1, Math.min(data.length, to))
  for (let i = start; i < end; i += 1) total += data[i] ?? 0
  return clamp01((total / (end - start)) / 255)
}
 
function computeAudioFrame(progressValue: number, frequencyData: Uint8Array, timeData: Uint8Array): AudioFrame {
  const fallback = computeIdleFrame(progressValue)
  const bass = clamp01(averageBand(frequencyData, 1, 10) * 1.8)
  const lowMid = averageBand(frequencyData, 10, 38)
  const highMid = averageBand(frequencyData, 38, 92)
  const air = averageBand(frequencyData, 92, 180)
  let rms = 0
 
  for (let i = 0; i < timeData.length; i += 1) {
    const centered = ((timeData[i] ?? 128) - 128) / 128
    rms += centered * centered
  }
 
  const transient = clamp01(Math.sqrt(rms / timeData.length) * 2.8)
  const beat = clamp01(transient * 0.72 + lowMid * 0.62)
  const lead = clamp01(highMid * 1.18 + air * 0.62)
  const space = clamp01(0.18 + air * 1.1 + highMid * 0.32)
 
  return {
    ...fallback,
    bass,
    beat,
    lead,
    space,
    energy: clamp01(bass * 0.34 + beat * 0.36 + lead * 0.22 + space * 0.16),
  }
}
 
function AudioParticleField({
  progress,
  bass,
  beat,
  lead,
  space,
  color,
}: {
  progress: MotionValue<number>
  bass: MotionValue<number>
  beat: MotionValue<number>
  lead: MotionValue<number>
  space: MotionValue<number>
  color: string
}) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const colorRef = useRef(color)
 
  useEffect(() => {
    colorRef.current = color
  }, [color])
 
  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return
 
    const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: false, powerPreference: 'high-performance' })
    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.5))
    renderer.setClearColor(0x000000, 0)
 
    const scene = new THREE.Scene()
    const camera = new THREE.PerspectiveCamera(48, 1, 0.1, 120)
    camera.position.set(0, 0, 22)
 
    const count = 960
    const bins = 96
    const lanes = count / bins
    const positions = new Float32Array(count * 3)
    const colors = new Float32Array(count * 3)
    const baseAngle = new Float32Array(count)
    const baseRadius = new Float32Array(count)
    const seed = new Float32Array(count)
 
    for (let i = 0; i < count; i += 1) {
      const bin = i % bins
      const lane = Math.floor(i / bins)
      const binNorm = bin / (bins - 1)
      const laneNorm = lane / (lanes - 1)
      baseAngle[i] = binNorm * Math.PI * 2 + laneNorm * 0.28
      baseRadius[i] = 1.4 + laneNorm * 9.4 + Math.sin(bin * 0.41) * 0.24
      seed[i] = ((i * 48271) % 2147483647) / 2147483647
    }
 
    const geometry = new THREE.BufferGeometry()
    const positionAttribute = new THREE.BufferAttribute(positions, 3)
    const colorAttribute = new THREE.BufferAttribute(colors, 3)
    geometry.setAttribute('position', positionAttribute)
… 300 more lines

Demo 08

Orchestra

Open

Conductor-style cue choreography with rings, lanes, waveforms, and event routing

loading cue…

Source

orchestra.tsx

import { useMemo, useState, type CSSProperties } from 'react'
import { useMotionValue, useSpring, LazyMotion, m, domAnimation, useTransform } from 'motion/react'
import { defineCue, observeCue } from 'motion-cues'
import { useMountEffect } from '../../hooks/useMountEffect'
import { useAutoPlay } from '../../hooks/useAutoPlay'
import DemoControls from './DemoControls'
import CueReadout, { cueItemsFromSchema } from './CueReadout'
 
const orchestraCue = defineCue('orchestra', {
  intro: 0,
  build: 0.22,
  lift: 0.42,
  climax: 0.63,
  sustain: 0.78,
  resolve: 0.94,
})
 
const cueColors: Record<string, string> = {
  intro: '#64748b',
  build: '#8b5cf6',
  lift: '#00d4ff',
  climax: '#ff2d55',
  sustain: '#00cc6a',
  resolve: '#f4f4f4',
}
 
const lanes = [
  { key: 'camera', label: 'Camera rig', threshold: 0.12 },
  { key: 'rings', label: 'Shock rings', threshold: 0.28 },
  { key: 'particles', label: 'Particle choir', threshold: 0.46 },
  { key: 'wave', label: 'Waveform line', threshold: 0.62 },
  { key: 'lighting', label: 'Lighting hit', threshold: 0.82 },
]
 
function clamp(value: number) {
  return Math.max(0, Math.min(1, value))
}
 
function generateParticles() {
  return Array.from({ length: 34 }, (_, index) => {
    const angle = index * 2.3999632297
    const radius = 24 + (index % 8) * 13
    return {
      id: index,
      x: 180 + Math.cos(angle) * radius,
      y: 136 + Math.sin(angle) * radius * 0.7,
      size: 1.6 + (index % 5) * 0.55,
      delay: (index % 7) * 0.03,
    }
  })
}
 
const wavePoints = Array.from({ length: 42 }, (_, i) => (i / 41) * 320)
 
export default function Orchestra() {
  const progress = useMotionValue(0)
  const spring = useSpring(progress, { stiffness: 190, damping: 22 })
  const [activeCue, setActiveCue] = useState('intro')
  const [eventLabel, setEventLabel] = useState('enter:intro')
  const [value, setValue] = useState(0)
 
  const { isPlaying, toggle, containerRef } = useAutoPlay(progress, { duration: 6200 })
  const particles = useMemo(() => generateParticles(), [])
 
  useMountEffect(() => observeCue(spring, orchestraCue, {
    onEnter: (key) => { setActiveCue(key); setEventLabel(`enter:${key}`) },
    onExit: (key) => setEventLabel(`exit:${key}`),
  }))
 
  useMountEffect(() => progress.on('change', (v: number) => setValue(v)))
 
  const ringOne = useTransform(spring, [0, 0.22, 0.42, 0.63, 0.78, 1], [24, 48, 72, 104, 88, 42])
  const ringTwo = useTransform(spring, [0, 0.22, 0.42, 0.63, 0.78, 1], [38, 70, 102, 132, 118, 62])
  const ringThree = useTransform(spring, [0, 0.22, 0.42, 0.63, 0.78, 1], [52, 88, 126, 158, 142, 76])
  const particleOpacity = useTransform(spring, [0, 0.22, 0.42, 0.63, 0.78, 1], [0.22, 0.42, 0.7, 1, 0.72, 0.36])
  const particleScale = useTransform(spring, [0, 0.22, 0.42, 0.63, 0.78, 1], [0.58, 0.82, 1, 1.36, 1.08, 0.72])
  const batonRotate = useTransform(spring, [0, 0.22, 0.42, 0.63, 0.78, 1], [-24, -8, 12, 34, 18, -18])
  const waveformPts = useTransform(spring, (v) => {
    const activeBoost = activeCue === 'climax' ? 1.25 : activeCue === 'sustain' ? 0.92 : 0.72
    const amp = 8 + v * 46 * activeBoost
    return wavePoints.map((x, index) => {
      const y = 214 + Math.sin(index * 0.62 + v * Math.PI * 9) * amp + Math.sin(index * 0.21 + v * 8) * amp * 0.22
      return `${(x + 20).toFixed(1)},${y.toFixed(1)}`
    }).join(' ')
  })
 
  const activeColor = cueColors[activeCue] ?? '#00d4ff'
  const laneLevels = lanes.map((lane, index) => clamp((value - lane.threshold + 0.22) / 0.28 + Math.sin(value * Math.PI * 6 + index) * 0.08))
 
  return (
    <LazyMotion features={domAnimation}>
      <style>{`
        .mc-orchestra {
          --orch-accent: #00d4ff;
          width: min(100%, 560px);
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 14px;
          box-sizing: border-box;
        }
 
        .mc-orch-board {
          width: 100%;
          display: grid;
          grid-template-columns: .88fr 1.12fr;
          gap: 12px;
          padding: 12px;
          box-sizing: border-box;
          border: 1px solid var(--nd-border-visible);
          border-radius: 20px;
          background:
            radial-gradient(circle at 70% 34%, color-mix(in srgb, var(--orch-accent), transparent 74%), transparent 46%),
            linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
            #050505;
          box-shadow: 0 22px 70px rgba(0,0,0,.38);
        }
 
        .mc-orch-console {
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 10px;
        }
 
        .mc-orch-kicker,
        .mc-orch-cue,
        .mc-orch-lane-name,
        .mc-orch-event,
        .mc-orch-step {
          font-family: 'Space Mono', 'Geist Mono', monospace;
          text-transform: uppercase;
        }
 
        .mc-orch-hero {
          min-height: 112px;
          padding: 12px;
          border: 1px solid var(--nd-border);
          border-radius: 16px;
          background: rgba(0,0,0,.28);
        }
 
        .mc-orch-kicker {
          display: block;
          color: var(--nd-text-disabled);
          font-size: 8px;
          letter-spacing: .16em;
        }
 
        .mc-orch-cue {
          display: block;
          margin-top: 8px;
          color: var(--orch-accent);
          font-size: clamp(22px, 4vw, 36px);
          font-weight: 700;
          letter-spacing: -.08em;
          line-height: .9;
          text-shadow: 0 0 24px color-mix(in srgb, var(--orch-accent), transparent 64%);
        }
 
        .mc-orch-event {
          display: inline-flex;
          margin-top: 10px;
          padding: 5px 8px;
          border: 1px solid color-mix(in srgb, var(--orch-accent), transparent 55%);
          border-radius: 999px;
          color: var(--nd-text-secondary);
          background: rgba(0,0,0,.28);
          font-size: 8px;
          letter-spacing: .08em;
        }
 
        .mc-orch-lanes {
          display: grid;
          gap: 7px;
        }
 
        .mc-orch-lane {
          padding: 8px;
          border: 1px solid var(--nd-border);
… 170 more lines

Demo 09

Shape Morph

Open

SVG path interpolation driven by cue thresholds

loading cue…

Source

shape-morph.tsx

import { useState } from 'react';
import { useMotionValue, useSpring, useTransform, LazyMotion, m, domAnimation } from 'motion/react';
import { defineCue, observeCue } from 'motion-cues';
import { useMountEffect } from '../../hooks/useMountEffect';
import { useAutoPlay } from '../../hooks/useAutoPlay';
import DemoControls from './DemoControls';
import CueReadout, { cueItemsFromSchema } from './CueReadout';
 
const morphCue = defineCue("morph", {
  circle: 0,
  square: 0.33,
  triangle: 0.66,
});
 
const paths: Record<string, string> = {
  circle: 'M 50 10 A 40 40 0 1 1 50 90 A 40 40 0 1 1 50 10',
  square: 'M 15 15 L 85 15 L 85 85 L 15 85 Z',
  triangle: 'M 50 10 L 90 85 L 10 85 Z',
};
 
const pathKeys = Object.keys(paths);
const cueColors: Record<string, string> = { circle: '#00d4ff', square: '#00cc6a', triangle: '#ffb020' };
 
export default function ShapeMorph() {
  const progress = useMotionValue(0);
  const spring = useSpring(progress, { stiffness: 200, damping: 20 });
  const [activeCue, setActiveCue] = useState('circle');
  const [path, setPath] = useState(paths.circle);
 
  const { isPlaying, toggle, containerRef } = useAutoPlay(progress);
 
  useMountEffect(() => observeCue(spring, morphCue, {
    onEnter: (key) => setActiveCue(key),
  }));
 
  const pathIndex = useTransform(spring, [0, 0.33, 0.66, 1], [0, 1, 2, 2]);
  useMountEffect(() => pathIndex.on('change', (val) => {
    const idx = Math.round(val) % pathKeys.length;
    setPath(paths[pathKeys[idx]!]!);
  }));
 
  const opacity = useTransform(spring, [0, 0.05, 0.95, 1], [0.5, 1, 1, 0.5]);
 
  return (
    <LazyMotion features={domAnimation}>
      <div ref={containerRef} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '2rem' }}>
        <m.svg width="200" height="200" viewBox="0 0 100 100" style={{ opacity }}>
          <m.path
            d={path}
            fill="none"
            stroke="#00ff88"
            strokeWidth="2"
            transition={{ duration: 0.3 }}
          />
        </m.svg>
 
        <CueReadout title="Shape cue map" cues={cueItemsFromSchema(morphCue.schema, cueColors)} active={activeCue} progress={progress} />
        <DemoControls progress={progress} isPlaying={isPlaying} onToggle={toggle} />
      </div>
    </LazyMotion>
  );
}