An interactive Three.js 3D scene builder rendering layered UI panels in a parallax WebGL stage with GSAP animations and real-time Lil-GUI controls.
Welcome to Scene UI, a high-performance WebGL-based 3D scene composition tool designed for Obsidian using Datacore. It renders layered UI panel mockups as Three.js planes in a parallax stage, driven by real-time GSAP animations and a fully configurable Lil-GUI controls panel — all cached locally so it works offline after first load.
To start trying Scene UI today:
- Download the Repository: Clone or download this repository directly into any folder inside your Obsidian vault.
- Install Datacore: Ensure you have the Datacore plugin installed and enabled in Obsidian.
- Open the Entry Note: Open the
SCENE UI.mdnote inside Obsidian to launch the component!
- Ten Configurable Layers: Background, sidebar, header, charts, cards, table, notification, and floating button panels rendered as Three.js
PlaneGeometrymeshes. - Mouse-Driven Parallax: Smooth rotation tracking following the cursor for a depth-of-field illusion.
- GSAP Fly-in Animation: Every layer launches from a randomized origin position and rotates into place with elastic easing.
- Lil-GUI Control Panel: Live adjust background color, global scale, animation duration, tilt angles, and border radius.
- Per-Layer Controls: Move, scale, and opacity-adjust each individual layer independently.
- Image Upload: Replace any layer's color panel with a real image via drag-and-drop file upload.
- Host-Native Theme Adaptability: Control panel, borders, and text automatically match Obsidian's active theme using native CSS variables.
- Immersive Full-Tab Mode: Hides the Obsidian status bar and view footers for an edge-to-edge canvas experience.
- Local CDN Caching: Three.js, GSAP, and Lil-GUI are fetched once and cached under
data/cache/scripts/for offline use. - HMR Reload Daemon: A polling agent watches
data/mcp_commands.jsonfor hot-reload triggers from external tools.
The package exposes the following compiled files:
| File | Description |
|---|---|
| SCENE UI.md | The main entry point leaf designed to be loaded inside Obsidian panes. |
| src/index.jsx | Main bootstrap application loader and polling invalidation daemon. |
| src/App.jsx | The view coordinator loading dependency modules and handling DOM reparenting. |
| src/components/SceneComponent.jsx | The core WebGL 3D scene component using Three.js, GSAP, and Lil-GUI. |
| src/styles/styles.jsx | Helper styling sheet mapped to Obsidian native CSS variables. |
| src/utils/domUtils.jsx | DOM helper utilities for ancestor and child class traversal. |
| src/utils/LoadScriptUpgrade.js | Self-contained ESM/UMD script loader with local vault cache support. |
| data/mcp_commands.json | Local polling payload for HMR invalidation. |
| METADATA.md | Packaging manifest outlining indexing, target, and security configurations. |
| CONTRIBUTION.md | Contributor architecture standards and local development guidelines. |
| LICENSE.md | MIT open-source license. |
| Static Mockup | Interactive 3D Stage |
|---|---|
 |
|
The visual and mathematical core of the procedural light flow and line segments geometry in this project was ported and adapted from a creative experiment originally published on CodePen.
- beto.group