Scale X Reveal

Scale

A rule / divider draws open — scaleX 0 → 1 + fade from the left.

Section

Installation

One command drops the source into your repo — editable, with the provider and motion pulled in automatically.

npx shadcn add https://motion.asmitsah.dev/r/scale-x-reveal.json

PrerequisiteInstall the provider base first

This component imports from @/lib/motion and needs <MotionProvider> mounted in your root layout — install the base once, before copying this component.

npx shadcn add https://motion.asmitsah.dev/r/provider.json

Step 1Install the runtime dependency

npm install motion

Step 2Copy the source into components/motion/scale-x-reveal.tsx

components/motion/scale-x-reveal.tsx

"use client";

import * as m from "motion/react-m";
import type { CSSProperties, ReactNode } from "react";
import { revealTransition, scaleXReveal, viewportOnce } from "@/lib/motion";

type Props = {
  children?: ReactNode;
  className?: string;
  style?: CSSProperties;
  delay?: number;
  trigger?: "inView" | "mount";
};

/**
 * A rule / underline / divider draws open — scaleX 0 → 1 + fade from the left.
 * Self-contained by default: `<ScaleXReveal className="h-px w-full bg-border" />`.
 * If you do pass text children, put it in an inner un-scaled span — this
 * component scales the whole element horizontally, which would otherwise
 * squash the text as it draws in.
 */
export function ScaleXReveal({ children, className, style, delay = 0, trigger = "inView" }: Props) {
  const play =
    trigger === "mount"
      ? ({ animate: scaleXReveal.animate } as const)
      : ({ whileInView: scaleXReveal.animate, viewport: viewportOnce } as const);

  return (
    <m.div
      className={className}
      style={{ transformOrigin: "left", ...style }}
      initial={scaleXReveal.initial}
      {...play}
      transition={{ ...revealTransition, delay }}
    >
      {children}
    </m.div>
  );
}

Usage

Basic

Self-contained by default — no children needed. Draws scaleX 0 → 1 with a fade, anchored left.

import { ScaleXReveal } from "@/components/motion/scale-x-reveal";

<ScaleXReveal className="h-px w-full bg-border" />

With a label

Put text in an inner un-scaled span — ScaleXReveal scales the whole element horizontally, which would otherwise squash text as it draws in.

<div className="flex items-center gap-3">
  <span>Section</span>
  <ScaleXReveal className="h-px flex-1 bg-signal" />
</div>

With delay

Offset a rule from its neighbors by a beat.

<ScaleXReveal delay={0.15} className="h-0.5 w-24 rounded-full bg-signal" />

Trigger on mount

Skip the scroll-into-view check and draw immediately — useful above the fold or inside a modal.

<ScaleXReveal trigger="mount" className="h-px w-full bg-border" />

Props

Prop	Type	Default	Description
children	ReactNode	—	Usually omitted — pass this in an inner un-scaled span if you do, so text doesn't squash as the width draws in.
className	string	—	Passed straight through — ScaleXReveal becomes your layout element (e.g. a rule or underline).
style	CSSProperties	—	Inline style passthrough; merges with the internal transformOrigin.
delay	number	0	Seconds before this instance animates.
trigger	"inView" \| "mount"	"inView"	Draw open the first time it's 30% in view, or immediately on mount.