Forem: Joe Pea

Write concise Custom Elements for React, Vue, Svelte, Solid, etc. Write once, use everywhere, type checked!

Joe Pea — Tue, 13 Jan 2026 07:40:01 +0000

I'm proud to release @lume/element v0.17.0.

This release adds support for Solid.js memos and effects for Custom Elements via decorator syntax.

Concisely write custom HTML elements, type checked in React, Vue, Svelte, Solid.js, React, Stencil, and more.

Here's a glance at what elements authored with @lume/element look like in JavaScript:

import {Element, element, numberAttribute, eventAttribute} from '@lume/element'
import {signal, memo, effect, startEffects, stopEffects} from 'classy-solid'

@element
class FurryDog extends Element {  
  @numberAttribute years = 7
  @eventAttribute onwoof = null

  @memo get dogYears() {
    return this.years * 7
  }

  @effect #log() {
    console.log('dog years:', this.dogYears)
    this.dispatchEvent(new Event('woof')) // bark any time age changes
  }

  template = () => <div>dog years: {this.dogYears}</div>

  css = `:host {color: cornflowerblue}`
}

const dog = document.createElement('furry-dog')
document.body.append(dog) // initially logs "dog years: 49"

dog.years = 8 // logs "dog years: 56"

// ...later, effects cleaned up when removed from DOM...
dog.remove()

// ...later, effects re-started if element reconnected...
document.body.append(dog)

Use the custom element in HTML, or declarative framework templates.

HTML:

<furry-dog years="5" id="dog" onwoof="console.log('woof!')"></furry-dog>
<script>
  dog.years = 6
</script>

React, Preact:

const [age, setAge] = useState(3)
return <furry-dog years={age} onwoof={() => console.log('woof!')}/>

Solid.js JSX:

const [age, setAge] = createSignal(2)
return <furry-dog years={age()} on:woof={() => console.log('woof!')} />

Vue:

<script setup>
  const age = ref(5)
</script>
<template>
  <furry-dog :years="age" @woof="console.log('woof!')" />
</template>

Svelte:

<script>
  let age = $state(4);
</script>
<furry-dog years={age} onwoof={() => console.log('woof!')} />

