{
"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
"name": "orb",
"title": "Orb",
"type": "registry:ui",
"description": "A 3D animated orb built with Three.js + Threlte, audio-reactive with GLSL shaders.",
"dependencies": [
"@threlte/core",
"@threlte/extras",
"mode-watcher",
"three"
],
"devDependencies": [
"@types/three"
],
"files": [
{
"content": "\n\n\n\n\n\t\n\t\t\tnew WebGLRenderer({\n\t\t\t\tcanvas,\n\t\t\t\talpha: true,\n\t\t\t\tantialias: true,\n\t\t\t\tpremultipliedAlpha: true,\n\t\t\t})}\n\t>\n\t\t\n\t\n
\n",
"type": "registry:ui",
"target": "orb/orb.svelte"
},
{
"content": "\n\n{#await $texture then perlinTexture}\n\t{#if perlinTexture}\n\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t{/if}\n{/await}\n",
"type": "registry:ui",
"target": "orb/orb-scene.svelte"
},
{
"content": "export type OrbAgentState = null | \"thinking\" | \"listening\" | \"talking\";\n",
"type": "registry:ui",
"target": "orb/types.ts"
},
{
"content": "uniform float uTime;\nuniform float uAnimation;\nuniform float uInverted;\nuniform float uOffsets[7];\nuniform vec3 uColor1;\nuniform vec3 uColor2;\nuniform float uInputVolume;\nuniform float uOutputVolume;\nuniform float uOpacity;\nuniform sampler2D uPerlinTexture;\nvarying vec2 vUv;\n\nconst float PI = 3.14159265358979323846;\n\n// Draw a single oval with soft edges and calculate its gradient color\nbool drawOval(vec2 polarUv, vec2 polarCenter, float a, float b, bool reverseGradient, float softness, out vec4 color) {\n vec2 p = polarUv - polarCenter;\n float oval = (p.x * p.x) / (a * a) + (p.y * p.y) / (b * b);\n\n float edge = smoothstep(1.0, 1.0 - softness, oval);\n\n if (edge > 0.0) {\n float gradient = reverseGradient ? (1.0 - (p.x / a + 1.0) / 2.0) : ((p.x / a + 1.0) / 2.0);\n // Flatten gradient toward middle value for more uniform appearance\n gradient = mix(0.5, gradient, 0.1);\n color = vec4(vec3(gradient), 0.85 * edge);\n return true;\n }\n return false;\n}\n\n// Map grayscale value to a 4-color ramp (color1, color2, color3, color4)\nvec3 colorRamp(float grayscale, vec3 color1, vec3 color2, vec3 color3, vec3 color4) {\n if (grayscale < 0.33) {\n return mix(color1, color2, grayscale * 3.0);\n } else if (grayscale < 0.66) {\n return mix(color2, color3, (grayscale - 0.33) * 3.0);\n } else {\n return mix(color3, color4, (grayscale - 0.66) * 3.0);\n }\n}\n\nvec2 hash2(vec2 p) {\n return fract(sin(vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453);\n}\n\n// 2D noise for the ring\nfloat noise2D(vec2 p) {\n vec2 i = floor(p);\n vec2 f = fract(p);\n\n vec2 u = f * f * (3.0 - 2.0 * f);\n float n = mix(\n mix(dot(hash2(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)),\n dot(hash2(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x),\n mix(dot(hash2(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)),\n dot(hash2(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x),\n u.y\n );\n\n return 0.5 + 0.5 * n;\n}\n\nfloat sharpRing(vec3 decomposed, float time) {\n float ringStart = 1.0;\n float ringWidth = 0.3;\n float noiseScale = 5.0;\n\n float noise = mix(\n noise2D(vec2(decomposed.x, time) * noiseScale),\n noise2D(vec2(decomposed.y, time) * noiseScale),\n decomposed.z\n );\n\n noise = (noise - 0.5) * 2.5;\n\n return ringStart + noise * ringWidth * 1.5;\n}\n\nfloat smoothRing(vec3 decomposed, float time) {\n float ringStart = 0.9;\n float ringWidth = 0.2;\n float noiseScale = 6.0;\n\n float noise = mix(\n noise2D(vec2(decomposed.x, time) * noiseScale),\n noise2D(vec2(decomposed.y, time) * noiseScale),\n decomposed.z\n );\n\n noise = (noise - 0.5) * 5.0;\n\n return ringStart + noise * ringWidth;\n}\n\nfloat flow(vec3 decomposed, float time) {\n return mix(\n texture(uPerlinTexture, vec2(time, decomposed.x / 2.0)).r,\n texture(uPerlinTexture, vec2(time, decomposed.y / 2.0)).r,\n decomposed.z\n );\n}\n\nvoid main() {\n // Normalize vUv to be centered around (0.0, 0.0)\n vec2 uv = vUv * 2.0 - 1.0;\n\n // Convert uv to polar coordinates\n float radius = length(uv);\n float theta = atan(uv.y, uv.x);\n if (theta < 0.0) theta += 2.0 * PI; // Normalize theta to [0, 2*PI]\n\n // Decomposed angle is used for sampling noise textures without seams:\n // float noise = mix(sample(decomposed.x), sample(decomposed.y), decomposed.z);\n vec3 decomposed = vec3(\n // angle in the range [0, 1]\n theta / (2.0 * PI),\n // angle offset by 180 degrees in the range [1, 2]\n mod(theta / (2.0 * PI) + 0.5, 1.0) + 1.0,\n // mixing factor between two noises\n abs(theta / PI - 1.0)\n );\n\n // Add noise to the angle for a flow-like distortion (reduced for flatter look)\n float noise = flow(decomposed, radius * 0.03 - uAnimation * 0.2) - 0.5;\n theta += noise * mix(0.08, 0.25, uOutputVolume);\n\n // Initialize the base color to white\n vec4 color = vec4(1.0, 1.0, 1.0, 1.0);\n\n // Original parameters for the ovals in polar coordinates\n float originalCenters[7] = float[7](0.0, 0.5 * PI, 1.0 * PI, 1.5 * PI, 2.0 * PI, 2.5 * PI, 3.0 * PI);\n\n // Parameters for the animated centers in polar coordinates\n float centers[7];\n for (int i = 0; i < 7; i++) {\n centers[i] = originalCenters[i] + 0.5 * sin(uTime / 20.0 + uOffsets[i]);\n }\n\n float a, b;\n vec4 ovalColor;\n\n // Check if the pixel is inside any of the ovals\n for (int i = 0; i < 7; i++) {\n float noise = texture(uPerlinTexture, vec2(mod(centers[i] + uTime * 0.05, 1.0), 0.5)).r;\n a = 0.5 + noise * 0.3; // Increased for more coverage\n b = noise * mix(3.5, 2.5, uInputVolume); // Increased height for fuller appearance\n bool reverseGradient = (i % 2 == 1); // Reverse gradient for every second oval\n\n // Calculate the distance in polar coordinates\n float distTheta = min(\n abs(theta - centers[i]),\n min(\n abs(theta + 2.0 * PI - centers[i]),\n abs(theta - 2.0 * PI - centers[i])\n )\n );\n float distRadius = radius;\n\n float softness = 0.6; // Increased softness for flatter, less pronounced edges\n\n // Check if the pixel is inside the oval in polar coordinates\n if (drawOval(vec2(distTheta, distRadius), vec2(0.0, 0.0), a, b, reverseGradient, softness, ovalColor)) {\n // Blend the oval color with the existing color\n color.rgb = mix(color.rgb, ovalColor.rgb, ovalColor.a);\n color.a = max(color.a, ovalColor.a); // Max alpha\n }\n }\n\n // Calculate both noisy rings\n float ringRadius1 = sharpRing(decomposed, uTime * 0.1);\n float ringRadius2 = smoothRing(decomposed, uTime * 0.1);\n\n // Adjust rings based on input volume (reduced for flatter appearance)\n float inputRadius1 = radius + uInputVolume * 0.2;\n float inputRadius2 = radius + uInputVolume * 0.15;\n float opacity1 = mix(0.2, 0.6, uInputVolume);\n float opacity2 = mix(0.15, 0.45, uInputVolume);\n\n // Blend both rings\n float ringAlpha1 = (inputRadius2 >= ringRadius1) ? opacity1 : 0.0;\n float ringAlpha2 = smoothstep(ringRadius2 - 0.05, ringRadius2 + 0.05, inputRadius1) * opacity2;\n\n float totalRingAlpha = max(ringAlpha1, ringAlpha2);\n\n // Apply screen blend mode for combined rings\n vec3 ringColor = vec3(1.0); // White ring color\n color.rgb = 1.0 - (1.0 - color.rgb) * (1.0 - ringColor * totalRingAlpha);\n\n // Define colours to ramp against greyscale (could increase the amount of colours in the ramp)\n vec3 color1 = vec3(0.0, 0.0, 0.0); // Black\n vec3 color2 = uColor1; // Darker Color\n vec3 color3 = uColor2; // Lighter Color\n vec3 color4 = vec3(1.0, 1.0, 1.0); // White\n\n // Convert grayscale color to the color ramp\n float luminance = mix(color.r, 1.0 - color.r, uInverted);\n color.rgb = colorRamp(luminance, color1, color2, color3, color4); // Apply the color ramp\n\n // Apply fade-in opacity\n color.a *= uOpacity;\n\n gl_FragColor = color;\n}\n",
"type": "registry:file",
"target": "orb/shaders/orb.frag.glsl"
},
{
"content": "uniform float uTime;\nuniform sampler2D uPerlinTexture;\nvarying vec2 vUv;\n\nvoid main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n",
"type": "registry:file",
"target": "orb/shaders/orb.vert.glsl"
},
{
"content": "declare module \"*.glsl?raw\" {\n\tconst source: string;\n\texport default source;\n}\n",
"type": "registry:file",
"target": "orb/shaders/glsl.d.ts"
},
{
"content": "import Root from \"./orb.svelte\";\n\nexport { Root, Root as Orb };\nexport type { OrbProps } from \"./orb.svelte\";\nexport type { OrbAgentState } from \"./types.js\";\n",
"type": "registry:ui",
"target": "orb/index.ts"
}
]
}