3D Web Design Examples

What are these 3D web design examples examples?

They are 10 ready-made, animated web elements built around 3D web design examples: interactive 3D and immersive web elements: depth, parallax, perspective and light, drawn live in a small file instead of a heavy WebGL scene. Each one is a small ExodeUI file with its own motion, a hover response, a tap action and editable keyframes. Every colour, label, number and motion setting is a runtime input, so you can restyle it or feed it live data without editing the file.

All 10 3d & immersive elements

How to add a 3d & immersive element to your site

1. Open an element above and set its text, colours and motion, or keep the defaults.
2. Download the .bexode file (or the customized .exode) and put it in your public folder.
3. Install the runtime with npm i exodeui.
4. Render it with ExodeUICanvas and pass your text, numbers and colours as inputs.

import { ExodeUICanvas } from 'exodeui';

export function HolographicPassElement({ data }) {
  return (
    <ExodeUICanvas
      src="/ui-trends/files/immersive-3d/01-holo-pass.bexode"
      autoPlay
      style={{ width: 600, height: 400 }}
      inputs={{
        holder: data.holder,
        number: data.number,
        // every colour is an input too, for example a brand accent
        ...data.theme
      }}
    />
  );
}

Frequently asked questions

Do these 3D elements need WebGL or Three.js?

No. Each one is a small ExodeUI file drawn on a 2D canvas with real perspective maths, so it loads fast and runs in the same runtime as the rest of your UI. Use a full 3D engine when you need real meshes, lighting and models.

Will they slow my page down?

Each compiled .bexode file is a few kilobytes and only one canvas runs per element. As with any animation, keep the number of elements on screen small and pause the ones that scroll out of view.

Can I use my own colours and text?

Yes. Every colour, label and number is a runtime input. Change them in the customizer above or pass them from your code through the inputs prop.

How do I customize these elements at runtime?

Every colour, label, number and motion setting is a state machine input. Pass values through the inputs prop in React (or the matching prop in Vue and React Native) and the element updates while it runs.

What is the difference between .exode and .bexode?

.exode is the editable JSON file you open in ExodeUI. .bexode is the compiled file you ship with a runtime; it is much smaller and keeps the same inputs and motion.

More from ExodeUI