loading code fetching the highlighted snippet
FIG-001/ HOOK
cycling variants.
useCycle(...labels) returns a { current, cycle } object. Read variant.current to drive animate=, call variant.cycle() to advance, or variant.cycle(i) to jump to a specific label. Pair it with a variants map and motion handles the transitions.
-
cycle()with no args advances to the next label, wrapping around at the end. It's the simplest way to build a multi-state toggle without writing your own modulo arithmetic. -
cycle(i)jumps directly to the label at indexi. Useful for tab-bar-style controls where each button maps to a specific state — no need for a separate selected-index$statecell. - The motion target reads
animate={variant.current}(a string label), so motion resolves it viavariants. Pure declarative: state lives in the cycle object, animations live in the variants map.
rest
advance
rest
nudge
flip
spin
category · hook
sheet · sheet 01 / 01
⟳ to re-run