Skip to content

Components · 3

3D

React Three Fiber scenes in Arise UI colors. They read the live theme tokens, pause off screen, and load three.js only when needed.

Vault scene

Interactive 3D vault for heroes and empty states. It tilts toward your pointer; click the door to open it.

  • Float 1.1Hz
  • Pointer tilt: damped
  • Door swing: damped spring
  • Dial spins up
import { VaultScene } from "@/components/three";

Property model

Occupancy at a glance: every unit colored by status. Hover a unit for details, drag to turn the building.

  • Floors rise in sequence
  • Idle turn 0.18 rad/s
  • Hovered unit glows and slides out
import { PropertyModel } from "@/components/three";

Rent bars 3D

Rent collected per month as 3D bars. Hover a bar for its value; screen readers get a table.

  • Bars grow 700ms, 60ms apart
  • Gentle sway
  • Hover lift
import { RentBars3D } from "@/components/three";