@viglet/viglet-design-system 2026.2.41 → 2026.2.42
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.
- package/dist/floating-formulas-bg.css +275 -0
- package/dist/index.cjs.js +1 -1
- package/dist/index.es.js +5 -5
- package/dist/preset.css +162 -0
- package/dist/viglet-design-system.css +1 -1
- package/package.json +6 -3
|
@@ -0,0 +1,275 @@
|
|
|
1
|
+
/* ══════════════════════════════════════════════════════
|
|
2
|
+
FLOATING FORMULAS — rich animated backdrop
|
|
3
|
+
Shared by Turing ES, Dumont, Shio, Viglet Cloud and viglet.org.
|
|
4
|
+
Colors controlled by --ff-color / --ff-color-dark (default: Turing blue).
|
|
5
|
+
Provide `--ff-color-rgb` / `--ff-color-dark-rgb` (as "R, G, B" triplets) if
|
|
6
|
+
you want orbs / lightning / nuke to match your palette — otherwise those
|
|
7
|
+
layers fall back to the Turing defaults in rgba() form.
|
|
8
|
+
══════════════════════════════════════════════════════ */
|
|
9
|
+
|
|
10
|
+
/* ── Floating formula terms ─────────────────────────── */
|
|
11
|
+
.ff-term {
|
|
12
|
+
position: absolute;
|
|
13
|
+
font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
|
|
14
|
+
font-weight: 700;
|
|
15
|
+
color: var(--ff-color, #2563eb);
|
|
16
|
+
white-space: nowrap;
|
|
17
|
+
-webkit-user-select: none;
|
|
18
|
+
user-select: none;
|
|
19
|
+
will-change: transform;
|
|
20
|
+
}
|
|
21
|
+
.dark .ff-term { color: var(--ff-color-dark, #60a5fa); }
|
|
22
|
+
|
|
23
|
+
/* ── Molecular bonds ────────────────────────────────── */
|
|
24
|
+
.ff-bond { position: absolute; will-change: transform; }
|
|
25
|
+
.ff-bond-line { stroke: var(--ff-color, #2563eb); opacity: 0.5; }
|
|
26
|
+
.ff-bond-node { fill: var(--ff-color, #2563eb); opacity: 0.6; }
|
|
27
|
+
.dark .ff-bond-line { stroke: var(--ff-color-dark, #60a5fa); opacity: 0.4; }
|
|
28
|
+
.dark .ff-bond-node { fill: var(--ff-color-dark, #60a5fa); opacity: 0.5; }
|
|
29
|
+
|
|
30
|
+
/* ── Ambient orbs (blurred "clouds") ────────────────── */
|
|
31
|
+
.ff-orb {
|
|
32
|
+
position: absolute;
|
|
33
|
+
border-radius: 50%;
|
|
34
|
+
filter: blur(100px);
|
|
35
|
+
opacity: 0.4;
|
|
36
|
+
}
|
|
37
|
+
.ff-orb--1 {
|
|
38
|
+
top: -15%; right: -8%; width: 500px; height: 500px;
|
|
39
|
+
background: radial-gradient(circle, rgba(var(--ff-color-rgb, 37, 99, 235), 0.2), transparent 70%);
|
|
40
|
+
animation: ff-orb-float-1 8s ease-in-out infinite;
|
|
41
|
+
}
|
|
42
|
+
.ff-orb--2 {
|
|
43
|
+
bottom: -20%; left: -5%; width: 400px; height: 400px;
|
|
44
|
+
background: radial-gradient(circle, rgba(var(--ff-color-rgb, 79, 70, 229), 0.15), transparent 70%);
|
|
45
|
+
animation: ff-orb-float-2 10s ease-in-out infinite;
|
|
46
|
+
}
|
|
47
|
+
.ff-orb--3 {
|
|
48
|
+
top: 40%; left: 50%; width: 350px; height: 350px;
|
|
49
|
+
background: radial-gradient(circle, rgba(var(--ff-color-rgb, 99, 102, 241), 0.12), transparent 70%);
|
|
50
|
+
animation: ff-orb-float-1 12s ease-in-out 2s infinite;
|
|
51
|
+
}
|
|
52
|
+
.dark .ff-orb--1 { background: radial-gradient(circle, rgba(var(--ff-color-dark-rgb, 96, 165, 250), 0.35), transparent 70%); }
|
|
53
|
+
.dark .ff-orb--2 { background: radial-gradient(circle, rgba(var(--ff-color-dark-rgb, 129, 140, 248), 0.25), transparent 70%); }
|
|
54
|
+
.dark .ff-orb--3 { background: radial-gradient(circle, rgba(var(--ff-color-dark-rgb, 165, 180, 252), 0.18), transparent 70%); }
|
|
55
|
+
|
|
56
|
+
@keyframes ff-orb-float-1 {
|
|
57
|
+
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
58
|
+
50% { transform: translate(-30px, 20px) scale(1.05); }
|
|
59
|
+
}
|
|
60
|
+
@keyframes ff-orb-float-2 {
|
|
61
|
+
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
62
|
+
50% { transform: translate(25px, -15px) scale(1.08); }
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* ── Dot grid ───────────────────────────────────────── */
|
|
66
|
+
.ff-grid {
|
|
67
|
+
position: absolute; inset: 0;
|
|
68
|
+
background-image: radial-gradient(rgba(var(--ff-color-rgb, 37, 99, 235), 0.07) 1px, transparent 1px);
|
|
69
|
+
background-size: 32px 32px;
|
|
70
|
+
}
|
|
71
|
+
.dark .ff-grid {
|
|
72
|
+
background-image: radial-gradient(rgba(var(--ff-color-dark-rgb, 165, 180, 252), 0.06) 1px, transparent 1px);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* ── Drift animations (5 variants for rich background) ── */
|
|
76
|
+
.ff-drift-a { animation: ff-drift-a ease-in-out infinite; }
|
|
77
|
+
.ff-drift-b { animation: ff-drift-b ease-in-out infinite; }
|
|
78
|
+
.ff-drift-c { animation: ff-drift-c ease-in-out infinite; }
|
|
79
|
+
.ff-drift-d { animation: ff-drift-d ease-in-out infinite; }
|
|
80
|
+
.ff-drift-e { animation: ff-drift-e ease-in-out infinite; }
|
|
81
|
+
|
|
82
|
+
@keyframes ff-drift-a {
|
|
83
|
+
0% { transform: translate(0, 0) scale(1) rotate(0deg); }
|
|
84
|
+
20% { transform: translate(80px, -60px) scale(1.15) rotate(5deg); }
|
|
85
|
+
40% { transform: translate(-40px, -120px) scale(0.85) rotate(-4deg); }
|
|
86
|
+
60% { transform: translate(-100px, -30px) scale(1.1) rotate(3deg); }
|
|
87
|
+
80% { transform: translate(50px, 60px) scale(0.9) rotate(-2deg); }
|
|
88
|
+
100% { transform: translate(0, 0) scale(1) rotate(0deg); }
|
|
89
|
+
}
|
|
90
|
+
@keyframes ff-drift-b {
|
|
91
|
+
0% { transform: translate(0, 0) scale(1) rotate(0deg); }
|
|
92
|
+
25% { transform: translate(-90px, 70px) scale(0.88) rotate(-5deg); }
|
|
93
|
+
50% { transform: translate(60px, 130px) scale(1.2) rotate(4deg); }
|
|
94
|
+
75% { transform: translate(100px, -40px) scale(0.85) rotate(-3deg); }
|
|
95
|
+
100% { transform: translate(0, 0) scale(1) rotate(0deg); }
|
|
96
|
+
}
|
|
97
|
+
@keyframes ff-drift-c {
|
|
98
|
+
0% { transform: translate(0, 0) scale(1) rotate(0deg); }
|
|
99
|
+
16% { transform: translate(70px, 80px) scale(1.12) rotate(4deg); }
|
|
100
|
+
33% { transform: translate(-50px, 40px) scale(0.86) rotate(-5deg); }
|
|
101
|
+
50% { transform: translate(-110px, -60px) scale(1.18) rotate(2deg); }
|
|
102
|
+
66% { transform: translate(30px, -100px) scale(0.9) rotate(-3deg); }
|
|
103
|
+
83% { transform: translate(90px, -20px) scale(1.05) rotate(4deg); }
|
|
104
|
+
100% { transform: translate(0, 0) scale(1) rotate(0deg); }
|
|
105
|
+
}
|
|
106
|
+
@keyframes ff-drift-d {
|
|
107
|
+
0% { transform: translate(0, 0) scale(1) rotate(0deg); }
|
|
108
|
+
20% { transform: translate(-70px, -90px) scale(1.1) rotate(-4deg); }
|
|
109
|
+
40% { transform: translate(100px, -50px) scale(0.88) rotate(5deg); }
|
|
110
|
+
60% { transform: translate(40px, 100px) scale(1.15) rotate(-2deg); }
|
|
111
|
+
80% { transform: translate(-80px, 50px) scale(0.92) rotate(3deg); }
|
|
112
|
+
100% { transform: translate(0, 0) scale(1) rotate(0deg); }
|
|
113
|
+
}
|
|
114
|
+
@keyframes ff-drift-e {
|
|
115
|
+
0% { transform: translate(0, 0) scale(1) rotate(0deg); }
|
|
116
|
+
15% { transform: translate(60px, 90px) scale(0.9) rotate(5deg); }
|
|
117
|
+
35% { transform: translate(110px, -30px) scale(1.12) rotate(-3deg); }
|
|
118
|
+
55% { transform: translate(-30px, -110px) scale(0.87) rotate(4deg); }
|
|
119
|
+
75% { transform: translate(-100px, 40px) scale(1.1) rotate(-5deg); }
|
|
120
|
+
100% { transform: translate(0, 0) scale(1) rotate(0deg); }
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/* ══════════════════════════════════════════════════════
|
|
124
|
+
LIGHTNING FLASHES
|
|
125
|
+
══════════════════════════════════════════════════════ */
|
|
126
|
+
.ff-lightning {
|
|
127
|
+
position: absolute; inset: 0; opacity: 0;
|
|
128
|
+
pointer-events: none; will-change: opacity;
|
|
129
|
+
mix-blend-mode: multiply;
|
|
130
|
+
}
|
|
131
|
+
.dark .ff-lightning { mix-blend-mode: screen; }
|
|
132
|
+
|
|
133
|
+
/* GROUP A */
|
|
134
|
+
.ff-lightning--a1 {
|
|
135
|
+
background: radial-gradient(ellipse 50% 50% at 5% 10%, rgba(var(--ff-color-rgb, 37, 99, 235), 0.35), rgba(var(--ff-color-rgb, 79, 70, 229), 0.15) 40%, transparent 70%);
|
|
136
|
+
animation: ff-flash-a 11s linear infinite;
|
|
137
|
+
}
|
|
138
|
+
.ff-lightning--a2 {
|
|
139
|
+
background: radial-gradient(ellipse 50% 50% at 95% 85%, rgba(var(--ff-color-rgb, 37, 99, 235), 0.3), rgba(var(--ff-color-rgb, 99, 102, 241), 0.12) 40%, transparent 70%);
|
|
140
|
+
animation: ff-flash-a 11s linear 0.08s infinite;
|
|
141
|
+
}
|
|
142
|
+
.ff-lightning--a3 {
|
|
143
|
+
background: radial-gradient(ellipse 40% 60% at 3% 55%, rgba(var(--ff-color-rgb, 79, 70, 229), 0.3), rgba(var(--ff-color-rgb, 37, 99, 235), 0.12) 40%, transparent 70%);
|
|
144
|
+
animation: ff-flash-a 11s linear 0.15s infinite;
|
|
145
|
+
}
|
|
146
|
+
.dark .ff-lightning--a1 { background: radial-gradient(ellipse 50% 50% at 5% 10%, rgba(var(--ff-color-dark-rgb, 147, 197, 253), 0.9), rgba(var(--ff-color-dark-rgb, 96, 165, 250), 0.4) 40%, transparent 70%); }
|
|
147
|
+
.dark .ff-lightning--a2 { background: radial-gradient(ellipse 50% 50% at 95% 85%, rgba(var(--ff-color-dark-rgb, 165, 180, 252), 0.8), rgba(var(--ff-color-dark-rgb, 129, 140, 248), 0.35) 40%, transparent 70%); }
|
|
148
|
+
.dark .ff-lightning--a3 { background: radial-gradient(ellipse 40% 60% at 3% 55%, rgba(var(--ff-color-dark-rgb, 129, 140, 248), 0.8), rgba(var(--ff-color-dark-rgb, 79, 70, 229), 0.35) 40%, transparent 70%); }
|
|
149
|
+
|
|
150
|
+
@keyframes ff-flash-a {
|
|
151
|
+
0%, 100% { opacity: 0; }
|
|
152
|
+
3% { opacity: 0; }
|
|
153
|
+
3.2% { opacity: 1; }
|
|
154
|
+
3.5% { opacity: 0.15; }
|
|
155
|
+
3.8% { opacity: 0.95; }
|
|
156
|
+
4.3% { opacity: 1; }
|
|
157
|
+
5% { opacity: 0.4; }
|
|
158
|
+
5.8% { opacity: 0; }
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
/* GROUP B */
|
|
162
|
+
.ff-lightning--b1 {
|
|
163
|
+
background: radial-gradient(ellipse 45% 50% at 88% 8%, rgba(var(--ff-color-rgb, 37, 99, 235), 0.35), rgba(var(--ff-color-rgb, 99, 102, 241), 0.15) 45%, transparent 75%);
|
|
164
|
+
animation: ff-flash-b 15s linear 4s infinite;
|
|
165
|
+
}
|
|
166
|
+
.ff-lightning--b2 {
|
|
167
|
+
background: radial-gradient(ellipse 55% 45% at 45% 88%, rgba(var(--ff-color-rgb, 79, 70, 229), 0.3), rgba(var(--ff-color-rgb, 37, 99, 235), 0.12) 40%, transparent 70%);
|
|
168
|
+
animation: ff-flash-b 15s linear 4.1s infinite;
|
|
169
|
+
}
|
|
170
|
+
.dark .ff-lightning--b1 { background: radial-gradient(ellipse 45% 50% at 88% 8%, rgba(var(--ff-color-dark-rgb, 147, 197, 253), 0.85), rgba(var(--ff-color-dark-rgb, 96, 165, 250), 0.4) 45%, transparent 75%); }
|
|
171
|
+
.dark .ff-lightning--b2 { background: radial-gradient(ellipse 55% 45% at 45% 88%, rgba(var(--ff-color-dark-rgb, 165, 180, 252), 0.8), rgba(var(--ff-color-dark-rgb, 129, 140, 248), 0.35) 40%, transparent 70%); }
|
|
172
|
+
|
|
173
|
+
@keyframes ff-flash-b {
|
|
174
|
+
0%, 100% { opacity: 0; }
|
|
175
|
+
2% { opacity: 0; }
|
|
176
|
+
2.15% { opacity: 1; }
|
|
177
|
+
2.4% { opacity: 0.1; }
|
|
178
|
+
2.7% { opacity: 1; }
|
|
179
|
+
3.2% { opacity: 0.85; }
|
|
180
|
+
3.8% { opacity: 0; }
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
/* GROUP C */
|
|
184
|
+
.ff-lightning--c1 {
|
|
185
|
+
background: radial-gradient(ellipse 50% 55% at 8% 92%, rgba(var(--ff-color-rgb, 37, 99, 235), 0.4), rgba(var(--ff-color-rgb, 99, 102, 241), 0.18) 40%, transparent 70%);
|
|
186
|
+
animation: ff-flash-c 18s linear 9s infinite;
|
|
187
|
+
}
|
|
188
|
+
.ff-lightning--c2 {
|
|
189
|
+
background: radial-gradient(ellipse 55% 40% at 40% 5%, rgba(var(--ff-color-rgb, 79, 70, 229), 0.35), rgba(var(--ff-color-rgb, 37, 99, 235), 0.15) 40%, transparent 70%);
|
|
190
|
+
animation: ff-flash-c 18s linear 9.06s infinite;
|
|
191
|
+
}
|
|
192
|
+
.ff-lightning--c3 {
|
|
193
|
+
background: radial-gradient(ellipse 40% 60% at 97% 50%, rgba(var(--ff-color-rgb, 99, 102, 241), 0.3), rgba(var(--ff-color-rgb, 79, 70, 229), 0.12) 40%, transparent 70%);
|
|
194
|
+
animation: ff-flash-c 18s linear 9.12s infinite;
|
|
195
|
+
}
|
|
196
|
+
.dark .ff-lightning--c1 { background: radial-gradient(ellipse 50% 55% at 8% 92%, rgba(var(--ff-color-dark-rgb, 147, 197, 253), 0.95), rgba(var(--ff-color-dark-rgb, 96, 165, 250), 0.45) 40%, transparent 70%); }
|
|
197
|
+
.dark .ff-lightning--c2 { background: radial-gradient(ellipse 55% 40% at 40% 5%, rgba(var(--ff-color-dark-rgb, 165, 180, 252), 0.85), rgba(var(--ff-color-dark-rgb, 129, 140, 248), 0.4) 40%, transparent 70%); }
|
|
198
|
+
.dark .ff-lightning--c3 { background: radial-gradient(ellipse 40% 60% at 97% 50%, rgba(var(--ff-color-dark-rgb, 129, 140, 248), 0.8), rgba(var(--ff-color-dark-rgb, 96, 165, 250), 0.35) 40%, transparent 70%); }
|
|
199
|
+
|
|
200
|
+
@keyframes ff-flash-c {
|
|
201
|
+
0%, 100% { opacity: 0; }
|
|
202
|
+
4% { opacity: 0; }
|
|
203
|
+
4.1% { opacity: 1; }
|
|
204
|
+
4.25% { opacity: 0.1; }
|
|
205
|
+
4.4% { opacity: 1; }
|
|
206
|
+
4.55% { opacity: 0.05; }
|
|
207
|
+
4.7% { opacity: 0.95; }
|
|
208
|
+
5.1% { opacity: 1; }
|
|
209
|
+
5.6% { opacity: 0.5; }
|
|
210
|
+
6.2% { opacity: 0; }
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
/* ══════════════════════════════════════════════════════
|
|
214
|
+
NUKE + FLOOD — rare full-screen pulse
|
|
215
|
+
══════════════════════════════════════════════════════ */
|
|
216
|
+
.ff-lightning--nuke {
|
|
217
|
+
position: absolute; top: -150%; left: -150%; width: 400%; height: 400%;
|
|
218
|
+
background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(var(--ff-color-rgb, 37, 99, 235), 0.5), rgba(var(--ff-color-rgb, 79, 70, 229), 0.3) 25%, rgba(var(--ff-color-rgb, 99, 102, 241), 0.15) 50%, transparent 75%);
|
|
219
|
+
animation: ff-flash-nuke 50s linear 20s infinite;
|
|
220
|
+
mix-blend-mode: multiply;
|
|
221
|
+
transform: scale(0.15);
|
|
222
|
+
will-change: transform, opacity;
|
|
223
|
+
}
|
|
224
|
+
.dark .ff-lightning--nuke {
|
|
225
|
+
background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(var(--ff-color-dark-rgb, 199, 210, 254), 1), rgba(var(--ff-color-dark-rgb, 147, 197, 253), 0.8) 25%, rgba(var(--ff-color-dark-rgb, 96, 165, 250), 0.45) 50%, transparent 75%);
|
|
226
|
+
mix-blend-mode: screen;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.ff-lightning--flood {
|
|
230
|
+
position: absolute; inset: 0;
|
|
231
|
+
background: rgba(var(--ff-color-rgb, 37, 99, 235), 0.95);
|
|
232
|
+
opacity: 0;
|
|
233
|
+
animation: ff-flash-flood 50s linear 20s infinite;
|
|
234
|
+
will-change: opacity;
|
|
235
|
+
}
|
|
236
|
+
.dark .ff-lightning--flood {
|
|
237
|
+
background: rgba(255, 255, 255, 0.95);
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
@keyframes ff-flash-nuke {
|
|
241
|
+
0%, 100% { opacity: 0; transform: scale(0.15); }
|
|
242
|
+
3% { opacity: 0; transform: scale(0.15); }
|
|
243
|
+
3.2% { opacity: 0.4; transform: scale(0.2); }
|
|
244
|
+
3.4% { opacity: 0.05; transform: scale(0.15); }
|
|
245
|
+
3.6% { opacity: 0.5; transform: scale(0.25); }
|
|
246
|
+
3.9% { opacity: 0.2; transform: scale(0.3); }
|
|
247
|
+
4.2% { opacity: 1; transform: scale(0.45); }
|
|
248
|
+
4.5% { opacity: 0.9; transform: scale(0.6); }
|
|
249
|
+
4.8% { opacity: 1; transform: scale(0.75); }
|
|
250
|
+
5.5% { opacity: 1; transform: scale(0.9); }
|
|
251
|
+
6.5% { opacity: 1; transform: scale(1.05); }
|
|
252
|
+
8% { opacity: 1; transform: scale(1.1); }
|
|
253
|
+
10% { opacity: 1; transform: scale(1.15); }
|
|
254
|
+
13% { opacity: 1; transform: scale(1.2); }
|
|
255
|
+
16% { opacity: 0.95; transform: scale(1.25); }
|
|
256
|
+
20% { opacity: 0.7; transform: scale(1.25); }
|
|
257
|
+
24% { opacity: 0.4; transform: scale(1.25); }
|
|
258
|
+
28% { opacity: 0.15; transform: scale(1.25); }
|
|
259
|
+
32% { opacity: 0; transform: scale(1.25); }
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
@keyframes ff-flash-flood {
|
|
263
|
+
0% { opacity: 0; }
|
|
264
|
+
6% { opacity: 0; }
|
|
265
|
+
7% { opacity: 0.1; }
|
|
266
|
+
8% { opacity: 0.3; }
|
|
267
|
+
9% { opacity: 0.55; }
|
|
268
|
+
10% { opacity: 0.8; }
|
|
269
|
+
11% { opacity: 1; }
|
|
270
|
+
17% { opacity: 1; }
|
|
271
|
+
19% { opacity: 0.7; }
|
|
272
|
+
21% { opacity: 0.4; }
|
|
273
|
+
23% { opacity: 0.15; }
|
|
274
|
+
25% { opacity: 0; }
|
|
275
|
+
}
|