radiance: new home page — WebGL orb hero, DG cube loader, white dropdown menu
Replaces the Crush landing page with a single-screen hero (no scroll): gradient sky, particle orb with corona, 'Welcome to dangrubb.net' title, top-left DG logo and a numbered menu. Raw WebGL (no three.js), self-hosted Instrument Sans + Geist Mono. ~10 KB of JS.
This commit is contained in:
dangrubbb
328
src/scripts/orb.js
Normal file
328
src/scripts/orb.js
Normal file
@ -0,0 +1,328 @@
|
||||
// Radiance orb: a glassy sphere of particles with a sparkling corona.
|
||||
// Raw WebGL (no libraries) so the home page stays tiny and loads fast.
|
||||
|
||||
const VERT_PARTICLES = `
|
||||
precision highp float;
|
||||
attribute vec3 aDir;
|
||||
attribute vec4 aRand;
|
||||
uniform vec2 uRes;
|
||||
uniform vec2 uCenter;
|
||||
uniform float uR;
|
||||
uniform float uTime;
|
||||
uniform float uDpr;
|
||||
uniform vec2 uTilt;
|
||||
uniform float uMode; // 0 = inner particles, 1 = corona
|
||||
varying vec4 vColor;
|
||||
varying float vGlow;
|
||||
|
||||
float hash(vec3 p) {
|
||||
p = fract(p * 0.3183099 + 0.1);
|
||||
p *= 17.0;
|
||||
return fract(p.x * p.y * p.z * (p.x + p.y + p.z));
|
||||
}
|
||||
float vnoise(vec3 x) {
|
||||
vec3 i = floor(x);
|
||||
vec3 f = fract(x);
|
||||
f = f * f * (3.0 - 2.0 * f);
|
||||
return mix(
|
||||
mix(mix(hash(i), hash(i + vec3(1, 0, 0)), f.x),
|
||||
mix(hash(i + vec3(0, 1, 0)), hash(i + vec3(1, 1, 0)), f.x), f.y),
|
||||
mix(mix(hash(i + vec3(0, 0, 1)), hash(i + vec3(1, 0, 1)), f.x),
|
||||
mix(hash(i + vec3(0, 1, 1)), hash(i + vec3(1, 1, 1)), f.x), f.y),
|
||||
f.z);
|
||||
}
|
||||
float fbm(vec3 p) {
|
||||
float v = 0.0;
|
||||
float a = 0.55;
|
||||
for (int i = 0; i < 3; i++) {
|
||||
v += a * vnoise(p);
|
||||
p = p * 2.03 + 11.7;
|
||||
a *= 0.5;
|
||||
}
|
||||
return v;
|
||||
}
|
||||
vec3 rotY(vec3 p, float a) {
|
||||
float c = cos(a), s = sin(a);
|
||||
return vec3(c * p.x + s * p.z, p.y, -s * p.x + c * p.z);
|
||||
}
|
||||
vec3 rotX(vec3 p, float a) {
|
||||
float c = cos(a), s = sin(a);
|
||||
return vec3(p.x, c * p.y - s * p.z, s * p.y + c * p.z);
|
||||
}
|
||||
|
||||
void main() {
|
||||
float t = uTime;
|
||||
vec3 d = aDir;
|
||||
float size = 1.0;
|
||||
vec4 col = vec4(0.0);
|
||||
float sc = clamp(uR / 315.0, 0.8, 1.7);
|
||||
|
||||
if (uMode < 0.5) {
|
||||
// ---- inner particles: density follows a slowly drifting, domain-warped noise field
|
||||
float rad = 0.955 + aRand.x * 0.04;
|
||||
vec3 q = d * 1.45 + vec3(0.0, t * 0.03, t * 0.02);
|
||||
float n = fbm(q + 1.6 * fbm(q * 0.8 + 3.1));
|
||||
n = clamp((n - 0.46) * 2.3 + 0.5, 0.0, 1.0);
|
||||
float keep = smoothstep(0.05, 0.7, n) - aRand.y * 0.7;
|
||||
float spark = step(0.94, aRand.z);
|
||||
if (keep < 0.0 && spark < 0.5) { gl_Position = vec4(2.0, 2.0, 2.0, 1.0); gl_PointSize = 0.0; vColor = vec4(0.0); vGlow = 0.0; return; }
|
||||
vec3 warm = mix(vec3(0.90, 0.22, 0.17), vec3(0.99, 0.50, 0.30), aRand.w);
|
||||
warm = mix(warm, vec3(1.0, 0.72, 0.42), smoothstep(0.1, 0.45, 1.0 - n) * 0.8);
|
||||
col = vec4(mix(warm, vec3(1.0, 0.97, 0.84), spark), mix(0.85, 0.95, spark));
|
||||
size = mix(1.6 + aRand.y * 1.6 + n * 1.0, 3.2 + aRand.w * 2.6, spark);
|
||||
float tw = 0.5 + 0.5 * sin(t * (1.2 + aRand.x * 2.5) + aRand.w * 40.0);
|
||||
col.a *= mix(1.0, tw, spark);
|
||||
vGlow = spark;
|
||||
vec3 p = rotX(rotY(d, t * 0.045 + 2.4 + uTilt.x), uTilt.y) * rad;
|
||||
float persp = 1.0 / (1.0 - p.z * 0.12);
|
||||
// far side of the sphere reads dimmer through the glass
|
||||
col.a *= mix(0.25, 1.0, smoothstep(-0.4, 0.4, p.z));
|
||||
vec2 px = uCenter + vec2(p.x, -p.y) * uR * persp;
|
||||
gl_Position = vec4(px.x / uRes.x * 2.0 - 1.0, 1.0 - px.y / uRes.y * 2.0, 0.0, 1.0);
|
||||
gl_PointSize = size * sc * uDpr * persp;
|
||||
vColor = col;
|
||||
} else {
|
||||
// ---- corona: sparks thrown off the limb, laid out in screen space; strongest over the top
|
||||
vec2 cd = d.xy;
|
||||
float n = fbm(vec3(cd * 4.2, t * 0.10));
|
||||
float up = smoothstep(-0.75, 0.9, cd.y);
|
||||
float spike = pow(n, 1.6) * 1.6;
|
||||
float reach = pow(aRand.x, 1.5) * (0.05 + 0.4 * spike) * (0.3 + 0.7 * up);
|
||||
reach *= 0.88 + 0.12 * sin(t * 0.7 + aRand.w * 20.0);
|
||||
reach += 0.012 * sin(t * 0.9 + aRand.z * 30.0);
|
||||
float fade = 1.0 - smoothstep(0.0, 0.42, reach);
|
||||
col = vec4(1.0, 0.97, 0.86, (0.3 + 0.7 * fade) * (0.35 + 0.65 * smoothstep(0.2, 0.75, n)));
|
||||
float tw = 0.5 + 0.5 * sin(t * (1.0 + aRand.y * 3.0) + aRand.z * 60.0);
|
||||
col.a *= mix(0.5, 1.0, tw);
|
||||
size = 1.0 + aRand.y * aRand.y * 2.6 * (0.3 + fade);
|
||||
vGlow = 0.5;
|
||||
vec2 px = uCenter + vec2(cd.x, -cd.y) * (1.0 + 0.004 + reach) * uR;
|
||||
gl_Position = vec4(px.x / uRes.x * 2.0 - 1.0, 1.0 - px.y / uRes.y * 2.0, 0.0, 1.0);
|
||||
gl_PointSize = size * sc * uDpr;
|
||||
vColor = col;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const FRAG_PARTICLES = `
|
||||
precision mediump float;
|
||||
varying vec4 vColor;
|
||||
varying float vGlow;
|
||||
void main() {
|
||||
vec2 c = gl_PointCoord - 0.5;
|
||||
float r = length(c);
|
||||
float core = smoothstep(0.5, 0.18, r);
|
||||
float halo = vGlow * smoothstep(0.5, 0.0, r) * 0.35;
|
||||
float a = vColor.a * clamp(core + halo, 0.0, 1.0);
|
||||
if (a < 0.01) discard;
|
||||
gl_FragColor = vec4(vColor.rgb * a, a);
|
||||
}
|
||||
`;
|
||||
|
||||
const VERT_QUAD = `
|
||||
attribute vec2 aPos;
|
||||
varying vec2 vUv;
|
||||
void main() {
|
||||
vUv = aPos;
|
||||
gl_Position = vec4(aPos, 0.0, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const FRAG_SHELL = `
|
||||
precision highp float;
|
||||
varying vec2 vUv;
|
||||
uniform vec2 uRes;
|
||||
uniform vec2 uCenter;
|
||||
uniform float uR;
|
||||
uniform float uTime;
|
||||
|
||||
void main() {
|
||||
vec2 frag = vec2(gl_FragCoord.x, uRes.y - gl_FragCoord.y);
|
||||
vec2 d = (frag - uCenter) / uR;
|
||||
float r = length(d);
|
||||
|
||||
// soft light spilling around the silhouette
|
||||
float glow = 0.28 * exp(-(r - 1.0) * 7.5) * step(1.0, r);
|
||||
|
||||
float edge = 1.0 - smoothstep(0.994, 1.004, r);
|
||||
float z = sqrt(max(0.0, 1.0 - r * r));
|
||||
vec3 n = vec3(d.x, -d.y, z);
|
||||
|
||||
// glassy body: lighter top-left, deeper orange bottom-right
|
||||
vec3 top = vec3(0.992, 0.76, 0.52);
|
||||
vec3 bot = vec3(0.975, 0.55, 0.38);
|
||||
float lit = clamp(0.5 + 0.5 * dot(normalize(n), normalize(vec3(-0.45, 0.6, 0.65))), 0.0, 1.0);
|
||||
vec3 body = mix(bot, top, lit);
|
||||
|
||||
// fresnel rim, pale pink-white
|
||||
float fres = pow(1.0 - z, 2.0);
|
||||
vec3 rim = vec3(1.0, 0.89, 0.86);
|
||||
vec3 col = mix(body, rim, clamp(fres * 1.15, 0.0, 1.0));
|
||||
float a = mix(0.7, 0.97, fres);
|
||||
|
||||
// crisp bright edge line
|
||||
float ring = smoothstep(0.955, 0.985, r) * (1.0 - smoothstep(0.985, 1.004, r));
|
||||
col = mix(col, vec3(1.0, 0.95, 0.93), ring * 0.6);
|
||||
|
||||
vec4 shell = vec4(col * a, a) * edge;
|
||||
vec4 halo = vec4(vec3(1.0, 0.96, 0.86) * glow, glow);
|
||||
gl_FragColor = shell + halo * (1.0 - shell.a);
|
||||
}
|
||||
`;
|
||||
|
||||
function compile(gl, type, src) {
|
||||
const s = gl.createShader(type);
|
||||
gl.shaderSource(s, src);
|
||||
gl.compileShader(s);
|
||||
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s));
|
||||
return s;
|
||||
}
|
||||
function program(gl, vs, fs) {
|
||||
const p = gl.createProgram();
|
||||
gl.attachShader(p, compile(gl, gl.VERTEX_SHADER, vs));
|
||||
gl.attachShader(p, compile(gl, gl.FRAGMENT_SHADER, fs));
|
||||
gl.linkProgram(p);
|
||||
if (!gl.getProgramParameter(p, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(p));
|
||||
return p;
|
||||
}
|
||||
function rng(seed) {
|
||||
return () => {
|
||||
seed |= 0; seed = (seed + 0x6d2b79f5) | 0;
|
||||
let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
|
||||
t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
|
||||
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
|
||||
};
|
||||
}
|
||||
function cloud(count, seed, ring) {
|
||||
const rand = rng(seed);
|
||||
const dir = new Float32Array(count * 3);
|
||||
const rnd = new Float32Array(count * 4);
|
||||
for (let i = 0; i < count; i++) {
|
||||
if (ring) {
|
||||
const a = rand() * Math.PI * 2;
|
||||
dir.set([Math.cos(a), Math.sin(a), 0], i * 3);
|
||||
} else {
|
||||
const y = rand() * 2 - 1;
|
||||
const phi = rand() * Math.PI * 2;
|
||||
const s = Math.sqrt(1 - y * y);
|
||||
dir.set([Math.cos(phi) * s, y, Math.sin(phi) * s], i * 3);
|
||||
}
|
||||
rnd.set([rand(), rand(), rand(), rand()], i * 4);
|
||||
}
|
||||
return { dir, rnd, count };
|
||||
}
|
||||
|
||||
export function startOrb(canvas, { onReady } = {}) {
|
||||
const gl = canvas.getContext('webgl', { alpha: true, premultipliedAlpha: true, antialias: false, powerPreference: 'low-power' });
|
||||
if (!gl) return false;
|
||||
|
||||
const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
const small = Math.min(innerWidth, innerHeight) < 600;
|
||||
const inner = cloud(small ? 28000 : 52000, 7);
|
||||
const corona = cloud(small ? 6000 : 13000, 21, true);
|
||||
|
||||
const pp = program(gl, VERT_PARTICLES, FRAG_PARTICLES);
|
||||
const ps = program(gl, VERT_QUAD, FRAG_SHELL);
|
||||
|
||||
const buf = (data) => {
|
||||
const b = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, b);
|
||||
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
||||
return b;
|
||||
};
|
||||
const bufs = {
|
||||
iDir: buf(inner.dir), iRnd: buf(inner.rnd),
|
||||
cDir: buf(corona.dir), cRnd: buf(corona.rnd),
|
||||
quad: buf(new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1])),
|
||||
};
|
||||
|
||||
const U = (p, names) => Object.fromEntries(names.map((n) => [n, gl.getUniformLocation(p, n)]));
|
||||
const up = U(pp, ['uRes', 'uCenter', 'uR', 'uTime', 'uDpr', 'uTilt', 'uMode']);
|
||||
const us = U(ps, ['uRes', 'uCenter', 'uR', 'uTime']);
|
||||
const aDir = gl.getAttribLocation(pp, 'aDir');
|
||||
const aRand = gl.getAttribLocation(pp, 'aRand');
|
||||
const aPos = gl.getAttribLocation(ps, 'aPos');
|
||||
|
||||
gl.enable(gl.BLEND);
|
||||
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
|
||||
gl.clearColor(0, 0, 0, 0);
|
||||
|
||||
let W = 0, H = 0, dpr = 1, cx = 0, cy = 0, R = 0;
|
||||
function resize() {
|
||||
dpr = Math.min(window.devicePixelRatio || 1, 2);
|
||||
W = canvas.clientWidth; H = canvas.clientHeight;
|
||||
canvas.width = Math.round(W * dpr); canvas.height = Math.round(H * dpr);
|
||||
gl.viewport(0, 0, canvas.width, canvas.height);
|
||||
const portrait = W < H * 0.85;
|
||||
R = portrait ? Math.min(W * 0.46, H * 0.3) : W * 0.2625;
|
||||
cx = W / 2;
|
||||
cy = H * (portrait ? 0.8 : 0.52) + R * (portrait ? 0.15 : 1);
|
||||
}
|
||||
resize();
|
||||
addEventListener('resize', resize);
|
||||
|
||||
// gentle pointer parallax
|
||||
const target = { x: 0, y: 0 }, cur = { x: 0, y: 0 };
|
||||
addEventListener('pointermove', (e) => {
|
||||
target.x = (e.clientX / innerWidth - 0.5) * 2;
|
||||
target.y = (e.clientY / innerHeight - 0.5) * 2;
|
||||
}, { passive: true });
|
||||
|
||||
function bindParticles(dirBuf, rndBuf) {
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, dirBuf);
|
||||
gl.enableVertexAttribArray(aDir);
|
||||
gl.vertexAttribPointer(aDir, 3, gl.FLOAT, false, 0, 0);
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, rndBuf);
|
||||
gl.enableVertexAttribArray(aRand);
|
||||
gl.vertexAttribPointer(aRand, 4, gl.FLOAT, false, 0, 0);
|
||||
}
|
||||
|
||||
const t0 = performance.now();
|
||||
let ready = false;
|
||||
function frame(now) {
|
||||
const t = reduced ? 8 : (now - t0) / 1000;
|
||||
cur.x += (target.x - cur.x) * 0.04;
|
||||
cur.y += (target.y - cur.y) * 0.04;
|
||||
const ox = cur.x * 10, oy = cur.y * 6;
|
||||
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
// 1. corona (behind the shell)
|
||||
gl.useProgram(pp);
|
||||
gl.uniform2f(up.uRes, W, H);
|
||||
gl.uniform2f(up.uCenter, cx + ox, cy + oy);
|
||||
gl.uniform1f(up.uR, R);
|
||||
gl.uniform1f(up.uTime, t);
|
||||
gl.uniform1f(up.uDpr, dpr);
|
||||
gl.uniform2f(up.uTilt, cur.x * 0.25, cur.y * 0.12);
|
||||
gl.disableVertexAttribArray(aPos);
|
||||
gl.uniform1f(up.uMode, 1);
|
||||
bindParticles(bufs.cDir, bufs.cRnd);
|
||||
gl.drawArrays(gl.POINTS, 0, corona.count);
|
||||
|
||||
// 2. glass shell + glow
|
||||
gl.useProgram(ps);
|
||||
gl.uniform2f(us.uRes, canvas.width, canvas.height);
|
||||
gl.uniform2f(us.uCenter, (cx + ox) * dpr, (cy + oy) * dpr);
|
||||
gl.uniform1f(us.uR, R * dpr);
|
||||
gl.uniform1f(us.uTime, t);
|
||||
gl.disableVertexAttribArray(aDir);
|
||||
gl.disableVertexAttribArray(aRand);
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, bufs.quad);
|
||||
gl.enableVertexAttribArray(aPos);
|
||||
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
|
||||
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
||||
gl.disableVertexAttribArray(aPos);
|
||||
|
||||
// 3. particles inside / on the shell
|
||||
gl.useProgram(pp);
|
||||
gl.uniform1f(up.uMode, 0);
|
||||
bindParticles(bufs.iDir, bufs.iRnd);
|
||||
gl.drawArrays(gl.POINTS, 0, inner.count);
|
||||
|
||||
if (!ready) { ready = true; onReady && onReady(); }
|
||||
if (!reduced) requestAnimationFrame(frame);
|
||||
}
|
||||
requestAnimationFrame(frame);
|
||||
return true;
|
||||
}
|
||||
Reference in New Issue
Block a user