@viglet/viglet-design-system 2026.2.50 → 2026.2.52
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 -1
- package/dist/floating-formulas-bg.css +9 -0
- package/dist/floating-formulas-bg.es.js +52 -39
- package/dist/index.cjs.js +2 -2
- package/dist/index.es.js +4 -4
- package/dist/src/components/ui/floating-formulas-bg.d.ts.map +1 -1
- package/dist/viglet-design-system.css +1 -1
- package/dist/vite.cjs.js +1 -1
- package/dist/vite.es.js +1 -1
- package/package.json +18 -11
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-D-qHiVGv.cjs`);let e=require(`react`),t=require(`react/jsx-runtime`);var
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-D-qHiVGv.cjs`);let e=require(`react`),t=require(`react/jsx-runtime`);function n(){let[t,n]=(0,e.useState)(1);return(0,e.useEffect)(()=>{let e=()=>{let e=window.innerWidth;return e<480?.25:e<640?.35:e<768?.5:e<1024?.7:1},t=()=>n(e());return t(),window.addEventListener(`resize`,t,{passive:!0}),()=>window.removeEventListener(`resize`,t)},[]),t}var r=`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(`.`),i=[`ff-drift-a`,`ff-drift-b`,`ff-drift-c`,`ff-drift-d`,`ff-drift-e`],a=[{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 o(e){let t=e;return()=>(t=(t*16807+0)%2147483647,(t-1)/2147483646)}function s(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 c(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 l(e){return e<.4?1:e<.8?2:3}function u(e,t){let n=o(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:i[Math.floor(n()*i.length)],opacity:.2+n()*.35}))}function d({itemCount:i=35,extraTokens:o,color:d,colorDark:f,withFormulas:p=!0,withBonds:m=!0,withOrbs:h=!0,withLightning:g=!1,withExplosion:_=!1,withGrid:v=!0,className:y}){let b=n(),x=Math.max(4,Math.round(i*b)),S=(0,e.useMemo)(()=>a.slice(0,Math.max(2,Math.round(a.length*b))),[b]),C=l(b),w=(0,e.useMemo)(()=>u([...r,...o?s(o):[]],x),[x,o]),T={};d&&(T[`--ff-color`]=d),f?T[`--ff-color-dark`]=f:d&&(T[`--ff-color-dark`]=d);let E=c(d);E&&(T[`--ff-color-rgb`]=E);let D=c(f)??E;return D&&(T[`--ff-color-dark-rgb`]=D),(0,t.jsxs)(`div`,{className:`absolute inset-0 pointer-events-none overflow-hidden ${y??``}`,style:T,"aria-hidden":`true`,children:[g&&(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`}),_&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(`div`,{className:`ff-lightning ff-lightning--nuke`}),(0,t.jsx)(`div`,{className:`ff-lightning--flood`})]})]}),h&&(0,t.jsxs)(t.Fragment,{children:[C>=1&&(0,t.jsx)(`div`,{className:`ff-orb ff-orb--1`}),C>=2&&(0,t.jsx)(`div`,{className:`ff-orb ff-orb--2`}),C>=3&&(0,t.jsx)(`div`,{className:`ff-orb ff-orb--3`})]}),v&&(0,t.jsx)(`div`,{className:`ff-grid`}),m&&S.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}`)),p&&w.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=d;
|
|
@@ -53,6 +53,15 @@
|
|
|
53
53
|
.dark .ff-orb--2 { background: radial-gradient(circle, rgba(var(--ff-color-dark-rgb, 129, 140, 248), 0.25), transparent 70%); }
|
|
54
54
|
.dark .ff-orb--3 { background: radial-gradient(circle, rgba(var(--ff-color-dark-rgb, 165, 180, 252), 0.18), transparent 70%); }
|
|
55
55
|
|
|
56
|
+
/* Mobile GPUs choke on blur(100px); shrink radius + orb size to stop flicker. */
|
|
57
|
+
@media (max-width: 767px) {
|
|
58
|
+
.ff-orb { filter: blur(40px); }
|
|
59
|
+
.ff-orb--1 { width: 260px; height: 260px; }
|
|
60
|
+
.ff-orb--2 { width: 220px; height: 220px; }
|
|
61
|
+
.ff-orb--3 { width: 200px; height: 200px; }
|
|
62
|
+
.ff-grid { background-size: 24px 24px; }
|
|
63
|
+
}
|
|
64
|
+
|
|
56
65
|
@keyframes ff-orb-float-1 {
|
|
57
66
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
58
67
|
50% { transform: translate(-30px, 20px) scale(1.05); }
|
|
@@ -1,13 +1,23 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Fragment as
|
|
1
|
+
import { useEffect as e, useMemo as t, useState as n } from "react";
|
|
2
|
+
import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
3
3
|
//#region src/components/ui/floating-formulas-bg.tsx
|
|
4
|
-
|
|
4
|
+
function o() {
|
|
5
|
+
let [t, r] = n(1);
|
|
6
|
+
return e(() => {
|
|
7
|
+
let e = () => {
|
|
8
|
+
let e = window.innerWidth;
|
|
9
|
+
return e < 480 ? .25 : e < 640 ? .35 : e < 768 ? .5 : e < 1024 ? .7 : 1;
|
|
10
|
+
}, t = () => r(e());
|
|
11
|
+
return t(), window.addEventListener("resize", t, { passive: !0 }), () => window.removeEventListener("resize", t);
|
|
12
|
+
}, []), t;
|
|
13
|
+
}
|
|
14
|
+
var s = /* @__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("."), c = [
|
|
5
15
|
"ff-drift-a",
|
|
6
16
|
"ff-drift-b",
|
|
7
17
|
"ff-drift-c",
|
|
8
18
|
"ff-drift-d",
|
|
9
19
|
"ff-drift-e"
|
|
10
|
-
],
|
|
20
|
+
], l = [
|
|
11
21
|
{
|
|
12
22
|
top: "8%",
|
|
13
23
|
left: "6%",
|
|
@@ -129,11 +139,11 @@ var i = /* @__PURE__ */ "H₂O.CO₂.NaCl.C₆H₁₂O₆.O₂.NH₃.CH₄.H₂S
|
|
|
129
139
|
path: "M10,30 L30,10 L50,30 M30,10 L30,0 M10,30 L0,40 M50,30 L60,40"
|
|
130
140
|
}
|
|
131
141
|
];
|
|
132
|
-
function
|
|
142
|
+
function u(e) {
|
|
133
143
|
let t = e;
|
|
134
144
|
return () => (t = (t * 16807 + 0) % 2147483647, (t - 1) / 2147483646);
|
|
135
145
|
}
|
|
136
|
-
function
|
|
146
|
+
function d(e) {
|
|
137
147
|
let t = /* @__PURE__ */ new Set();
|
|
138
148
|
for (let n of e) for (let e of n.split(/[\s_-]+/)) {
|
|
139
149
|
let n = e.trim();
|
|
@@ -141,7 +151,7 @@ function c(e) {
|
|
|
141
151
|
}
|
|
142
152
|
return Array.from(t);
|
|
143
153
|
}
|
|
144
|
-
function
|
|
154
|
+
function f(e) {
|
|
145
155
|
if (!e) return null;
|
|
146
156
|
let t = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(e.trim());
|
|
147
157
|
if (t) {
|
|
@@ -155,8 +165,11 @@ function l(e) {
|
|
|
155
165
|
}
|
|
156
166
|
return null;
|
|
157
167
|
}
|
|
158
|
-
function
|
|
159
|
-
|
|
168
|
+
function p(e) {
|
|
169
|
+
return e < .4 ? 1 : e < .8 ? 2 : 3;
|
|
170
|
+
}
|
|
171
|
+
function m(e, t) {
|
|
172
|
+
let n = u(Date.now() % 1e5);
|
|
160
173
|
return [...e].sort(() => n() - .5).slice(0, t).map((e) => ({
|
|
161
174
|
text: e,
|
|
162
175
|
top: `${n() * 85 + 2}%`,
|
|
@@ -164,39 +177,39 @@ function u(e, t) {
|
|
|
164
177
|
size: .8 + n() * 1.2,
|
|
165
178
|
duration: 10 + n() * 20,
|
|
166
179
|
delay: -(n() * 20),
|
|
167
|
-
drift:
|
|
180
|
+
drift: c[Math.floor(n() * c.length)],
|
|
168
181
|
opacity: .2 + n() * .35
|
|
169
182
|
}));
|
|
170
183
|
}
|
|
171
|
-
function
|
|
172
|
-
let
|
|
173
|
-
|
|
174
|
-
let
|
|
175
|
-
|
|
176
|
-
let
|
|
177
|
-
return
|
|
178
|
-
className: `absolute inset-0 pointer-events-none overflow-hidden ${
|
|
179
|
-
style:
|
|
184
|
+
function h({ itemCount: e = 35, extraTokens: n, color: c, colorDark: u, withFormulas: h = !0, withBonds: g = !0, withOrbs: _ = !0, withLightning: v = !1, withExplosion: y = !1, withGrid: b = !0, className: x }) {
|
|
185
|
+
let S = o(), C = Math.max(4, Math.round(e * S)), w = t(() => l.slice(0, Math.max(2, Math.round(l.length * S))), [S]), T = p(S), E = t(() => m([...s, ...n ? d(n) : []], C), [C, n]), D = {};
|
|
186
|
+
c && (D["--ff-color"] = c), u ? D["--ff-color-dark"] = u : c && (D["--ff-color-dark"] = c);
|
|
187
|
+
let O = f(c);
|
|
188
|
+
O && (D["--ff-color-rgb"] = O);
|
|
189
|
+
let k = f(u) ?? O;
|
|
190
|
+
return k && (D["--ff-color-dark-rgb"] = k), /* @__PURE__ */ a("div", {
|
|
191
|
+
className: `absolute inset-0 pointer-events-none overflow-hidden ${x ?? ""}`,
|
|
192
|
+
style: D,
|
|
180
193
|
"aria-hidden": "true",
|
|
181
194
|
children: [
|
|
182
|
-
|
|
183
|
-
/* @__PURE__ */
|
|
184
|
-
/* @__PURE__ */
|
|
185
|
-
/* @__PURE__ */
|
|
186
|
-
/* @__PURE__ */
|
|
187
|
-
/* @__PURE__ */
|
|
188
|
-
/* @__PURE__ */
|
|
189
|
-
/* @__PURE__ */
|
|
190
|
-
/* @__PURE__ */
|
|
191
|
-
|
|
195
|
+
v && /* @__PURE__ */ a(r, { children: [
|
|
196
|
+
/* @__PURE__ */ i("div", { className: "ff-lightning ff-lightning--a1" }),
|
|
197
|
+
/* @__PURE__ */ i("div", { className: "ff-lightning ff-lightning--a2" }),
|
|
198
|
+
/* @__PURE__ */ i("div", { className: "ff-lightning ff-lightning--a3" }),
|
|
199
|
+
/* @__PURE__ */ i("div", { className: "ff-lightning ff-lightning--b1" }),
|
|
200
|
+
/* @__PURE__ */ i("div", { className: "ff-lightning ff-lightning--b2" }),
|
|
201
|
+
/* @__PURE__ */ i("div", { className: "ff-lightning ff-lightning--c1" }),
|
|
202
|
+
/* @__PURE__ */ i("div", { className: "ff-lightning ff-lightning--c2" }),
|
|
203
|
+
/* @__PURE__ */ i("div", { className: "ff-lightning ff-lightning--c3" }),
|
|
204
|
+
y && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", { className: "ff-lightning ff-lightning--nuke" }), /* @__PURE__ */ i("div", { className: "ff-lightning--flood" })] })
|
|
192
205
|
] }),
|
|
193
|
-
|
|
194
|
-
/* @__PURE__ */
|
|
195
|
-
/* @__PURE__ */
|
|
196
|
-
/* @__PURE__ */
|
|
206
|
+
_ && /* @__PURE__ */ a(r, { children: [
|
|
207
|
+
T >= 1 && /* @__PURE__ */ i("div", { className: "ff-orb ff-orb--1" }),
|
|
208
|
+
T >= 2 && /* @__PURE__ */ i("div", { className: "ff-orb ff-orb--2" }),
|
|
209
|
+
T >= 3 && /* @__PURE__ */ i("div", { className: "ff-orb ff-orb--3" })
|
|
197
210
|
] }),
|
|
198
|
-
|
|
199
|
-
|
|
211
|
+
b && /* @__PURE__ */ i("div", { className: "ff-grid" }),
|
|
212
|
+
g && w.map((e) => /* @__PURE__ */ a("svg", {
|
|
200
213
|
className: `ff-bond ${e.drift}`,
|
|
201
214
|
width: e.size,
|
|
202
215
|
height: e.size,
|
|
@@ -208,20 +221,20 @@ function d({ itemCount: a = 35, extraTokens: s, color: d, colorDark: f, withForm
|
|
|
208
221
|
animationDelay: `${e.delay}s`,
|
|
209
222
|
opacity: e.opacity
|
|
210
223
|
},
|
|
211
|
-
children: [/* @__PURE__ */
|
|
224
|
+
children: [/* @__PURE__ */ i("path", {
|
|
212
225
|
d: e.path,
|
|
213
226
|
fill: "none",
|
|
214
227
|
className: "ff-bond-line",
|
|
215
228
|
strokeWidth: "1.5",
|
|
216
229
|
strokeLinecap: "round"
|
|
217
|
-
}), Array.from(e.path.matchAll(/[ML]\s*(\d+),(\d+)/g)).map((e) => /* @__PURE__ */
|
|
230
|
+
}), Array.from(e.path.matchAll(/[ML]\s*(\d+),(\d+)/g)).map((e) => /* @__PURE__ */ i("circle", {
|
|
218
231
|
cx: e[1],
|
|
219
232
|
cy: e[2],
|
|
220
233
|
r: "2.5",
|
|
221
234
|
className: "ff-bond-node"
|
|
222
235
|
}, `node-${e[1]}-${e[2]}`))]
|
|
223
236
|
}, `bond-${e.top}-${e.left}`)),
|
|
224
|
-
|
|
237
|
+
h && E.map((e) => /* @__PURE__ */ i("span", {
|
|
225
238
|
className: `ff-term ${e.drift}`,
|
|
226
239
|
style: {
|
|
227
240
|
top: e.top,
|
|
@@ -237,4 +250,4 @@ function d({ itemCount: a = 35, extraTokens: s, color: d, colorDark: f, withForm
|
|
|
237
250
|
});
|
|
238
251
|
}
|
|
239
252
|
//#endregion
|
|
240
|
-
export {
|
|
253
|
+
export { h as FloatingFormulasBg };
|