@viglet/viglet-design-system 2026.2.40 → 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.cjs.js +1 -0
- package/dist/floating-formulas-bg.css +275 -0
- package/dist/floating-formulas-bg.es.js +240 -0
- package/dist/index.cjs.js +52 -52
- package/dist/index.es.js +6974 -7210
- package/dist/preset.css +162 -0
- package/dist/viglet-design-system.css +1 -2
- package/package.json +11 -3
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./i18n-fhLjmEl9.cjs`);let e=require(`react`),t=require(`react/jsx-runtime`);var n=`H₂O.CO₂.NaCl.C₆H₁₂O₆.O₂.NH₃.CH₄.H₂SO₄.Fe₂O₃.CaCO₃.C₂H₅OH.HCl.NaOH.KMnO₄.N₂.SiO₂.Al₂O₃.MgO.ZnSO₄.Cu.H₂O₂.SO₃.PbO₂.BaSO₄.AgNO₃.K₂Cr₂O₇.Na₂CO₃.Mg(OH)₂.FeCl₃.CuSO₄.Ca(OH)₂.HNO₃.P₄O₁₀.Cl₂.Br₂`.split(`.`),r=[`ff-drift-a`,`ff-drift-b`,`ff-drift-c`,`ff-drift-d`,`ff-drift-e`],i=[{top:`8%`,left:`6%`,size:80,duration:18,delay:-2,drift:`ff-drift-b`,opacity:.3,path:`M10,40 L40,20 L70,40 M40,20 L40,5 M40,20 L25,8 M40,20 L55,8`},{top:`22%`,left:`75%`,size:100,duration:22,delay:-5,drift:`ff-drift-a`,opacity:.25,path:`M20,50 L50,30 L80,50 M50,30 L50,10 M20,50 L20,70 M80,50 L80,70 M50,30 L35,15 M50,30 L65,15`},{top:`60%`,left:`85%`,size:70,duration:16,delay:-1,drift:`ff-drift-b`,opacity:.28,path:`M15,35 L35,15 L55,35 L35,55 Z M35,15 L35,5 M55,35 L65,35`},{top:`70%`,left:`12%`,size:90,duration:20,delay:-4,drift:`ff-drift-a`,opacity:.25,path:`M10,45 L45,25 L80,45 M45,25 L45,5 M10,45 L10,65 M80,45 L80,65`},{top:`5%`,left:`42%`,size:60,duration:15,delay:-3,drift:`ff-drift-c`,opacity:.22,path:`M10,30 L30,10 L50,30 M30,10 L30,0 M10,30 L0,40 M50,30 L60,40`},{top:`45%`,left:`3%`,size:75,duration:19,delay:-6,drift:`ff-drift-a`,opacity:.25,path:`M20,40 L40,20 L60,40 M40,20 L40,5 M20,40 L5,50 M60,40 L75,50 M40,5 L30,0 M40,5 L50,0`},{top:`78%`,left:`52%`,size:85,duration:21,delay:-2,drift:`ff-drift-b`,opacity:.22,path:`M15,45 L42,20 L70,45 M42,20 L42,5 M15,45 L30,60 M70,45 L55,60`},{top:`32%`,left:`92%`,size:65,duration:17,delay:-5,drift:`ff-drift-a`,opacity:.25,path:`M10,35 L32,15 L55,35 M32,15 L32,3 M10,35 L10,50`},{top:`15%`,left:`28%`,size:70,duration:19,delay:-1,drift:`ff-drift-c`,opacity:.25,path:`M10,35 L35,10 L60,35 M35,10 L35,0 M10,35 L0,50 M60,35 L70,50`},{top:`50%`,left:`35%`,size:65,duration:16,delay:-7,drift:`ff-drift-b`,opacity:.2,path:`M10,30 L30,10 L50,30 L30,50 Z M30,10 L30,0`},{top:`40%`,left:`60%`,size:80,duration:20,delay:-3,drift:`ff-drift-a`,opacity:.22,path:`M15,40 L40,15 L65,40 M40,15 L40,3 M15,40 L5,55 M65,40 L75,55 M40,15 L28,5 M40,15 L52,5`},{top:`85%`,left:`78%`,size:60,duration:15,delay:-6,drift:`ff-drift-b`,opacity:.22,path:`M10,30 L30,10 L50,30 M30,10 L30,0 M10,30 L0,40 M50,30 L60,40`}];function a(e){let t=e;return()=>(t=(t*16807+0)%2147483647,(t-1)/2147483646)}function o(e){let t=new Set;for(let n of e)for(let e of n.split(/[\s_-]+/)){let n=e.trim();n.length>0&&t.add(n)}return Array.from(t)}function s(e){if(!e)return null;let t=/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(e.trim());if(t){let[,e,n,r]=t;return`${Number.parseInt(e+e,16)}, ${Number.parseInt(n+n,16)}, ${Number.parseInt(r+r,16)}`}let n=/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(e.trim());if(n){let[,e,t,r]=n;return`${Number.parseInt(e,16)}, ${Number.parseInt(t,16)}, ${Number.parseInt(r,16)}`}return null}function c(e,t){let n=a(Date.now()%1e5);return[...e].sort(()=>n()-.5).slice(0,t).map(e=>({text:e,top:`${n()*85+2}%`,left:`${n()*88+2}%`,size:.8+n()*1.2,duration:10+n()*20,delay:-(n()*20),drift:r[Math.floor(n()*r.length)],opacity:.2+n()*.35}))}function l({itemCount:r=35,extraTokens:a,color:l,colorDark:u,withFormulas:d=!0,withBonds:f=!0,withOrbs:p=!0,withLightning:m=!1,withExplosion:h=!1,withGrid:g=!0,className:_}){let v=(0,e.useMemo)(()=>c([...n,...a?o(a):[]],r),[r,a]),y={};l&&(y[`--ff-color`]=l),u?y[`--ff-color-dark`]=u:l&&(y[`--ff-color-dark`]=l);let b=s(l);b&&(y[`--ff-color-rgb`]=b);let x=s(u)??b;return x&&(y[`--ff-color-dark-rgb`]=x),(0,t.jsxs)(`div`,{className:`absolute inset-0 pointer-events-none overflow-hidden ${_??``}`,style:y,"aria-hidden":`true`,children:[m&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(`div`,{className:`ff-lightning ff-lightning--a1`}),(0,t.jsx)(`div`,{className:`ff-lightning ff-lightning--a2`}),(0,t.jsx)(`div`,{className:`ff-lightning ff-lightning--a3`}),(0,t.jsx)(`div`,{className:`ff-lightning ff-lightning--b1`}),(0,t.jsx)(`div`,{className:`ff-lightning ff-lightning--b2`}),(0,t.jsx)(`div`,{className:`ff-lightning ff-lightning--c1`}),(0,t.jsx)(`div`,{className:`ff-lightning ff-lightning--c2`}),(0,t.jsx)(`div`,{className:`ff-lightning ff-lightning--c3`}),h&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(`div`,{className:`ff-lightning ff-lightning--nuke`}),(0,t.jsx)(`div`,{className:`ff-lightning--flood`})]})]}),p&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(`div`,{className:`ff-orb ff-orb--1`}),(0,t.jsx)(`div`,{className:`ff-orb ff-orb--2`}),(0,t.jsx)(`div`,{className:`ff-orb ff-orb--3`})]}),g&&(0,t.jsx)(`div`,{className:`ff-grid`}),f&&i.map(e=>(0,t.jsxs)(`svg`,{className:`ff-bond ${e.drift}`,width:e.size,height:e.size,viewBox:`0 0 ${e.size} ${e.size}`,style:{top:e.top,left:e.left,animationDuration:`${e.duration}s`,animationDelay:`${e.delay}s`,opacity:e.opacity},children:[(0,t.jsx)(`path`,{d:e.path,fill:`none`,className:`ff-bond-line`,strokeWidth:`1.5`,strokeLinecap:`round`}),Array.from(e.path.matchAll(/[ML]\s*(\d+),(\d+)/g)).map(e=>(0,t.jsx)(`circle`,{cx:e[1],cy:e[2],r:`2.5`,className:`ff-bond-node`},`node-${e[1]}-${e[2]}`))]},`bond-${e.top}-${e.left}`)),d&&v.map(e=>(0,t.jsx)(`span`,{className:`ff-term ${e.drift}`,style:{top:e.top,left:e.left,fontSize:`${e.size}rem`,animationDuration:`${e.duration}s`,animationDelay:`${e.delay}s`,opacity:e.opacity},children:e.text},`f-${e.text}-${e.top}-${e.left}`))]})}exports.FloatingFormulasBg=l;
|
|
@@ -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
|
+
}
|
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
import { useMemo as e } from "react";
|
|
2
|
+
import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
|
|
3
|
+
//#region src/components/ui/floating-formulas-bg.tsx
|
|
4
|
+
var i = /* @__PURE__ */ "H₂O.CO₂.NaCl.C₆H₁₂O₆.O₂.NH₃.CH₄.H₂SO₄.Fe₂O₃.CaCO₃.C₂H₅OH.HCl.NaOH.KMnO₄.N₂.SiO₂.Al₂O₃.MgO.ZnSO₄.Cu.H₂O₂.SO₃.PbO₂.BaSO₄.AgNO₃.K₂Cr₂O₇.Na₂CO₃.Mg(OH)₂.FeCl₃.CuSO₄.Ca(OH)₂.HNO₃.P₄O₁₀.Cl₂.Br₂".split("."), a = [
|
|
5
|
+
"ff-drift-a",
|
|
6
|
+
"ff-drift-b",
|
|
7
|
+
"ff-drift-c",
|
|
8
|
+
"ff-drift-d",
|
|
9
|
+
"ff-drift-e"
|
|
10
|
+
], o = [
|
|
11
|
+
{
|
|
12
|
+
top: "8%",
|
|
13
|
+
left: "6%",
|
|
14
|
+
size: 80,
|
|
15
|
+
duration: 18,
|
|
16
|
+
delay: -2,
|
|
17
|
+
drift: "ff-drift-b",
|
|
18
|
+
opacity: .3,
|
|
19
|
+
path: "M10,40 L40,20 L70,40 M40,20 L40,5 M40,20 L25,8 M40,20 L55,8"
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
top: "22%",
|
|
23
|
+
left: "75%",
|
|
24
|
+
size: 100,
|
|
25
|
+
duration: 22,
|
|
26
|
+
delay: -5,
|
|
27
|
+
drift: "ff-drift-a",
|
|
28
|
+
opacity: .25,
|
|
29
|
+
path: "M20,50 L50,30 L80,50 M50,30 L50,10 M20,50 L20,70 M80,50 L80,70 M50,30 L35,15 M50,30 L65,15"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
top: "60%",
|
|
33
|
+
left: "85%",
|
|
34
|
+
size: 70,
|
|
35
|
+
duration: 16,
|
|
36
|
+
delay: -1,
|
|
37
|
+
drift: "ff-drift-b",
|
|
38
|
+
opacity: .28,
|
|
39
|
+
path: "M15,35 L35,15 L55,35 L35,55 Z M35,15 L35,5 M55,35 L65,35"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
top: "70%",
|
|
43
|
+
left: "12%",
|
|
44
|
+
size: 90,
|
|
45
|
+
duration: 20,
|
|
46
|
+
delay: -4,
|
|
47
|
+
drift: "ff-drift-a",
|
|
48
|
+
opacity: .25,
|
|
49
|
+
path: "M10,45 L45,25 L80,45 M45,25 L45,5 M10,45 L10,65 M80,45 L80,65"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
top: "5%",
|
|
53
|
+
left: "42%",
|
|
54
|
+
size: 60,
|
|
55
|
+
duration: 15,
|
|
56
|
+
delay: -3,
|
|
57
|
+
drift: "ff-drift-c",
|
|
58
|
+
opacity: .22,
|
|
59
|
+
path: "M10,30 L30,10 L50,30 M30,10 L30,0 M10,30 L0,40 M50,30 L60,40"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
top: "45%",
|
|
63
|
+
left: "3%",
|
|
64
|
+
size: 75,
|
|
65
|
+
duration: 19,
|
|
66
|
+
delay: -6,
|
|
67
|
+
drift: "ff-drift-a",
|
|
68
|
+
opacity: .25,
|
|
69
|
+
path: "M20,40 L40,20 L60,40 M40,20 L40,5 M20,40 L5,50 M60,40 L75,50 M40,5 L30,0 M40,5 L50,0"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
top: "78%",
|
|
73
|
+
left: "52%",
|
|
74
|
+
size: 85,
|
|
75
|
+
duration: 21,
|
|
76
|
+
delay: -2,
|
|
77
|
+
drift: "ff-drift-b",
|
|
78
|
+
opacity: .22,
|
|
79
|
+
path: "M15,45 L42,20 L70,45 M42,20 L42,5 M15,45 L30,60 M70,45 L55,60"
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
top: "32%",
|
|
83
|
+
left: "92%",
|
|
84
|
+
size: 65,
|
|
85
|
+
duration: 17,
|
|
86
|
+
delay: -5,
|
|
87
|
+
drift: "ff-drift-a",
|
|
88
|
+
opacity: .25,
|
|
89
|
+
path: "M10,35 L32,15 L55,35 M32,15 L32,3 M10,35 L10,50"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
top: "15%",
|
|
93
|
+
left: "28%",
|
|
94
|
+
size: 70,
|
|
95
|
+
duration: 19,
|
|
96
|
+
delay: -1,
|
|
97
|
+
drift: "ff-drift-c",
|
|
98
|
+
opacity: .25,
|
|
99
|
+
path: "M10,35 L35,10 L60,35 M35,10 L35,0 M10,35 L0,50 M60,35 L70,50"
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
top: "50%",
|
|
103
|
+
left: "35%",
|
|
104
|
+
size: 65,
|
|
105
|
+
duration: 16,
|
|
106
|
+
delay: -7,
|
|
107
|
+
drift: "ff-drift-b",
|
|
108
|
+
opacity: .2,
|
|
109
|
+
path: "M10,30 L30,10 L50,30 L30,50 Z M30,10 L30,0"
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
top: "40%",
|
|
113
|
+
left: "60%",
|
|
114
|
+
size: 80,
|
|
115
|
+
duration: 20,
|
|
116
|
+
delay: -3,
|
|
117
|
+
drift: "ff-drift-a",
|
|
118
|
+
opacity: .22,
|
|
119
|
+
path: "M15,40 L40,15 L65,40 M40,15 L40,3 M15,40 L5,55 M65,40 L75,55 M40,15 L28,5 M40,15 L52,5"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
top: "85%",
|
|
123
|
+
left: "78%",
|
|
124
|
+
size: 60,
|
|
125
|
+
duration: 15,
|
|
126
|
+
delay: -6,
|
|
127
|
+
drift: "ff-drift-b",
|
|
128
|
+
opacity: .22,
|
|
129
|
+
path: "M10,30 L30,10 L50,30 M30,10 L30,0 M10,30 L0,40 M50,30 L60,40"
|
|
130
|
+
}
|
|
131
|
+
];
|
|
132
|
+
function s(e) {
|
|
133
|
+
let t = e;
|
|
134
|
+
return () => (t = (t * 16807 + 0) % 2147483647, (t - 1) / 2147483646);
|
|
135
|
+
}
|
|
136
|
+
function c(e) {
|
|
137
|
+
let t = /* @__PURE__ */ new Set();
|
|
138
|
+
for (let n of e) for (let e of n.split(/[\s_-]+/)) {
|
|
139
|
+
let n = e.trim();
|
|
140
|
+
n.length > 0 && t.add(n);
|
|
141
|
+
}
|
|
142
|
+
return Array.from(t);
|
|
143
|
+
}
|
|
144
|
+
function l(e) {
|
|
145
|
+
if (!e) return null;
|
|
146
|
+
let t = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(e.trim());
|
|
147
|
+
if (t) {
|
|
148
|
+
let [, e, n, r] = t;
|
|
149
|
+
return `${Number.parseInt(e + e, 16)}, ${Number.parseInt(n + n, 16)}, ${Number.parseInt(r + r, 16)}`;
|
|
150
|
+
}
|
|
151
|
+
let n = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(e.trim());
|
|
152
|
+
if (n) {
|
|
153
|
+
let [, e, t, r] = n;
|
|
154
|
+
return `${Number.parseInt(e, 16)}, ${Number.parseInt(t, 16)}, ${Number.parseInt(r, 16)}`;
|
|
155
|
+
}
|
|
156
|
+
return null;
|
|
157
|
+
}
|
|
158
|
+
function u(e, t) {
|
|
159
|
+
let n = s(Date.now() % 1e5);
|
|
160
|
+
return [...e].sort(() => n() - .5).slice(0, t).map((e) => ({
|
|
161
|
+
text: e,
|
|
162
|
+
top: `${n() * 85 + 2}%`,
|
|
163
|
+
left: `${n() * 88 + 2}%`,
|
|
164
|
+
size: .8 + n() * 1.2,
|
|
165
|
+
duration: 10 + n() * 20,
|
|
166
|
+
delay: -(n() * 20),
|
|
167
|
+
drift: a[Math.floor(n() * a.length)],
|
|
168
|
+
opacity: .2 + n() * .35
|
|
169
|
+
}));
|
|
170
|
+
}
|
|
171
|
+
function d({ itemCount: a = 35, extraTokens: s, color: d, colorDark: f, withFormulas: p = !0, withBonds: m = !0, withOrbs: h = !0, withLightning: g = !1, withExplosion: _ = !1, withGrid: v = !0, className: y }) {
|
|
172
|
+
let b = e(() => u([...i, ...s ? c(s) : []], a), [a, s]), x = {};
|
|
173
|
+
d && (x["--ff-color"] = d), f ? x["--ff-color-dark"] = f : d && (x["--ff-color-dark"] = d);
|
|
174
|
+
let S = l(d);
|
|
175
|
+
S && (x["--ff-color-rgb"] = S);
|
|
176
|
+
let C = l(f) ?? S;
|
|
177
|
+
return C && (x["--ff-color-dark-rgb"] = C), /* @__PURE__ */ r("div", {
|
|
178
|
+
className: `absolute inset-0 pointer-events-none overflow-hidden ${y ?? ""}`,
|
|
179
|
+
style: x,
|
|
180
|
+
"aria-hidden": "true",
|
|
181
|
+
children: [
|
|
182
|
+
g && /* @__PURE__ */ r(t, { children: [
|
|
183
|
+
/* @__PURE__ */ n("div", { className: "ff-lightning ff-lightning--a1" }),
|
|
184
|
+
/* @__PURE__ */ n("div", { className: "ff-lightning ff-lightning--a2" }),
|
|
185
|
+
/* @__PURE__ */ n("div", { className: "ff-lightning ff-lightning--a3" }),
|
|
186
|
+
/* @__PURE__ */ n("div", { className: "ff-lightning ff-lightning--b1" }),
|
|
187
|
+
/* @__PURE__ */ n("div", { className: "ff-lightning ff-lightning--b2" }),
|
|
188
|
+
/* @__PURE__ */ n("div", { className: "ff-lightning ff-lightning--c1" }),
|
|
189
|
+
/* @__PURE__ */ n("div", { className: "ff-lightning ff-lightning--c2" }),
|
|
190
|
+
/* @__PURE__ */ n("div", { className: "ff-lightning ff-lightning--c3" }),
|
|
191
|
+
_ && /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n("div", { className: "ff-lightning ff-lightning--nuke" }), /* @__PURE__ */ n("div", { className: "ff-lightning--flood" })] })
|
|
192
|
+
] }),
|
|
193
|
+
h && /* @__PURE__ */ r(t, { children: [
|
|
194
|
+
/* @__PURE__ */ n("div", { className: "ff-orb ff-orb--1" }),
|
|
195
|
+
/* @__PURE__ */ n("div", { className: "ff-orb ff-orb--2" }),
|
|
196
|
+
/* @__PURE__ */ n("div", { className: "ff-orb ff-orb--3" })
|
|
197
|
+
] }),
|
|
198
|
+
v && /* @__PURE__ */ n("div", { className: "ff-grid" }),
|
|
199
|
+
m && o.map((e) => /* @__PURE__ */ r("svg", {
|
|
200
|
+
className: `ff-bond ${e.drift}`,
|
|
201
|
+
width: e.size,
|
|
202
|
+
height: e.size,
|
|
203
|
+
viewBox: `0 0 ${e.size} ${e.size}`,
|
|
204
|
+
style: {
|
|
205
|
+
top: e.top,
|
|
206
|
+
left: e.left,
|
|
207
|
+
animationDuration: `${e.duration}s`,
|
|
208
|
+
animationDelay: `${e.delay}s`,
|
|
209
|
+
opacity: e.opacity
|
|
210
|
+
},
|
|
211
|
+
children: [/* @__PURE__ */ n("path", {
|
|
212
|
+
d: e.path,
|
|
213
|
+
fill: "none",
|
|
214
|
+
className: "ff-bond-line",
|
|
215
|
+
strokeWidth: "1.5",
|
|
216
|
+
strokeLinecap: "round"
|
|
217
|
+
}), Array.from(e.path.matchAll(/[ML]\s*(\d+),(\d+)/g)).map((e) => /* @__PURE__ */ n("circle", {
|
|
218
|
+
cx: e[1],
|
|
219
|
+
cy: e[2],
|
|
220
|
+
r: "2.5",
|
|
221
|
+
className: "ff-bond-node"
|
|
222
|
+
}, `node-${e[1]}-${e[2]}`))]
|
|
223
|
+
}, `bond-${e.top}-${e.left}`)),
|
|
224
|
+
p && b.map((e) => /* @__PURE__ */ n("span", {
|
|
225
|
+
className: `ff-term ${e.drift}`,
|
|
226
|
+
style: {
|
|
227
|
+
top: e.top,
|
|
228
|
+
left: e.left,
|
|
229
|
+
fontSize: `${e.size}rem`,
|
|
230
|
+
animationDuration: `${e.duration}s`,
|
|
231
|
+
animationDelay: `${e.delay}s`,
|
|
232
|
+
opacity: e.opacity
|
|
233
|
+
},
|
|
234
|
+
children: e.text
|
|
235
|
+
}, `f-${e.text}-${e.top}-${e.left}`))
|
|
236
|
+
]
|
|
237
|
+
});
|
|
238
|
+
}
|
|
239
|
+
//#endregion
|
|
240
|
+
export { d as FloatingFormulasBg };
|