Scale X Reveal

1"use client";
2 
3import * as m from "motion/react-m";
4import type { CSSProperties, ReactNode } from "react";
5import { revealTransition, scaleXReveal, viewportOnce } from "@/lib/motion";
6 
7type Props = {
8  children?: ReactNode;
9  className?: string;
10  style?: CSSProperties;
11  delay?: number;
12  trigger?: "inView" | "mount";
13};
14 
15/**
16 * A rule / underline / divider draws open — scaleX 0 → 1 + fade from the left.
17 * Self-contained by default: `<ScaleXReveal className="h-px w-full bg-border" />`.
18 * If you do pass text children, put it in an inner un-scaled span — this
19 * component scales the whole element horizontally, which would otherwise
20 * squash the text as it draws in.
21 */
22export function ScaleXReveal({ children, className, style, delay = 0, trigger = "inView" }: Props) {
23  const play =
24    trigger === "mount"
25      ? ({ animate: scaleXReveal.animate } as const)
26      : ({ whileInView: scaleXReveal.animate, viewport: viewportOnce } as const);
27 
28  return (
29    <m.div
30      className={className}
31      style={{ transformOrigin: "left", ...style }}
32      initial={scaleXReveal.initial}
33      {...play}
34      transition={{ ...revealTransition, delay }}
35    >
36      {children}
37    </m.div>
38  );
39}