tiltHover

Scales up into rest on entry, then tips a few degrees off square and swells past full size while hovered, and compresses to the press scale on tap. Both interactive states run on their own press-length transition, so the feedback lands under the pointer rather than at entrance speed. The entrance itself is the same scale-up zoomIn plays; the tilt and the press are what this preset adds.

⚡tiltHover

tiltHover in Motion

Spread Preset·Zero Runtime Tax

Usage

import { Section } from "@/lib/motion";
import { tiltHover } from "@/lib/motion/presets/tilt-hover";

export function Features() {
  return (
    <Section {...tiltHover} className="grid gap-6 md:grid-cols-3">
      <FeatureCard title="Copy, do not install" />
      <FeatureCard title="One file you own" />
      <FeatureCard title="Presets you spread" />
    </Section>
  );
}

Installation

npx shadcn@latest add https://motion.asmitsah.dev/r/tilt-hover.json

Props and tokens

What it sets

Property	Initial	In view	Reduced motion	Reads from config.ts
scale	0.9	1	Instant	zoom.in → rest.scale

Transition and viewport

Option	Value	Reads from config.ts
duration	0.85	duration.base
ease	[0.16,1,0.3,1]	ease
viewport.once	true	viewport
viewport.amount	"some"	viewport
viewport.margin	"0px 0px -20% 0px"	viewport

Every motion prop the preset does not set — whileHover, whileTap, whileFocus — stays available at the call site. Write it after the spread and it wins.

layout and drag need the domMax feature bundle, not domAnimation — swap the lazy import in provider.tsx. It adds roughly 13kb gzipped on top of domAnimation.