@illuma-ai/icons 2.5.1 → 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,71 +1,16 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),h=require("react"),g=require("framer-motion"),w=h.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=h.forwardRef(function({size:o=24,running:a=!0,accent:i="#facc15",className:c,...n},l){return a?r.jsxs("svg",{ref:l,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:l,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
- `,S=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
- float a=atan(p.y,p.x);
31
-
32
- // ── Alive silhouette ──────────────────────────────────────────────
33
- // Several layers of moving noise deform the radius a LOT, so the orb
34
- // visibly grows lobes and shrinks them — a living, bacteria-like blob.
35
- float n1=snoise(vec2(cos(a),sin(a))*1.4 + vec2(t*0.5, t*0.37));
36
- float n2=snoise(p*3.1 - vec2(t*0.43, t*0.31));
37
- float n3=snoise(p*5.5 + vec2(t*0.6));
38
- float wobble=n1*0.30 + n2*0.16 + n3*0.08;
39
- // Slow breathing pulse on top of the wobble (grow ↔ shrink).
40
- float breathe=0.06*sin(t*1.6);
41
- float edge=0.70 + wobble + breathe;
42
- float orb=smoothstep(edge,edge-0.20,r);
43
- if(orb<0.01){ gl_FragColor=vec4(0.0); return; }
44
-
45
- // ── Swirling internal color ───────────────────────────────────────
46
- // Domain-warp the field with noise so the colors churn inside the orb
47
- // (not just a static angular gradient).
48
- float warp=snoise(p*2.0 + vec2(t*0.4, -t*0.3));
49
- float f=0.5+0.5*sin(a*1.0 + t*1.1 + warp*2.5 + r*2.0);
50
- vec3 c0=${t[0]};
51
- vec3 c1=${t[1]};
52
- vec3 c2=${t[2]};
53
- vec3 c3=${t[3]};
54
- vec3 col=mix(c0,c1,smoothstep(0.0,0.4,f));
55
- col=mix(col,c2,smoothstep(0.35,0.7,f));
56
- col=mix(col,c3,smoothstep(0.7,1.0,f));
57
-
58
- // Moving bright core that drifts around (the "energy" inside).
59
- vec2 coreOff=0.22*vec2(cos(t*0.9), sin(t*1.3));
60
- float core=smoothstep(0.55,0.0,length(p-coreOff));
61
- col+=core*0.35;
62
-
63
- // Inner glow + bright fresnel rim.
64
- float glow=smoothstep(0.0,0.6,1.0-r);
65
- col+=glow*0.20;
66
- float rim=smoothstep(edge-0.02,edge-0.18,r);
67
- col=mix(col,vec3(1.0),(1.0-rim)*0.40*orb);
68
- 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); }
69
10
  }
70
- `;function b(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=h.useRef(null);return h.useEffect(()=>{const n=c.current;if(!n)return;const l=Math.min(window.devicePixelRatio||1,2);n.width=t*l,n.height=t*l;const e=n.getContext("webgl",{premultipliedAlpha:!1,alpha:!0});if(!e)return;const s=e.createProgram();e.attachShader(s,b(e,e.VERTEX_SHADER,k)),e.attachShader(s,b(e,e.FRAGMENT_SHADER,S(p[a]??p.ai))),e.linkProgram(s),e.useProgram(s);const y=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,y),e.bufferData(e.ARRAY_BUFFER,new Float32Array([-1,-1,3,-1,-1,3]),e.STATIC_DRAW);const d=e.getAttribLocation(s,"p");e.enableVertexAttribArray(d),e.vertexAttribPointer(d,2,e.FLOAT,!1,0,0);const A=e.getUniformLocation(s,"t");e.viewport(0,0,n.width,n.height),e.enable(e.BLEND),e.blendFunc(e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA);const x=typeof window.matchMedia=="function"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;let m=0,f=0;const u=v=>{f||(f=v);const T=(v-f)/1e3*o;e.uniform1f(A,x?.4:T),e.drawArrays(e.TRIANGLES,0,3),x||(m=requestAnimationFrame(u))};return m=requestAnimationFrame(u),()=>{cancelAnimationFrame(m),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;
71
16
  //# sourceMappingURL=brand.cjs.map
package/dist/brand.es.js CHANGED
@@ -1,70 +1,70 @@
1
- import { jsxs as b, jsx as n } from "react/jsx-runtime";
2
- import { forwardRef as w, useRef as T, useEffect as k } 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__ */ b(
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__ */ b(
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,131 +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
- }, E = `
84
- attribute vec2 p;
85
- varying vec2 uv;
86
- void main() { uv = p; gl_Position = vec4(p, 0.0, 1.0); }
87
- `, S = (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
- float a=atan(p.y,p.x);
113
-
114
- // ── Alive silhouette ──────────────────────────────────────────────
115
- // Several layers of moving noise deform the radius a LOT, so the orb
116
- // visibly grows lobes and shrinks them — a living, bacteria-like blob.
117
- float n1=snoise(vec2(cos(a),sin(a))*1.4 + vec2(t*0.5, t*0.37));
118
- float n2=snoise(p*3.1 - vec2(t*0.43, t*0.31));
119
- float n3=snoise(p*5.5 + vec2(t*0.6));
120
- float wobble=n1*0.30 + n2*0.16 + n3*0.08;
121
- // Slow breathing pulse on top of the wobble (grow ↔ shrink).
122
- float breathe=0.06*sin(t*1.6);
123
- float edge=0.70 + wobble + breathe;
124
- float orb=smoothstep(edge,edge-0.20,r);
125
- if(orb<0.01){ gl_FragColor=vec4(0.0); return; }
126
-
127
- // ── Swirling internal color ───────────────────────────────────────
128
- // Domain-warp the field with noise so the colors churn inside the orb
129
- // (not just a static angular gradient).
130
- float warp=snoise(p*2.0 + vec2(t*0.4, -t*0.3));
131
- float f=0.5+0.5*sin(a*1.0 + t*1.1 + warp*2.5 + r*2.0);
132
- vec3 c0=${t[0]};
133
- vec3 c1=${t[1]};
134
- vec3 c2=${t[2]};
135
- vec3 c3=${t[3]};
136
- vec3 col=mix(c0,c1,smoothstep(0.0,0.4,f));
137
- col=mix(col,c2,smoothstep(0.35,0.7,f));
138
- col=mix(col,c3,smoothstep(0.7,1.0,f));
139
-
140
- // Moving bright core that drifts around (the "energy" inside).
141
- vec2 coreOff=0.22*vec2(cos(t*0.9), sin(t*1.3));
142
- float core=smoothstep(0.55,0.0,length(p-coreOff));
143
- col+=core*0.35;
144
-
145
- // Inner glow + bright fresnel rim.
146
- float glow=smoothstep(0.0,0.6,1.0-r);
147
- col+=glow*0.20;
148
- float rim=smoothstep(edge-0.02,edge-0.18,r);
149
- col=mix(col,vec3(1.0),(1.0-rim)*0.40*orb);
150
- 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); }
151
94
  }
152
- `;
153
- function p(t, o, a) {
154
- const r = t.createShader(o);
155
- 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; }
156
98
  }
157
- function M({ size: t = 20, speed: o = 1, palette: a = "ai", className: r }) {
158
- const c = T(null);
159
- return k(() => {
160
- const i = c.current;
161
- if (!i)
162
- return;
163
- const s = Math.min(window.devicePixelRatio || 1, 2);
164
- i.width = t * s, i.height = t * s;
165
- const e = i.getContext("webgl", { premultipliedAlpha: !1, alpha: !0 });
166
- if (!e)
99
+ `;
100
+ function p() {
101
+ f(() => {
102
+ if (typeof document > "u" || document.getElementById(c))
167
103
  return;
168
- const l = e.createProgram();
169
- e.attachShader(l, p(e, e.VERTEX_SHADER, E)), e.attachShader(l, p(e, e.FRAGMENT_SHADER, S(g[a] ?? g.ai))), e.linkProgram(l), e.useProgram(l);
170
- const y = e.createBuffer();
171
- e.bindBuffer(e.ARRAY_BUFFER, y), e.bufferData(e.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), e.STATIC_DRAW);
172
- const v = e.getAttribLocation(l, "p");
173
- e.enableVertexAttribArray(v), e.vertexAttribPointer(v, 2, e.FLOAT, !1, 0, 0);
174
- const A = e.getUniformLocation(l, "t");
175
- e.viewport(0, 0, i.width, i.height), e.enable(e.BLEND), e.blendFunc(e.SRC_ALPHA, e.ONE_MINUS_SRC_ALPHA);
176
- const d = typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
177
- let h = 0, m = 0;
178
- const x = (f) => {
179
- m || (m = f);
180
- const R = (f - m) / 1e3 * o;
181
- e.uniform1f(A, d ? 0.4 : R), e.drawArrays(e.TRIANGLES, 0, 3), d || (h = requestAnimationFrame(x));
182
- };
183
- return h = requestAnimationFrame(x), () => {
184
- cancelAnimationFrame(h), e.getExtension("WEBGL_lose_context")?.loseContext();
185
- };
186
- }, [t, o, a]), /* @__PURE__ */ n(
187
- "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",
188
113
  {
189
- ref: c,
190
- className: r,
191
- style: { width: t, height: t, display: "inline-block" },
114
+ className: `illuma-orb${t ? ` ${t}` : ""}`,
192
115
  role: "img",
193
- "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
+ }
194
128
  }
195
129
  );
196
130
  }
197
131
  export {
198
- I as AnimatedTerminalIcon,
199
- L as TerminalIcon,
200
- M as ThinkingOrb
132
+ w as AnimatedTerminalIcon,
133
+ b as TerminalIcon,
134
+ I as ThinkingOrb
201
135
  };
202
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.1",
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",