Examples

Morphing ColorShape Spiral

  • A "Picked" pen on CodePen!
  • The 2D scene is defined using HTML
  • JavaScript used for minimal animation
  • Rendering: CSS3D

HTML Buttons with Lighting

  • A "Picked" pen on CodePen!
  • The 3D scene is defined using HTML
  • JavaScript used for event handling and animating with Tween.js.
  • Rendering: experimental WebGL and CSS3D, blended together in "mixed mode", where regular DOM elements (CSS3D) and WebGL objects are rendered together in the same 3D space with lighting and shadow

Polydance

WebGL Cube with Lights

  • The 3D scene is defined with declarative HTML
  • Minimal JavaScript used for animation
  • Rendering: experimental WebGL

RippleFlip

  • The 3D scene is defined with imperative JavaScript
  • Rendering: CSS3D

Geometric Rotation

  • The 3D scene is defined with declarative HTML
  • The HTML is manipulated with React (see the source code)
  • Rendering: experimental WebGL (earlier version)

DOM Buggy

  • The 3D scene is defined with declarative HTML
  • The HTML is manipulated with plain JS.
  • Rendering: CSS3D

Imperative Starting Point

  • The 3D scene is defined and animated with imperative JavaScript
  • Rendering: CSS3D

Declarative Starting Point

  • The 3D scene is defined with declarative HTML
  • A sprinkle of JavaScript is used for animation
  • Rendering: CSS3D