โมชัน

.ds-switch__track::after {
  transition: transform var(--dur-base) var(--ease-spring);
}
.ds-card[data-interactive]:hover {
  transform: translateY(-3px);
  transition: transform var(--dur-base) var(--ease-out);
}

const transition = document.startViewTransition(() => {
  document.documentElement.dataset.brand = next;
});
transition.ready.then(() => {
  document.documentElement.animate(
    { clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${r}px at ${x}px ${y}px)`] },
    { duration: 720, easing: "cubic-bezier(0.76, 0, 0.24, 1)", pseudoElement: "::view-transition-new(root)" },
  );
});

"use client";
import { useRef } from "react";
import { gsap } from "gsap";
import { useGSAP } from "@gsap/react";

gsap.registerPlugin(useGSAP);

export function Reveal({ children }: { children: React.ReactNode }) {
  const scope = useRef<HTMLDivElement>(null);
  useGSAP(() => {
    const mm = gsap.matchMedia();
    mm.add("(prefers-reduced-motion: no-preference)", () => {
      gsap.fromTo("[data-reveal]",
        { autoAlpha: 0, y: 24 },
        { autoAlpha: 1, y: 0, duration: 0.9, ease: "power3.out", stagger: 0.08 });
    });
    return () => mm.revert();           // cleans up on unmount and on media change
  }, { scope });
  return <div ref={scope}>{children}</div>;
}