1200+
Lines of Code
3
Custom Shaders
60
FPS Target
100%
AI-Assisted
Built With
Modern WebGL Stack
Three.js r160
WebGL rendering engine
GSAP 3.12
Timeline animations
GLSL Shaders
Custom reveal effects
GLTF + Draco
Compressed 3D models
The Magic
Vision Pro-Style Reveal Shader
1
Edge
Detect
Detect
→
2
Rim
Glow
Glow
→
3
Scan
Line
Line
→
4
Hero
Light
Light
// Fresnel edge detection
float NdotV = dot(viewDir, normal);
float edge = smoothstep(0.1, 0.02, NdotV);
// Animated scan line
float scan = exp(-abs(pos - progress) * 60.0);
Techniques
Cinematic Camera & Effects
360° Camera Orbit
Dynamic zoom & roll
Unreal Bloom
HDR post-processing
Impact Shake
Elastic collision FX
Shockwave Ring
Animated geometry
Canvas Textures
Procedural graphics
3-Point Lighting
Key, fill, rim setup
No 3D Software
Procedural Geometry
The combined Home Hub device is built entirely in code — no Blender, no external models.
ExtrudeGeometry
Rounded rectangle display frame from 2D path
ShapeGeometry
Screen with custom UV mapping
SphereGeometry
Partial sphere for HomePod dome
CylinderGeometry
Tapered base with mesh texture
TorusGeometry
Animated LED ring indicator
CanvasTexture
Animated screen with smiley face
// Rounded rectangle from path
const shape = new THREE.Shape();
shape.moveTo(-w + r, -h);
shape.quadraticCurveTo(w, -h, w, -h + r);
// Extrude to 3D
new THREE.ExtrudeGeometry(shape, {
depth: 0.025,
bevelEnabled: false
});
Explore
Interactive Model Viewer
Click and drag to rotate. Scroll to zoom. Switch between the three models.
iPad Pro