convert-next.js

src/components/GSAPReveal.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import React from 'react';
+import { useGSAPReveal, RevealAnimation } from '@/hooks/useGSAPReveal';
+
+interface Props {
+  children: React.ReactNode;
+  delay?: number;
+  animation?: RevealAnimation;
+  duration?: number;
+  ease?: string;
+  start?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  as?: keyof React.JSX.IntrinsicElements;
+}
+
+export default function GSAPReveal({
+  children, delay = 0, animation = 'fade-up',
+  duration = 1.0, ease, start, className, style,
+}: Props) {
+  const ref = useGSAPReveal({ delay, animation, duration, ease, start });
+  return (
+    <div ref={ref} className={className} style={{ willChange: 'transform, opacity', ...style }}>
+      {children}
+    </div>
+  );
+}