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):
This project follows the all-contributors specification. Contributions of any kind welcome!