Three.js Vertex Shaders
Geometry in Motion
Move your mouse. Every vertex is displaced in real time.
The Technique
Vertex Displacement
Noise Displacement
Simplex noise offsets each vertex along its normal vector. The noise field scrolls over time, creating organic breathing and warping.
Mouse Reactivity
Cursor position is projected into 3D space and passed to the vertex shader. Vertices near the mouse get extra displacement, creating a magnetic pull effect.
Shape Morphing
Multiple geometries interpolate between each other over time using mix() on vertex positions, blending an icosahedron into a torus knot and back.
Under the Hood
Renderer Stats
In the Wild
Who Uses This
AI & Machine Learning Products
Companies like OpenAI and Anthropic use abstract, morphing 3D shapes to represent intelligence and dynamism. The organic movement suggests something alive and evolving.
Tech Company Hero Sections
SaaS companies use morphing geometry as a visually striking hero background that conveys innovation without a single word. It sets the tone before the visitor reads anything.
Data Visualization
Abstract 3D shapes that morph based on real data (stock prices, user activity, system load) turn numbers into spatial experiences that are intuitive to read.
Event & Conference Sites
Tech conferences use generative 3D visuals as a brand identity element — unique every visit, always on-brand, impossible to screenshot and replicate.
Shape-shifting on demand.
Custom vertex shaders turn static meshes into living, breathing geometry — reactive to user input and driven by mathematical noise.
More Showcases