diff --git a/player/index.html b/player/index.html
index 8444836..1f307a7 100644
--- a/player/index.html
+++ b/player/index.html
@@ -119,21 +119,22 @@
     var elem = document.getElementById('bodymovin')
     var animData = {
         container: elem,
-        renderer: 'svg',
+        renderer: 'canvas',
         loop: true,
         autoplay: true,
         rendererSettings: {
-            progressiveLoad:false
+            progressiveLoad:false,
+            dpr: 1
         },
-        path: 'exports/render/data3.json'
+        path: 'exports/render/data.json'
     };
     anim = bodymovin.loadAnimation(animData);
     anim.addEventListener('DOMLoaded', function(){
         window.addEventListener('mousemove', function(ev){
-            anim.renderer.globalData.mouseX = ev.offsetX || ev.pageX;
-            anim.renderer.globalData.mouseY = ev.offsetY || ev.pageY;
+            anim.renderer.globalData.mouseCoords.x = ev.offsetX || ev.pageX;
+            anim.renderer.globalData.mouseCoords.y = ev.offsetY || ev.pageY;
         })
-        //createDrawingCanvas();
+        createDrawingCanvas();
     })
 
     function createDrawingCanvas(){
@@ -144,8 +145,12 @@
         var maxOffset = 250;
         var currentOffset = 0;
         var offsetDir = -1;
+        var lastSecond = Number.NEGATIVE_INFINITY;
+        var xOffset = 0;
+        var newSegmentHeight = 40;
+        var pairs = [];
         
-        function tick(){
+        function tick(time){
             ////
                 /*// get svg data
                 var xml = new XMLSerializer().serializeToString(sourceSVG);
@@ -162,9 +167,9 @@
             ////
             isEven = !isEven;
             if(isEven){
-                canvasCtx.globalCompositeOperation = 'exclusion';
+                //canvasCtx.globalCompositeOperation = 'exclusion';
             }else {
-                canvasCtx.globalCompositeOperation = 'multiply';
+                //canvasCtx.globalCompositeOperation = 'multiply';
             }
             if(offsetDir > 0){
                 currentOffset = currentOffset >= maxOffset ? maxOffset : currentOffset + offsetDir;
@@ -173,22 +178,38 @@
             }
 
             if(anim.currentFrame !== currentAnimFrame){
+                var newPairs = false;
+                if(time - lastSecond > 1000){
+                   newPairs = true;
+                   pairs.length = 0;
+                }
                 currentAnimFrame = anim.currentFrame;
-                var currentH = 0;
+                var currentH = 0, currentPair = 0;
                 while(currentH < canvasH){
-                    var newSegmentHeight = 2 + Math.round(2*Math.random());
-                    if(currentH + newSegmentHeight > canvasH){
-                        newSegmentHeight = canvasH - currentH;
+                    if(newPairs){
+                        newSegmentHeight = 2 + Math.round(20*Math.random());
+                        if(currentH + newSegmentHeight > canvasH){
+                            newSegmentHeight = canvasH - currentH;
+                        }
+                        xOffset = Math.round(Math.random()*(canvasW - 1));
+                        pairs.push([newSegmentHeight, xOffset]);
+                    } else {
+                        newSegmentHeight = pairs[currentPair][0];
+                        xOffset = pairs[currentPair][1];
+                        currentPair += 1;
                     }
-                    var xOffset = Math.round(Math.random()*canvasW/10);
-                    var xOffset = 1 + Math.round(Math.random()*currentOffset);
+                    //var xOffset = 1 + Math.round(Math.random()*currentOffset);
                     //xOffset = 0;
                     bufferCanvasCtx.drawImage(source, xOffset, currentH, canvasW - xOffset, newSegmentHeight, 0 , currentH, canvasW - xOffset, newSegmentHeight);
                     bufferCanvasCtx.drawImage(source, 0, currentH, xOffset, newSegmentHeight, canvasW - xOffset , currentH, xOffset, newSegmentHeight);
                     currentH += newSegmentHeight;
                 }
                 canvasCtx.drawImage(bufferCanvas, 0, 0);
+                if(newPairs){
+                    lastSecond = time;
+                }
             }
+
             requestAnimationFrame(tick);
         }
 
@@ -227,7 +248,7 @@
         elem.appendChild(canvas);
         elem.addEventListener('mousedown', elemDownHandler);
         elem.addEventListener('mouseup', elemUpHandler);
-        tick();
+        requestAnimationFrame(tick);
 
 
     }
diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js
index 91261c5..4433605 100644
--- a/player/js/animation/AnimationItem.js
+++ b/player/js/animation/AnimationItem.js
@@ -221,6 +221,26 @@
 AnimationItem.prototype.configAnimation = function (animData) {
     //ERASE
     console.log(animData);
+    // two_dance
+    for(var i =0; i < animData.assets[0].layers.length; i += 1){
+        //animData.layers[i].shapes.push({"ty": "ms","maxDist":50,"dc":0.95}); /// OPTION C 2
+        //animData.layers[i].shapes.push({"ty": "ms","maxDist":250,"dc":0.25}); /// OPTION A 1
+        //animData.layers[i].shapes.push({"ty": "ms","maxDist":300,"dc":.75}); /// OPTION A 2
+        //animData.layers[i].shapes.push({"ty": "ms","maxDist":300,"dc":.95}); /// OPTION A 3
+        //animData.layers[i].shapes.push({"ty": "ms","maxDist":250,"dc":.999}); /// OPTION A 4
+        if(animData.assets[0].layers[i].ty === 4){
+            animData.assets[0].layers[i].shapes.push({"ty": "ms","dc":1, "ss": 140, "mx": 15}); /// OPTION B 1
+        }
+    }
+    for(var i =0; i < animData.assets[1].layers.length; i += 1){
+        //animData.layers[i].shapes.push({"ty": "ms","maxDist":50,"dc":0.95}); /// OPTION C 2
+        //animData.layers[i].shapes.push({"ty": "ms","maxDist":250,"dc":0.25}); /// OPTION A 1
+        //animData.layers[i].shapes.push({"ty": "ms","maxDist":300,"dc":.75}); /// OPTION A 2
+        //animData.layers[i].shapes.push({"ty": "ms","maxDist":300,"dc":.95}); /// OPTION A 3
+        //animData.layers[i].shapes.push({"ty": "ms","maxDist":250,"dc":.999}); /// OPTION A 4
+        animData.assets[1].layers[i].shapes.push({"ty": "ms","dc":1, "ss": 140, "mx": 15}); /// OPTION B 1
+    }
+
     // DANCING DARWIN
     /*for(var i =0; i < 32; i+= 1){
         //animData.layers[i].shapes.push({"ty": "ms","maxDist":50,"dc":0.95}); /// OPTION C 2
@@ -231,10 +251,12 @@
         animData.layers[i].shapes.push({"ty": "ms","dc":1, "ss": 140, "mx": 15}); /// OPTION B 1
     }*/
     // CIRCLE
-    /*animData.layers[0].shapes.push({"ty": "ms","dc":.5, "ss": 140, "mx": 15});
+    //animData.assets[1].layers[1].shapes.push({"ty": "ms","dc":.5, "ss": 140, "mx": 15});
+
+    ////
     if(this.renderer && this.renderer.destroyed){
         return;
-    }*/
+    }
     //console.log(JSON.parse(JSON.stringify(animData)));
     //animData.w = Math.round(animData.w/blitter);
     //animData.h = Math.round(animData.h/blitter);
diff --git a/player/js/elements/BaseElement.js b/player/js/elements/BaseElement.js
index 6658bc4..73ed5c2 100644
--- a/player/js/elements/BaseElement.js
+++ b/player/js/elements/BaseElement.js
@@ -87,8 +87,14 @@
     var comp = this.comp;
     while(flag){
         if(comp.finalTransform){
-            if(comp.data.hasMask){
-                transforms.splice(0,0,comp.finalTransform);
+            transforms.push(comp.finalTransform);
+            if(comp.hierarchy){
+                i = 0;
+                len = comp.hierarchy.length;
+                while(i < len) {
+                    transforms.push(comp.hierarchy[i].finalTransform);
+                    i += 1;
+                } 
             }
             comp = comp.comp;
         } else {
@@ -123,8 +129,14 @@
     var comp = this.comp;
     while(flag){
         if(comp.finalTransform){
-            if(comp.data.hasMask){
-                transforms.splice(0,0,comp.finalTransform);
+            transforms.splice(0,0,comp.finalTransform);
+            if(comp.hierarchy){
+                len = comp.hierarchy.length;
+                i = 0;
+                while(i < len) {
+                    transforms.splice(0,0,comp.hierarchy[i].finalTransform);
+                    i += 1;
+                } 
             }
             comp = comp.comp;
         } else {
diff --git a/player/js/renderers/CanvasRenderer.js b/player/js/renderers/CanvasRenderer.js
index 2c4ca28..a2642df 100644
--- a/player/js/renderers/CanvasRenderer.js
+++ b/player/js/renderers/CanvasRenderer.js
@@ -160,6 +160,10 @@
         w: animData.w,
         h: animData.h
     };
+    this.globalData.mouseCoords = {
+        x: 0,
+        y: 0
+    };
     this.globalData.progressiveLoad = this.renderConfig.progressiveLoad;
     this.layers = animData.layers;
     this.transformCanvas = {};
diff --git a/player/js/renderers/SVGRenderer.js b/player/js/renderers/SVGRenderer.js
index 5b6bacd..25acbc0 100644
--- a/player/js/renderers/SVGRenderer.js
+++ b/player/js/renderers/SVGRenderer.js
@@ -68,6 +68,10 @@
         w: animData.w,
         h: animData.h
     };
+    this.globalData.mouseCoords = {
+        x: 0,
+        y: 0
+    };
     this.data = animData;
     this.globalData.frameRate = animData.fr;
     var maskElement = document.createElementNS(svgNS, 'clipPath');
diff --git a/player/js/utils/shapes/MouseModifier.js b/player/js/utils/shapes/MouseModifier.js
index b3b98bd..0256a03 100644
--- a/player/js/utils/shapes/MouseModifier.js
+++ b/player/js/utils/shapes/MouseModifier.js
@@ -196,15 +196,15 @@
         perc = Math.min(1,distance/maxDist);
 
         //// OPTION 1
-        // if(distance < maxDist){
-        //     cloned_path.setTripleAt(path.v[i][0],path.v[i][1]
-        //     ,path.v[i][0]+(path.o[i][0] - path.v[i][0])*perc,path.v[i][1]+(path.o[i][1] - path.v[i][1])*perc
-        //     ,path.v[i][0]+(path.i[i][0] - path.v[i][0])*perc,path.v[i][1]+(path.i[i][1] - path.v[i][1])*perc, i);
-        // } else {
-        //     cloned_path.setTripleAt(path.v[i][0],path.v[i][1]
-        //     ,path.o[i][0],path.o[i][1]
-        //     ,path.i[i][0],path.i[i][1], i);
-        // }
+        if(distance < maxDist){
+            cloned_path.setTripleAt(path.v[i][0],path.v[i][1]
+            ,path.v[i][0]+(path.o[i][0] - path.v[i][0])*perc,path.v[i][1]+(path.o[i][1] - path.v[i][1])*perc
+            ,path.v[i][0]+(path.i[i][0] - path.v[i][0])*perc,path.v[i][1]+(path.i[i][1] - path.v[i][1])*perc, i);
+        } else {
+            cloned_path.setTripleAt(path.v[i][0],path.v[i][1]
+            ,path.o[i][0],path.o[i][1]
+            ,path.i[i][0],path.i[i][1], i);
+        }
 
         //// OPTION 2
         // perc = 1 - perc*5;
@@ -233,9 +233,7 @@
     }*/
 
     ////OPTION D
-    //console.log('mouseCoords:', mouseCoords)
     var localMouseCoords = this.elem.globalToLocal(mouseCoords, transformers);
-    //console.log(localMouseCoords);
 
     var maxDist = this.data.maxDist;
     var perc, distance;
@@ -243,11 +241,6 @@
 
         //globalPt = this.elem.localToGlobal(path.v[i],transformers);
 
-        /*theta = Math.atan2(
-            path.v[i][1] - localMouseCoords[1],
-            path.v[i][0] - localMouseCoords[0]
-        );*/
-
         x = path.v[i][0] - localMouseCoords[0];
         y =path.v[i][1] - localMouseCoords[1];
         distance = Math.sqrt( (x * x) + (y * y) );
@@ -274,8 +267,8 @@
 }
 
 MouseModifier.prototype.processShapes = function(){
-    var mouseX = this.elem.globalData.mouseX || 100;
-    var mouseY = this.elem.globalData.mouseY || 100;
+    var mouseX = this.elem.globalData.mouseCoords.x;
+    var mouseY = this.elem.globalData.mouseCoords.y;
     var shapePaths;
     var i, len = this.shapes.length;
     var j, jLen;
@@ -321,6 +314,7 @@
     this.getValue = this.processKeys;
     this.data = data;
     this.positions = [];
+    this.dynamicProperties.push({});
 };