Gravity Well Hero

Gravity Well Hero – hero section UI design

Free React Hero Section built with Three.js, GLSL, SVG, CSS.

A luxury, architectural transparent hero where a 3D satin titanium sphere of twisting ribbons floats in an interactive spacetime gravity well. The sphere, rendered in Three.js with custom GLSL shaders, features dual-light anisotropic micro-sheens, band edge bevel ambient occlusion, and Schlick titanium Fresnel rim reflections, leaning dynamically in response to pointer physics. The well beneath is drawn by six continuous rows of kinetic uppercase typography curving under mass in a steep gravitational sink, scrolling in alternating directions. Above sits a completely transparent borderless nav with floating links and a solid white pill CTA with an arrow disc, an editorial two-line headline with a solid cobalt second line, a supporting subtitle, and a primary call to action button. Inside the orb a raymarched liquid volume turns on an axis tilted 23.4 degrees, like the Earth, about once every 18 seconds while the glass stays still, and rolls with travelling ripples, soft irregular folds of satin that drift through its body, caustic shimmer under the lime crest, a faint second wave deeper inside, and depth fog that dims the far side. It opens with the well forming: the text rows stay flat while the orb drops in from above under gravity and lands on them; only on impact do they give way, the orb and the rows sinking together into the well with a damped elastic wobble before settling. It is coloured in three tones: a deep #030407 ground with a cobalt glow pooled under the orb, cobalt #1558C9 for the orb, its glass rim and the headline tail, and lime #D4FF24 for the orb’s crest, the logo glint and both lime pill buttons. It gracefully handles reduced motion.

Installation

npm install three

More Hero Sections

View all React Hero Section Components