whatisgithub

What is html-light-demo?

jinruozai/html-light-demo — explained in plain English

Analysis updated 2026-05-18

43TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

In one sentence

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.

Mindmap

mindmap
  root((repo))
    What it does
      HTML in Three.js canvas
      Physics-based spotlight
      Interactive lamp controls
    Tech stack
      Three.js
      React
      TypeScript
      Vite
    Interactions
      Pull and aim lamp
      Adjust beam angle
      Cycle light color
    Audience
      Frontend developers
      Three.js learners

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Try the live demo in a browser to interact with the physics-based light and HTML surface.

USE CASE 2

Study the code as an example of rendering real HTML content inside a Three.js WebGL scene.

USE CASE 3

Learn how a constrained Verlet solver can simulate realistic pendulum motion in the browser.

USE CASE 4

Use the project as a starting point for building interactive lighting effects with React and Three.js.

What is it built with?

TypeScriptReactThree.jsVite

How does it compare?

jinruozai/html-light-demofberrez/quietdash.comflaviojmendes/dinamos
Stars434343
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyhardmoderate
Complexity2/54/53/5
Audiencedevelopervibe coderdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

Requires Node.js 22.13 or newer to run locally, a hosted live demo is also available with no setup.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

So what is it?

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.

Copy-paste prompts

Prompt 1
Walk me through cloning and running HTML-Light-Demo locally with Node.js.
Prompt 2
Explain how three-html-render lets HTML content appear inside a Three.js WebGL canvas.
Prompt 3
Explain how a constrained Verlet solver creates the swinging lamp motion in this project.
Prompt 4
Show me how the mouse controls for pulling, aiming, and recoloring the lamp are implemented.

Frequently asked questions

What is html-light-demo?

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.

What language is html-light-demo written in?

Mainly TypeScript. The stack also includes TypeScript, React, Three.js.

What license does html-light-demo use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is html-light-demo to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is html-light-demo for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.