Primitive

Motion Playground

One stage for the motion kit — hover language, text, Imageory media, FadeIn, AnimateNumber, CopyButton, TransitionPanel. Soft settle; never grow on hover.

Preview

npx shadcn@latest add @atroui/motion @atroui/fade-in @atroui/text-morph @atroui/label-roll @atroui/line-reveal @atroui/magnetic @atroui/tilt @atroui/spotlight @atroui/animate-number @atroui/copy-button @atroui/transition-panel @atroui/button

Motion kit

One stage under MotionConfig + atroMotionDefaults. Tweens only · ease-out settle · hoverLift ≤1px · pressInto · never grow · reduced motion → duration 0.

HoverTextMediaEnterPresence

Installation

bash

npx shadcn@latest add @atroui/motion @atroui/fade-in @atroui/text-morph @atroui/label-roll @atroui/line-reveal @atroui/magnetic @atroui/tilt @atroui/spotlight @atroui/animate-number @atroui/copy-button @atroui/transition-panel @atroui/button

Source lands in your repo. Installation · Registry

Usage

Wrap app chrome in MotionConfig {...atroMotionDefaults} (tween easeOutSoft, reducedMotion: user). Hover lifts ≤1px — never grow. Media effects stay on Imageory / PreviewCard. prefers-reduced-motion → duration 0 / skip decorative pull.

tsx

import { MotionConfig } from "motion/react"
import { atroMotionDefaults } from "@/lib/motion"
// after: npx shadcn add @atroui/motion

export function AppShell({ children }: { children: React.ReactNode }) {
  return (
    <MotionConfig {...atroMotionDefaults}>
      {children}
    </MotionConfig>
  )
}

// Taste cues in this stage:
// - Hover — hoverLift ≤1px y; pressInto; never scale up
// - Text — TextMorph / LabelRoll / LineReveal (ink travels; no scramble)
// - Media — Magnetic / Tilt / Spotlight on Imageory only (not Button chrome)
// - Enter — FadeIn opacity+rise; AnimateNumber digit tween
// - Delight — CopyButton (rare path); TransitionPanel wait-mode swap
// - Chrome overlays still Soft settle — see Dialog / Drawer / Menu docs

Hover

Material brightens; geometry barely lifts; ink rolls. Scale-up on hover is out.

hover · lift ≤1px · never grow

Material brightens; geometry barely lifts; ink rolls. Scale-up on hover is out.

Text

TextMorph / LabelRoll / LineReveal — ink travels; no scramble.

text · morph · roll · line

Media

Magnetic · Tilt · Spotlight — media only, never Button chrome.

media · Imageory · mild only

Magnetic

Tilt ≤6°

Spotlight

Enter

FadeIn opacity + rise. AnimateNumber for digit settle. No blur-in by default.

enter · fade + count

Opacity + rise. No blur-in.

$1,280

Presence

TransitionPanel wait mode — exit finishes before enter.

presence · panel wait mode

Ease-out Soft settle. Exit ≈80% enter. Never grow on hover.

Exit finishes before enter. Chrome overlays (Dialog / Drawer / Menu) still use the same Soft tokens — see each primitive doc.

Preview

npx shadcn@latest add @atroui/motion @atroui/fade-in @atroui/text-morph @atroui/label-roll @atroui/line-reveal @atroui/magnetic @atroui/tilt @atroui/spotlight @atroui/animate-number @atroui/copy-button @atroui/transition-panel @atroui/button

Motion kit

One stage under MotionConfig + atroMotionDefaults. Tweens only · ease-out settle · hoverLift ≤1px · pressInto · never grow · reduced motion → duration 0.

HoverTextMediaEnterPresence

Installation

bash

npx shadcn@latest add @atroui/motion @atroui/fade-in @atroui/text-morph @atroui/label-roll @atroui/line-reveal @atroui/magnetic @atroui/tilt @atroui/spotlight @atroui/animate-number @atroui/copy-button @atroui/transition-panel @atroui/button

npx shadcn@latest add @atroui/motion @atroui/fade-in @atroui/text-morph @atroui/label-roll @atroui/line-reveal @atroui/magnetic @atroui/tilt @atroui/spotlight @atroui/animate-number @atroui/copy-button @atroui/transition-panel @atroui/button

Source lands in your repo. Installation · Registry

Usage

tsx

import { MotionConfig } from "motion/react"
import { atroMotionDefaults } from "@/lib/motion"
// after: npx shadcn add @atroui/motion

export function AppShell({ children }: { children: React.ReactNode }) {
  return (
    <MotionConfig {...atroMotionDefaults}>
      {children}
    </MotionConfig>
  )
}

// Taste cues in this stage:
// - Hover — hoverLift ≤1px y; pressInto; never scale up
// - Text — TextMorph / LabelRoll / LineReveal (ink travels; no scramble)
// - Media — Magnetic / Tilt / Spotlight on Imageory only (not Button chrome)
// - Enter — FadeIn opacity+rise; AnimateNumber digit tween
// - Delight — CopyButton (rare path); TransitionPanel wait-mode swap
// - Chrome overlays still Soft settle — see Dialog / Drawer / Menu docs

import { MotionConfig } from "motion/react"
import { atroMotionDefaults } from "@/lib/motion"
// after: npx shadcn add @atroui/motion

export function AppShell({ children }: { children: React.ReactNode }) {
  return (
    <MotionConfig {...atroMotionDefaults}>
      {children}
    </MotionConfig>
  )
}

// Taste cues in this stage:
// - Hover — hoverLift ≤1px y; pressInto; never scale up
// - Text — TextMorph / LabelRoll / LineReveal (ink travels; no scramble)
// - Media — Magnetic / Tilt / Spotlight on Imageory only (not Button chrome)
// - Enter — FadeIn opacity+rise; AnimateNumber digit tween
// - Delight — CopyButton (rare path); TransitionPanel wait-mode swap
// - Chrome overlays still Soft settle — see Dialog / Drawer / Menu docs

Hover

Material brightens; geometry barely lifts; ink rolls. Scale-up on hover is out.

hover · lift ≤1px · never grow

Material brightens; geometry barely lifts; ink rolls. Scale-up on hover is out.

Presence

TransitionPanel wait mode — exit finishes before enter.

presence · panel wait mode

Ease-out Soft settle. Exit ≈80% enter. Never grow on hover.

Exit finishes before enter. Chrome overlays (Dialog / Drawer / Menu) still use the same Soft tokens — see each primitive doc.