@aws505/sheetsite 1.0.2 → 1.0.3

package/src/components/ui/AnimatedSection.tsx

@@ -0,0 +1,136 @@
+/**
+ * Animated Section Component
+ *
+ * A wrapper component that adds scroll-triggered animations to its children.
+ */
+
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+
+export interface AnimatedSectionProps {
+  children: React.ReactNode;
+  animation?: 'fade-up' | 'fade-down' | 'fade-left' | 'fade-right' | 'zoom' | 'none';
+  delay?: number;
+  duration?: number;
+  threshold?: number;
+  once?: boolean;
+  className?: string;
+  as?: React.ElementType;
+}
+
+/**
+ * Animated section wrapper with scroll-triggered animations.
+ */
+export function AnimatedSection({
+  children,
+  animation = 'fade-up',
+  delay = 0,
+  duration = 600,
+  threshold = 0.1,
+  once = true,
+  className = '',
+  as: Component = 'div',
+}: AnimatedSectionProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          if (once && ref.current) {
+            observer.unobserve(ref.current);
+          }
+        } else if (!once) {
+          setIsVisible(false);
+        }
+      },
+      { threshold }
+    );
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      if (ref.current) {
+        observer.unobserve(ref.current);
+      }
+    };
+  }, [threshold, once]);
+
+  const getAnimationStyles = (): React.CSSProperties => {
+    const baseStyles: React.CSSProperties = {
+      transition: `opacity ${duration}ms ease-out, transform ${duration}ms ease-out`,
+      transitionDelay: `${delay}ms`,
+    };
+
+    if (!isVisible) {
+      switch (animation) {
+        case 'fade-up':
+          return { ...baseStyles, opacity: 0, transform: 'translateY(30px)' };
+        case 'fade-down':
+          return { ...baseStyles, opacity: 0, transform: 'translateY(-30px)' };
+        case 'fade-left':
+          return { ...baseStyles, opacity: 0, transform: 'translateX(30px)' };
+        case 'fade-right':
+          return { ...baseStyles, opacity: 0, transform: 'translateX(-30px)' };
+        case 'zoom':
+          return { ...baseStyles, opacity: 0, transform: 'scale(0.95)' };
+        case 'none':
+          return {};
+        default:
+          return { ...baseStyles, opacity: 0, transform: 'translateY(30px)' };
+      }
+    }
+
+    return { ...baseStyles, opacity: 1, transform: 'translateY(0) translateX(0) scale(1)' };
+  };
+
+  if (animation === 'none') {
+    return <Component className={className}>{children}</Component>;
+  }
+
+  return (
+    <Component ref={ref} style={getAnimationStyles()} className={className}>
+      {children}
+    </Component>
+  );
+}
+
+/**
+ * Stagger animation container - animates children with increasing delays.
+ */
+export interface StaggerContainerProps {
+  children: React.ReactNode;
+  staggerDelay?: number;
+  animation?: AnimatedSectionProps['animation'];
+  duration?: number;
+  className?: string;
+}
+
+export function StaggerContainer({
+  children,
+  staggerDelay = 100,
+  animation = 'fade-up',
+  duration = 600,
+  className = '',
+}: StaggerContainerProps) {
+  return (
+    <div className={className}>
+      {React.Children.map(children, (child, index) => (
+        <AnimatedSection
+          animation={animation}
+          delay={index * staggerDelay}
+          duration={duration}
+        >
+          {child}
+        </AnimatedSection>
+      ))}
+    </div>
+  );
+}
+
+export default AnimatedSection;