Function MarksLab

apps/sim/app/landing-preview/marks-lab/marks-lab.tsx:659–966

()

}

export function MarksLab() {
  const [configs, setConfigs] = useState<Record<string, MarkConfig>>(initConfigs)
  const [markId, setMarkId] = useState(MARKS[0].id)
  const [amt, setAmt] = useState(0)
  const [playing, setPlaying] = useState(false)
  const rafRef = useRef<number | null>(null)

  const mark = MARKS.find((m) => m.id === markId) as LabMark
  const cfg = ensureConfig(configs[markId], mark)

  // Persist a complete config for the active mark so edits always have a target
  // — covers marks/params added during development without a full reload.
  useEffect(() => {
    setConfigs((prev) => {
      const ensured = ensureConfig(prev[markId], mark)
      return prev[markId] === ensured ? prev : { ...prev, [markId]: ensured }
    })
  }, [markId, mark])

  useEffect(() => {
    if (!playing) return
    const start = performance.now()
    const loop = () => {
      const t = (performance.now() - start) / 1000
      setAmt((1 - Math.cos(t * 1.4)) / 2)
      rafRef.current = requestAnimationFrame(loop)
    }
    rafRef.current = requestAnimationFrame(loop)
    return () => {
      if (rafRef.current != null) cancelAnimationFrame(rafRef.current)
    }
  }, [playing])

  const resolved = useMemo(() => {
    const p: Record<string, number> = {}
    for (const def of mark.params) {
      const c = cfg.params[def.key]
      p[def.key] = lerp(c.rest, c.hover, amt)
    }
    return p
  }, [mark, cfg, amt])

  const strokeNow = lerp(cfg.stroke.rest, cfg.stroke.hover, amt)
  const gooNow = lerp(cfg.goo.rest, cfg.goo.hover, amt)
  const gradCx = lerp(cfg.gradient.cx.rest, cfg.gradient.cx.hover, amt)
  const gradCy = lerp(cfg.gradient.cy.rest, cfg.gradient.cy.hover, amt)
  const gradR = lerp(cfg.gradient.r.rest, cfg.gradient.r.hover, amt)
  const d = mark.build(resolved, amt, cfg.params)

  const setPair = (
    group: 'params' | 'stroke' | 'goo',
    key: string,
    side: 'rest' | 'hover',
    v: number
  ) =>
    setConfigs((prev) => {
      const next = structuredClone(prev)
      const target = group === 'params' ? next[markId].params[key] : next[markId][group]