Animations · v1.0

Five sanctioned motions

Every Claura motion shares the same easing curve, the same four-rail geometry, and the same rule: motion is for state change, not decoration. Each is shipped as a standalone animated SVG and as a CSS class you can apply to any inline copy of the mark.

All animations live · honoring prefers-reduced-motion

1 · Reveal

One-shot. Bars rise from baseline with 80ms stagger. Use for hero entry, page load, modal open. Plays exactly once per mount.

1100ms one-shot
32px
64px
120px
Claura SVG file 
<!-- Drop-in: animated SVG file -->
<img src="claura-reveal.svg" alt="Claura" width="64" />

/* Or apply the CSS class to an inline SVG */
<svg class="claura-anim-reveal" viewBox="0 0 64 64">…</svg>

2 · Pulse

Infinite, slow. Only the violet rail breathes — every other element stays still. Use to indicate the system is online and listening in product chrome. Never accelerates.

∞ loop 2800ms
32px
64px
120px
System active SVG file 
<img src="claura-pulse.svg" alt="System active" width="24" />

/* Inline SVG variant */
<svg class="claura-anim-pulse" viewBox="0 0 64 64">…</svg>

3 · Loader · Scan

Primary product loader. A wave of activity passes left-to-right through the rails. Continuous. Use for indeterminate progress, network requests, and any "working" state where you don't know how long the operation will take.

∞ loop 2000ms
32px
64px
120px
Loading SVG file 
<img src="claura-loader-scan.svg" alt="Loading" width="40" />

/* React example */
<Loader />  // renders <img src="/claura-loader-scan.svg" />

4 · Loader · Breathe

A quieter, passive variant. All rails breathe in unison — same period, same phase. Use for background sync, polling, and any "thinking" state where you want the indicator to be present but unobtrusive.

∞ loop 2400ms
32px
64px
120px
Working SVG file 
<img src="claura-loader-breathe.svg" alt="Working" width="40" />

<svg class="claura-anim-breathe" viewBox="0 0 64 64">…</svg>

5 · Sync

Bars compress, expand past 100%, settle. Suggests "reconciliation in progress, resolving." Use for active sync moments, refresh actions, or when surfacing that a connected source just produced new data.

∞ loop 2400ms
32px
64px
120px
Syncing SVG file 
<img src="claura-sync.svg" alt="Syncing" width="40" />
Accessibility: all five animations honor prefers-reduced-motion. When the user has reduced motion enabled at the OS level, every animation collapses to the static mark — no opt-in code required.