3D liquid metal wobbling sphere with WebGL shaders

Visit
Client:
Martynas Juska
Industry:
3D
Framework:
Three.js
Style:
Sci-fi

Project Overview

Interactive 3D liquid metal sphere with organic, fluid-like wobbling motion. Created for dark-themed websites, which would add depth and sophistication. 

3D liquid metal sphere animation with Three.js WebGL

Design & User Experience

Webflow is web development platform that combines a powerful visual design tool and a built-in Content Management System (CMS). It is known for appealing to designers and developers a like. Webflow is increasing in popularity especially for landing pages, marketing teams and start ups for a ease of use and easy content editting capabilities which doesn't require any technical knowledge.

Chrome sphere close-up with reflective surface
Interactive 3D metal sphere with dynamic lighting
Mobile responsive WebGL sphere animation
Loading screen with progress bar for 3D animation

Tools & Tech

Three.js

Built with Three.js and custom WebGL shaders for maximum performance. Features 4D Simplex noise for smooth, non-repeating organic motion patterns. Includes custom vertex and fragment shaders with chromatic aberration effects, performance-based quality tiers that auto-detect device capabilities, and optimized render pipeline with visibility tracking. The sphere adapts from 45 to 75 subdivisions based on hardware, ensuring smooth 60fps on all devices from mobile to desktop.

Development Exploration

Projects built on my spare time. Experiments, recreations, and ideas to test.