Three.js & Canvas
Unlock the third dimension. Kinetic UI incorporates WebGL objects to render interactive, glassmorphic 3D shapes that float dynamically within your layouts.
Fresnel Reflection Shader
Instead of standard flat colors, our WebGL floating objects (toruses, knots) use custom fragment shaders mimicking glass refraction. By calculating the angle between the viewer's camera and the object's normal vector, we emit bright edges (Fresnel limits) that simulate premium physical materials.
// custom shader snippet used for physical materials
uniform float bias;
uniform float scale;
uniform float power;
varying vec3 vEye;
varying vec3 vNormal;
void main() {
float factor = bias + scale * power(1.0 + dot(vEye, vNormal), power);
gl_FragColor = vec4(vec3(factor), 1.0);
}
By wrapping Three.js primitives in React hooks, we allow standard React state triggers to dynamically scale and animate WebGL properties smoothly.
R3F Canvas elements suspend frame loops when scrolled out of view, reducing CPU and battery overhead when the user navigates other parts of the site.