Motion
Five animated components that are opt-in imports, not part of the auto-import preset.
The motion tier depends on the motion package and is kept out of presetUI() so apps that do not use it never pay for it. Import what you need:
import { Reveal, AnimatedNumber, Sparkles, GradientBackground, LiquidButton } from '@human-synthesis/norns-ui/motion'Reveal(direction="up" delay!="{0.1}")
Card ...
AnimatedNumber(value!="{stats.users}" duration!="{1.2}" decimals!="{0}")| Component | Props |
|---|---|
Reveal |
direction (up, down, left, right), distance px, duration s, delay s, once (default true), threshold for the IntersectionObserver |
AnimatedNumber |
value, from, duration, decimals, format |
Sparkles |
density, colors, minSize, maxSize, wraps children |
GradientBackground |
colors, duration, angle, wraps children |
LiquidButton |
the Btn props (variant, size, type, disabled, icon, onclick) with a liquid hover effect |
ShinyButton, RippleButton, GradientText and ThemeToggler are CSS-only and live in the regular component set.