Perspective Tilt In

Reveal

Reveal with a whisper of depth — rise + rotateX settle over a perspective.

Settles from a slight tilt, once.

A beat later — delay 0.15s.

trigger="mount" — plays immediately.

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/perspective-tilt-in.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/perspective-tilt-in.tsx

components/motion/perspective-tilt-in.tsx

"use client";

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

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

/**
 * Reveal + a whisper of depth — rise + rotateX settle over a perspective,
 * one straight ease-out, no spring. Transform-only (translate/rotate), so
 * the app-level `reducedMotion="user"` provider strips it automatically —
 * no manual guard needed here.
 */
export function PerspectiveTiltIn({
  children,
  className,
  style,
  delay = 0,
  trigger = "inView",
}: PerspectiveTiltInProps) {
  const play =
    trigger === "mount"
      ? ({ animate: perspectiveTilt.animate } as const)
      : ({ whileInView: perspectiveTilt.animate, viewport: viewportOnce } as const);

  return (
    <m.div
      className={className}
      style={style}
      initial={perspectiveTilt.initial}
      {...play}
      transition={{ ...revealTransition, delay }}
    >
      {children}
    </m.div>
  );
}

Usage

Basic

Wrap any card or section — it settles opacity 0 → 1, y +28 → 0, and rotateX 8deg → 0 over an 800px perspective, the first time it is 30% in view.

import { PerspectiveTiltIn } from "@/components/motion/perspective-tilt-in";

<PerspectiveTiltIn className="rounded-sm border p-4">
  <h3>Settles from a slight tilt, once.</h3>
</PerspectiveTiltIn>

With delay

Offset sibling tilt-ins by a beat to sequence them without a full Stagger.

<PerspectiveTiltIn>
  <h3>Leads</h3>
</PerspectiveTiltIn>
<PerspectiveTiltIn delay={0.15}>
  <p>Follows, a beat later.</p>
</PerspectiveTiltIn>

Trigger on mount

Play immediately instead of waiting for scroll — for above-the-fold content.

<PerspectiveTiltIn trigger="mount">
  <Hero />
</PerspectiveTiltIn>

Props

Prop	Type	Default	Description
children	ReactNode	—	Content that tilts + rises into view.
className	string	—	Passed straight through — PerspectiveTiltIn becomes your layout element.
style	CSSProperties	—	Inline style passthrough.
delay	number	0	Seconds before this instance animates.
trigger	"inView" \| "mount"	"inView"	Animate on scroll-into-view (once) or immediately on mount.