Animation Presets

import { Motion } from "@motion.page/sdk";

// Fade Up preset
Motion("hero", "#hero", {
  from: { opacity: 0, y: 100 },
  duration: 0.8,
  ease: "power2.out",
}).onPageLoad();

// Pulse loop preset
Motion("badge", ".badge", {
  to: { scale: 1.1 },
  duration: 0.8,
  repeat: { times: -1, yoyo: true },
  ease: "power1.inOut",
}).onPageLoad();

// Text reveal preset (Words Slide Up)
Motion("headline", "h1", {
  split: "words",
  from: { opacity: 0, y: 20 },
  stagger: { each: 0.1, from: "start" },
  duration: 0.7,
  ease: "power2.out",
}).onPageLoad();

// Fade Up with a slower duration and spring ease
Motion("section", ".section", {
  from: { opacity: 0, y: 60 },   // reduced offset (default: 100)
  duration: 1.2,                  // slower (common default: 0.8)
  ease: "elastic.out(1, 0.75)",  // spring instead of power ease
}).onPageLoad();

// Flip In X
Motion("card", ".card", {
  from: { rotateX: 90, opacity: 0 },
  duration: 0.7,
  ease: "power3.out",
}).onScroll({ scrub: false, toggleActions: "play none none none" });

// Corner Pop — note the custom transform origin
Motion("pop", ".badge", {
  from: { scale: 0, rotate: -90 },
  duration: 0.5,
  ease: "back.out(1.7)",
}).onPageLoad();
// Set transform origin separately:
// Motion.set(".badge", { transformOrigin: "0% 0%" });

// Pulse
Motion("pulse", ".cta-button", {
  to: { scale: 1.1 },
  duration: 0.8,
  ease: "power1.inOut",
  repeat: { times: -1, yoyo: true },
}).onPageLoad();

// Swing — set the pivot point before animating
Motion.set(".pendulum", { transformOrigin: "50% 0%" });
Motion("swing", ".pendulum", {
  to: { rotate: 15 },
  duration: 1,
  ease: "power1.inOut",
  repeat: { times: -1, yoyo: true },
}).onPageLoad();

// Flip Back — continuous spin (no yoyo)
Motion("spin", ".icon", {
  to: { rotateY: 360 },
  duration: 2,
  ease: "none",
  repeat: { times: -1, yoyo: false },
}).onPageLoad();

// Words Slide Up
Motion("headline", "h1", {
  split: "words",
  from: { opacity: 0, y: 20 },
  stagger: { each: 0.1, from: "start" },
  duration: 0.7,
  ease: "power2.out",
}).onPageLoad();

// Chars 3D Flip — perspective helps the 3D effect read clearly
Motion("title-3d", ".title", {
  split: "chars",
  from: { rotateX: 90, opacity: 0 },
  stagger: { each: 0.03, from: "start" },
  duration: 0.6,
  ease: "power3.out",
}).onPageLoad();

// Words From Center — stagger radiates outward from middle
Motion("center-reveal", ".tagline", {
  split: "words",
  from: { opacity: 0, scale: 0.5 },
  stagger: { each: 0.1, from: "center" },
  duration: 0.6,
  ease: "back.out(1.7)",
}).onPageLoad();

// Lines Rise — use mask to clip overflow during slide
Motion("lines-in", ".paragraph", {
  split: "lines",
  mask: true,
  from: { opacity: 0, y: 40 },
  stagger: { each: 0.2, from: "start" },
  duration: 0.8,
  ease: "power3.out",
}).onPageLoad();

// Elegant Scale — great for modals and cards
Motion("card-reveal", ".card", {
  from: { scale: 0.95, opacity: 0 },
  duration: 0.5,
  ease: "power2.out",
}).onScroll({ scrub: false, toggleActions: "play none none none" });

// Blur to Focus — cinematic feel for hero text
Motion("hero-focus", ".hero-text", {
  from: { opacity: 0, filter: "blur(5px)" },
  duration: 0.9,
  ease: "power2.out",
}).onPageLoad();

// Batch multiple elements with stagger
Motion("section-items", ".section-item", {
  from: { y: 15, opacity: 0 },
  duration: 0.5,
  stagger: 0.08,
  ease: "power2.out",
}).onScroll({ scrub: false, toggleActions: "play none none none" });

// Bounce In — add a back ease for the overshoot feel
Motion("pop-in", ".modal", {
  from: { scale: 0 },
  duration: 0.5,
  ease: "back.out(1.7)",
}).onPageLoad();

// Spiral Out — play on exit trigger
Motion("spiral-exit", ".panel", {
  to: { scale: 0, rotate: -180, opacity: 0 },
  duration: 0.6,
  ease: "power3.in",
}).onClick();

// Flip Full — complete flip transition, both endpoints are non-natural
Motion("flip-card", ".card", {
  from: { rotateY: -90, opacity: 0 },
  to: { rotateY: 90, opacity: 0 },
  duration: 0.6,
  ease: "power2.inOut",
}).onClick();

// Color Shift — hover color transition between two explicit colors
Motion("color-hover", ".button", {
  from: { backgroundColor: "#ff0000" },
  to: { backgroundColor: "#0000ff" },
  duration: 0.4,
  ease: "power2.inOut",
}).onHover({ each: true, onLeave: "reverse" });

// Scale Bounce — grows in then bounces once
Motion("scale-bounce", ".notification", {
  from: { scale: 0 },
  to: { scale: 1.2 },
  duration: 0.4,
  ease: "power2.out",
  repeat: { times: 1, yoyo: true },
}).onPageLoad();

// Perspective Spin — rotating reveal from a half-turn
Motion("spin-reveal", ".card", {
  from: { rotateY: 180, scale: 0.5 },
  to: { rotateY: 360, scale: 1 },
  duration: 0.8,
  ease: "power2.out",
}).onPageLoad();