Motion

1/*!
2 * BoldKit Motion System — L1 tokens + L2 recipes
3 * https://boldkit.dev
4 *
5 * Framework-agnostic. Works with React, Vue, Svelte, Solid,
6 * Astro, plain HTML — anywhere CSS works.
7 *
8 * Honors prefers-reduced-motion automatically.
9 *
10 * Install via shadcn CLI:
11 *   npx shadcn@latest add "https://boldkit.dev/r/motion.json"
12 *
13 * Or import directly:
14 *   import "@boldkit/motion-css";
15 */
16 
17/* ──────────────────────────────────────────────────────
18   L1 — Motion Tokens
19   ────────────────────────────────────────────────────── */
20 
21:where(:root) {
22  /* Easing — stepped & hard, not smooth. Brutalism's soul. */
23  --bk-ease-step:    steps(4, end);
24  --bk-ease-step-2:  steps(2, end);
25  --bk-ease-snap:    cubic-bezier(0.22, 1, 0.3, 1.12);
26  --bk-ease-stamp:   cubic-bezier(0.7, 0, 0.84, 0);
27  --bk-ease-rubber:  cubic-bezier(0.34, 1.56, 0.64, 1);
28  --bk-ease-linear:  linear;
29 
30  /* Durations */
31  --bk-dur-instant: 80ms;
32  --bk-dur-snap:    150ms;
33  --bk-dur-quick:   240ms;
34  --bk-dur-base:    400ms;
35  --bk-dur-slow:    700ms;
36 
37  /* Distances */
38  --bk-shadow-offset:       4px;
39  --bk-shadow-offset-press: 0px;
40  --bk-translate-press:     2px;
41  --bk-reveal-offset:       16px;
42 
43  /* Fallbacks — if consumer hasn't defined the BoldKit shadow color,
44     fall back to currentColor so the press shadow is still visible. */
45  --shadow-color: var(--shadow-color, 240 10% 10%);
46}
47 
48/* ──────────────────────────────────────────────────────
49   L1 — Keyframes (bk-* namespaced)
50   ────────────────────────────────────────────────────── */
51 
52@keyframes bk-stamp-in {
53  0%   { opacity: 0; transform: scale(0.6) rotate(-4deg); }
54  60%  { opacity: 1; transform: scale(1.04) rotate(0.5deg); }
55  100% { opacity: 1; transform: scale(1) rotate(0); }
56}
57@keyframes bk-press-shadow {
58  0%   { transform: translate(var(--bk-shadow-offset), var(--bk-shadow-offset)); }
59  100% { transform: translate(var(--bk-shadow-offset-press), var(--bk-shadow-offset-press)); }
60}
61@keyframes bk-reveal-up {
62  from { opacity: 0; transform: translateY(var(--bk-reveal-offset)); }
63// … truncated