infamous/docs/examples.md

A CSS3D/WebGL UI library.

Examples
========

Morphing ColorShape Spiral
----------------------------------------------------------------------

  <iframe height='418' scrolling='no' src='https://codepen.io/trusktr/embed/preview/JMMXPB/?height=418&theme-id=light&default-tab=result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>

  <details>

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

  </details>

HTML Buttons with Lighting
----------------------------------------------------------------------

  <iframe height='418' scrolling='no' src='https://codepen.io/trusktr/embed/preview/rpegZR/?height=418&theme-id=light&default-tab=result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>

  <details>

  - 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

  </details>

Polydance
------------------------------------------------------

  <iframe height='418' scrolling='no' src='https://codepen.io/trusktr/embed/preview/EoVGge/?height=418&theme-id=light&default-tab=result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>

  <details>

  - Presented at 3DWebFest 2017 in collaboration with [Anastasiia Vedernikova](https://vnastasia.myportfolio.com)
  - The 3D scene is defined with declarative HTML
  - The HTML is manipulated with [Vue.js](https://vuejs.org) ([see the source code](https://github.com/trusktr/trusktr.io/blob/master/meteor-app/client/imports/apps/polydance.vue))
  - Rendering: experimental WebGL (earlier version)

  </details>

WebGL Cube with Lights
---------------------------------------------------------------

  <iframe height='418' scrolling='no' src='https://codepen.io/trusktr/embed/preview/bYKXLd/?height=418&theme-id=light&default-tab=result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>

  <details>

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

  </details>

RippleFlip
---------------------------------------------------

  <iframe height='418' scrolling='no' src='https://codepen.io/trusktr/embed/preview/bWwdqR/?height=418&theme-id=light&default-tab=result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>

  <details>

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

  </details>

Geometric Rotation
-----------------------------------------------------------

  <iframe height='418' scrolling='no' src='https://codepen.io/trusktr/embed/preview/JMOEJK/?height=418&theme-id=light&default-tab=result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>

  <details>

  - The 3D scene is defined with declarative HTML
  - The HTML is manipulated with [React](https://facebook.github.io/react) ([see the source code](https://github.com/trusktr/trusktr.io/blob/master/meteor-app/client/imports/apps/geometricRotation.js))
  - Rendering: experimental WebGL (earlier version)

  </details>

DOM Buggy
--------------------------------------------------

  <iframe height='418' scrolling='no' src='https://codepen.io/trusktr/embed/preview/vpWgee/?height=418&theme-id=light&default-tab=result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>

  <details>

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

  </details>

Imperative Starting Point
------------------------------------------------------------------

  <iframe height='418' scrolling='no' src='https://codepen.io/trusktr/embed/preview/yoWQOe/?height=418&theme-id=light&default-tab=result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>

  <details>

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

  </details>

Declarative Starting Point
-------------------------------------------------------------------

  <iframe height='418' scrolling='no' src='https://codepen.io/trusktr/embed/preview/veXNZj/?height=418&theme-id=light&default-tab=result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>

  <details>

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

  </details>