DeepUI for 3D

3D components for React

DeepUI is a library of ready-to-use 3D scenes for your landing pages. Pick a scene, tune it live, then copy the code straight into your Next.js app. No WebGL expertise required.

Browse the components→

Google
Roastea
Pulsive Studio
Webflow
Malt

Customize

Dozens upon dozens of adjustable parameters.

ALMRJSKT

+2k

Customize

Make your
business unique with deep design.

Welcome inside

Step into
the third dimension.

How it works

From idea to a living interface in three steps.

01
Pick a scene
Browse dozens of 3D scenes built for landing pages: heroes, backgrounds, objects.
02
Tune it live
Adjust colors, materials, motion and camera with live controls until it fits your brand.
03
Ship it
Copy the generated code into your Next.js app. No WebGL setup, no extra config.

Start building→

The library

Every scene.
Ready to drop in.

Each tile below is a live scene from the library, running in your browser right now. Hover them.

01 — ScrollHover to align

Scroll-driven scenes

Objects that align, morph and open up as your visitors scroll.

02 — FieldsHover to speed up

Chrome fields

Hundreds of instanced shapes, a single draw call.

03 — LoopsHover to lean in

Knots & loops

Parametric geometry, every curve tunable live.

04 — ShardsHover to break it

Low-poly shards

Hard facets, soft reflections.

05 — WavesMove across

Kinetic waves

A grid of chrome that ripples under your cursor.

+30 componentsExplore
the library→

Live playground

Make it yours.
In real time.

Every scene ships with its controls. Drag a slider: that exact value is the prop you paste in your code. No shader to write, no WebGL to learn.

<LiquidChrome />Live

Move your cursor over itLiquid chrome

Size

Distortion

Turbulence

Flow speed

Cursor influence

Reflections

Roughness

Iridescence

Color#ffffff

Your code

<LiquidChrome
  size={0.6}
  distortion={0.02}
  frequency={1.4}
  speed={0.1}
  cursor={1}
  reflection={0.75}
  roughness={0.06}
  iridescence={0}
  color="#ffffff"
/>

Built to perform