Motioned studio
anthropicDuplicate & refineclaude-haiku-4-5-20251001Native CSS6/11/2026, 1:15:58 PM

A tiny card that signals: backups run nightly. Keep it minimal.

## Motion Rationale The core message—**reliable nightly automation**—is conveyed through a **continuous, gentle 3-second rotation cycle** that runs ambient in the background, never demanding attention. The spinning ring with a leading dot visualizes a clock hand completing its nightly circuit; the pulsing center dot breathes at the same 3s cadence, suggesting a quiet heartbeat of protection. **Durations & easing:** - **Spin cycle: 3s linear** — matches "nightly" (a full rotation per cycle, no drama) - **Icon swap: 300–400ms ease-out** — fast response when clicked, but not jarring - **Pulse dot: 3s ease-in-out** — synced to the spin, creates cohesion - **Card hover: 300ms ease-out** — confident lift, glow fade-in reinforces the "it's working" moment - **Press: scale(0.97) instant** — tactile feedback, no easing lag **Why it works:** The loop never stops—it whispers "I'm always on duty"—while the Tailwind-animated ring + pulse avoid CPU overhead. On click, the disk icon morphs to a check (icon crossfade at 300ms) to give feedback that the backup "just completed," then resets after 1.2s so the cycle continues. The glow only appears on hover, keeping the idle state minimal and trustworthy. The title now reads "Nattlige backups" in the same font weight and size, and all accent colors—from icon to ring to dot to border-hover to glow—shift to emerald green (Tailwind's `emerald-600` for core elements, `emerald-700` for the ring dot, `emerald-500/40` for hover border, and `rgba(16, 185, 129, 0.15)` for the radial glow), maintaining visual harmony while strengthening the sense of growth and vitality. Respects `prefers-reduced-motion` by dropping all animations while preserving the UI structure.