Slide

1"use client";
2 
3import type { TargetAndTransition, Variants } from "motion/react";
4import * as m from "motion/react-m";
5import type { CSSProperties, ReactNode } from "react";
6import {
7  revealTransition,
8  type SlideDirection,
9  slideDistance,
10  slideVariants,
11  viewportOnce,
12} from "@/lib/motion";
13 
14type DistanceTier = keyof typeof slideDistance;
15 
16type SlideProps = {
17  children: ReactNode;
18  className?: string;
19  style?: CSSProperties;
20  delay?: number;
21  direction: SlideDirection;
22  distance?: DistanceTier | number;
23  trigger?: "inView" | "mount";
24};
25 
26/** Directional fade + slide — enters from one of 8 travel directions. Transform-only, so the provider's `reducedMotion="user"` strips it for free. */
27export function Slide({
28  children,
29  className,
30  style,
31  delay = 0,
32  direction,
33  distance = "base",
34  trigger = "inView",
35}: SlideProps) {
36  const px = typeof distance === "number" ? distance : slideDistance[distance];
37  const base = slideVariants(direction, px);
38  // slideVariants bakes revealTransition into `animate`, and a variant's own
39  // transition overrides the component-level `transition` prop — so fold `delay`
40  // into that same target (same idiom as ClipReveal / GrowFromOrigin).
41  const variants: Variants = {
42    ...base,
43    animate: {
44      ...(base.animate as TargetAndTransition),
45      transition: { ...revealTransition, delay },
46    },
47  };
48  const play =
49    trigger === "mount"
50      ? ({ animate: "animate" } as const)
51      : ({ whileInView: "animate", viewport: viewportOnce } as const);
52 
53  return (
54    <m.div className={className} style={style} variants={variants} initial="initial" {...play}>
55      {children}
56    </m.div>
57  );
58}