"use client" import { useEffect, useRef } from "react" import { exampleImages } from "@/utils/demo-images" import { useInView } from "motion/react" import TextRotate, { TextRotateRef } from "@/components/fancy/text/text-rotate" function Item({ index, image, link, onInView, }: { index: number image: string link: string onInView: (inView: boolean) => void }) { const ref = useRef(null) const isInView = useInView(ref, { margin: "-45% 0px -45% 0px", }) useEffect(() => { onInView(isInView) }, [isInView, onInView]) return (

) } export default function Preview() { const textRotateRef = useRef(null) const handleInView = (index: number, inView: boolean) => { console.log(index, inView) if (inView && textRotateRef.current) { textRotateRef.current.jumpTo(index) } } return (

image.author)]} mainClassName="text-sm sm:text-3xl md:text-4xl w-full justify-center flex pt-2" splitLevelClassName="overflow-hidden pb-2" staggerFrom={"first"} animatePresenceMode="wait" loop={false} auto={false} staggerDuration={0.005} initial={{ opacity: 0, y: 50 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -50 }} transition={{ type: "spring", duration: 0.6, bounce: 0 }} />

{exampleImages.slice(1).map((image, index) => ( handleInView(index, inView)} /> ))}

) }

Text Rotate Scroll Step Demo

Instalação

Dependências

Registry dependencies