Glow Orb

1'use client'
2 
3import { useEffect, useLayoutEffect, useRef, type AriaAttributes, type CSSProperties } from 'react'
4import { useReducedMotion } from 'motion/react'
5import { useCssColorRgb } from '@/lib/hooks/use-css-color-rgb'
6 
7const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
8 
9export type OrbState = 'idle' | 'connecting' | 'listening' | 'thinking' | 'speaking' | 'error'
10 
11type DataAttributeValue = string | number | boolean | null | undefined
12 
13export interface OrbHtmlAttributes extends AriaAttributes {
14  id?: string
15  title?: string
16  role?: string
17  tabIndex?: number
18  [dataAttribute: `data-${string}`]: DataAttributeValue
19}
20 
21export interface GlowOrbProps extends OrbHtmlAttributes {
22  state: OrbState
23  volume: number
24  size: number
25  className?: string
26  style?: CSSProperties
27  disabled?: boolean
28  interactive?: boolean
29  onClick?: () => void
30}
31 
32type RGB = [number, number, number]
33 
34const VERT = `
35attribute vec2 a_pos;
36void main() {
37  gl_Position = vec4(a_pos, 0.0, 1.0);
38}
39`
40 
41const FRAG = `
42#ifdef GL_FRAGMENT_PRECISION_HIGH
43precision highp float;
44#else
45precision mediump float;
46#endif
47 
48uniform vec2 u_resolution;
49uniform float u_time;
50uniform vec3 u_color;
51 
52float hash(vec2 p) {
53  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
54}
55 
56float noise(vec2 p) {
57  vec2 i = floor(p);
58  vec2 f = fract(p);
59  vec2 u = f * f * (3.0 - 2.0 * f);
60  return mix(
61    mix(hash(i + vec2(0.0, 0.0)), hash(i + vec2(1.0, 0.0)), u.x),
62    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),
63    u.y
64  );
65}
66 
67float fbm(vec2 p) {
68  float v = 0.0;
69  float a = 0.55;
70  for (int i = 0; i < 4; i++) {
71    v += a * noise(p);
72    p *= 2.0;
73    a *= 0.5;
74  }
75  return v;
76}
77 
78void main() {
79  vec2 uv = gl_FragCoord.xy / u_resolution.xy;
80  vec2 c = uv - 0.5;
81  float r = length(c);
82  float t = u_time;
83 
84  // fake sphere depth: 1 at center, 0 at rim
85  float z = sqrt(max(1.0 - dot(c, c) * 4.0, 0.0));
86 
87  // wrap the cloud field around the sphere and drift it sideways
88  vec2 drift = vec2(t * 0.35, -t * 0.16);
89  vec2 p = c * (2.4 + (1.0 - z) * 1.6) + drift;
90 
91  // domain-warped fbm = soft billowing clouds
92  vec2 q = vec2(fbm(p + t * 0.12), fbm(p + vec2(4.7, 2.3) - t * 0.09));
93  float clouds = fbm(p * 1.6 + 1.4 * q);
94 
95  vec3 sky = u_color;
96  vec3 skyLight = mix(u_color, vec3(1.0), 0.55);
97  vec3 cloud = vec3(0.99, 1.0, 1.0);
98 
99  vec3 col = mix(sky, skyLight, smoothstep(0.30, 0.60, clouds));
100  col = mix(col, cloud, smoothstep(0.56, 0.84, clouds));
101 
102// … truncated