@illuma-ai/icons 2.5.0 → 2.6.0

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.
@@ -1,22 +1,16 @@
1
- /** Built-in color palettes for the orb. A palette is four RGB stops blended
2
- * around the orb as the noise field shifts. */
3
- export type ThinkingOrbPalette = 'aurora' | 'ai';
1
+ export type ThinkingOrbPalette = 'ai' | 'aurora';
4
2
  export interface ThinkingOrbProps {
5
- /** Pixel diameter. Defaults to 20 (inline with text). */
3
+ /** Pixel diameter. Defaults to 16 (inline with text). */
6
4
  size?: number;
7
- /** Animation speed multiplier. Defaults to 1. */
8
- speed?: number;
9
5
  /** Color palette. Defaults to `'ai'` (pink/purple). */
10
6
  palette?: ThinkingOrbPalette;
11
7
  className?: string;
12
8
  }
13
9
  /**
14
- * A premium, AI-"thinking" fluid orb rendered with raw WebGL (no three.js). A
15
- * simplex-noise–deformed sphere with a shifting four-stop gradient and fresnel
16
- * rim the kind of organic, alive blob shown in modern assistant UIs. Defaults
17
- * to the `'ai'` pink/purple palette; pass `palette="aurora"` for the original
18
- * cyan→amber. Self-contained (~3KB), 60fps on a tiny canvas, transparent
19
- * background so it sits inline beside "Thinking" text on any theme. Falls back
20
- * gracefully (renders nothing) where WebGL is unavailable.
10
+ * A living, AI-"thinking" fluid orb a morphing, breathing "spirit bubble"
11
+ * with a swirling pink/purple gradient (pass `palette="aurora"` for the cyan→
12
+ * amber variant). Pure CSS (no WebGL, no canvas, no external stylesheet) it
13
+ * injects its own keyframes once and animates on the GPU. Sits inline beside
14
+ * "Thinking" text on any theme.
21
15
  */
