@toybreaker/fiko 0.6.2 → 0.6.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/omg/utils/fiko.css +64 -15
  2. package/package.json +2 -2
package/omg/utils/fiko.css CHANGED
@@ -1,15 +1,14 @@
1
1
  /*! fiko | MIT License */
2
- /* utils/fiko.css — .fiko signature class
2
+ /* utils/fiko.css — FIKO signature utilities
3
3
  *
4
- * Adds the warm animated orb glow to any element.
5
- * Usage: <section class="fiko"> … </section>
6
- *
7
- * Requirements: the element needs dimensions (height/min-height).
8
- * Pseudo-elements carry the orbs; direct children stay above via z-index.
9
- * Override orb colors with --fiko_orb_a / --fiko_orb_b.
4
+ * .fiko_orbital — warm animated orb glow (needs dimensions; override --fiko_orb_a / --fiko_orb_b)
5
+ * .fiko — one-shot vertical shake on page load (no JS)
6
+ * .fiko_hover — vertical shake on :hover
7
+ * .fiko_loop — continuous vertical shake
8
+ * Override: style="--shake_distance: 12px; --shake_duration: 0.4s"
10
9
  */
11
10
 
12
- .fiko {
11
+ .fiko_orbital {
13
12
  --fiko_orb_a: oklch(0.65 0.22 40); /* warm orange */
14
13
  --fiko_orb_b: oklch(0.72 0.20 65); /* amber */
15
14
  position: relative;
@@ -17,8 +16,8 @@
17
16
  background: var(--dark, oklch(0.12 0.01 265));
18
17
  }
19
18
 
20
- .fiko::before,
21
- .fiko::after {
19
+ .fiko_orbital::before,
20
+ .fiko_orbital::after {
22
21
  content: '';
23
22
  position: absolute;
24
23
  border-radius: 50%;
@@ -27,7 +26,7 @@
27
26
  }
28
27
 
29
28
  /* primary orb — top-right */
30
- .fiko::before {
29
+ .fiko_orbital::before {
31
30
  width: 60%;
32
31
  aspect-ratio: 1;
33
32
  background: var(--fiko_orb_a);
@@ -39,7 +38,7 @@
39
38
  }
40
39
 
41
40
  /* secondary orb — bottom-right */
42
- .fiko::after {
41
+ .fiko_orbital::after {
43
42
  width: 40%;
44
43
  aspect-ratio: 1;
45
44
  background: var(--fiko_orb_b);
@@ -51,7 +50,7 @@
51
50
  }
52
51
 
53
52
  /* keep children above orbs */
54
- .fiko > * { position: relative; z-index: 1; }
53
+ .fiko_orbital > * { position: relative; z-index: 1; }
55
54
 
56
55
  @keyframes fiko_orb_drift {
57
56
  0% { transform: translate(0, 0) scale(1); }
@@ -61,6 +60,56 @@
61
60
  }
62
61
 
63
62
  @media (prefers-reduced-motion: reduce) {
64
- .fiko::before,
65
- .fiko::after { animation: none; }
63
+ .fiko_orbital::before,
64
+ .fiko_orbital::after { animation: none; }
65
+ }
66
+
67
+ /* ─── .fiko shake utility ───────────────────────────────────────────────────
68
+ *
69
+ * Token-driven vertical shake. Override via custom properties:
70
+ * style="--shake_distance: 12px; --shake_duration: 0.4s"
71
+ *
72
+ * Variants:
73
+ * .fiko — one-shot on page load (no JS required)
74
+ * .fiko_hover — shakes on :hover
75
+ * .fiko_loop — shakes on repeat forever
76
+ */
77
+
78
+ .fiko,
79
+ .fiko_hover,
80
+ .fiko_loop {
81
+ --shake_distance: 18px;
82
+ --shake_duration: 0.6s;
83
+ }
84
+
85
+ /* default: one-shot on load */
86
+ .fiko {
87
+ animation: fiko_shake var(--shake_duration) ease-out both;
88
+ }
89
+
90
+ /* hover: re-triggers each time cursor enters */
91
+ .fiko_hover:hover {
92
+ animation: fiko_shake var(--shake_duration) ease-out both;
93
+ }
94
+
95
+ /* loop: runs continuously */
96
+ .fiko_loop {
97
+ animation: fiko_shake var(--shake_duration) ease-out infinite;
98
+ }
99
+
100
+ @keyframes fiko_shake {
101
+ 0% { transform: translateY(0); }
102
+ 10% { transform: translateY(calc(var(--shake_distance) * -1)); }
103
+ 22% { transform: translateY(calc(var(--shake_distance) * 0.78)); }
104
+ 36% { transform: translateY(calc(var(--shake_distance) * -0.56)); }
105
+ 50% { transform: translateY(calc(var(--shake_distance) * 0.44)); }
106
+ 64% { transform: translateY(calc(var(--shake_distance) * -0.22)); }
107
+ 78% { transform: translateY(calc(var(--shake_distance) * 0.11)); }
108
+ 100% { transform: translateY(0); }
109
+ }
110
+
111
+ @media (prefers-reduced-motion: reduce) {
112
+ .fiko,
113
+ .fiko_hover:hover,
114
+ .fiko_loop { animation: none; }
66
115
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toybreaker/fiko",
3
- "version": "0.6.2",
3
+ "version": "0.6.4",
4
4
  "description": "LOOK GOOD OR DIE! — cascade layers, OKLCH colors, design tokens. Zero specificity wars. Smiling DX.",
5
5
  "license": "MIT",
6
6
  "author": "Toybreaker <hello@junglestar.co>",
@@ -24,7 +24,7 @@
24
24
  "scripts": {
25
25
  "dev": "serve . & sleep 1 && open http://localhost:3000/demo/",
26
26
  "build": "node scripts/build-demo.mjs",
27
- "deploy": "node scripts/build-demo.mjs && netlify deploy --prod --dir=dist"
27
+ "deploy": "node scripts/build-demo.mjs && netlify deploy --prod --dir=dist --site=922d0a52-64e0-4eda-9fd9-742aa8619a87"
28
28
  },
29
29
  "main": "index.css",
30
30
  "style": "index.css",