Back to Showcase
UXLive

3D & Advanced Animations

A responsive 3D scene, with realistic lighting, PBR materials, and an orbitable camera can be the difference between a plain page and one that grabs people's attention toward your product or system. The interactive solar system is a demonstration of what's possible with 3D on a modern website. The particle system with a custom shader shows the use of WebGL and 3D math. Even scrolling can become engaging through a GSAP-like approach, camera control with drei, and more.

Three.js React-Three-Fiber WEBGL 3D Shader GLSL Scroll Animation

Technologies

  • React Three Fiber
  • @react-three/drei
  • Three.js
  • GLSL

Architecture

  • Interactive scene with OrbitControls
  • Camera that chases the focused target
  • Particle System with GLSL Shader
  • Interactive Scroll

Concepts

  • 3D Scenes
  • Solid Materials
  • GLSL Shaders
  • Particle System
  • Scroll with Camera
  • 3D Performance

Demo area

The demo is 100% functional — try it now.

Previous Demo

Authentication

Interactive demo of the main modern authentication mechanisms: JWT with Refresh Token, OAuth 2.0, two-factor authentication (TOTP), passwordless login through a Magic Link, and biometrics with WebAuthn/Passkeys.

Next Demo

Camera, Screen & Audio APIs

Camera, screen recording, and audio recording straight from the browser — capture, encoding, and a custom player, no plugins and no upload.