Animations

Utility classes

<!-- Float: slow vertical bobbing -->
<div class="animate-float">
  <ac-card>This card floats</ac-card>
</div>

<!-- Pulse: slow opacity pulse -->
<span class="w-2 h-2 rounded-full bg-green animate-pulse-slow"></span>

<!-- Spin: continuous rotation -->
<svg class="animate-spin">...</svg>

Transition utilities

<div class="transition-all">Transitions all properties</div>
<div class="transition-colors">Transitions color/bg/border</div>
<div class="transition-opacity">Transitions opacity</div>
<div class="transition-transform">Transitions transform</div>

Blur utilities

<nav class="backdrop-blur">Blurred backdrop (8px)</nav>
<nav class="backdrop-blur-md">Blurred backdrop (12px)</nav>

Keyframes available

Keyframe	Usage
ac-float	Used by .animate-float
ac-pulse-slow	Used by .animate-pulse-slow
ac-spin	Used by .animate-spin and button spinner
ac-btn-spin	Internal: button loading spinner
ac-skeleton-sweep	Internal: skeleton shimmer
ac-badge-pulse	Internal: badge pulse dot

Using tokens in custom animations

import { animation } from 'https://ui.acopl.ar/v2.0.0/tokens.js';

element.animate(
  [{ transform: 'translateY(0)' }, { transform: 'translateY(-10px)' }],
  {
    duration: 600,
    easing: animation.easing.inOut,
    iterations: Infinity,
    direction: 'alternate',
  }
);