36 lines
735 B
TypeScript
36 lines
735 B
TypeScript
'use client';
|
|
import { ReactNode } from 'react';
|
|
import useInView from '@/hooks/useInView';
|
|
|
|
interface AnimatedTextProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
startClass?: string;
|
|
finishClass?: string;
|
|
threshold?: number;
|
|
}
|
|
|
|
export function AnimatedText({
|
|
children,
|
|
className = '',
|
|
startClass,
|
|
finishClass,
|
|
threshold,
|
|
}: AnimatedTextProps) {
|
|
const [ref, isVisible] = useInView({
|
|
threshold: threshold ?? 0.1,
|
|
triggerOnce: true,
|
|
});
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={`transition-[opacity, transform] ease-out duration-1000 ${
|
|
isVisible ? 'opacity-100' : 'opacity-0'
|
|
} ${isVisible ? finishClass : startClass} ${className}`}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|