Type checking is available for all the above frameworks, including in the templates of the elements defined with @lume/element (templates are powered by (@ryansolid's) Solid.js). See the docs on how to connect your element definition to the type systems of each framework, and the various examples.

lume / element

Fast and simple custom elements.

@lume/element

Easily and concisely write Custom Elements with simple templates and reactivity.

Use the custom elements on their own in plain HTML or vanilla JavaScript, or in Vue, Svelte, Solid.js, Stencil.js, React, and Preact, with full type checking autocompletion, and intellisense in all the template systems of those frameworks, in any IDE that supports TypeScript such as VS Code.

Write your elements once, then use them in any app, with a complete developer experience no matter which base component system your app uses.

`npm install @lume/element`

💡Tip:

If you are new to Custom Elements, first learn about the basics of Custom Element APIs available natively in browsers. Lume Element simplifies the creation of Custom Elements compared to writing them with vanilla APIs, but sometimes vanilla APIs are all that is needed.

Live demos

Lume 3D HTML (The landing page, all of Lume's 3D elements, and the live code editors…

View on GitHub

HTML's Graphical 3D Future

Joe Pea — Tue, 30 May 2023 09:41:17 +0000

For a few years now, one of my free-time projects has been to start answering the question "what would HTML elements with 3D powers be like?"

The project is Lume, working towards a 1.0 release. Lume provides a set of HTML elements for 3D rendering, built on three.js for rendering, with a system for defining new custom HTML elements with reactivity and templating powered by Solid.js.

Here is Lume's "hello world" example.

Paste that code into a CodePen pen, and you will have a demo that simply works (no build tools required!):

In this Disco Helmet example, remove the enable-css="false" attribute, inspect the elements in your browser devtools, hover on a <flickering-orb> element, and notice that the browser will natively show you the position of the 3D object in the view, and that we can change the color of a light right from the inspector:

We removed the enable-css="false" attribute (it defaults to true) to make Lume apply CSS 3D transforms to the elements. Lume's CSS transforms are aligned with the WebGL transforms, which is what tells Chrome devtools where WebGL objects are located on the screen. This is nifty for development and debugging! We didn't have to install additional devtools like we would with React, Vue, Svelte, etc. Custom HTML elements are simply supported out of the box by browser devtools!

With CSS rendering enabled using enable-css="true", we get the ability to combine today's standard built-in HTML elements with Lume's 3D elements. The next demo shows the browser's built-in <button> elements mixed with Lume's WebGL rendering. Right click and inspect the buttons!

This is powerful because it means we can use all of today's HTML/CSS abilities inside of a 3D space with additional graphical powers, gaining accessibility of 3D content.

3D content made with Lume is not only more accessible to humans, but also to robots such as

screen readers
search engines
automation and design tools
and AI

Here is Lume in the wild, in an app called Neo Fairies that gives players the ability to own characters in a fantasy-punk open world:

Besides 3D elements, Lume also provides Lume Element, a system for defining custom elements. The next demo shows a <name-card> element that has no relation to Lume's 3D elements. It is a custom element that is composed only of today's built-in elements. None of Lume's 3D features are loaded in the next demo, only the necessary pieces for making Custom Elements are imported and downloaded:

In a following article, I'll describe additional features that Lume builds on top of Three.js, as well as more details on parts of Lume's road map which include:

3D elements for geospatial globe/planet rendering powered by lume/harp.gl
AR/VR/MR/XR controls
3D-oriented UI component library with the ability to transition from 2D UIs into 3D XR UIs
HTML elements for applying physics to objects
2D and 3D layouts
Server-side rendering of 3D scenes for simple resumability and link sharing of 3D experiences
Compilation of Lume's TypeScript codebase to WebAssembly and native, including Three.js and Solid.js (more on this later!)
A no/low/full-code creative studio and IDE with AI assisted asset and code generation
And more...

I'm excited to see where HTML 3D can go. We have some fun work ahead!

Docsify.js single-page apps are indexable on Google!

Joe Pea — Sun, 29 Jan 2023 02:11:44 +0000

I recently got LUME docs, a single-page app, on real URLs instead of hash-based routing.

As an example, the Docsify site currently uses hash-based routing:

https://docsify.js.org

When you click an item in the sidebar, the URL will change to something like https://docsify.js.org/#/quickstart with a /# in the URL.

Hash-based Routing

Since the old days, anything after the hash was dynamically modifiable with JavaScript and people took advantage of this to implement "single-page apps" with URL navigation that way. Clicking on a link would dynamically update the URL hash and the page's DOM without actually re-loading the whole site.

History-based Routing

Eventually browsers added the History API to make it possible to dynamically modify normal URLs without using a hash. As an example, clicking on a link in the LUME docs sidebar will take you to a hashless URL like https://docs.lume.io/guide/scene-graph.

SEO

Using Docsify's routerMode: "history" option switches from hash-based routing to history-based routing, and Google can see and index the dynamically-loaded content.

Here is a Google search result for specific text that Google has so far indexed from the LUME site.

Google has not indexed everything on the site yet as of this writing, and it is a slow process; I just started over a week ago.

In Google Search Console, I can see what Google sees:

Yay!

This is awesome!

It means we can publish static websites that are single-page apps, without needing any build steps, without needing any build tools. The LUME docs site is just an HTML file with JavaScript, served from Vercel's static web hosting. There is no backend, and none of the HTML pages are pre-built.

Thinking about Linode + dev.to Hackthon?

Joe Pea — Sun, 29 Jan 2023 01:29:36 +0000

I wouldn't join it. When my payment method failed and I missed the emails, Linode deleted some of my content and I could not get it back.

That's not very good service.

A few reasons why I love Solid.js

Joe Pea — Sun, 04 Jul 2021 18:28:55 +0000

Solid is such an amazing reactive declarative tool for composing and manipulating DOM with simple reactive declarative templates! By far the best component system that currently exists for web. The Solid dev experience is really good, and Ryan is so meticulous with performance: you'll be on the shoulder of a giant that can go anywhere.

Here are some reasons why.

The Solid playground sets a new high bar for all other frameworks by not only making it very easy to share snippets of how to do things with Solid, but by explaining (via it's compile output) why and how Solid is super fast at reactive templating despite the clean and simple declarative API.

Solid's magic is right here in plain sight, in the visible compile output of any playground example:

https://playground.solidjs.com

This sort of openness is the type of thing that can change a technology segment for the better.

Not only is what you see in the playground open, but Solid openly invites reactive library developers to challenge boundaries: Solid's JSX compiler allows reactive authors to power JSX templates with their own reactive primitives. This invites any author to challenge Solid at its own speed, and sets up a foundation for open innovation. See that here:

https://github.com/ryansolid/dom-expressions

Solid effectively changes the component world because it is so open, that other frameworks will have no choice but to adapt or else fall behind in the dust of innovation. Just like React was impactful in it's debut, Solid is the next big move in how reactive declarative UI trees can be manipulated with raw speed while not sacrificing dev experience.

As an example of no sacrifice of dev experience, in Solid we can animate anything declaratively by passing animated values directly into templates and modifying any state as we wish, even in rapid animation loops (like loops found in games and other rich experiences).

In contrast, animating state or props in an animation loop in a React component is considered a bad practice and can easily lead to performance issues. For example, react-three-fiber (React components that render with Three.js for 3D experiences such as games) mentions specifically not to do this in it's Performance Pitfalls guide:

Never, ever, setState animations!
Avoid forcing a full component (+ its children) through React and its diffing mechanism 60 times per second.

Solid makes declarative templating a first class citizen without the performance caveats. Write everything declaratively and rest assured it'll be compiled to an essentially-vanilla fast equivalent. Animate props at 60fps as much as you want in Solid!

All parts of Solid are independently reusable, which makes it possible to build a variety of different types of projects with it, and due to the simplicity of Solid's reactive system it is very easy to hook any other state system into Solid components. For example see how simple Storeon's Solid bindings are:

https://github.com/storeon/solidjs

In contrast, one can not independently import React's state system and use it standalone, and one often has a difficult time integrating external state systems into React components (just ask the Mobx team what sorts of problems they faced with double rendering, for example).

On top of things being more difficult in React, they are simply more verbose and difficult to understand with the strange Hooks rules that often trip up newcomers in a way that is much less than desirable. You'll write more in React, and you'll have less-understandable code.

Solid is very modular: one can use its reactive primitives while skipping out on declarative templating (for example) to create a reactive state machine, or to create a reactive backend server, both of which could have nothing to do with making UIs. Such projects only need to import APIs like createSignal, createStore, or createMutable and leave everything else behind.

In Solid, DOM is a first-class citizen: the DOM is not hidden behind an abstract virtual dom and therefore is fully accessible. It's just DOM! JSX expressions give you elements exactly as you would intuitively expect, which means it is very easy to interop with any DOM library you can think of. In the following example we simply pass a div created from a JSX expression to jQuery, while the content of the div's template is reactive:

// Make a reactive variable (signal):
const [count, setCount] = createSignal(0)

// Increment the count value every second:
setInterval(() => setCount(count() + 1), 1000)

// Use count in a template:
const div = <div>The count is: {count()}</div>

// The JSX expression gave us back the *real* div element,
// now we can pass it to jQuery or any other DOM API:
jQuery(div).whatever()

console.log(div instanceof HTMLDivElement) // true!

// Even compose the DOM:
const info = <section>Info: {div}</section>

console.log(info instanceof HTMLElement) // true!

You see! The div is... an actual div! It's just DOM! This makes things easy! We have two benefits here:

We simply got a div and can do any regular DOM thing we want with it.
The div's content is updated automatically any time the value of count changes.

We get the best of both worlds: DOM and reactive declarative templating, all in one!

Because of Solid's simple reactive and fast templating, plus the fact that it's just DOM!, Solid is the perfect fit for use with custom elements or any other DOM-based project.

To contrast, LitElement's lit-html template expressions don't return DOM back to you. Lit is a DOM library that gets in the way more than it should. For example:

import {html} from 'lit-html';

const div = html`<div>Hello World</div>`;

console.log(div instanceof HTMLDivElement) // false!

jQuery(div).foo() // ERROR

As an example of how Solid fits well with DOM projects, LUME Element, a system for making custom elements in a simple and concise way with reactive templating, uses Solid at its core:

http://github.com/lume/element

This results in being able to make custom elements with the speed of vanilla JS, without sacrificing experience, without the more difficult-to-maintain imperative code that would otherwise be required with initial plain vanilla JS.

LUME's 3D Webgl-powered HTML elements are simple, reactive, and fast (despite being written declaratively, because declarative templating should not ever be a performance issue!) thanks to Solid underneath.

Here's a 3D WebGL scene written in HTML:

https://codepen.io/trusktr/pen/dypwZNP

(LUME is still alpha, please complain about everything. :)

TLDR: Solid is the currently the best way to make composable UI components without sacrifice of dev experience (without limitations on when to use declarative templating, without complicated function scope rules, without unneeded verbosity). The API will be very easy to work with for anyone who knows DOM and would like to integrate with existing applications (f.e. legacy jQuery applications).

All this with the most speed as a bonus!

Knowing Ryan, he will keep Solid at the bleeding edge of performance and ability.

Like SSR for SEO and fast loading? Solid's has you covered.

Like TypeScript? Solid has you covered.

Like to write plain HTML with no build system? Solid has you covered! You can use the html template tag instead of JSX. Here's an example on CodePen:

https://codepen.io/trusktr/pen/eYWNrMJ

import html from 'solid-js/html'
import {createSignal} from 'solid-js'

const name = createSignal('Amadar')

// It's just DOM!
const div = html`<div>Hello name is ${name}</div>`

// ... change name later ...

jQuery(div).foo() // It works!

// Even compose the DOM:
const card = html`<section>Profile: ${div}</section>`

console.log(card instanceof HTMLElement) // true!

You need routing? You're covered:

https://github.com/rturnq/solid-router
https://github.com/mduclehcm/solid-router

You need CSS? You're covered:

https://github.com/solidjs/solid-styled-components
https://github.com/solidjs/solid-styled-jsx
Emotion has been ported to Solid (link not available yet)

Need a way to bootstrap a starter Solid application? There you go:

https://github.com/solidjs/solid-start

Solid is just too good, and it is all true!

Loosely coupled code: Babylon vs Three.js

Joe Pea — Wed, 26 May 2021 21:31:35 +0000

Hello! :)

A while back, I started a port of Three.js from JavaScript to AssemblyScript (an awesome TypeScript to WebAssembly compiler):

lume / glas

WebGL in WebAssembly with AssemblyScript

GLAS

WebGL in WebAssembly with AssemblyScript.

This is a work-in-progress port of Three.js, a JavaScript 3D WebGL library, into AssemblyScript.

Motivation

It'd be sweet to have a high-performing WebGL engine that runs in the web via WebAssembly and is written in a language that web developers are already familiar with: JavaScript, in the form of TypeScript (a superset of JavaScript with types).

Enter AssemblyScript, a toolchain that allows us to write a strictly-typed subset of TypeScript code and compile it to WebAssembly (an assembly-like language representing machine code) for speed.

Status

⚠️ ALPHA STATE

The project is currently in its very early alpha stages. We have an amazing group of programmers building the initial ASWebGLue library. This library allows AssemblyScript programs to call the browser's underlying WebGL interface. This is required before we are able to render anything to the screen…

View on GitHub

I was originally interested in porting Babylon because it is already written in TypeScript, so porting would be easier compared to taking a JavaScript codebase and adding types to it after refactoring the dynamic parts that TypeScript can't handle.

However, when I started to port Babylon classes, I soon realized that the classes in the library are highly coupled: importing Babylon’s Scene class means practically importing the whole Babylon library and instantiating many parts of the library (new This, new That, etc) even if those parts will never be used by your application.

Essentially, with Babylon you want the banana (f.e. Scene) and you get the Gorilla and the whole jungle (rest of the Babylon lib).

High coupling is something to be avoided when possible..

To get an understanding of this problem with respect to Babylon's codebase, take look at the import statements in Babylon’s scene.ts:

import { Nullable } from "./types";
import { Tools } from "./Misc/tools";
import { IAnimatable } from './Animations/animatable.interface';
import { PrecisionDate } from "./Misc/precisionDate";
import { Observable, Observer } from "./Misc/observable";
import { SmartArrayNoDuplicate, SmartArray, ISmartArrayLike } from "./Misc/smartArray";
import { StringDictionary } from "./Misc/stringDictionary";
import { Tags } from "./Misc/tags";
import { Vector2, Vector3, Matrix, TmpVectors, Vector4 } from "./Maths/math.vector";
import { Geometry } from "./Meshes/geometry";
import { TransformNode } from "./Meshes/transformNode";
import { SubMesh } from "./Meshes/subMesh";
import { AbstractMesh } from "./Meshes/abstractMesh";
import { Mesh } from "./Meshes/mesh";
import { IParticleSystem } from "./Particles/IParticleSystem";
import { Bone } from "./Bones/bone";
import { Skeleton } from "./Bones/skeleton";
import { MorphTargetManager } from "./Morph/morphTargetManager";
import { Camera } from "./Cameras/camera";
import { AbstractScene } from "./abstractScene";
import { BaseTexture } from "./Materials/Textures/baseTexture";
import { Texture } from "./Materials/Textures/texture";
import { RenderTargetTexture } from "./Materials/Textures/renderTargetTexture";
import { ImageProcessingConfiguration } from "./Materials/imageProcessingConfiguration";
import { Effect } from "./Materials/effect";
import { UniformBuffer } from "./Materials/uniformBuffer";
import { MultiMaterial } from "./Materials/multiMaterial";
import { Light } from "./Lights/light";
import { PickingInfo } from "./Collisions/pickingInfo";
import { ICollisionCoordinator } from "./Collisions/collisionCoordinator";
import { PointerEventTypes, PointerInfoPre, PointerInfo } from "./Events/pointerEvents";
import { KeyboardInfoPre, KeyboardInfo } from "./Events/keyboardEvents";
import { ActionEvent } from "./Actions/actionEvent";
import { PostProcessManager } from "./PostProcesses/postProcessManager";
import { IOfflineProvider } from "./Offline/IOfflineProvider";
import { RenderingGroupInfo, RenderingManager, IRenderingManagerAutoClearSetup } from "./Rendering/renderingManager";
import { ISceneComponent, ISceneSerializableComponent, Stage, SimpleStageAction, RenderTargetsStageAction, RenderTargetStageAction, MeshStageAction, EvaluateSubMeshStageAction, PreActiveMeshStageAction, CameraStageAction, RenderingGroupStageAction, RenderingMeshStageAction, PointerMoveStageAction, PointerUpDownStageAction, CameraStageFrameBufferAction } from "./sceneComponent";
import { Engine } from "./Engines/engine";
import { Node } from "./node";
import { MorphTarget } from "./Morph/morphTarget";
import { Constants } from "./Engines/constants";
import { DomManagement } from "./Misc/domManagement";
import { Logger } from "./Misc/logger";
import { EngineStore } from "./Engines/engineStore";
import { AbstractActionManager } from './Actions/abstractActionManager';
import { _DevTools } from './Misc/devTools';
import { WebRequest } from './Misc/webRequest';
import { InputManager } from './Inputs/scene.inputManager';
import { PerfCounter } from './Misc/perfCounter';
import { IFileRequest } from './Misc/fileRequest';
import { Color4, Color3 } from './Maths/math.color';
import { Plane } from './Maths/math.plane';
import { Frustum } from './Maths/math.frustum';
import { UniqueIdGenerator } from './Misc/uniqueIdGenerator';
import { FileTools, LoadFileError, RequestFileError, ReadFileError } from './Misc/fileTools';
import { IClipPlanesHolder } from './Misc/interfaces/iClipPlanesHolder';
import { IPointerEvent } from "./Events/deviceInputEvents";
import { WebVRFreeCamera } from "./Cameras/VR/webVRCamera";

That's a fairly long list for what a "Scene" represents, and I can see the whole list on my computer screen without scrolling.

In contrast, the Three.js codebase is much more loosely coupled, which to me is very attractive from a code authoring perspective, so I ended up choosing Three.js and accepting that I would perform more porting from JavaScript instead of from TypeScript, because I felt the end result would be cleaner.

As an example of Three’s lose coupling, here are the first few lines of Three’s Scene.js:

import { Object3D } from '../core/Object3D.js';

class Scene extends Object3D {

    constructor() {

        super();

        this.type = 'Scene';

        this.background = null;
        this.environment = null;
        this.fog = null;

Explore Three's code base, and you’ll see that classes try to be minimal and do only one thing well (or representing only one concept well).

After starting the port using Babylon, going back to Three.js felt pleasant due to the loose coupling. The Three.js codebase is clean.

If I had to choose to develop with, or extend from, one codebase or the other, I would choose Three.js because the loosely-coupled organization within the library makes code maintenance and extension easier, while allowing certain parts of the Three library to be used without pulling unneeded dependencies into an application.

I wanted to ask the Babylon community if anyone else there feels that Babylon's parts are too tightly coupled compared to, for example, Three.js, but my post was immediately hidden as "spam":

https://forum.babylonjs.com/t/high-coupling-in-the-bablyon-codebase-compared-to-three-js/21156/3

(You might not be able to see it if they permanently delete it).

In that thread, I asked

Has anyone else (especially on Bablyon’s team) thought about this difference between Babylon and Three.js? What are your thoughts on this? Are there any plans or desires to decouple the Babylon code base?

I was hoping to open a discussion on the topic, hoping it might light a fire for Babylon improvement, for everyone's benefit (having alternatives is always great).

Day 9 of 365: Beautiful cube with inertial rotation (live demo)

Joe Pea — Sun, 10 Jan 2021 02:09:03 +0000

Day 9 of 365: Live demo! Beautiful cube with inertial rotation.

I added fling ability to last demo. Fling to spin!

👇 @codepen

👇 Made with #LUME

lume / lume

GPU-powered 3D HTML. ✨🧊 <lume-box size="1 2 3">

A toolkit that simplifies the creation of rich and interactive 2D or 3D experiences.

Home · Documentation · Examples · Forum · Chat · Source

`npm install lume`

Features

LUME is composed of several packages that can be used individually, or together as a whole:

`lume` - HTML elements for rich graphics

HTML elements for easily defining rich and interactive 2D or 3D applications powered by CSS3D, WebGL, or a combination of both.

This package uses and re-exports features from the below packages.

`@lume/element` - System for defining HTML elements

This is a web component system that allows you to create new, fast, and performant HTML elements in a simple way. It provides the foundation for LUME's HTML elements, and a standard pattern for building new elements that extend the features of LUME.

`element-behaviors` - Mix functionalities onto HTML elements

This allows you to augment HTML elements with features called…

View on GitHub

topics: #codeart #webdev #3D #webgl #creativecode #newmediaart #webdesign #365DaysOfCode2021

Day 8 of 365: Beautiful rotatable cube (live demo)

Joe Pea — Sun, 10 Jan 2021 00:31:57 +0000

Day 8 of 365: A #beautiful rotatable #3D cube with #LUME.

Posting a new demo every day of 2021!

The demo makes a element. It applies rotation on mouse/finger move events.

The demo shows how to

Make a custom <codepen-cube> HTML element with with @lume/element.
How to use the element and assign the size of the cube via HTML attributes.
Position 6 flat square surfaces in the shape of a cube using LUME's HTML elements.
Observe mouse/finger movement in order to make it rotate.
Apply beautiful coloring.

Made with LUME:

lume / lume

GPU-powered 3D HTML. ✨🧊 <lume-box size="1 2 3">

A toolkit that simplifies the creation of rich and interactive 2D or 3D experiences.

Home · Documentation · Examples · Forum · Chat · Source

`npm install lume`

Features

LUME is composed of several packages that can be used individually, or together as a whole:

`lume` - HTML elements for rich graphics

HTML elements for easily defining rich and interactive 2D or 3D applications powered by CSS3D, WebGL, or a combination of both.

This package uses and re-exports features from the below packages.

`@lume/element` - System for defining HTML elements

`element-behaviors` - Mix functionalities onto HTML elements

This allows you to augment HTML elements with features called…

View on GitHub

topics: #codeart #creativecode #mediaart #graphics #webdev #creativecoding #CSS #webgl #webdevelopment

Tiny mini galaxy (live demo)

Joe Pea — Fri, 08 Jan 2021 17:56:33 +0000

While I write documentation for LUME, a 3D HTML toolkit, I will be posting demos that I create for the docs. I am posting one demo per day all 2021.

This demo is a tiny mini galaxy!

It shows the basics of the <lume-node> element, which is a primitive element for making a hierarchy in 3D space.

A <lume-node> element can contain child LUME elements. Each child LUME element transforms relative to its parent. A <lume-node> element can also contain any regular HTML content that will not be decorated with WebGL rendering.

For WebGL rendering you can use <lume-dom-plane> for mixing HTML content with WebGL content such as <lume-mesh>, <lume-gltf-model>, etc. More info will be landing in the docs!

Made with LUME:

lume / lume

GPU-powered 3D HTML. ✨🧊 <lume-box size="1 2 3">

A toolkit that simplifies the creation of rich and interactive 2D or 3D experiences.

Home · Documentation · Examples · Forum · Chat · Source

`npm install lume`

Features

LUME is composed of several packages that can be used individually, or together as a whole:

`lume` - HTML elements for rich graphics

HTML elements for easily defining rich and interactive 2D or 3D applications powered by CSS3D, WebGL, or a combination of both.

This package uses and re-exports features from the below packages.

`@lume/element` - System for defining HTML elements

`element-behaviors` - Mix functionalities onto HTML elements

This allows you to augment HTML elements with features called…

View on GitHub

topics: #CSS3D #HTML #JavaScript

Morphing spirals (live demos), 6 of 365

Joe Pea — Thu, 07 Jan 2021 17:53:03 +0000

I'm making one demo per day for 2021!

I took an old spiral demo of mine, and made two new spirals from it. All I had to do was modify a couple numbers, and the result was two distinct spirals. The code is short too!

Which spiral do you like more?

👇 Made with #LUME

lume / lume

GPU-powered 3D HTML. ✨🧊 <lume-box size="1 2 3">

A toolkit that simplifies the creation of rich and interactive 2D or 3D experiences.

Home · Documentation · Examples · Forum · Chat · Source

`npm install lume`

Features

LUME is composed of several packages that can be used individually, or together as a whole:

`lume` - HTML elements for rich graphics

HTML elements for easily defining rich and interactive 2D or 3D applications powered by CSS3D, WebGL, or a combination of both.

This package uses and re-exports features from the below packages.

`@lume/element` - System for defining HTML elements

`element-behaviors` - Mix functionalities onto HTML elements

This allows you to augment HTML elements with features called…

View on GitHub

topics: #365DaysOfCode2021 #webgl #html #css #creativecoding #creativecode #graphics #webdev

Updated 3D model element (live demo)

Joe Pea — Wed, 06 Jan 2021 04:57:37 +0000

I'm posting one demo per day all 2021!

I improved the previous demo by adding new attributes to the <lume-scene> element that give the rendering an "environment map" that reflects off of shiny surfaces in the scene.

This what it looks like now:

And this is what it looked like before:

The gist of it is you can write HTML like the following and you'll have a 3D model on your web site:

<lume-scene
    id="scene"
    webgl
    disable-css
    background="https://assets.codepen.io/191583/airplane-hanger-env-map.jpg"
    equirectangular-background="true"
    environment="https://assets.codepen.io/191583/airplane-hanger-env-map.jpg"
>
    <lume-point-light position="200 -200 200" intensity="1" color="white"></lume-point-light>
    <lume-ambient-light color="white" intensity="1.2"></lume-ambient-light>
    <lume-node id="cameraRig" rotation="0 200 0">
        <lume-perspective-camera size="0 0 0" position="0 0 1000" rotation="0 0 0" active></lume-perspective-camera>
    </lume-node>

    <lume-gltf-model
        id="model"
        src="https://rawcdn.githack.com/KhronosGroup/glTF-Sample-Models/c99173c645f47fae603dcb2e7263e656e265cf06/2.0/DamagedHelmet/glTF-Binary/DamagedHelmet.glb"
        size="2 2 0"
        scale="400 400 400"
    >
    </lume-gltf-model>
</lume-scene>

The demo is built with LUME, a software developer toolkit for making interactive 2D or 3D experiences with HTML. We're working towards its initial release.

lume / lume

GPU-powered 3D HTML. ✨🧊 <lume-box size="1 2 3">

A toolkit that simplifies the creation of rich and interactive 2D or 3D experiences.

Home · Documentation · Examples · Forum · Chat · Source

`npm install lume`

Features

LUME is composed of several packages that can be used individually, or together as a whole:

`lume` - HTML elements for rich graphics

HTML elements for easily defining rich and interactive 2D or 3D applications powered by CSS3D, WebGL, or a combination of both.

This package uses and re-exports features from the below packages.

`@lume/element` - System for defining HTML elements

`element-behaviors` - Mix functionalities onto HTML elements

This allows you to augment HTML elements with features called…

View on GitHub

topics: #webgl #threejs #html #css #webdev #javascript #365DaysOfCode2021

Ripple of flipping squares (live demo)

Joe Pea — Tue, 05 Jan 2021 08:55:05 +0000

I had limited time today, but still one demo per day! So I tweaked the #animation and colors of an old demo.

It uses only the CSS 3D rendering that LUME had at the time (back when it was called Infamous, and before it had any #WebGL features).

LUME's WebGL rendering abilities allow regular HTML content (div tags, span tags, etc) to be mixed with 3D content in the same 3D rendering space. Check out my previous posts for examples, and stay tuned for one new demo every day all 2021!

👇 Made with:

lume / lume

GPU-powered 3D HTML. ✨🧊 <lume-box size="1 2 3">

A toolkit that simplifies the creation of rich and interactive 2D or 3D experiences.

Home · Documentation · Examples · Forum · Chat · Source

`npm install lume`

Features

LUME is composed of several packages that can be used individually, or together as a whole:

`lume` - HTML elements for rich graphics

HTML elements for easily defining rich and interactive 2D or 3D applications powered by CSS3D, WebGL, or a combination of both.

This package uses and re-exports features from the below packages.

`@lume/element` - System for defining HTML elements

`element-behaviors` - Mix functionalities onto HTML elements

This allows you to augment HTML elements with features called…

View on GitHub

tweenjs / tween.js

JavaScript/TypeScript animation engine

tween.js

JavaScript (TypeScript) tweening engine for easy animations, incorporating optimised Robert Penner's equations.

More languages: English, 简体中文

<div id="box"></div>
<style>
    #box {
        background-color: deeppink;
        width: 100px;
        height: 100px;
    }
</style>

<script type="module">
    import {Tween, Easing} from 'https://unpkg.com/@tweenjs/tween.js@23.1.3/dist/tween.esm.js'

    const box = document.getElementById('box') // Get the element we want to animate.

    const coords = {x: 0, y: 0} // Start at (0, 0)

    const tween = new Tween(coords, false) // Create a new tween that modifies 'coords'.
        .to({x: 300, y: 200}, 1000) // Move to (300, 200) in 1 second.
        .easing(Easing.Quadratic.InOut)

…

View on GitHub

Here's the original demo:

topics: #css #javascript #webdev #3D #CSS3D #365DaysOfCode2021

Forem: Joe Pea

Write concise Custom Elements for React, Vue, Svelte, Solid, etc. Write once, use everywhere, type checked!

lume / element

Fast and simple custom elements.

@lume/element

npm install @lume/element

Live demos

HTML's Graphical 3D Future

Docsify.js single-page apps are indexable on Google!

Hash-based Routing

History-based Routing

SEO

Yay!

Thinking about Linode + dev.to Hackthon?

A few reasons why I love Solid.js

Loosely coupled code: Babylon vs Three.js

lume / glas

WebGL in WebAssembly with AssemblyScript

GLAS

Motivation

Status

⚠️ ALPHA STATE

Day 9 of 365: Beautiful cube with inertial rotation (live demo)

lume / lume

GPU-powered 3D HTML. ✨🧊 <lume-box size="1 2 3">

A toolkit that simplifies the creation of rich and interactive 2D or 3D experiences.

Home · Documentation · Examples · Forum · Chat · Source

npm install lume

Features

lume - HTML elements for rich graphics

@lume/element - System for defining HTML elements

element-behaviors - Mix functionalities onto HTML elements

Day 8 of 365: Beautiful rotatable cube (live demo)

lume / lume

GPU-powered 3D HTML. ✨🧊 <lume-box size="1 2 3">

A toolkit that simplifies the creation of rich and interactive 2D or 3D experiences.

Home · Documentation · Examples · Forum · Chat · Source

npm install lume

Features

lume - HTML elements for rich graphics

@lume/element - System for defining HTML elements

element-behaviors - Mix functionalities onto HTML elements

Tiny mini galaxy (live demo)

lume / lume

GPU-powered 3D HTML. ✨🧊 <lume-box size="1 2 3">

A toolkit that simplifies the creation of rich and interactive 2D or 3D experiences.

Home · Documentation · Examples · Forum · Chat · Source

npm install lume

Features

lume - HTML elements for rich graphics

@lume/element - System for defining HTML elements

element-behaviors - Mix functionalities onto HTML elements

Morphing spirals (live demos), 6 of 365

lume / lume

GPU-powered 3D HTML. ✨🧊 <lume-box size="1 2 3">

A toolkit that simplifies the creation of rich and interactive 2D or 3D experiences.

Home · Documentation · Examples · Forum · Chat · Source

npm install lume

Features

lume - HTML elements for rich graphics

@lume/element - System for defining HTML elements

element-behaviors - Mix functionalities onto HTML elements

Updated 3D model element (live demo)

lume / lume

GPU-powered 3D HTML. ✨🧊 <lume-box size="1 2 3">

A toolkit that simplifies the creation of rich and interactive 2D or 3D experiences.

Home · Documentation · Examples · Forum · Chat · Source

npm install lume

Features

lume - HTML elements for rich graphics

@lume/element - System for defining HTML elements

element-behaviors - Mix functionalities onto HTML elements

Ripple of flipping squares (live demo)

lume / lume

GPU-powered 3D HTML. ✨🧊 <lume-box size="1 2 3">

A toolkit that simplifies the creation of rich and interactive 2D or 3D experiences.

Home · Documentation · Examples · Forum · Chat · Source

npm install lume

Features

lume - HTML elements for rich graphics

`npm install @lume/element`

`npm install lume`

`lume` - HTML elements for rich graphics

`@lume/element` - System for defining HTML elements

`element-behaviors` - Mix functionalities onto HTML elements

`npm install lume`

`lume` - HTML elements for rich graphics

`@lume/element` - System for defining HTML elements

`element-behaviors` - Mix functionalities onto HTML elements

`npm install lume`

`lume` - HTML elements for rich graphics

`@lume/element` - System for defining HTML elements

`element-behaviors` - Mix functionalities onto HTML elements

`npm install lume`

`lume` - HTML elements for rich graphics

`@lume/element` - System for defining HTML elements

`element-behaviors` - Mix functionalities onto HTML elements

`npm install lume`

`lume` - HTML elements for rich graphics

`@lume/element` - System for defining HTML elements

`element-behaviors` - Mix functionalities onto HTML elements

`npm install lume`

`lume` - HTML elements for rich graphics

`@lume/element` - System for defining HTML elements

`element-behaviors` - Mix functionalities onto HTML elements