Building Advanced Visual Websites

When to use this skill

When the user asks for "Advanced UI", "3D effects", "WebGL", "Three.js", or "Shaders".
When creating high-end portfolios or immersive brand experiences (like Apple/Riot Games/Agency sites).
When implementing physics-based animations, glassmorphism, or complex scroll interactions.
When performance is critical for heavy visual loads (GPU acceleration usage).

Technology Selection:
- Core: React Three Fiber (R3F) for declarative 3D.
- Shaders: TSL (Three Shading Language) or GLSL via drei/shaderMaterial.
- Animation: GSAP (Timeline control) or Framer Motion (UI transitions).
- Post-Processing: react-postprocessing for Bloom, Depth of Field, Noise.
Scene Setup:
- Initialize <Canvas> with proper pixel ratio (dpr={[1, 2]}) and shadows.
- Configure OrbitControls or ScrollControls for navigation.
Optimization Strategy:
- Use InstancedMesh for repeating objects (>100 instances).
- Enable useFrame loops selectively; avoid heavy logic in the render loop.
- Draco compress all GLTF models.
Integration:
- Overlay HTML UI using <Html> from @react-three/drei or standard absolute positioning on top of the Canvas.

To achieve the "Liquid Glass" look:

Material: Use MeshPhysicalMaterial.
Settings:
- transmission: 0.95 (Glass transparency)
- roughness: 0.1 (Smoothness)
- thickness: 1.5 (Refraction depth)
- ior: 1.5 (Index of Refraction)
Lighting: High-contrast environment map (Environment from drei) is crucial for reflections.

Canvas: The root entry point.
Hooks:
- useThree(): Access camera, scene, renderer.
- useFrame((state, delta) => ...): Run code every frame (animation loop).
- useLoader(GLTFLoader, '/path'): Load 3D assets.

Do not create new materials or geometries inside useFrame.
Do dispose of heavy assets when unmounting (R3F handles most, but be careful with custom textures).
Do use lazy loading (Suspense) for heavy 3D models.