【Next.js】ポートフォリオにモーションを付ける方法を解説

import Image from "next/image";
  import Link from "next/link";
  
  type Work = { slug: string; title: string; role: string; image: string; alt: string };
  
  export function WorkGrid({ works }: { works: Work[] }) {
    const [featured, ...rest] = works;
  
    return (
      <section className="mx-auto max-w-6xl px-6 py-24">
        <h2 className="text-3xl font-semibold">制作実績</h2>
        <div className="mt-10 grid gap-6 md:grid-cols-3">
          <Link href={"/works/" + featured.slug} className="group md:col-span-2 md:row-span-2">
            <div className="relative aspect-[4/3] overflow-hidden rounded-2xl bg-zinc-100">
              <Image
                src={featured.image}
                alt={featured.alt}
                fill
                priority
                sizes="(min-width: 768px) 66vw, 100vw"
                className="object-cover transition-transform duration-500 ease-out group-hover:scale-[1.03] motion-reduce:transition-none"
              />
            </div>
            <p className="mt-3 font-medium">{featured.title}</p>
            <p className="text-sm text-zinc-500">{featured.role}</p>
          </Link>
          {rest.map((work) => (
            <Link key={work.slug} href={"/works/" + work.slug} className="group">
              <div className="relative aspect-[4/3] overflow-hidden rounded-2xl bg-zinc-100">
                <Image
                  src={work.image}
                  alt={work.alt}
                  fill
                  sizes="(min-width: 768px) 33vw, 100vw"
                  className="object-cover transition-transform duration-500 ease-out group-hover:scale-[1.03] motion-reduce:transition-none"
                />
              </div>
              <p className="mt-3 font-medium">{work.title}</p>
              <p className="text-sm text-zinc-500">{work.role}</p>
            </Link>
          ))}
        </div>
      </section>
    );
  }

"use client";
  
  import { useRef, useState } from "react";
  import Image from "next/image";
  import { motion, useMotionValueEvent, useScroll } from "motion/react";
  
  const works = [
    { slug: "brand-site", title: "ブランドサイト制作", image: "/works/brand.jpg", alt: "ブランドサイトのトップページ" },
    { slug: "app-ui", title: "アプリの UI デザイン", image: "/works/app.jpg", alt: "スマホアプリの画面3枚" },
    { slug: "motion-reel", title: "モーションリール 2026", image: "/works/reel.jpg", alt: "モーションリールの1場面" },
    { slug: "ec-renewal", title: "EC サイトのリニューアル", image: "/works/ec.jpg", alt: "EC サイトの商品一覧ページ" },
  ];
  
  export function PinnedGallery() {
    const ref = useRef<HTMLElement>(null);
    const [active, setActive] = useState(0);
    const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end end"] });
  
    useMotionValueEvent(scrollYProgress, "change", (value) => {
      setActive(Math.min(works.length - 1, Math.floor(value * works.length)));
    });
  
    return (
      <section ref={ref} className="relative" style={{ height: works.length * 100 + "vh" }}>
        <div className="sticky top-0 flex h-screen flex-col items-center justify-center px-6">
          <div className="relative aspect-[4/3] w-full max-w-4xl overflow-hidden rounded-2xl bg-zinc-100">
            {works.map((work, i) => (
              <motion.div
                key={work.slug}
                className="absolute inset-0"
                initial={false}
                animate={{ opacity: i === active ? 1 : 0 }}
                transition={{ duration: 0.4, ease: "easeOut" }}
              >
                <Image src={work.image} alt={work.alt} fill sizes="(min-width: 1024px) 896px, 100vw" className="object-cover" />
              </motion.div>
            ))}
          </div>
          <p className="mt-6 text-lg font-medium">{works[active].title}</p>
          <p className="text-sm text-zinc-500">
            {active + 1} / {works.length}
          </p>
        </div>
      </section>
    );
  }

"use client";
  
  import type { ReactNode } from "react";
  import { motion, useReducedMotion } from "motion/react";
  
  export function FadeIn({ children }: { children: ReactNode }) {
    const reduce = useReducedMotion();
  
    return (
      <motion.div
        initial={reduce ? false : { opacity: 0, y: 12 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: "-10% 0px" }}
        transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
      >
        {children}
      </motion.div>
    );
  }

"use client";
  
  import { useEffect, useRef } from "react";
  
  export function WorkVideo({ src, poster, label }: { src: string; poster: string; label: string }) {
    const ref = useRef<HTMLVideoElement>(null);
  
    useEffect(() => {
      const video = ref.current;
      if (!video) return;
      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
  
      const observer = new IntersectionObserver(
        ([entry]) => {
          if (entry.isIntersecting) {
            video.play().catch(() => {});
          } else {
            video.pause();
          }
        },
        { threshold: 0.5 }
      );
      observer.observe(video);
      return () => observer.disconnect();
    }, []);
  
    return (
      <video
        ref={ref}
        src={src}
        poster={poster}
        muted
        loop
        playsInline
        preload="metadata"
        aria-label={label}
        className="aspect-video w-full rounded-2xl bg-zinc-900 object-cover"
      />
    );
  }