【Next.js】グラスモーフィズムの作り方を解説｜Liquid Glass風すりガラス UI

// components/GlassHero.tsx
  import Image from "next/image";

  export function GlassHero() {
    return (
      <section className="relative isolate flex min-h-[80vh] items-center justify-center overflow-hidden px-6">
        <Image
          src="/hero-mountain.jpg"
          alt=""
          fill
          priority
          className="-z-20 object-cover"
        />
        <div aria-hidden="true" className="absolute inset-0 -z-10 bg-black/30" />

        <div className="w-full max-w-md rounded-3xl border border-white/20 bg-zinc-900/70 p-8 text-white shadow-2xl supports-[backdrop-filter]:bg-white/10 supports-[backdrop-filter]:backdrop-blur-xl">
          <h1 className="text-3xl font-semibold tracking-tight">山の上で、静かに働く</h1>
          <p className="mt-3 text-sm text-white/80">
            電波の届く山小屋を、1泊から予約できます。
          </p>
          <a
            href="#booking"
            className="mt-6 inline-block rounded-full bg-white px-6 py-3 text-sm font-medium text-zinc-900"
          >
            空き状況を見る
          </a>
        </div>
      </section>
    );
  }

// components/GlassLogin.tsx
  export function GlassLogin() {
    return (
      <form className="w-full max-w-sm space-y-4 rounded-[2rem] border border-white/25 bg-zinc-900/70 p-8 text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.4)] supports-[backdrop-filter]:bg-white/10 supports-[backdrop-filter]:backdrop-blur-2xl">
        <h1 className="text-center text-2xl font-semibold">ログイン</h1>

        <label htmlFor="user" className="sr-only">ユーザー名</label>
        <input
          id="user"
          name="user"
          autoComplete="username"
          placeholder="ユーザー名"
          className="w-full rounded-full border border-white/20 bg-white/15 px-5 py-3 text-sm placeholder:text-white/70 outline-none focus:border-white/60"
        />

        <label htmlFor="password" className="sr-only">パスワード</label>
        <input
          id="password"
          name="password"
          type="password"
          autoComplete="current-password"
          placeholder="パスワード"
          className="w-full rounded-full border border-white/20 bg-white/15 px-5 py-3 text-sm placeholder:text-white/70 outline-none focus:border-white/60"
        />

        <button
          type="submit"
          className="w-full rounded-full bg-white py-3 text-sm font-medium text-zinc-900 transition hover:bg-white/90"
        >
          ログイン
        </button>
      </form>
    );
  }

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

  import { useEffect, useState } from "react";

  export function GlassHeader() {
    const [scrolled, setScrolled] = useState(false);

    useEffect(() => {
      const onScroll = () => setScrolled(window.scrollY > 24);
      onScroll();
      window.addEventListener("scroll", onScroll, { passive: true });
      return () => window.removeEventListener("scroll", onScroll);
    }, []);

    return (
      <header
        className={
          "fixed inset-x-0 top-0 z-50 transition-colors duration-300 " +
          (scrolled
            ? "border-b border-white/10 bg-zinc-950/80 supports-[backdrop-filter]:bg-zinc-950/40 supports-[backdrop-filter]:backdrop-blur-md"
            : "bg-transparent")
        }
      >
        <nav className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6 text-white">
          <a href="/" className="font-semibold">Brand</a>
          <a href="#contact" className="text-sm">お問い合わせ</a>
        </nav>
      </header>
    );
  }