Wensity

React 3D components

21 3D componentsLive previewFull source in your repo

Depth, perspective and real rotation, most of it in plain CSS rather than a 3D engine. Copy any one into your project and it runs without a renderer.

Browse all componentsRead the docs

Works with

  • React
  • Next.js
  • TypeScript
  • Tailwind CSS

CSS 3D transform components

These use CSS transform, perspective and preserve-3d only: no renderer, no shader compilation, and nothing to download beyond the component itself.

WebGL and React Three Fiber components

These load a renderer and compile shaders before their first frame. Interactive 3D Globe runs on React Three Fiber, so test it on a mid range phone before it ships.

3D text effects and 3D cards

Depth for type and small surfaces: letters that flip or ripple in CSS 3D, a portrait carousel on a curved wall, and a spinning globe card.

WebGL effects without 3D geometry

Shader effects that render on the GPU but stay flat: liquid metal and glass, flame, grain and fluted glass. They cost the same renderer start up as the 3D pieces above, so the same mid range phone test applies.

CSS 3D or WebGL: how to choose for a React project

Most things people call a 3D component in React are not running a 3D engine. A card that tilts toward the cursor, a book that opens, a stack that fans out: all of that is CSS 3D transforms. Set a perspective on the parent, set transform-style to preserve-3d on the child, then rotate with rotateX and rotateY. The browser composites the result on the GPU, it costs nothing to load, and it falls back to a flat layout where transforms are unsupported.

CSS perspective is the setting that most often makes a 3D effect look wrong. It is the distance from the viewer to the z equals zero plane, so a small value such as 400px gives a strong, almost fisheye distortion, and a large value such as 2000px flattens the effect until it barely reads. Set it on the container rather than on each transformed element, otherwise every child gets its own vanishing point and the group stops looking like one scene.

The CSS 3D components here cover the common shapes. Split-Flap Display flips real panels like a station board. Interactive 3D Book opens on click and turns its pages on a hinged flip, and Animated 3D Folder tilts toward the cursor and lifts its files into a stepped index. Card Stack Carousel, Fan Hover Card Stack and Scroll Stack arrange cards in depth. iPhone Mockup and Tactile Keyboard are objects built from transformed planes, and Refraction Glass Container warps the pixels behind a card with an SVG displacement filter. None of them ships a renderer.

You need WebGL when the surface has to be computed per pixel. A globe with an atmosphere, a lit sphere or a fluid orb cannot be expressed as rotating flat panels, because they depend on lighting across the whole surface. That is the line: if you can describe the effect as moving rectangles, CSS will do it, and if you have to describe it as light, you need a renderer.

In React the usual renderer is Three.js through React Three Fiber, which lets you write a 3D scene as components. Interactive 3D Globe is built that way, on React Three Fiber and drei. ChatGPT Orb and Siri Orb take a lighter route and draw their surface in a shader rather than a full scene, which keeps them far smaller than a general 3D setup while still needing WebGL.

The cost gap is not subtle. A CSS 3D component animates the moment the stylesheet parses. A WebGL component loads a renderer, compiles its shaders and only then paints, which on a mid range Android phone is a visible pause. That pause is fine three screens down and a real problem above the fold, where the component becomes the element Google times for Largest Contentful Paint.

Whatever you pick, respect reduced motion. Continuous rotation and parallax are common motion sickness triggers, and the browser already reports when someone has asked for less movement. Everything here reads the prefers-reduced-motion media query and settles into a composed static state rather than removing itself, so the component still shows what it is without moving.

Frequently asked questions

Put perspective on a parent element, set transform-style to preserve-3d on the child, and animate rotateX, rotateY or translateZ on that child. In React that is ordinary inline styles or Tailwind classes, plus a state or pointer handler to drive the angle. No library is required, which is why most of the 3D components on this page ship as a single file.

Usually not. Card tilts, flipping panels, opening books, perspective grids and device mockups are all CSS transforms with perspective and preserve-3d, which ship no extra JavaScript at all. Three.js, usually through React Three Fiber, earns its weight when the effect depends on per pixel lighting or distortion, such as a globe with an atmosphere. Interactive 3D Globe is built that way, on React Three Fiber and drei. Of the 3D components in this library, most are pure CSS.

It sets how far the viewer is from the 3D scene, which controls how strong the depth looks. A small value exaggerates depth and a large value flattens it. Values between about 800px and 1200px suit most card and panel effects, and the value belongs on the container so every child shares one vanishing point.

Yes. Transform and opacity are composited on the GPU and skip layout and paint entirely, which is why a CSS 3D card stack holds 60fps while animating width or top would not. This is also why the components here animate transform rather than position properties, even where the visual result would look similar.

The CSS based ones will not, because they add no runtime dependency and animate on the compositor. The WebGL ones will, because a renderer has to load and shaders have to compile before the first frame appears. If a WebGL component sits above the fold, put a static image behind it as a poster or move it below the fold so it is not the element that gets timed.

The CSS 3D components work everywhere transforms are supported, which is every current browser including iOS Safari. The WebGL ones need a working WebGL context, which is close to universal now but degrades to a static fallback where it is missing or where the device reports low power. Test the WebGL ones on a real mid range phone rather than a desktop throttled in DevTools, because shader compilation time is the part that does not simulate well.

Where to go next