Build performant 3D user interfaces for Three.js using @react-three/fiber and yoga

• higher performance (GPU + CPU)
• no suspense (similarly to html/css images and texts don't suspend)
• objects are nested for correct event propagation
• no default animations
• complete freedom to use R3F inside of UI => ...
• better scroll experiences (scrollbar + overscroll)
• overall DX improvements (hover, responsive, ...)

TODO Release

• fix bug: interaction panel disappear unmount and mount
• add shadcn components
• cli for kits
• add apfel components
• Content "measureContent" flag => allow disabling content measuring and scaling
• support for visibility="hidden"
• input
• Label
• decrease clipping rect when scrollbar present

TODO Later

• on demand rendering to save battery for UI only apps / rendering to render targets
• upgrade to yoga2.0
• virtual lists (support thousands of elements in a list by using fixed sizes and not using yoga)
• option to render to seperate render targets depending on element type (e.g. render text to high quality quad layer for WebXR)
• scrollIntoView
• tailwind colors (with option to support dark mode)
• Instancing for icons

Limitations

• nested clipping with rotation in z-axis (the clipping area can become more complex than a rectangle)

pnpm install
pnpm -r inline-wasm pnpm -r convert
pnpm -r generate
pnpm -r build

go to examples/dashboard and run pnpm dev to view the example dashboard