We build production systems for clients, but we also like to keep our hands in the raw stuff. These are small, self-contained experiments: no frameworks, no build step, no dependencies. Each one is a few hundred lines at most.
Runs locally in your browser · respects reduced-motion settings
A field of drifting points that link up when they get close. Move your pointer over it and the points push away.
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const d = distance(particles[i], particles[j]);
if (d < 118) {
line(particles[i], particles[j], 0.16 * (1 - d / 118));
}
}
}Hundreds of particles follow an invisible vector field. The result looks like current moving through water.
function field(x, y) {
return Math.sin(x * 0.006 + y * 0.004) * 1.7
+ Math.cos(y * 0.007 - x * 0.003) * 1.7;
}
const angle = field(p.x, p.y);
const nx = p.x + Math.cos(angle) * 1.7;
const ny = p.y + Math.sin(angle) * 1.7;A fragment shader running directly on the GPU. Four sine waves, some colour maths, and a full-screen triangle.
vec2 uv = (gl_FragCoord.xy - 0.5 * u_res)
/ min(u_res.x, u_res.y);
float v = sin(uv.x * 6.0 + u_time)
+ sin(uv.y * 7.0 - u_time * 0.8)
+ sin((uv.x + uv.y) * 5.0 + u_time * 1.3);
vec3 col = 0.5 + 0.5 * cos(vec3(0.0, 2.1, 4.2) + v);The heading effect used on this site's section titles. Characters resolve left to right out of noise.
IN BRILLIANCE WE ARE FREE
const progress = (frame / totalFrames) * text.length;
for (let i = 0; i < text.length; i++) {
output += i < progress
? text[i]
: chars[Math.floor(Math.random() * chars.length)];
}