【Next.js】タイムラインの作り方を解説｜縦線とステップを Tailwind で

// components/Timeline.tsx
  const steps = [
    { label: "STEP 1", title: "無料で相談する", body: "フォームから現在の課題を送ります。2営業日以内に返信します。" },
    { label: "STEP 2", title: "画面を見ながら打ち合わせ", body: "30分のオンラインで、必要な機能と期間をすり合わせます。" },
    { label: "STEP 3", title: "試用環境で確かめる", body: "実際のデータで2週間試し、社内の確認を進めます。" },
    { label: "STEP 4", title: "本番の利用を始める", body: "設定を引き継ぎ、そのまま本番で使い始めます。" },
  ];

  export function Timeline() {
    return (
      <section className="mx-auto max-w-2xl px-6 py-24">
        <h2 className="text-3xl font-semibold tracking-tight">導入までの流れ</h2>
        <ol className="mt-12 border-l border-zinc-200">
          {steps.map((step) => (
            <li key={step.label} className="relative pb-10 pl-8 last:pb-0">
              <span
                aria-hidden="true"
                className="absolute -left-[5px] top-1.5 h-2.5 w-2.5 rounded-full bg-zinc-900"
              />
              <p className="text-xs font-medium tracking-widest text-zinc-500">{step.label}</p>
              <h3 className="mt-1 text-lg font-semibold">{step.title}</h3>
              <p className="mt-2 text-sm leading-relaxed text-zinc-600">{step.body}</p>
            </li>
          ))}
        </ol>
      </section>
    );
  }

// components/AnimatedTimeline.tsx
  "use client";

  import { motion } from "motion/react";

  type Step = { label: string; title: string; body: string };

  export function AnimatedTimeline({ steps }: { steps: Step[] }) {
    return (
      <ol className="mt-12 border-l border-zinc-200">
        {steps.map((step, i) => (
          <motion.li
            key={step.label}
            className="relative pb-10 pl-8 last:pb-0"
            initial={{ opacity: 0, y: 12 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, amount: 0.6 }}
            transition={{ duration: 0.4, delay: i * 0.08 }}
          >
            <span
              aria-hidden="true"
              className="absolute -left-[5px] top-1.5 h-2.5 w-2.5 rounded-full bg-zinc-900"
            />
            <p className="text-xs font-medium tracking-widest text-zinc-500">{step.label}</p>
            <h3 className="mt-1 text-lg font-semibold">{step.title}</h3>
            <p className="mt-2 text-sm leading-relaxed text-zinc-600">{step.body}</p>
          </motion.li>
        ))}
      </ol>
    );
  }

"use client";

  import { motion, useScroll } from "motion/react";
  import { useRef, type ReactNode } from "react";

  export function ScrollLineTimeline({ children }: { children: ReactNode }) {
    const ref = useRef<HTMLDivElement>(null);
    const { scrollYProgress } = useScroll({
      target: ref,
      offset: ["start center", "end center"],
    });

    return (
      <div ref={ref} className="relative pl-8">
        <div aria-hidden="true" className="absolute left-0 top-0 h-full w-px bg-zinc-200" />
        <motion.div
          aria-hidden="true"
          className="absolute left-0 top-0 h-full w-px origin-top bg-zinc-900"
          style={{ scaleY: scrollYProgress }}
        />
        {children}
      </div>
    );
  }