Loop Cycle
ループサイクル
Content that swaps itself on a timer — the rotating word in a headline, a set of stats taking turns. Exchanges run in wait mode↗↗, so the outgoing item finishes leaving before the next arrives; without it the two overlap, which shows badly when they are different widths. Three transitions are provided, and paused halts the timer. Built with Framer Motion and Tailwind CSS.
components
components
Installation
Install the following dependencies:1
npm install framer-motionCopy and paste the following code into a new component file:2
"use client"
import { AnimatePresence, motion } from "framer-motion"
import { useEffect, useState, type ReactNode } from "react"
type LoopCycleProps = {
items: ReactNode[],
interval?: number,
variant?: "fade" | "rise" | "scale",
paused?: boolean,
How to use it3
"use client"
import { LoopCycle } from "@/components/ui/loop-cycle"
export default function Page() {
return (
<LoopCycle
items={["components", "effects", "primitives"]}
interval={2200}
variant="rise"
Props
LoopCycle
| Name | Default | Description |
|---|---|---|
| items | — | ReactNode[] The items to cycle through in order |
| interval | 2200 | number Milliseconds each item is held before the next |
| variant | "rise" | "fade" | "rise" | "scale" How items enter and leave |
| paused | false | boolean Halt the timer on the current item |
| dark | false | boolean Render the dark palette |