PRO

Model Menu 3D

A fullscreen menu overlay built around a lit 3D model: a toggle fades the panel in, a GLB object behind the links reacts to the cursor with eased parallax rotation and a pointer-tracked point light, and each menu label fills with a left-to-right gradient wipe on hover.

Component

A Study in Time and Texture

Install
npx shadcn@latest add https://ui.aryank.space/r/model-menu-3d.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
modelSrcstringBLANK-hosted GLBThe 3D object framed behind the menu links.
menuItemsstring[]8 menu labelsLinks shown when the overlay is open.
canvasBgstring"#1a1a1a"Scene background behind the model.
Customize
menuItemslinks

The menu labels with the gradient hover wipe.

modelSrc / heroImageasset-url

The GLB object and the hero background.

Dependencies
gsapthree