Perspective Tilt In

1"use client";
2 
3import * as m from "motion/react-m";
4import type { CSSProperties, ReactNode } from "react";
5import { perspectiveTilt, revealTransition, viewportOnce } from "@/lib/motion";
6 
7type PerspectiveTiltInProps = {
8  children: ReactNode;
9  className?: string;
10  style?: CSSProperties;
11  delay?: number;
12  trigger?: "inView" | "mount";
13};
14 
15/**
16 * Reveal + a whisper of depth — rise + rotateX settle over a perspective,
17 * one straight ease-out, no spring. Transform-only (translate/rotate), so
18 * the app-level `reducedMotion="user"` provider strips it automatically —
19 * no manual guard needed here.
20 */
21export function PerspectiveTiltIn({
22  children,
23  className,
24  style,
25  delay = 0,
26  trigger = "inView",
27}: PerspectiveTiltInProps) {
28  const play =
29    trigger === "mount"
30      ? ({ animate: perspectiveTilt.animate } as const)
31      : ({ whileInView: perspectiveTilt.animate, viewport: viewportOnce } as const);
32 
33  return (
34    <m.div
35      className={className}
36      style={style}
37      initial={perspectiveTilt.initial}
38      {...play}
39      transition={{ ...revealTransition, delay }}
40    >
41      {children}
42    </m.div>
43  );
44}