jinruozai/html-light-demo — explained in plain English
Analysis updated 2026-05-18
Try the live demo in a browser to interact with the physics-based light and HTML surface.
Study the code as an example of rendering real HTML content inside a Three.js WebGL scene.
Learn how a constrained Verlet solver can simulate realistic pendulum motion in the browser.
Use the project as a starting point for building interactive lighting effects with React and Three.js.
| jinruozai/html-light-demo | fberrez/quietdash.com | flaviojmendes/dinamos | |
|---|---|---|---|
| Stars | 43 | 43 | 43 |
| Language | TypeScript | TypeScript | TypeScript |
| Setup difficulty | easy | hard | moderate |
| Complexity | 2/5 | 4/5 | 3/5 |
| Audience | developer | vibe coder | developer |
Figures from each repo's GitHub metadata at analysis time.
Requires Node.js 22.13 or newer to run locally, a hosted live demo is also available with no setup.
HTML Light Demo is an interactive web experiment that combines a real HTML interface with a 3D scene built in Three.js, a JavaScript library for creating 3D graphics in a browser. Using a package called three-html-render, the project renders actual HTML content inside a WebGL canvas, then lights that HTML surface with a simulated hanging spotlight that behaves according to physics rather than a fixed animation. The README describes it as an unofficial recreation of a concept and art direction originally created by another developer, credited as kaolti, built by this author for learning and demonstration purposes rather than as an official continuation of that person's work. The lamp's motion is driven by what the README calls a constrained Verlet solver, a physics simulation method for realistic swinging and pendulum movement. A visitor can grab and pull the lamp with the left mouse button and let it swing freely on release, drag with the right mouse button to change the angle of the light beam, right click to cycle through different light colors, and double click to reset the lamp to its starting position. The README also states the demo pauses its rendering loop when the scene becomes still, to avoid using resources unnecessarily while idle. The project is built with the three-html-render package for the HTML-in-canvas rendering, Three.js for the underlying 3D scene and lighting, React and TypeScript for the interface and application logic, and Vinext together with Vite for the development and build process. Running it locally requires Node.js version 22.13 or newer, after which cloning the repository, installing dependencies, and running the development server starts a local copy of the demo. The README also lists separate commands for linting and running tests. A live version of the demo is hosted and linked directly from the README for anyone who wants to try it in a browser without setting up the project locally. The project is released under the MIT license, and the README credits the original creator by name while making clear this implementation is independent and not officially affiliated with them.
An interactive Three.js demo that renders real HTML inside a 3D scene, lit by a physics-simulated swinging spotlight users can pull, aim, and recolor.
Mainly TypeScript. The stack also includes TypeScript, React, Three.js.
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.
Setup difficulty is rated easy, with roughly 30min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
Verify against the repo before relying on details.