Timeline Animation

'use client';
import { useRef } from 'react';
import { TimelineAnimation } from '@/registry/ui-layouts/timeline-animation';

export default function Demo() {
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <div ref={containerRef} className="w-full max-w-lg mx-auto p-8 space-y-6">
      <TimelineAnimation animationNum={0} timelineRef={containerRef} className="text-2xl font-bold">
        Step 1: Discovery
      </TimelineAnimation>
      <TimelineAnimation animationNum={1} timelineRef={containerRef} className="text-lg text-gray-600">
        We begin by understanding your goals, audience, and competitive landscape to shape a winning strategy.
      </TimelineAnimation>
      <TimelineAnimation animationNum={2} timelineRef={containerRef} className="text-2xl font-bold">
        Step 2: Design
      </TimelineAnimation>
      <TimelineAnimation animationNum={3} timelineRef={containerRef} className="text-lg text-gray-600">
        Our designers craft beautiful, user-centered interfaces that reflect your brand identity.
      </TimelineAnimation>
      <TimelineAnimation animationNum={4} timelineRef={containerRef} className="text-2xl font-bold">
        Step 3: Launch
      </TimelineAnimation>
      <TimelineAnimation animationNum={5} timelineRef={containerRef} className="text-lg text-gray-600">
        We deploy, monitor, and iterate to ensure your product exceeds expectations from day one.
      </TimelineAnimation>
    </div>
  );
}

import type { Variants } from 'motion/react';
import { type HTMLMotionProps, motion, useInView } from 'motion/react';
import type React from 'react';

type TimelineContentProps<T extends keyof HTMLElementTagNameMap> = {
  children?: React.ReactNode;
  animationNum: number;
  className?: string;
  timelineRef: React.RefObject<HTMLElement | null>;
  as?: T;
  customVariants?: Variants;
  once?: boolean;
} & HTMLMotionProps<T>;

export const TimelineAnimation = <T extends keyof HTMLElementTagNameMap = 'div'>({
  children,
  animationNum,
  timelineRef,
  className,
  as,
  customVariants,
  once = true,
  ...props
}: TimelineContentProps<T>) => {
  const defaultSequenceVariants = {
    visible: (i: number) => ({
      filter: 'blur(0px)',
      y: 0,
      opacity: 1,
      transition: {
        delay: i * 0.5,
        duration: 0.5,
      },
    }),
    hidden: {
      filter: 'blur(20px)',
      y: 0,
      opacity: 0,
    },
  };

  const sequenceVariants = customVariants || defaultSequenceVariants;

  const isInView = useInView(timelineRef, {
    once,
  });

  const MotionComponent = motion[as || 'div'] as React.ElementType;

  return (
    <MotionComponent
      initial='hidden'
      animate={isInView ? 'visible' : 'hidden'}
      custom={animationNum}
      variants={sequenceVariants}
      className={className}
      {...props}
    >
      {children}
    </MotionComponent>
  );
};