hanzo.ai/components/enso/cycle.ts

'use client'

import { useEffect, useState } from 'react'
import { TIME } from './motion'

/**
 * Advance a small set while its section is on screen.
 *
 * The index opens on `rest` and stays there when motion is reduced, so the
 * first paint and a reader who declines motion share one frame. Off screen,
 * or with the tab hidden, the clock waits. Nothing is hidden either way:
 * the caller draws every item, and this only says which one is current.
 */
export function useCycle(id: string, count: number, rest: number) {
  const [i, setI] = useState(rest)
  const [phase, setPhase] = useState<'weigh' | 'pick'>('pick')
  const [play, setPlay] = useState(false)

  useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
    let stop = false
    let timer = 0

    const shown = () => {
      if (document.hidden) return false
      const node = document.getElementById(id)
      if (!node) return false
      const r = node.getBoundingClientRect()
      return r.bottom > 64 && r.top < window.innerHeight - 32
    }

    const step = () => {
      if (stop) return
      if (!shown()) {
        timer = window.setTimeout(step, 400)
        return
      }
      setPlay(true)
      setI((n) => (n + 1) % count)
      setPhase('weigh')
      timer = window.setTimeout(() => {
        if (stop) return
        setPhase('pick')
        timer = window.setTimeout(step, TIME.hold)
      }, TIME.weigh)
    }

    const hold = window.setTimeout(step, TIME.open)
    return () => {
      stop = true
      window.clearTimeout(hold)
      window.clearTimeout(timer)
    }
  }, [id, count])

  return {
    i: play ? i : rest,
    phase: play ? phase : ('pick' as const),
    play,
  }
}