# Lume: HTML for interactive animated 3D graphics

**URL:** <https://discourse.opensourcedesign.net/t/lume-html-for-interactive-animated-3d-graphics/3697>\
**Category:** Interaction design\
**Created:** [December 4, 2023, 10:47pm UTC](https://discourse.opensourcedesign.net/t/lume-html-for-interactive-animated-3d-graphics/3697 "2023-12-04T22:47:39Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.opensourcedesign.net/trusktr/32/3106_2.png) [@trusktr](https://discourse.opensourcedesign.net/u/trusktr)\
**Post date:** [December 4, 2023, 10:47pm UTC](https://discourse.opensourcedesign.net/t/lume-html-for-interactive-animated-3d-graphics/3697/1 "2023-12-04T22:47:39Z")

</div>

Hello! I’m hoping to make interactive designs (2D or 3D) easier to achieve in the web. The way that I’m doing that with [Lume, HTML elements for 3D rendering](https://lume.io/) (compatible with React, Vue, Svelte, Solid.js, and all the other web frameworks by virtue of being HTML elements).

> **[GitHub - lume/lume: Create 3D web applications with HTML. Bring a new depth...](https://github.com/lume/lume)**
>
> Create 3D web applications with HTML. Bring a new depth to your DOM! - GitHub - lume/lume: Create 3D web applications with HTML. Bring a new depth to your DOM!

In the future there will be a no-/low-code studio that outputs human-friendly (3D) HTML code, aiming to make it easy for designers to no only create 3D experiences (alternative to [https://spline.design](https://spline.design)), but to output developer-friendly code that can be expanded upon easily (Spline’s code output is more of a magic black box, difficult to work with).

Here’s the “hello world” example (a small Earth scene):

> **[LUME - 3D HTML elements](https://docs.lume.io/examples/hello-world/)**
>
> 3D HTML elements for performant animated experiences.

The closest alternatives are A-Frame, and react-three-fiber. Lume is similar to A-Frame because it is custom elements, but closer to react-three-fiber because it has templating and reactivity for creating higher-level components out of other components (A-Frame has no reactivity or templating). A-Frame and react-three-fiber currently have a bigger ecosystem of libraries, but the foundation on which Lume is built will enable a rich ecosystem compatible with all web frameworks.

Lume is powered by Solid.js for reactivity and templating, and Three.js for rendering with additional features added.

Stay tuned!

* * *

Speaking of Open Source Design, there are lots of things that could use some design love, for example branding and identity for various of Lume’s libraries like `element-behaviors`, `@lume/element`, `classy-solid`, etc. Please reach out if interested!

---

<div class="post-metadata">

**Author:** ![nim](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.opensourcedesign.net/nim/32/2142_2.png) [@nim](https://discourse.opensourcedesign.net/u/nim)\
**Post date:** [December 6, 2023, 9:12pm UTC](https://discourse.opensourcedesign.net/t/lume-html-for-interactive-animated-3d-graphics/3697/2 "2023-12-06T21:12:01Z")

</div>

Hello! Welcome to the community 👋

Your project seems super cool! Since you mentioned you are looking for design help, you might also find posting in the [job postings category](https://discourse.opensourcedesign.net/c/job-postings/) on the forum helpful. It’s for paid jobs as well as volunteering opportunities! 🙂
