Fluid Orb

1import React, { useEffect, useRef, useState } from "react"
2import { AppState, Text, View } from "react-native"
3import { GLView, type ExpoWebGLRenderingContext } from "expo-gl"
4import { useReducedMotion } from "react-native-reanimated"
5const VERT = `attribute vec2 a_pos; void main(){gl_Position=vec4(a_pos,0.0,1.0);}`
6const FRAG = `
7#ifdef GL_FRAGMENT_PRECISION_HIGH
8precision highp float;
9#else
10precision mediump float;
11#endif
12uniform vec2 u_resolution; uniform float u_time; uniform vec3 u_color;
13float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453123);}
14float noise(vec2 p){vec2 i=floor(p);vec2 f=fract(p);vec2 u=f*f*(3.0-2.0*f);return mix(mix(hash(i),hash(i+vec2(1.0,0.0)),u.x),mix(hash(i+vec2(0.0,1.0)),hash(i+vec2(1.0,1.0)),u.x),u.y);}
15float fbm(vec2 p){float v=0.0;float a=0.6;for(int i=0;i<3;i++){v+=a*noise(p);p*=2.0;a*=0.5;}return v;}
16void main(){vec2 uv=gl_FragCoord.xy/u_resolution.xy;float t=u_time*0.22;vec2 drift=vec2(sin(t)+0.6*sin(t*1.7+1.3),cos(t*0.8)+0.6*cos(t*1.3+2.1));vec2 p=vec2(uv.x*1.8,uv.y)+drift*0.7;vec2 q=vec2(fbm(p+drift),fbm(p+vec2(3.2,1.5)-drift));float f=fbm(p+1.2*q);float g=clamp(1.0-uv.y,0.0,1.0);float anchor=smoothstep(0.0,0.3,uv.y);float shade=clamp(g+(f-0.5)*0.8*anchor,0.0,1.0);vec3 white=vec3(0.99,1.0,1.0);vec3 light=mix(white,u_color,0.5);vec3 col=mix(white,light,smoothstep(0.28,0.52,shade));col=mix(col,u_color,smoothstep(0.58,0.88,shade));float edge=smoothstep(0.5,0.49,distance(uv,vec2(0.5)));gl_FragColor=vec4(col*edge,edge);}
17`
18export interface FluidOrbProps {
19  size?: number
20  color?: string
21  testID?: string
22}
23export function FluidOrb({
24  size = 240,
25  color = "#1A73F2",
26  testID,
27}: FluidOrbProps) {
28  const reduced = useReducedMotion(),
29    cleanup = useRef<() => void>(() => {}),
30    [error, setError] = useState<string | null>(null)
31  useEffect(() => () => cleanup.current(), [])
32  function context(gl: ExpoWebGLRenderingContext) {
33    cleanup.current()
34    const shaders: WebGLShader[] = [],
35      buffer = gl.createBuffer(),
36      program = gl.createProgram()
37    let frame = 0,
38      disposed = false,
39      active = AppState.currentState === "active",
40      last = 0,
41      start = 0
42    const subscription = AppState.addEventListener("change", (next) => {
43      active = next === "active"
44    })
45    cleanup.current = () => {
46      disposed = true
47      cancelAnimationFrame(frame)
48      subscription.remove()
49      gl.deleteBuffer(buffer)
50      if (program) gl.deleteProgram(program)
51      shaders.forEach((s) => gl.deleteShader(s))
52    }
53    try {
54      if (!program || !buffer) throw new Error("GL allocation failed")
55      for (const [type, source] of [
56        [gl.VERTEX_SHADER, VERT],
57        [gl.FRAGMENT_SHADER, FRAG],
58      ] as const) {
59        const shader = gl.createShader(type)
60        if (!shader) throw new Error("Shader allocation failed")
61        shaders.push(shader)
62        gl.shaderSource(shader, source)
63        gl.compileShader(shader)
64        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
65          throw new Error(
66            gl.getShaderInfoLog(shader) ?? "Shader compilation failed"
67          )
68        gl.attachShader(program, shader)
69      }
70      gl.linkProgram(program)
71      if (!gl.getProgramParameter(program, gl.LINK_STATUS))
72        throw new Error(
73          gl.getProgramInfoLog(program) ?? "Shader linking failed"
74        )
75      gl.useProgram(program)
76      gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
77      gl.bufferData(
78        gl.ARRAY_BUFFER,
79        new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
80        gl.STATIC_DRAW
81      )
82      const pos = gl.getAttribLocation(program, "a_pos")
83      gl.enableVertexAttribArray(pos)
84      gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0)
85      const resolution = gl.getUniformLocation(program, "u_resolution"),
86        time = gl.getUniformLocation(program, "u_time"),
87        tint = gl.getUniformLocation(program, "u_color")
88      let hex = color.replace("#", "")
89      if (hex.length === 3) hex = [...hex].map((x) => x + x).join("")
90      const n = parseInt(hex, 16)
91      gl.uniform3f(
92        tint,
93        ((n >> 16) & 255) / 255,
94        ((n >> 8) & 255) / 255,
95        (n & 255) / 255
96      )
97      function draw(now: number) {
98        if (disposed) return
99        if (!start) start = now
100        if (active && (reduced || now - last >= 1000 / 30)) {
101          last = now
102          gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight)
103          gl.uniform2f(
104            resolution,
105            gl.drawingBufferWidth,
106            gl.drawingBufferHeight
107          )
108          gl.uniform1f(time, reduced ? 0 : (now - start) / 1000)
109          gl.clearColor(0, 0, 0, 0)
110          gl.clear(gl.COLOR_BUFFER_BIT)
111          gl.drawArrays(gl.TRIANGLES, 0, 6)
112          gl.flush()
113          gl.endFrameEXP()
114        }
115        if (!reduced) frame = requestAnimationFrame(draw)
116      }
117      frame = requestAnimationFrame(draw)
118    } catch (e) {
119      cleanup.current()
120      setError(String(e))
121    }
122  }
123  return (
124    <View
125      testID={testID}
126      accessible
127      accessibilityLabel="Fluid color orb"
128      style={{
129        width: size,
130        height: size,
131        alignSelf: "center",
132        borderRadius: size / 2,
133        overflow: "hidden",
134      }}
135    >
136      {error ? (
137        <Text style={{ color: "#aaa", padding: 16 }} accessibilityRole="alert">
138          GL preview unavailable
139        </Text>
140      ) : (
141        <GLView
142          key={`${color}-${reduced}`}
143          style={{ flex: 1 }}
144          onContextCreate={context}
145        />
146      )}
147    </View>
148  )
149}
150export default FluidOrb