Motion
MotionDiv and MotionSpan — YunUI's re-exports of Framer Motion, so apps animate with the bundled instance instead of a second copy.
MotionDiv and MotionSpan are YunUI's re-exports of Framer Motion's motion.div and motion.span.
They exist so an app can animate with the same Framer Motion instance the library already bundles, instead of adding its own dependency — two copies of Framer Motion in one page means two animation loops and duplicated AnimatePresence context.
Import
1import { MotionDiv, MotionSpan } from "@yuhuanowo/yunui";Usage
They are the Framer Motion components unchanged, so every initial / animate / exit / transition / variants / whileHover prop works exactly as documented upstream.
Motion
Fades and lifts in on mount.
Breathing label
Shared variant presets
Three ready-made variant objects ship alongside the components, so a fade or a staggered list is the same fade and the same stagger everywhere:
| Export | What it does |
|---|---|
fadeIn | Fade + 10px rise on enter, fade + 10px lift on exit, 0.2s. A complete set of initial/animate/exit/transition — spread it, don't nest it. |
staggerContainer | Puts 0.05s between each child's animation. Goes on the wrapper. |
staggerItem | Fade + 20px rise. Goes on each child of a staggerContainer. |
1import { MotionDiv, fadeIn, staggerContainer, staggerItem } from "@yuhuanowo/yunui";2 3<MotionDiv {...fadeIn}>Appears once</MotionDiv>4 5<MotionDiv variants={staggerContainer} initial="initial" animate="animate">6 {items.map((item) => (7 <MotionDiv key={item.id} variants={staggerItem}>{item.label}</MotionDiv>8 ))}9</MotionDiv>fadeIn is spread as props; staggerContainer and staggerItem are variants,
so they go on the variants prop and are driven by the named initial/animate
strings — mixing the two forms is the usual reason a stagger does nothing.
When not to use these
Reach for CSS first. A hover lift, a fade-in, a spinner — those are transition-* and animate-* utilities, and they cost nothing at runtime. Motion earns its keep for enter/exit choreography, layout animation, gesture-driven movement and spring physics.
Props
No props table here: these forward Framer Motion's full surface (several hundred props), which a generated table would only obscure. See the Framer Motion docs for the authoritative list.