Skip to main content

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} or .transition.

Hover me (scale)
Hover me (lift)
Hover me (colors)
Hover me (shadow)
Hover me (opacity)
<!-- smooth transform / scale on hover -->
<div class="transition-transform hover-scale-105">Hover me (scale)</div>

<!-- button / card that lifts on hover -->
<button class="transition-transform hover-lift">Hover me (lift)</button>

<!-- smooth color and background transition -->
<div class="transition-colors hover-bg-primary hover-text-white">Hover me (colors)</div>

<!-- smooth elevation shadow transition -->
<div class="transition-shadow hover-shadow-lg">Hover me (shadow)</div>

Duration & delay

Set transition-duration with .duration-{75|100|150|200|300|500|700|1000} and delay with .delay-{75|100|150|200|300|500}.

Fast (100ms)
Normal (300ms)
Slow (700ms)
<div class="transition-all duration-300 delay-100">...</div>

Easing (Timing functions)

Control the transition easing curve with .ease-linear, .ease-in, .ease-out, or .ease-in-out.

Linear
Ease in
Ease out
Ease in-out
<div class="transition-transform duration-500 ease-out hover-lift">...</div>

Hover utilities

boodoo includes Tailwind-style hover utilities you can pair with transitions:

  • .hover-scale-{90|95|100|105|110|125} → Scale transforms on hover
  • .hover-lift, .hover-translate-y-{0|1|2|n1|n2}, .hover-translate-x-{1|2|n1|n2} → Translations on hover
  • .hover-rotate-{45|90|180} → Rotations on hover
  • .hover-shadow-{none|sm|md|lg} or .hover-shadow → Elevation on hover
  • .hover-opacity-{0|25|50|75|100} → Opacity on hover
  • .hover-bg-{color}, .hover-text-{color}, .hover-border-{color} → Theme colors on hover

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.