22
- export declare function ThinkingOrb({ size, speed, palette, className }: ThinkingOrbProps): import("react/jsx-runtime").JSX.Element;
16
+ export declare function ThinkingOrb({ size, palette, className }: ThinkingOrbProps): import("react/jsx-runtime").JSX.Element;
package/dist/brand.cjs CHANGED
@@ -1,53 +1,16 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),m=require("react"),g=require("framer-motion"),w=m.forwardRef(function({size:o=24,className:a,...i},c){return r.jsxs("svg",{ref:c,width:o,height:o,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",className:a,role:"img","aria-label":"Terminal",...i,children:[r.jsx("rect",{x:"2.5",y:"4",width:"19",height:"16",rx:"2.5"}),r.jsx("path",{d:"m6.5 9 3 3-3 3"}),r.jsx("path",{d:"M12.5 15h4",stroke:"#facc15"})]})}),R=m.forwardRef(function({size:o=24,running:a=!0,accent:i="#facc15",className:c,...n},s){return a?r.jsxs("svg",{ref:s,width:o,height:o,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",className:c,role:"img","aria-label":"Terminal running",...n,children:[r.jsx("rect",{x:"2.5",y:"4",width:"19",height:"16",rx:"2.5"}),r.jsx("path",{d:"m6.5 9 3 3-3 3"}),r.jsx(g.motion.path,{d:"M12.5 15h5",stroke:i,initial:{pathLength:0,opacity:.9},animate:{pathLength:[0,1,1,0]},transition:{duration:1.6,times:[0,.5,.8,1],repeat:1/0,ease:"easeInOut"}}),r.jsx(g.motion.rect,{x:"18.5",y:"13.4",width:"1.6",height:"3.2",rx:"0.3",fill:i,stroke:"none",animate:{opacity:[1,1,0,0,1]},transition:{duration:1.1,times:[0,.4,.5,.9,1],repeat:1/0}})]}):r.jsx(w,{ref:s,size:o,className:c,...n})}),p={aurora:["vec3(0.20,0.85,0.95)","vec3(0.55,0.35,0.95)","vec3(0.95,0.30,0.70)","vec3(1.0,0.75,0.30)"],ai:["vec3(0.55,0.36,0.98)","vec3(0.74,0.34,0.96)","vec3(0.96,0.36,0.82)","vec3(1.0,0.62,0.86)"]},k=`
2
- attribute vec2 p;
3
- varying vec2 uv;
4
- void main() { uv = p; gl_Position = vec4(p, 0.0, 1.0); }
5
- `,E=t=>`
6
- precision highp float;
7
- varying vec2 uv;
8
- uniform float t;
9
-
10
- // Classic 2D simplex noise (Ashima Arts, MIT) — compact.
11
- vec3 permute(vec3 x){return mod(((x*34.0)+1.0)*x,289.0);}
12
- float snoise(vec2 v){
13
- const vec4 C=vec4(0.211324865,0.366025404,-0.577350269,0.024390244);
14
- vec2 i=floor(v+dot(v,C.yy));vec2 x0=v-i+dot(i,C.xx);
15
- vec2 i1=(x0.x>x0.y)?vec2(1.0,0.0):vec2(0.0,1.0);
16
- vec4 x12=x0.xyxy+C.xxzz;x12.xy-=i1;
17
- i=mod(i,289.0);
18
- vec3 p=permute(permute(i.y+vec3(0.0,i1.y,1.0))+i.x+vec3(0.0,i1.x,1.0));
19
- vec3 m=max(0.5-vec3(dot(x0,x0),dot(x12.xy,x12.xy),dot(x12.zw,x12.zw)),0.0);
20
- m=m*m;m=m*m;
21
- vec3 x=2.0*fract(p*C.www)-1.0;vec3 h=abs(x)-0.5;vec3 ox=floor(x+0.5);vec3 a0=x-ox;
22
- m*=1.79284291-0.85373472*(a0*a0+h*h);
23
- vec3 g;g.x=a0.x*x0.x+h.x*x0.y;g.yz=a0.yz*x12.xz+h.yz*x12.yw;
24
- return 130.0*dot(m,g);
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),d=require("framer-motion"),h=o.forwardRef(function({size:r=24,className:n,...t},a){return e.jsxs("svg",{ref:a,width:r,height:r,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",className:n,role:"img","aria-label":"Terminal",...t,children:[e.jsx("rect",{x:"2.5",y:"4",width:"19",height:"16",rx:"2.5"}),e.jsx("path",{d:"m6.5 9 3 3-3 3"}),e.jsx("path",{d:"M12.5 15h4",stroke:"#facc15"})]})}),f=o.forwardRef(function({size:r=24,running:n=!0,accent:t="#facc15",className:a,...s},l){return n?e.jsxs("svg",{ref:l,width:r,height:r,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",className:a,role:"img","aria-label":"Terminal running",...s,children:[e.jsx("rect",{x:"2.5",y:"4",width:"19",height:"16",rx:"2.5"}),e.jsx("path",{d:"m6.5 9 3 3-3 3"}),e.jsx(d.motion.path,{d:"M12.5 15h5",stroke:t,initial:{pathLength:0,opacity:.9},animate:{pathLength:[0,1,1,0]},transition:{duration:1.6,times:[0,.5,.8,1],repeat:1/0,ease:"easeInOut"}}),e.jsx(d.motion.rect,{x:"18.5",y:"13.4",width:"1.6",height:"3.2",rx:"0.3",fill:t,stroke:"none",animate:{opacity:[1,1,0,0,1]},transition:{duration:1.1,times:[0,.4,.5,.9,1],repeat:1/0}})]}):e.jsx(h,{ref:l,size:r,className:a,...s})}),c={ai:"#8b5cf6, #c026d3, #ec4899, #f0abfc, #a855f7, #8b5cf6",aurora:"#22d3ee, #8b5cf6, #ec4899, #f59e0b, #22d3ee"},u={ai:"0 0 6px rgba(192,38,211,0.5), 0 0 2px rgba(139,92,246,0.6)",aurora:"0 0 6px rgba(34,211,238,0.5), 0 0 2px rgba(139,92,246,0.6)"},m="illuma-thinking-orb-styles",b=`
2
+ @keyframes illuma-orb-morph {
3
+ 0%,100% { border-radius:58% 42% 55% 45% / 52% 58% 42% 48%; }
4
+ 33% { border-radius:45% 55% 42% 58% / 58% 42% 55% 45%; }
5
+ 66% { border-radius:52% 48% 60% 40% / 45% 52% 48% 55%; }
25
6
  }
26
-
27
- void main(){
28
- vec2 p=uv;
29
- float r=length(p);
30
- // Noise-deform the radius so the silhouette wobbles organically.
31
- float n=snoise(p*2.2+vec2(t*0.25,t*0.18))*0.5+snoise(p*4.0-vec2(t*0.2))*0.25;
32
- float edge=0.78+n*0.16;
33
- float orb=smoothstep(edge,edge-0.18,r);
34
- if(orb<0.01){ gl_FragColor=vec4(0.0); return; }
35
- // Shifting gradient palette.
36
- float a=atan(p.y,p.x);
37
- float f=0.5+0.5*sin(a*1.0+t*0.6+n*2.0);
38
- vec3 c0=${t[0]};
39
- vec3 c1=${t[1]};
40
- vec3 c2=${t[2]};
41
- vec3 c3=${t[3]};
42
- vec3 col=mix(c0,c1,smoothstep(0.0,0.4,f));
43
- col=mix(col,c2,smoothstep(0.35,0.7,f));
44
- col=mix(col,c3,smoothstep(0.7,1.0,f));
45
- // Inner glow + fresnel rim.
46
- float glow=smoothstep(0.0,0.6,1.0-r);
47
- col+=glow*0.25;
48
- float rim=smoothstep(edge-0.02,edge-0.16,r);
49
- col=mix(col,vec3(1.0),(1.0-rim)*0.35*orb);
50
- gl_FragColor=vec4(col,orb);
7
+ @keyframes illuma-orb-breathe {
8
+ 0%,100% { transform:scale(0.9) rotate(0deg); }
9
+ 50% { transform:scale(1.08) rotate(8deg); }
51
10
  }
52
- `;function y(t,o,a){const i=t.createShader(o);return t.shaderSource(i,a),t.compileShader(i),i}function L({size:t=20,speed:o=1,palette:a="ai",className:i}){const c=m.useRef(null);return m.useEffect(()=>{const n=c.current;if(!n)return;const s=Math.min(window.devicePixelRatio||1,2);n.width=t*s,n.height=t*s;const e=n.getContext("webgl",{premultipliedAlpha:!1,alpha:!0});if(!e)return;const l=e.createProgram();e.attachShader(l,y(e,e.VERTEX_SHADER,k)),e.attachShader(l,y(e,e.FRAGMENT_SHADER,E(p[a]??p.ai))),e.linkProgram(l),e.useProgram(l);const A=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,A),e.bufferData(e.ARRAY_BUFFER,new Float32Array([-1,-1,3,-1,-1,3]),e.STATIC_DRAW);const v=e.getAttribLocation(l,"p");e.enableVertexAttribArray(v),e.vertexAttribPointer(v,2,e.FLOAT,!1,0,0);const b=e.getUniformLocation(l,"t");e.viewport(0,0,n.width,n.height),e.enable(e.BLEND),e.blendFunc(e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA);const u=typeof window.matchMedia=="function"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;let x=0,h=0;const f=d=>{h||(h=d);const T=(d-h)/1e3*o;e.uniform1f(b,u?.4:T),e.drawArrays(e.TRIANGLES,0,3),u||(x=requestAnimationFrame(f))};return x=requestAnimationFrame(f),()=>{cancelAnimationFrame(x),e.getExtension("WEBGL_lose_context")?.loseContext()}},[t,o,a]),r.jsx("canvas",{ref:c,className:i,style:{width:t,height:t,display:"inline-block"},role:"img","aria-label":"Thinking"})}exports.AnimatedTerminalIcon=R;exports.TerminalIcon=w;exports.ThinkingOrb=L;
11
+ @keyframes illuma-orb-spin { to { filter:hue-rotate(360deg); } }
12
+ @media (prefers-reduced-motion: reduce) {
13
+ .illuma-orb { animation: illuma-orb-breathe 3s ease-in-out infinite !important; }
14
+ }
15
+ `;function g(){o.useEffect(()=>{if(typeof document>"u"||document.getElementById(m))return;const i=document.createElement("style");i.id=m,i.textContent=b,document.head.appendChild(i)},[])}function p({size:i=16,palette:r="ai",className:n}){g();const t=c[r]??c.ai,a=u[r]??u.ai;return e.jsx("span",{className:`illuma-orb${n?` ${n}`:""}`,role:"img","aria-label":"Thinking",style:{display:"inline-block",width:i,height:i,borderRadius:"50%",flexShrink:0,background:`radial-gradient(circle at 32% 30%, rgba(255,255,255,0.65) 0%, transparent 38%), conic-gradient(from 0deg, ${t})`,boxShadow:a,animation:"illuma-orb-morph 3.2s ease-in-out infinite, illuma-orb-breathe 2.1s ease-in-out infinite, illuma-orb-spin 4.5s linear infinite",willChange:"border-radius, transform"}})}exports.AnimatedTerminalIcon=f;exports.TerminalIcon=h;exports.ThinkingOrb=p;
53
16
  //# sourceMappingURL=brand.cjs.map
package/dist/brand.es.js CHANGED
@@ -1,70 +1,70 @@
1
- import { jsxs as y, jsx as n } from "react/jsx-runtime";
2
- import { forwardRef as w, useRef as T, useEffect as E } from "react";
3
- import { motion as u } from "framer-motion";
4
- const L = w(function({ size: o = 24, className: a, ...r }, c) {
5
- return /* @__PURE__ */ y(
1
+ import { jsxs as u, jsx as r } from "react/jsx-runtime";
2
+ import { forwardRef as h, useEffect as f } from "react";
3
+ import { motion as d } from "framer-motion";
4
+ const b = h(function({ size: e = 24, className: t, ...n }, a) {
5
+ return /* @__PURE__ */ u(
6
6
  "svg",
7
7
  {
8
- ref: c,
9
- width: o,
10
- height: o,
8
+ ref: a,
9
+ width: e,
10
+ height: e,
11
11
  viewBox: "0 0 24 24",
12
12
  fill: "none",
13
13
  stroke: "currentColor",
14
14
  strokeWidth: 2,
15
15
  strokeLinecap: "round",
16
16
  strokeLinejoin: "round",
17
- className: a,
17
+ className: t,
18
18
  role: "img",
19
19
  "aria-label": "Terminal",
20
- ...r,
20
+ ...n,
21
21
  children: [
22
- /* @__PURE__ */ n("rect", { x: "2.5", y: "4", width: "19", height: "16", rx: "2.5" }),
23
- /* @__PURE__ */ n("path", { d: "m6.5 9 3 3-3 3" }),
24
- /* @__PURE__ */ n("path", { d: "M12.5 15h4", stroke: "#facc15" })
22
+ /* @__PURE__ */ r("rect", { x: "2.5", y: "4", width: "19", height: "16", rx: "2.5" }),
23
+ /* @__PURE__ */ r("path", { d: "m6.5 9 3 3-3 3" }),
24
+ /* @__PURE__ */ r("path", { d: "M12.5 15h4", stroke: "#facc15" })
25
25
  ]
26
26
  }
27
27
  );
28
- }), I = w(
29
- function({ size: o = 24, running: a = !0, accent: r = "#facc15", className: c, ...i }, s) {
30
- return a ? /* @__PURE__ */ y(
28
+ }), w = h(
29
+ function({ size: e = 24, running: t = !0, accent: n = "#facc15", className: a, ...o }, l) {
30
+ return t ? /* @__PURE__ */ u(
31
31
  "svg",
32
32
  {
33
- ref: s,
34
- width: o,
35
- height: o,
33
+ ref: l,
34
+ width: e,
35
+ height: e,
36
36
  viewBox: "0 0 24 24",
37
37
  fill: "none",
38
38
  stroke: "currentColor",
39
39
  strokeWidth: 2,
40
40
  strokeLinecap: "round",
41
41
  strokeLinejoin: "round",
42
- className: c,
42
+ className: a,
43
43
  role: "img",
44
44
  "aria-label": "Terminal running",
45
- ...i,
45
+ ...o,
46
46
  children: [
47
- /* @__PURE__ */ n("rect", { x: "2.5", y: "4", width: "19", height: "16", rx: "2.5" }),
48
- /* @__PURE__ */ n("path", { d: "m6.5 9 3 3-3 3" }),
49
- /* @__PURE__ */ n(
50
- u.path,
47
+ /* @__PURE__ */ r("rect", { x: "2.5", y: "4", width: "19", height: "16", rx: "2.5" }),
48
+ /* @__PURE__ */ r("path", { d: "m6.5 9 3 3-3 3" }),
49
+ /* @__PURE__ */ r(
50
+ d.path,
51
51
  {
52
52
  d: "M12.5 15h5",
53
- stroke: r,
53
+ stroke: n,
54
54
  initial: { pathLength: 0, opacity: 0.9 },
55
55
  animate: { pathLength: [0, 1, 1, 0] },
56
56
  transition: { duration: 1.6, times: [0, 0.5, 0.8, 1], repeat: 1 / 0, ease: "easeInOut" }
57
57
  }
58
58
  ),
59
- /* @__PURE__ */ n(
60
- u.rect,
59
+ /* @__PURE__ */ r(
60
+ d.rect,
61
61
  {
62
62
  x: "18.5",
63
63
  y: "13.4",
64
64
  width: "1.6",
65
65
  height: "3.2",
66
66
  rx: "0.3",
67
- fill: r,
67
+ fill: n,
68
68
  stroke: "none",
69
69
  animate: { opacity: [1, 1, 0, 0, 1] },
70
70
  transition: { duration: 1.1, times: [0, 0.4, 0.5, 0.9, 1], repeat: 1 / 0 }
@@ -72,113 +72,65 @@ const L = w(function({ size: o = 24, className: a, ...r }, c) {
72
72
  )
73
73
  ]
74
74
  }
75
- ) : /* @__PURE__ */ n(L, { ref: s, size: o, className: c, ...i });
75
+ ) : /* @__PURE__ */ r(b, { ref: l, size: e, className: a, ...o });
76
76
  }
77
- ), g = {
78
- // Original: cyan violet → magenta → amber.
79
- aurora: ["vec3(0.20,0.85,0.95)", "vec3(0.55,0.35,0.95)", "vec3(0.95,0.30,0.70)", "vec3(1.0,0.75,0.30)"],
80
- // AI pink/purple: violetpurple → magenta-pinksoft rose. Vivid on light
81
- // and dark, no cyan/amber — the "AI" gradient.
82
- ai: ["vec3(0.55,0.36,0.98)", "vec3(0.74,0.34,0.96)", "vec3(0.96,0.36,0.82)", "vec3(1.0,0.62,0.86)"]
83
- }, k = `
84
- attribute vec2 p;
85
- varying vec2 uv;
86
- void main() { uv = p; gl_Position = vec4(p, 0.0, 1.0); }
87
- `, C = (t) => `
88
- precision highp float;
89
- varying vec2 uv;
90
- uniform float t;
91
-
92
- // Classic 2D simplex noise (Ashima Arts, MIT) — compact.
93
- vec3 permute(vec3 x){return mod(((x*34.0)+1.0)*x,289.0);}
94
- float snoise(vec2 v){
95
- const vec4 C=vec4(0.211324865,0.366025404,-0.577350269,0.024390244);
96
- vec2 i=floor(v+dot(v,C.yy));vec2 x0=v-i+dot(i,C.xx);
97
- vec2 i1=(x0.x>x0.y)?vec2(1.0,0.0):vec2(0.0,1.0);
98
- vec4 x12=x0.xyxy+C.xxzz;x12.xy-=i1;
99
- i=mod(i,289.0);
100
- vec3 p=permute(permute(i.y+vec3(0.0,i1.y,1.0))+i.x+vec3(0.0,i1.x,1.0));
101
- vec3 m=max(0.5-vec3(dot(x0,x0),dot(x12.xy,x12.xy),dot(x12.zw,x12.zw)),0.0);
102
- m=m*m;m=m*m;
103
- vec3 x=2.0*fract(p*C.www)-1.0;vec3 h=abs(x)-0.5;vec3 ox=floor(x+0.5);vec3 a0=x-ox;
104
- m*=1.79284291-0.85373472*(a0*a0+h*h);
105
- vec3 g;g.x=a0.x*x0.x+h.x*x0.y;g.yz=a0.yz*x12.xz+h.yz*x12.yw;
106
- return 130.0*dot(m,g);
77
+ ), s = {
78
+ // Pinkpurple → magenta → rose — the "AI" gradient.
79
+ ai: "#8b5cf6, #c026d3, #ec4899, #f0abfc, #a855f7, #8b5cf6",
80
+ // Original aurora: cyanviolet → magenta → amber.
81
+ aurora: "#22d3ee, #8b5cf6, #ec4899, #f59e0b, #22d3ee"
82
+ }, m = {
83
+ ai: "0 0 6px rgba(192,38,211,0.5), 0 0 2px rgba(139,92,246,0.6)",
84
+ aurora: "0 0 6px rgba(34,211,238,0.5), 0 0 2px rgba(139,92,246,0.6)"
85
+ }, c = "illuma-thinking-orb-styles", g = `
86
+ @keyframes illuma-orb-morph {
87
+ 0%,100% { border-radius:58% 42% 55% 45% / 52% 58% 42% 48%; }
88
+ 33% { border-radius:45% 55% 42% 58% / 58% 42% 55% 45%; }
89
+ 66% { border-radius:52% 48% 60% 40% / 45% 52% 48% 55%; }
107
90
  }
108
-
109
- void main(){
110
- vec2 p=uv;
111
- float r=length(p);
112
- // Noise-deform the radius so the silhouette wobbles organically.
113
- float n=snoise(p*2.2+vec2(t*0.25,t*0.18))*0.5+snoise(p*4.0-vec2(t*0.2))*0.25;
114
- float edge=0.78+n*0.16;
115
- float orb=smoothstep(edge,edge-0.18,r);
116
- if(orb<0.01){ gl_FragColor=vec4(0.0); return; }
117
- // Shifting gradient palette.
118
- float a=atan(p.y,p.x);
119
- float f=0.5+0.5*sin(a*1.0+t*0.6+n*2.0);
120
- vec3 c0=${t[0]};
121
- vec3 c1=${t[1]};
122
- vec3 c2=${t[2]};
123
- vec3 c3=${t[3]};
124
- vec3 col=mix(c0,c1,smoothstep(0.0,0.4,f));
125
- col=mix(col,c2,smoothstep(0.35,0.7,f));
126
- col=mix(col,c3,smoothstep(0.7,1.0,f));
127
- // Inner glow + fresnel rim.
128
- float glow=smoothstep(0.0,0.6,1.0-r);
129
- col+=glow*0.25;
130
- float rim=smoothstep(edge-0.02,edge-0.16,r);
131
- col=mix(col,vec3(1.0),(1.0-rim)*0.35*orb);
132
- gl_FragColor=vec4(col,orb);
91
+ @keyframes illuma-orb-breathe {
92
+ 0%,100% { transform:scale(0.9) rotate(0deg); }
93
+ 50% { transform:scale(1.08) rotate(8deg); }
133
94
  }
134
- `;
135
- function p(t, o, a) {
136
- const r = t.createShader(o);
137
- return t.shaderSource(r, a), t.compileShader(r), r;
95
+ @keyframes illuma-orb-spin { to { filter:hue-rotate(360deg); } }
96
+ @media (prefers-reduced-motion: reduce) {
97
+ .illuma-orb { animation: illuma-orb-breathe 3s ease-in-out infinite !important; }
138
98
  }
139
- function P({ size: t = 20, speed: o = 1, palette: a = "ai", className: r }) {
140
- const c = T(null);
141
- return E(() => {
142
- const i = c.current;
143
- if (!i)
144
- return;
145
- const s = Math.min(window.devicePixelRatio || 1, 2);
146
- i.width = t * s, i.height = t * s;
147
- const e = i.getContext("webgl", { premultipliedAlpha: !1, alpha: !0 });
148
- if (!e)
99
+ `;
100
+ function p() {
101
+ f(() => {
102
+ if (typeof document > "u" || document.getElementById(c))
149
103
  return;
150
- const l = e.createProgram();
151
- e.attachShader(l, p(e, e.VERTEX_SHADER, k)), e.attachShader(l, p(e, e.FRAGMENT_SHADER, C(g[a] ?? g.ai))), e.linkProgram(l), e.useProgram(l);
152
- const A = e.createBuffer();
153
- e.bindBuffer(e.ARRAY_BUFFER, A), e.bufferData(e.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), e.STATIC_DRAW);
154
- const d = e.getAttribLocation(l, "p");
155
- e.enableVertexAttribArray(d), e.vertexAttribPointer(d, 2, e.FLOAT, !1, 0, 0);
156
- const b = e.getUniformLocation(l, "t");
157
- e.viewport(0, 0, i.width, i.height), e.enable(e.BLEND), e.blendFunc(e.SRC_ALPHA, e.ONE_MINUS_SRC_ALPHA);
158
- const v = typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
159
- let m = 0, h = 0;
160
- const f = (x) => {
161
- h || (h = x);
162
- const R = (x - h) / 1e3 * o;
163
- e.uniform1f(b, v ? 0.4 : R), e.drawArrays(e.TRIANGLES, 0, 3), v || (m = requestAnimationFrame(f));
164
- };
165
- return m = requestAnimationFrame(f), () => {
166
- cancelAnimationFrame(m), e.getExtension("WEBGL_lose_context")?.loseContext();
167
- };
168
- }, [t, o, a]), /* @__PURE__ */ n(
169
- "canvas",
104
+ const i = document.createElement("style");
105
+ i.id = c, i.textContent = g, document.head.appendChild(i);
106
+ }, []);
107
+ }
108
+ function I({ size: i = 16, palette: e = "ai", className: t }) {
109
+ p();
110
+ const n = s[e] ?? s.ai, a = m[e] ?? m.ai;
111
+ return /* @__PURE__ */ r(
112
+ "span",
170
113
  {
171
- ref: c,
172
- className: r,
173
- style: { width: t, height: t, display: "inline-block" },
114
+ className: `illuma-orb${t ? ` ${t}` : ""}`,
174
115
  role: "img",
175
- "aria-label": "Thinking"
116
+ "aria-label": "Thinking",
117
+ style: {
118
+ display: "inline-block",
119
+ width: i,
120
+ height: i,
121
+ borderRadius: "50%",
122
+ flexShrink: 0,
123
+ background: `radial-gradient(circle at 32% 30%, rgba(255,255,255,0.65) 0%, transparent 38%), conic-gradient(from 0deg, ${n})`,
124
+ boxShadow: a,
125
+ animation: "illuma-orb-morph 3.2s ease-in-out infinite, illuma-orb-breathe 2.1s ease-in-out infinite, illuma-orb-spin 4.5s linear infinite",
126
+ willChange: "border-radius, transform"
127
+ }
176
128
  }
177
129
  );
178
130
  }
179
131
  export {
180
- I as AnimatedTerminalIcon,
181
- L as TerminalIcon,
182
- P as ThinkingOrb
132
+ w as AnimatedTerminalIcon,
133
+ b as TerminalIcon,
134
+ I as ThinkingOrb
183
135
  };
184
136
  //# sourceMappingURL=brand.es.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@illuma-ai/icons",
3
- "version": "2.5.0",
3
+ "version": "2.6.0",
4
4
  "description": "Illuma icon system: file-type icons (static + animated GIF), hover-animated nav icons, terminal logo, and a WebGL thinking orb.",
5
5
  "type": "module",
6
6
  "license": "MIT",