chibi
Try the interactive keyboard

A scene you can
play with.

Hover the cube to change its look. Click it to start an animation, or click the ring to lift it. Try the controls below to change the scene yourself.

Inspect scene events

Events sent from the scene to the page as you interact.

waiting for events…
Learn how interactions work
loading scene…

Next demo

Make a keyboard your own

Choose colors, add logos, and resize the layout. Every change appears in 3D.

Documentation

Put a scene on your site

Export from the editor, render in React, and connect interactions to your app.

Same file, second instance

A separate <ChibiScene>with its own engine — its state doesn't bleed into the hero above. Toggle its props and watch the JSX:

<ChibiScene
  src="/scenes/hero.chibi.zip"
  orbit
  interactive={false}
  className="h-64"
/>