Transitions
boodoo ships Material-inspired motion tokens and easy transition utilities that respect
prefers-reduced-motion.
Motion tokens
All motion is driven by tokens, exposed as CSS custom properties on :root:
| Variable | Default | Use |
|---|---|---|
--boodoo-transition-duration |
150ms |
Standard component micro-interactions |
--boodoo-transition-timing |
cubic-bezier(0.4,0,0.2,1) |
Material standard easing |
--boodoo-transition |
color / bg / border / box-shadow 150ms |
Buttons, links, controls |
--boodoo-transition-fade |
opacity 150ms linear |
Fades / backdrops |
--boodoo-transition-collapse |
height 350ms ease |
Collapse / accordion |
Transition utilities
Apply Prepared transition presets with .transition-{none|all|colors|opacity|shadow|transform}.
Hover me (transform)
Hover me (colors)
<!-- a button that lifts on hover -->
<button class="transition-transform hover:translate-y-1">...</button>Duration & delay
Set transition-duration with .duration-{75..1000} and delay with
.delay-{75..500}.
<div class="transition-all duration-300 delay-100">...</div>Hover transforms
boodoo includes Tailwind-style hover transforms you can pair with a transition:
hover:scale-105→.hover-scale-105:hover { transform: scale(1.05) }rotate-*,translate-middle-x/yutilities
Hover-transformed helpers used by .card-hover and .btn:active are
already built into the components.
Guidance
- Keep transitions fast — 150–200ms for micro-interactions, up to 300ms for larger movements.
- Ease out (decelerate) for entering elements, ease in (accelerate) for exiting ones.
- Motion should enhance affordance, never obscure content.