5 JavaScript 3D Effects
Add depth and dimension to your UI with these JavaScript 3D effects. This collection features interactive elements, immersive transitions, and visually striking components that use CSS transforms, WebGL, and JavaScript-powered libraries to create compelling 3D experiences.
Last updated:
Extreme Hover with HTML and CSS
A visually dynamic and impressive effect where hovering over a static image transforms it into a complex, 3D-like collage, showcasing the capabilities of CSS transitions and imperative loading control.
3D Sign Up Button with Spline and GSAP
A 3D scene from Spline is loaded using the Spline Runtime, and its objects are brought to life with programmatic animation in GSAP. This approach allows you to avoid low-level WebGL by using a powerful timeline to create complex interactive scenarios, with the code already containing stubs for finding and controlling objects.
Lighting Cubes Grid
This demo uses the ANGLE_instanced_arrays extension to efficiently animate a volumetric grid of cubes. See how a single regl command can handle complex transformations and lighting for every instance.
