hhy5277 / infamous

Create CSS3D/WebGL applications declaratively with HTML. Give regular DOM elements shadow and lighting.

infamous

Create 3D CSS+WebGL apps declaratively with HTML.

Site — Forums — Examples — Docs

About

Infamous gives you general-purpose Custom HTML Elements that the browser understands, for defining 2D or 3D scenes rendered with CSS3D, WebGL, or both mixed together.

If you prefer imperative JavaScript, you can also use the imperative JavaScript API.

Infamous' "mixed mode" let's us combine traditional HTML elements with new ones that render to WebGL (powered by Three.js), which means we can render traditional elements and 3D objects like spheres and cubes (and soon any 3D model) together in the same 3D space (with lighting and shadow not just on the WebGL objects, but on the DOM elements too!).

Unlike traditional CSS box-shadow which is flat and boring, with Infamous we can give UIs real shadows! See for yourself!

Infamous is built on the Web Component standards, making it possible to write 3D scenes declaratively using custom HTML elements, regardless of which view layer you prefer. This makes it possible for you write 3D scenes using popular HTML frameworks like (but not limited to) React, Vue.js, Meteor, Angular, Ember.js, or even the great jQuery.

Supported browsers are Google Chrome, Mozilla Firefox, Opera, and Microsoft Edge. You're luck may vary with anything lower than Edge, though in theory this should at least work in IE11 but it might require some additional transpile steps and WebGL feature detection guards. CSS3D rendering may even work in IE10 with scenes that only have one level of nesting. PRs welcome!

Contributors

Thanks goes to these wonderful people (emoji key):

corruptedzulu 💻 📖	Joseph Orbegoso Pea 💻 🐛 📖 💡

This project follows the all-contributors specification. Contributions of any kind welcome!