diff --git a/src/modules/shape.js b/src/modules/shape.js
index 81a4cbd9e..0ced04b3e 100755
--- a/src/modules/shape.js
+++ b/src/modules/shape.js
@@ -14,6 +14,7 @@
 $.fn.shape = function(parameters) {
   var
     $allModules     = $(this),
+    $body           = $('body'),
 
     time            = new Date().getTime(),
     performance     = [],
@@ -46,6 +47,7 @@ $.fn.shape = function(parameters) {
         $side         = $module.find(selector.side),
 
         // private variables
+        nextSelector = false,
         $activeSide,
         $nextSide,
 
@@ -104,46 +106,26 @@ $.fn.shape = function(parameters) {
             module.reset();
             module.set.active();
           };
-          if(settings.useCSS) {
-            if(module.get.transitionEvent()) {
-              module.verbose('Starting CSS animation');
-              $module
-                .addClass(className.animating)
-              ;
-              module.set.stageSize();
-              module.repaint();
-              $module
-                .addClass(className.css)
-              ;
-              $activeSide
-                .addClass(className.hidden)
-              ;
-              $sides
-                .css(propertyObject)
-                .one(module.get.transitionEvent(), callback)
-              ;
-            }
-            else {
-              callback();
-            }
-          }
-          else {
-            // not yet supported until .animate() is extended to allow RotateX/Y
-            module.verbose('Starting javascript animation');
+          if(module.get.transitionEvent()) {
+            module.verbose('Starting CSS animation');
             $module
               .addClass(className.animating)
-              .removeClass(className.css)
             ;
-            module.set.stageSize();
             module.repaint();
+            $module
+              .addClass(className.animating)
+            ;
             $activeSide
-              .animate({
-                opacity: 0
-              }, settings.duration, settings.easing)
+              .addClass(className.hidden)
             ;
             $sides
-              .animate(propertyObject, settings.duration, settings.easing, callback)
+              .css(propertyObject)
+              .one(module.get.transitionEvent(), callback)
             ;
+            module.set.duration(settings.duration);
+          }
+          else {
+            callback();
           }
         },
 
@@ -162,7 +144,6 @@ $.fn.shape = function(parameters) {
         reset: function() {
           module.verbose('Animating states reset');
           $module
-            .removeClass(className.css)
             .removeClass(className.animating)
             .attr('style', '')
             .removeAttr('style')
@@ -190,107 +171,6 @@ $.fn.shape = function(parameters) {
           }
         },
 
-        get: {
-
-          transform: {
-            up: function() {
-              var
-                translate = {
-                  y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
-                  z: -($activeSide.outerHeight() / 2)
-                }
-              ;
-              return {
-                transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(-90deg)'
-              };
-            },
-
-            down: function() {
-              var
-                translate = {
-                  y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
-                  z: -($activeSide.outerHeight() / 2)
-                }
-              ;
-              return {
-                transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(90deg)'
-              };
-            },
-
-            left: function() {
-              var
-                translate = {
-                  x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2),
-                  z : -($activeSide.outerWidth() / 2)
-                }
-              ;
-              return {
-                transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(90deg)'
-              };
-            },
-
-            right: function() {
-              var
-                translate = {
-                  x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2),
-                  z : -($activeSide.outerWidth() / 2)
-                }
-              ;
-              return {
-                transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(-90deg)'
-              };
-            },
-
-            over: function() {
-              var
-                translate = {
-                  x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
-                }
-              ;
-              return {
-                transform: 'translateX(' + translate.x + 'px) rotateY(180deg)'
-              };
-            },
-
-            back: function() {
-              var
-                translate = {
-                  x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
-                }
-              ;
-              return {
-                transform: 'translateX(' + translate.x + 'px) rotateY(-180deg)'
-              };
-            }
-          },
-
-          transitionEvent: function() {
-            var
-              element     = document.createElement('element'),
-              transitions = {
-                'transition'       :'transitionend',
-                'OTransition'      :'oTransitionEnd',
-                'MozTransition'    :'transitionend',
-                'WebkitTransition' :'webkitTransitionEnd'
-              },
-              transition
-            ;
-            for(transition in transitions){
-              if( element.style[transition] !== undefined ){
-                return transitions[transition];
-              }
-            }
-          },
-
-          nextSide: function() {
-            return ( $activeSide.next(selector.side).size() > 0 )
-              ? $activeSide.next(selector.side)
-              : $module.find(selector.side).first()
-            ;
-          }
-
-        },
-
         set: {
 
           defaultSide: function() {
@@ -299,27 +179,56 @@ $.fn.shape = function(parameters) {
               ? $activeSide.next(selector.side)
               : $module.find(selector.side).first()
             ;
+            nextSelector = false;
             module.verbose('Active side set to', $activeSide);
             module.verbose('Next side set to', $nextSide);
           },
 
+          duration: function(duration) {
+            duration = duration || settings.duration;
+            duration = (typeof duration == 'number')
+              ? duration + 'ms'
+              : duration
+            ;
+            module.verbose('Setting animation duration', duration);
+            $sides.add($side)
+              .css({
+                '-webkit-transition-duration': duration,
+                '-moz-transition-duration': duration,
+                '-ms-transition-duration': duration,
+                '-o-transition-duration': duration,
+                'transition-duration': duration
+              })
+            ;
+          },
+
           stageSize: function() {
             var
-              stage = {
-                width  : $nextSide.outerWidth(),
-                height : $nextSide.outerHeight()
-              }
+              $clone      = $module.clone().addClass(className.loading),
+              $activeSide = $clone.find('.' + settings.className.active),
+              $nextSide   = (nextSelector)
+                ? $clone.find(nextSelector)
+                : ( $activeSide.next(selector.side).size() > 0 )
+                  ? $activeSide.next(selector.side)
+                  : $clone.find(selector.side).first(),
+              newSize = {}
             ;
-            module.verbose('Resizing stage to fit new content', stage);
+            $activeSide.removeClass(className.active);
+            $nextSide.addClass(className.active);
+            $clone.prependTo($body);
+            newSize = {
+              width  : $nextSide.outerWidth(),
+              height : $nextSide.outerHeight()
+            };
+            $clone.remove();
             $module
-              .css({
-                width  : stage.width,
-                height : stage.height
-              })
+              .css(newSize)
             ;
+            module.verbose('Resizing stage to fit new content', newSize);
           },
 
           nextSide: function(selector) {
+            nextSelector = selector;
             $nextSide = $module.find(selector);
             if($nextSide.size() === 0) {
               module.error(error.side);
@@ -345,6 +254,7 @@ $.fn.shape = function(parameters) {
           up: function() {
             module.debug('Flipping up', $nextSide);
             if( !module.is.animating() ) {
+              module.set.stageSize();
               module.stage.above();
               module.animate( module.get.transform.up() );
             }
@@ -356,6 +266,7 @@ $.fn.shape = function(parameters) {
           down: function() {
             module.debug('Flipping down', $nextSide);
             if( !module.is.animating() ) {
+              module.set.stageSize();
               module.stage.below();
               module.animate( module.get.transform.down() );
             }
@@ -367,6 +278,7 @@ $.fn.shape = function(parameters) {
           left: function() {
             module.debug('Flipping left', $nextSide);
             if( !module.is.animating() ) {
+              module.set.stageSize();
               module.stage.left();
               module.animate(module.get.transform.left() );
             }
@@ -378,6 +290,7 @@ $.fn.shape = function(parameters) {
           right: function() {
             module.debug('Flipping right', $nextSide);
             if( !module.is.animating() ) {
+              module.set.stageSize();
               module.stage.right();
               module.animate(module.get.transform.right() );
             }
@@ -389,6 +302,7 @@ $.fn.shape = function(parameters) {
           over: function() {
             module.debug('Flipping over', $nextSide);
             if( !module.is.animating() ) {
+              module.set.stageSize();
               module.stage.behind();
               module.animate(module.get.transform.over() );
             }
@@ -400,6 +314,7 @@ $.fn.shape = function(parameters) {
           back: function() {
             module.debug('Flipping back', $nextSide);
             if( !module.is.animating() ) {
+              module.set.stageSize();
               module.stage.behind();
               module.animate(module.get.transform.back() );
             }
@@ -410,6 +325,107 @@ $.fn.shape = function(parameters) {
 
         },
 
+        get: {
+
+          transform: {
+            up: function() {
+              var
+                translate = {
+                  y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
+                  z: -($activeSide.outerHeight() / 2)
+                }
+              ;
+              return {
+                transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(-90deg)'
+              };
+            },
+
+            down: function() {
+              var
+                translate = {
+                  y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
+                  z: -($activeSide.outerHeight() / 2)
+                }
+              ;
+              return {
+                transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(90deg)'
+              };
+            },
+
+            left: function() {
+              var
+                translate = {
+                  x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2),
+                  z : -($activeSide.outerWidth() / 2)
+                }
+              ;
+              return {
+                transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(90deg)'
+              };
+            },
+
+            right: function() {
+              var
+                translate = {
+                  x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2),
+                  z : -($activeSide.outerWidth() / 2)
+                }
+              ;
+              return {
+                transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(-90deg)'
+              };
+            },
+
+            over: function() {
+              var
+                translate = {
+                  x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
+                }
+              ;
+              return {
+                transform: 'translateX(' + translate.x + 'px) rotateY(180deg)'
+              };
+            },
+
+            back: function() {
+              var
+                translate = {
+                  x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
+                }
+              ;
+              return {
+                transform: 'translateX(' + translate.x + 'px) rotateY(-180deg)'
+              };
+            }
+          },
+
+          transitionEvent: function() {
+            var
+              element     = document.createElement('element'),
+              transitions = {
+                'transition'       :'transitionend',
+                'OTransition'      :'oTransitionEnd',
+                'MozTransition'    :'transitionend',
+                'WebkitTransition' :'webkitTransitionEnd'
+              },
+              transition
+            ;
+            for(transition in transitions){
+              if( element.style[transition] !== undefined ){
+                return transitions[transition];
+              }
+            }
+          },
+
+          nextSide: function() {
+            return ( $activeSide.next(selector.side).size() > 0 )
+              ? $activeSide.next(selector.side)
+              : $module.find(selector.side).first()
+            ;
+          }
+
+        },
+
         stage: {
 
           above: function() {
@@ -738,15 +754,10 @@ $.fn.shape.settings = {
   namespace  : 'shape',
 
   // callback occurs on side change
-  beforeChange : function() {},
   onChange     : function() {},
 
-  // use css animation (currently only true is supported)
-  useCSS     : true,
-
-  // animation duration (useful only with future js animations)
-  duration   : 1000,
-  easing     : 'easeInOutQuad',
+  // animation duration
+  duration   : 700,
 
   // possible errors
   error: {
@@ -756,9 +767,9 @@ $.fn.shape.settings = {
 
   // classnames used
   className   : {
-    css       : 'css',
     animating : 'animating',
     hidden    : 'hidden',
+    loading   : 'loading',
     active    : 'active'
   },
 
diff --git a/src/modules/shape.less b/src/modules/shape.less
index 68b6bcef6..88f8e29f6 100755
--- a/src/modules/shape.less
+++ b/src/modules/shape.less
@@ -14,12 +14,19 @@
 *******************************/
 
 .ui.shape {
+  display: inline-block;
   position: relative;
 
   -webkit-perspective: 2000px;
   -moz-perspective: 2000px;
   -ms-perspective: 2000px;
   perspective: 2000px;
+
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+
 }
 
 .ui.shape .sides {
@@ -32,10 +39,18 @@
 .ui.shape .side {
   opacity: 1;
   width: 100%;
+
+  margin: 0em !important;
+
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;
+
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .ui.shape .side {
@@ -43,22 +58,77 @@
 }
 
 
+/*******************************
+             Types
+*******************************/
+
+.ui.cube.shape .side {
+  min-width: 15em;
+  height: 15em;
+
+  padding: 2em;
+
+  background-color: #E6E6E6;
+  color: rgba(0, 0, 0, 0.6);
+
+  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
+}
+.ui.cube.shape .side > .content {
+  width: 100%;
+  height: 100%;
+  display: table;
+
+  text-align: center;
+
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+.ui.cube.shape .side > .content > div {
+  display: table-cell;
+  vertical-align: middle;
+  font-size: 2em;
+}
 
 /*******************************
-             States
+          Variations
 *******************************/
 
+.ui.text.shape.animating .sides {
+  position: static;
+}
+.ui.text.shape .side {
+  white-space: nowrap;
+}
+.ui.text.shape .side > * {
+  white-space: normal;
+}
+
+
+/*******************************
+             States
+*******************************/
 
 /*--------------
-    Animating
+    Loading
 ---------------*/
 
-.ui.shape.animating .sides {
+.ui.loading.shape {
   position: absolute;
+  top: -9999px;
+  left: -9999px;
 }
+
+
+/*--------------
+    Animating
+---------------*/
+
 .ui.shape .animating.side {
   position: absolute;
-  width: 100%;
   top: 0px;
   left: 0px;
   z-index: 100;
@@ -72,7 +142,7 @@
       CSS
 ---------------*/
 
-.ui.shape.css {
+.ui.shape.animating {
   -webkit-transition:
     all 0.6s ease-in-out;
   ;
@@ -89,14 +159,17 @@
     all 0.6s ease-in-out;
   ;
 }
-.ui.shape.css .sides {
+.ui.shape.animating .sides {
+  position: absolute;
+}
+.ui.shape.animating .sides {
   -webkit-transition: all 0.6s ease-in-out;
   -moz-transition: all 0.6s ease-in-out;
   -o-transition: all 0.6s ease-in-out;
   -ms-transition: all 0.6s ease-in-out;
   transition: all 0.6s ease-in-out;
 }
-.ui.shape.css .side {
+.ui.shape.animating .side {
   -webkit-transition: opacity 0.6s ease-in-out;
   -moz-transition: opacity 0.6s ease-in-out;
   -o-transition: opacity 0.6s ease-in-out;
@@ -104,6 +177,7 @@
   transition: opacity 0.6s ease-in-out;
 }
 
+
 /*--------------
      Active
 ---------------*/