[{"_id":"648ae93a23e6010021f94620","type":"background","color":"101e21","opacity":1,"mute":true,"slideshow":{"delay":4,"crossfade":0.5,"pictures":[]},"video":{},"viewport_phone_portrait":{},"selectedType":"color","wid":"648ae93a23e6010021f94620","mag_num_id":4300655,"__v":0},{"_id":"648ae93a23e6010021f94621","x":256,"y":14,"w":165,"h":21,"type":"iframe","use_iframe":true,"z":349,"code":"<h3><span>Film Production</span></h3>\n\n\n<link rel=\"stylesheet\" href=\"https://use.typekit.net/hkv1mkr.css\">\n\n <style>\n  body {\n  background-color: none;\n}\n   \n   \nh3 {\n  color: white;\n  text-transform: uppercase;\n  font-family: \"lft-etica-mono\", sans-serif;\n  margin-top:0px;\n  letter-spacing: 0.0em;\n  font-weight: normal;\n  font-size: 7px;\n  line-height: 8px;\n}\n\nh3 span {\n  border-right: .05em solid;\n  animation: caret 1s steps(1) infinite;\n}\n\n@keyframes caret {\n  50% {\n    border-color: transparent;\n  }\n}\n</style>\n\n<script>\n         document.addEventListener('DOMContentLoaded',function(event){\n  // array with texts to type in typewriter\n  var dataText = [ \"Film Production.\", \"Creative Direction.\", \"Editing\", \"Colour Grading\", \"Motion Graphics\", \"Video Titling\", \"Photography\", \"Film Production.\",];\n  \n  // type one text in the typwriter\n  // keeps calling itself until the text is finished\n  function typeWriter(text, i, fnCallback) {\n    // chekc if text isn't finished yet\n    if (i < (text.length)) {\n      // add next character to h1\n     document.querySelector(\"h3\").innerHTML = text.substring(0, i+1) +'<span aria-hidden=\"true\"></span>';\n\n      // wait for a while and call this function again for next character\n      setTimeout(function() {\n        typeWriter(text, i + 1, fnCallback)\n      }, 75);\n    }\n    // text finished, call callback if there is a callback function\n    else if (typeof fnCallback == 'function') {\n      // call callback after timeout\n      setTimeout(fnCallback, 700);\n    }\n  }\n  // start a typewriter animation for a text in the dataText array\n   function StartTextAnimation(i) {\n     if (typeof dataText[i] == 'undefined'){\n        setTimeout(function() {\n          StartTextAnimation(0);\n        }, 40000);\n     }\n     // check if dataText[i] exists\n    if (i < dataText[i].length) {\n      // text exists! start typewriter animation\n     typeWriter(dataText[i], 0, function(){\n       // after callback (and whole text has been animated), start next text\n       StartTextAnimation(i + 1);\n     });\n    }\n  }\n  // start the text animation\n  StartTextAnimation(0);\n});\n                               </script>","options":{"clear_content":false,"use_iframe":true},"clear_content":false,"viewport_phone_portrait":{"hidden":true,"z":343},"viewport_tablet_portrait":{"x":20,"y":-73.5},"name":"DT Film Production","fixed_position":"nw","is_above":false,"sticked":"","hidden":false,"animation":[],"full_width_initial_w":428,"full_width_initial_x":193,"full_width_margin":0,"is_full_width":false,"full_height_initial_h":43,"full_height_initial_y":73,"full_height_margin":0,"is_full_height":false,"wid":"648ae93a23e6010021f94621","mag_num_id":4300655,"__v":0},{"_id":"648ae93a23e6010021f94622","x":1,"y":82,"w":975,"h":494,"type":"shots","basePath":"https://sh-p.rmcdn.net/53c4dbbc8d42d1f9116065be/0e45214c-c796-41f8-9f03-739a499ac847","numberOfImages":150,"playbackType":"scroll","scrollSpeed":0.65,"scrollStartPoint":"bottom","scrollDelay":0,"hoverDirection":"horizontally","triggers":[],"startPointOffset":300,"pausable":true,"byStepSpeed":1,"byStepLoop":true,"byStepSpringLoop":false,"firstFrameLambdaUrl":"https://d2kq0urxkarztv.cloudfront.net/shots-templates/image-e88557aa-f1a0-4d59-b6c5-ca9ac5238c59.jpg","z":301,"imageHeight":720,"imageWidth":1280,"totalSize":3425462,"viewport_phone_portrait":{"hidden":true,"z":302},"viewport_tablet_portrait":{"x":-163.5,"y":-103.5},"name":"DT Kasien","useEasing":true,"animation":[{"steps":[{"speed":1.2,"delay_px":1200,"dx":0,"dy":-800,"scale":0,"start_point":"bottom","start_offset":0,"from_rotate":0,"from_scale":100,"use_move":true,"use_rotate":true,"use_scale":true,"rotate":70}],"UUID":"a272100d-b283-4cf6-a695-6dde693597a9","type":"scroll"}],"fixed_position":"n","is_above":false,"sticked":"","wid":"648ae93a23e6010021f94622","mag_num_id":4300655,"__v":0},{"_id":"648ae93a23e6010021f94623","x":641,"y":14,"w":287,"h":38,"type":"iframe","use_iframe":true,"z":351,"code":"<div class=\"cont\">\n<span id=\"container\" style=\"color: #fff\"; text-transform=\"none\">London based creative film production collective led by filmmaker Isaac Hargreaves and creative director Rich Brown</span> \n</div>\n\n\n <link rel=\"stylesheet\" href=\"https://use.typekit.net/hkv1mkr.css\">\n\n\n<style>\n\n.cont {\n  text-align:left; \n  display:flex; \n  flex-direction: column; \n  align-items: left;\n  width: 100%;\n  font-family: \"lft-etica-mono\", sans-serif;\n  letter-spacing: 0.0em;\n  font-weight:normal;  \n  overflow: hidden;\n  text-decoration: none;   \n  color: #fff;\n  margin-top: 0px;\n  text-transform: none;\n  font-weight:normal;  \n  font-size: 7px;\n  line-height: 8px;\n}\n\n\nspan {\n  position: absolute;\n  margin-left: 0px;\n  content: \"\\A\";\n  white-space: pre-line;\n  text-transform: none;\n}\n  \n  \n  \n</style>\n\n\n\n\n<script>\n\n(function($) {\n\n  $.fn.shuffleLetters = function(prop) {\n\n    var options = $.extend({\n      \"step\": 9, // How many times should the letters be changed\n      \"fps\": 75, // Frames Per Second\n      \"text\": \"\", // Use this text instead of the contents\n      \"callback\": function() {} // Run once the animation is complete\n    }, prop)\n\n    return this.each(function() {\n      var el = $(this),\n        str = \"\";\n\n      // Preventing parallel animations using a flag;\n      if (el.data('animated')) {\n        return true;\n      }\n      el.data('animated', true);\n\n      if (options.text) {\n        str = options.text.split('');\n      } else {\n        str = el.text().split('');\n      }\n\n      // The types array holds the type for each character;\n      // Letters holds the positions of non-space characters;\n\n      var types = [],\n        letters = [];\n\n      // Looping through all the chars of the string\n\n      for (var i = 0; i < str.length; i++) {\n\n        var ch = str[i];\n\n        if (ch == \" \") {\n          types[i] = \"space\";\n          continue;\n        } else if (/[a-z]/.test(ch)) {\n          types[i] = \"lowerLetter\";\n        } else if (/[A-Z]/.test(ch)) {\n          types[i] = \"upperLetter\";\n        } else {\n          types[i] = \"symbol\";\n        }\n\n        letters.push(i);\n      }\n\n      el.html(\"\");\n\n      // Self executing named function expression:\n\n      (function shuffle(start) {\n\n        // This code is run options.fps times per second\n        // and updates the contents of the page element\n\n        var i,\n          len = letters.length,\n          strCopy = str.slice(0); // Fresh copy of the string\n\n        if (start > len) {\n\n          // The animation is complete. Updating the\n          // flag and triggering the callback;\n\n          el.data('animated', false);\n          options.callback(el);\n          return;\n        }\n\n        // All the work gets done here\n        for (i = Math.max(start, 0); i < len; i++) {\n\n          // The start argument and options.step limit\n          // the characters we will be working on at once\n\n          if (i < start + options.step) {\n            // Generate a random character at thsi position\n            strCopy[letters[i]] = randomChar(types[letters[i]]);\n          } else {\n            strCopy[letters[i]] = \"\";\n          }\n        }\n\n        el.text(strCopy.join(\"\"));\n\n        setTimeout(function() {\n\n          shuffle(start + 1);\n\n        }, 1000 / options.fps);\n\n      })(-options.step);\n\n\n    });\n  };\n\n  function randomChar(type) {\n    var pool = \"\";\n\n    if (type == \"lowerLetter\") {\n      pool = \"abcdefghijklmnopqrstuvwxyz\";\n    } else if (type == \"upperLetter\") {\n      pool = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\n    } else if (type == \"symbol\") {\n      pool = \",.?/\\\\!'\\\"\";\n    }\n\n    var arr = pool.split('');\n    return arr[Math.floor(Math.random() * arr.length)];\n  }\n\n})(jQuery);\n\n\n$(function() {\n  var container = $(\"#container\"),\n    userText = $('#userText');\n\n  // Shuffle the contents of container\n  container.shuffleLetters();\n\n  // Bind events\n  userText.click(function() {\n    userText.val(\"\");\n  }).bind('keypress', function(e) {\n    if (e.keyCode == 13) {\n      // The return key was pressed\n      container.shuffleLetters({\n        \"text\": userText.val()\n      });\n      userText.val(\"\");\n    }\n  }).hide();\n\n  // Leave a 4 second pause\n\n  function last() {\n    console.log(container);\n    // Shuffle the container with custom text\n    container.shuffleLetters({\n      \"text\": \"\"\n    });\n    userText.val(\"type anything and hit return..\").fadeIn();\n  }\n\n  var container = $(\"#container\");\n\n  container.shuffleLetters();\n\n  function shuffle(text) {\n    console.log(text);\n    // Shuffle the container with custom text\n    container.shuffleLetters({\n      text: text\n    });\n  }\n\n  var arr = ['London based creative film production collective led by filmmaker Isaac Hargreaves and creative director Rich Brown',]; \n  //var i = 0;\n  //var interval = setInterval(function() {\n  //  shuffle(arr[i++ % arr.length]);\n  //}, 3000);\n});\n        </script>","options":{"clear_content":false,"use_iframe":true},"clear_content":false,"viewport_phone_portrait":{"hidden":true,"z":345},"viewport_tablet_portrait":{"x":6,"y":-68.84},"name":"DT Intro","full_width_initial_w":143,"full_width_initial_x":193,"full_width_margin":0,"is_full_width":false,"full_height_initial_h":18,"full_height_initial_y":69,"full_height_margin":0,"is_full_height":false,"animation":[],"hidden":false,"fixed_position":"nw","is_above":false,"sticked":"","wid":"648ae93a23e6010021f94623","mag_num_id":4300655,"__v":0},{"_id":"648ae93a23e6010021f94626","x":0,"y":335,"w":977,"h":242,"type":"picture","z":302,"cropH":450,"cropW":1821,"cropX":0,"cropY":0,"originalH":450,"originalW":1821,"picture":{"url":"https://c-p.rmcdn.net/53c4dbbc8d42d1f9116065be/4274316/Image-45546a1d-7a29-48a9-a1f8-95d05778d6a2.svg","thumbUrl":"https://c-p.rmcdn.net/53c4dbbc8d42d1f9116065be/4274316/Image-7728ac1e-7cfd-4bdf-8d38-e9e29930b36f.png","originUrls":{"url":"https://c-p.rmcdn.net/53c4dbbc8d42d1f9116065be/4274316/Image-45546a1d-7a29-48a9-a1f8-95d05778d6a2.svg","thumbUrl":"https://c-p.rmcdn.net/53c4dbbc8d42d1f9116065be/4274316/Image-7728ac1e-7cfd-4bdf-8d38-e9e29930b36f.png"},"type":"svg","editedVectorUrl":"https://c-p.rmcdn.net/53c4dbbc8d42d1f9116065be/4274316/Image-f338300f-2a5f-41be-b0dc-2ddab9ff097a.svg"},"scale":0.536518396485448,"name":"DT LOGO L","animation":[{"steps":[{"speed":0.3,"delay_px":200,"dx":0,"dy":-254,"acceleration":"ease-both","start_point":"bottom","start_offset":0,"use_move":true},{"speed":1,"delay_px":400,"opacity":0,"scale":0,"use_opacity":true,"use_scale":true}],"UUID":"de8d3572-b200-44c6-93b9-eaa7217c7ae7","type":"scroll"}],"fixed_position":"n","sticked":"","_hidden":[{"pid":"default","value":null}],"_z":[{"pid":"default","value":302}],"sticked_margin":0,"hidden":false,"blurHash":"UYNdO8xu9Ft7~qWBofWBD%fQayWB?bofRjof","pic_color":"00FF36","pic_opacity":1,"_variationY":67,"viewport_phone_portrait":{"hidden":true,"z":303},"wid":"648ae93a23e6010021f94626","mag_num_id":4300655,"__v":0},{"_id":"648ae93a23e6010021f94627","x":0,"y":602,"w":974,"h":550,"type":"shots","basePath":"https://sh-p.rmcdn.net/53c4dbbc8d42d1f9116065be/b421f407-6152-401b-9f0d-ca538f69c8d6","numberOfImages":183,"playbackType":"scroll","scrollSpeed":0.65,"scrollStartPoint":"bottom","scrollDelay":1074,"hoverDirection":"horizontally","triggers":[],"startPointOffset":0,"pausable":true,"byStepSpeed":1,"byStepLoop":true,"byStepSpringLoop":false,"firstFrameLambdaUrl":"https://d2kq0urxkarztv.cloudfront.net/shots-templates/image-be5cf9d1-4754-4c27-a97e-1facd5f2dba3.jpg","z":303,"imageHeight":720,"imageWidth":1280,"totalSize":5279283,"fixed_position":"n","is_above":false,"sticked":"","hidden":false,"animation":[{"steps":[{"speed":1,"delay_px":1400,"dx":0,"dy":-500,"acceleration":"ease-both","start_point":"bottom","start_offset":0,"use_move":true},{"speed":1,"dx":-146,"dy":-585,"scale":70,"use_move":true,"use_scale":true},{"speed":1.2,"delay_px":800,"dx":-145,"dy":-1400,"rotate":45,"acceleration":"ease-both","use_move":true,"use_rotate":true}],"UUID":"52abea9f-dedf-467a-a998-1e68b101832a","type":"scroll"}],"name":"DT JeanPaul","useEasing":true,"viewport_phone_portrait":{"hidden":true,"z":304},"wid":"648ae93a23e6010021f94627","mag_num_id":4300655,"__v":0},{"_id":"648ae93a23e6010021f94628","x":128,"y":13,"w":37,"h":28,"type":"iframe","use_iframe":false,"z":311,"clear_content":false,"code":"","name":"DT Blends code","hidden":false,"viewport_phone_portrait":{"hidden":true,"z":312},"wid":"648ae93a23e6010021f94628","mag_num_id":4300655,"__v":0},{"_id":"648ae93a23e6010021f94629","x":449,"y":14,"w":113,"h":15,"type":"iframe","use_iframe":true,"z":350,"code":"<div class=\"cont\">\n<a href = \"mailto:talkATvillainyDOTuk\"\n   \n   onclick = \"this.href=this.href\n              .replace(/AT/,'&#64;')\n              .replace(/DOT/,'&#46;')\">\n   <span id=\"container\">TALK TO US</span></a>\n\n</div>\n\n<link rel=\"stylesheet\" href=\"https://use.typekit.net/hkv1mkr.css\">\n\n\n<style>\n\n.cont {\n  text-align:left; \n  display:flex; \n  flex-direction: column; \n  align-items: left;\n  width: 100%;\n  font-family: \"lft-etica-mono\", sans-serif;\n  letter-spacing: 0.0em;\n  font-weight:normal;  \n  overflow: hidden;\n  text-decoration: none;   \n  color: #fff;\n  margin-top: 0px;\n  text-transform: none;\n  font-weight:normal;  \n}\n\nspan {\n  display:flex; \n  flex-direction: column; \n  margin-left: 0px;\n  content: \"\\A\";\n  white-space: pre-line;\n  margin-top: 0px;\n  text-transform: none;\n  font-weight:normal;\n  overflow: hidden;\n}\n  \n  \na:link { \n  text-decoration: none;   \n  color: #fff;\n  margin-top: 0px;\n  text-transform: none;\n  font-weight:normal;  \n  font-size: 7px;\n  line-height: 8px;\n }\n  \na:visited { text-decoration: none; color: #fff;}\na:hover { text-decoration: underline; color: #fff;}\na:active { text-decoration: none; color: #fff;}\n  \n  \n</style>\n\n\n\n\n<script>\n\n(function($) {\n\n  $.fn.shuffleLetters = function(prop) {\n\n    var options = $.extend({\n      \"step\": 9, // How many times should the letters be changed\n      \"fps\": 75, // Frames Per Second\n      \"text\": \"\", // Use this text instead of the contents\n      \"callback\": function() {} // Run once the animation is complete\n    }, prop)\n\n    return this.each(function() {\n      var el = $(this),\n        str = \"\";\n\n      // Preventing parallel animations using a flag;\n      if (el.data('animated')) {\n        return true;\n      }\n      el.data('animated', true);\n\n      if (options.text) {\n        str = options.text.split('');\n      } else {\n        str = el.text().split('');\n      }\n\n      // The types array holds the type for each character;\n      // Letters holds the positions of non-space characters;\n\n      var types = [],\n        letters = [];\n\n      // Looping through all the chars of the string\n\n      for (var i = 0; i < str.length; i++) {\n\n        var ch = str[i];\n\n        if (ch == \" \") {\n          types[i] = \"space\";\n          continue;\n        } else if (/[a-z]/.test(ch)) {\n          types[i] = \"lowerLetter\";\n        } else if (/[A-Z]/.test(ch)) {\n          types[i] = \"upperLetter\";\n        } else {\n          types[i] = \"symbol\";\n        }\n\n        letters.push(i);\n      }\n\n      el.html(\"\");\n\n      // Self executing named function expression:\n\n      (function shuffle(start) {\n\n        // This code is run options.fps times per second\n        // and updates the contents of the page element\n\n        var i,\n          len = letters.length,\n          strCopy = str.slice(0); // Fresh copy of the string\n\n        if (start > len) {\n\n          // The animation is complete. Updating the\n          // flag and triggering the callback;\n\n          el.data('animated', false);\n          options.callback(el);\n          return;\n        }\n\n        // All the work gets done here\n        for (i = Math.max(start, 0); i < len; i++) {\n\n          // The start argument and options.step limit\n          // the characters we will be working on at once\n\n          if (i < start + options.step) {\n            // Generate a random character at thsi position\n            strCopy[letters[i]] = randomChar(types[letters[i]]);\n          } else {\n            strCopy[letters[i]] = \"\";\n          }\n        }\n\n        el.text(strCopy.join(\"\"));\n\n        setTimeout(function() {\n\n          shuffle(start + 1);\n\n        }, 1000 / options.fps);\n\n      })(-options.step);\n\n\n    });\n  };\n\n  function randomChar(type) {\n    var pool = \"\";\n\n    if (type == \"lowerLetter\") {\n      pool = \"abcdefghijklmnopqrstuvwxyz\";\n    } else if (type == \"upperLetter\") {\n      pool = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\n    } else if (type == \"symbol\") {\n      pool = \",.?/\\\\!'\\\"\";\n    }\n\n    var arr = pool.split('');\n    return arr[Math.floor(Math.random() * arr.length)];\n  }\n\n})(jQuery);\n\n\n$(function() {\n  var container = $(\"#container\"),\n    userText = $('#userText');\n\n  // Shuffle the contents of container\n  container.shuffleLetters();\n\n  // Bind events\n  userText.click(function() {\n    userText.val(\"\");\n  }).bind('keypress', function(e) {\n    if (e.keyCode == 13) {\n      // The return key was pressed\n      container.shuffleLetters({\n        \"text\": userText.val()\n      });\n      userText.val(\"\");\n    }\n  }).hide();\n\n  // Leave a 4 second pause\n\n  function last() {\n    console.log(container);\n    // Shuffle the container with custom text\n    container.shuffleLetters({\n      \"text\": \"\"\n    });\n    userText.val(\"type anything and hit return..\").fadeIn();\n  }\n\n  var container = $(\"#container\");\n\n  container.shuffleLetters();\n\n  function shuffle(text) {\n    console.log(text);\n    // Shuffle the container with custom text\n    container.shuffleLetters({\n      text: text\n    });\n  }\n\n  var arr = ['TALK TO US',]; \n  //var i = 0;\n  //var interval = setInterval(function() {\n  //  shuffle(arr[i++ % arr.length]);\n  //}, 3000);\n});\n        </script>","options":{"clear_content":false,"use_iframe":true},"clear_content":false,"viewport_phone_portrait":{"hidden":true,"z":344},"viewport_tablet_portrait":{"x":6,"y":0.16,"z":113},"name":"DT Email","full_width_initial_w":143,"full_width_initial_x":193,"full_width_margin":0,"is_full_width":false,"full_height_initial_h":18,"full_height_initial_y":69,"full_height_margin":0,"is_full_height":false,"animation":[],"hidden":false,"fixed_position":"nw","is_above":false,"sticked":"","wid":"648ae93a23e6010021f94629","mag_num_id":4300655,"__v":0},{"_id":"648ae93a23e6010021f9462b","x":638.99,"y":1196.41,"w":292,"h":532,"type":"iframe","use_iframe":true,"z":304,"code":"<div class=\"cont\">\n\n  <span id=\"container\">At the helm of Villainy, you'll find the dynamic duo of filmmaker and colorist Isaac Hargreaves, along with the visionary creative director Rich Brown. Our collective ardor for crafting compelling and visually striking narratives propels us forward, allowing us to seize those awe-inspiring moments that leave a lasting impact on audiences.\n\nCollaboration lies at the heart of our ethos. We thrive on forging partnerships with creative agencies, filmmakers, and clients who bring a wealth of diverse and stimulating challenges to the table. Together, we embark on a journey that fuels our passion, ignites our imagination, and paves the way for extraordinary results.\n  </span> \n\n</div>\n\n\n <link rel=\"stylesheet\" href=\"https://use.typekit.net/hkv1mkr.css\">\n\n\n<style>\n\n.cont {\n  text-align:left; \n  display:flex; \n  flex-direction: column; \n  align-items: left;\n  width: 100%;\n  font-family: \"lft-etica-mono\", sans-serif;\n  letter-spacing: 0.0em;\n  font-weight:normal;  \n  overflow: hidden;\n  color: #fff;\n  margin-top: 0px;\n  text-transform: none;\n  font-weight:normal;\n    font-size: 7px;\n}\n\nspan {\n  display:flex; \n  flex-direction: column; \n  margin-left: 0px;\n  content: \"\\A\";\n  white-space: pre-line;\n  margin-top: 0px;\n  text-transform: none;\n  font-weight:normal;\n   line-height: 8px;\n}\n</style>\n\n\n\n\n<script>\n\n(function($) {\n\n  $.fn.shuffleLetters = function(prop) {\n\n    var options = $.extend({\n      \"step\": 9, // How many times should the letters be changed\n      \"fps\": 75, // Frames Per Second\n      \"text\": \"\", // Use this text instead of the contents\n      \"callback\": function() {} // Run once the animation is complete\n    }, prop)\n\n    return this.each(function() {\n      var el = $(this),\n        str = \"\";\n\n      // Preventing parallel animations using a flag;\n      if (el.data('animated')) {\n        return true;\n      }\n      el.data('animated', true);\n\n      if (options.text) {\n        str = options.text.split('');\n      } else {\n        str = el.text().split('');\n      }\n\n      // The types array holds the type for each character;\n      // Letters holds the positions of non-space characters;\n\n      var types = [],\n        letters = [];\n\n      // Looping through all the chars of the string\n\n      for (var i = 0; i < str.length; i++) {\n\n        var ch = str[i];\n\n        if (ch == \" \") {\n          types[i] = \"space\";\n          continue;\n        } else if (/[a-z]/.test(ch)) {\n          types[i] = \"lowerLetter\";\n        } else if (/[A-Z]/.test(ch)) {\n          types[i] = \"upperLetter\";\n        } else {\n          types[i] = \"symbol\";\n        }\n\n        letters.push(i);\n      }\n\n      el.html(\"\");\n\n      // Self executing named function expression:\n\n      (function shuffle(start) {\n\n        // This code is run options.fps times per second\n        // and updates the contents of the page element\n\n        var i,\n          len = letters.length,\n          strCopy = str.slice(0); // Fresh copy of the string\n\n        if (start > len) {\n\n          // The animation is complete. Updating the\n          // flag and triggering the callback;\n\n          // el.data('animated', false);\n          // options.callback(el);\n          \n        }\n\n        // All the work gets done here\n        for (i = Math.max(start, 0); i < len; i++) {\n\n          // The start argument and options.step limit\n          // the characters we will be working on at once\n\n          if (i < start + options.step) {\n            // Generate a random character at thsi position\n            strCopy[letters[i]] = randomChar(types[letters[i]]);\n          } else {\n            strCopy[letters[i]] = \"\";\n          }\n        }\n\n        el.text(strCopy.join(\"\"));\n\n        setTimeout(function() {\n\n          shuffle(start + 1);\n\n        }, 400 / options.fps);\n\n      })(-options.step);\n\n\n    });\n  };\n\n  function randomChar(type) {\n    var pool = \"\";\n\n    if (type == \"lowerLetter\") {\n      pool = \"abcdefghijklmnopqrstuvwxyz\";\n    } else if (type == \"upperLetter\") {\n      pool = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\n    } else if (type == \"symbol\") {\n      pool = \",.?/\\\\!'\\\"\";\n    }\n\n    var arr = pool.split('');\n    return arr[Math.floor(Math.random() * arr.length)];\n  }\n\n})(jQuery);\n\n\n$(function() {\n  var container = $(\"#container\"),\n    userText = $('#userText');\n\n  // Shuffle the contents of container\n  container.shuffleLetters();\n\n  // Bind events\n  userText.click(function() {\n    userText.val(\"\");\n  }).bind('keypress', function(e) {\n    if (e.keyCode == 13) {\n      // The return key was pressed\n      container.shuffleLetters({\n        \"text\": userText.val()\n      });\n      userText.val(\"\");\n    }\n  }).hide();\n\n  // Leave a 4 second pause\n\n  function last() {\n    console.log(container);\n    // Shuffle the container with custom text\n    container.shuffleLetters({\n      \"text\": \"\"\n    });\n    userText.val(\"type anything and hit return..\").fadeIn();\n  }\n\n  var container = $(\"#container\");\n\n  container.shuffleLetters();\n\n  function shuffle(text) {\n    console.log(text);\n    // Shuffle the container with custom text\n    container.shuffleLetters({\n      text: text\n    });\n  }\n\n  var arr = ['Villainy is led by filmmaker and colourist Isaac Hargreaves and creative director Rich Brown. Our passion for powerful vivid storytelling drives us, capturing memorable inspired moments that moves people.'\n            ]; \n  var i = 0;\n  //var interval = setInterval(function() {\n  //  shuffle(arr[i++ % arr.length]);\n  //}, 3000);\n});\n        </script>","options":{"clear_content":false,"use_iframe":true},"clear_content":false,"viewport_phone_portrait":{"hidden":true,"z":305},"viewport_tablet_portrait":{"x":574,"y":124.16,"z":119},"name":"DT About P1","full_width_initial_w":143,"full_width_initial_x":193,"full_width_margin":0,"is_full_width":false,"full_height_initial_h":18,"full_height_initial_y":69,"full_height_margin":0,"is_full_height":false,"animation":[{"steps":[{"speed":1,"delay_px":1500,"dx":0,"dy":-950,"acceleration":"ease-both","start_point":"bottom","start_offset":0,"use_move":true},{"speed":1.5,"delay_px":300,"opacity":0,"acceleration":"ease-both","use_move":true,"use_opacity":true,"use_scale":true,"dx":0,"dy":-1300,"scale":0}],"UUID":"be215e2f-2c19-49a6-9bf0-5710cd28ba64","type":"scroll"}],"hidden":false,"fixed_position":"nw","is_above":false,"sticked":"","wid":"648ae93a23e6010021f9462b","mag_num_id":4300655,"__v":0},{"_id":"648ae93a23e6010021f9462c","x":43.99,"y":99.92,"w":358,"h":60,"type":"iframe","use_iframe":true,"z":305,"code":"<div class=\"cont\">\n  <span id=\"container\">OFFICIAL MUSIC VIDEO\nKASIEN “BREATHE”\nDIRECTOR/ EDITOR: COSMO RUSH\nDOP/ COLOURIST: ISAAC HARGREAVES\n(AUDIO) PRODUCER: KARMA KID , SLIM TYPICAL & KASIEN\n  </span> \n</div>\n\n\n <link rel=\"stylesheet\" href=\"https://use.typekit.net/hkv1mkr.css\">\n\n\n<style>\n\n.cont {\n  text-align:left; \n  display:flex; \n  flex-direction: column; \n  align-items: left;\n  width: 100%;\n  font-family: \"lft-etica-mono\", sans-serif;\n  letter-spacing: 0.0em;\n  font-weight:normal;  \n  overflow: hidden;\n  color: #fff;\n  margin-top: 0px;\n  text-transform: none;\n  font-weight:normal;\n  font-size: 7px;\n\n}\n\n\n\nspan {\n  display:flex; \n  flex-direction: column; \n  margin-left: 0px;\n  content: \"\\A\";\n  white-space: pre;\n  margin-top: 0px;\n  text-transform: none;\n  font-weight:normal;\n   line-height: 8px;\n  text-transform: uppercase;\n}\n</style>\n\n\n\n\n<script>\n\n(function($) {\n\n  $.fn.shuffleLetters = function(prop) {\n\n    var options = $.extend({\n      \"step\": 9, // How many times should the letters be changed\n      \"fps\": 75, // Frames Per Second\n      \"text\": \"\", // Use this text instead of the contents\n      \"callback\": function() {} // Run once the animation is complete\n    }, prop)\n\n    return this.each(function() {\n      var el = $(this),\n        str = \"\";\n\n      // Preventing parallel animations using a flag;\n      if (el.data('animated')) {\n        return true;\n      }\n      el.data('animated', true);\n\n      if (options.text) {\n        str = options.text.split('');\n      } else {\n        str = el.text().split('');\n      }\n\n      // The types array holds the type for each character;\n      // Letters holds the positions of non-space characters;\n\n      var types = [],\n        letters = [];\n\n      // Looping through all the chars of the string\n\n      for (var i = 0; i < str.length; i++) {\n\n        var ch = str[i];\n\n        if (ch == \" \") {\n          types[i] = \"space\";\n          continue;\n        } else if (/[a-z]/.test(ch)) {\n          types[i] = \"lowerLetter\";\n        } else if (/[A-Z]/.test(ch)) {\n          types[i] = \"upperLetter\";\n        } else {\n          types[i] = \"symbol\";\n        }\n\n        letters.push(i);\n      }\n\n      el.html(\"\");\n\n      // Self executing named function expression:\n\n      (function shuffle(start) {\n\n        // This code is run options.fps times per second\n        // and updates the contents of the page element\n\n        var i,\n          len = letters.length,\n          strCopy = str.slice(0); // Fresh copy of the string\n\n        if (start > len) {\n\n          // The animation is complete. Updating the\n          // flag and triggering the callback;\n\n          el.data('animated', false);\n          options.callback(el);\n          return;\n        }\n\n        // All the work gets done here\n        for (i = Math.max(start, 0); i < len; i++) {\n\n          // The start argument and options.step limit\n          // the characters we will be working on at once\n\n          if (i < start + options.step) {\n            // Generate a random character at thsi position\n            strCopy[letters[i]] = randomChar(types[letters[i]]);\n          } else {\n            strCopy[letters[i]] = \"\";\n          }\n        }\n\n        el.text(strCopy.join(\"\"));\n\n        setTimeout(function() {\n\n          shuffle(start + 1);\n\n        }, 1000 / options.fps);\n\n      })(-options.step);\n\n\n    });\n  };\n\n  function randomChar(type) {\n    var pool = \"\";\n\n    if (type == \"lowerLetter\") {\n      pool = \"abcdefghijklmnopqrstuvwxyz\";\n    } else if (type == \"upperLetter\") {\n      pool = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\n    } else if (type == \"symbol\") {\n      pool = \",.?/\\\\!'\\\"\";\n    }\n\n    var arr = pool.split('');\n    return arr[Math.floor(Math.random() * arr.length)];\n  }\n\n})(jQuery);\n\n\n$(function() {\n  var container = $(\"#container\"),\n    userText = $('#userText');\n\n  // Shuffle the contents of container\n  container.shuffleLetters();\n\n  // Bind events\n  userText.click(function() {\n    userText.val(\"\");\n  }).bind('keypress', function(e) {\n    if (e.keyCode == 13) {\n      // The return key was pressed\n      container.shuffleLetters({\n        \"text\": userText.val()\n      });\n      userText.val(\"\");\n    }\n  }).hide();\n\n  // Leave a 4 second pause\n\n  function last() {\n    console.log(container);\n    // Shuffle the container with custom text\n    container.shuffleLetters({\n      \"text\": \"\"\n    });\n    userText.val(\"type anything and hit return..\").fadeIn();\n  }\n\n  var container = $(\"#container\");\n\n  container.shuffleLetters();\n\n  function shuffle(text) {\n    console.log(text);\n    // Shuffle the container with custom text\n    container.shuffleLetters({\n      text: text\n    });\n  }\n\n  var arr = ['A UK based creative collective led by filmmaker and colourist Isaac Hargreaves and creative director Rich Brown',]; \n  //var i = 0;\n  //var interval = setInterval(function() {\n  //  shuffle(arr[i++ % arr.length]);\n  //}, 3000);\n});\n        </script>","options":{"clear_content":false,"use_iframe":true},"clear_content":false,"viewport_phone_portrait":{"hidden":true,"z":306},"viewport_tablet_portrait":{"x":6,"y":50.16,"z":117},"name":"DT PROJ KASIEN","full_width_initial_w":143,"full_width_initial_x":193,"full_width_margin":0,"is_full_width":false,"full_height_initial_h":18,"full_height_initial_y":69,"full_height_margin":0,"is_full_height":false,"animation":[{"steps":[{"speed":0.3,"dx":0,"dy":350,"rotate":-20,"acceleration":"ease-both","start_point":"bottom","start_offset":0,"from_opacity":0,"from_rotate":0,"use_move":true,"use_opacity":true,"use_rotate":true,"opacity":100},{"speed":0.5,"dx":0,"dy":100,"acceleration":"ease-both","use_move":true,"use_opacity":true,"use_rotate":true,"use_scale":true,"scale":0,"opacity":0,"rotate":45}],"UUID":"50ee3534-bf2b-4891-b1b7-2d38164a9875","type":"scroll"}],"hidden":false,"fixed_position":"nw","is_above":false,"sticked":"","wid":"648ae93a23e6010021f9462c","mag_num_id":4300655,"__v":0},{"_id":"648ae93a23e6010021f9462d","x":44,"y":623,"w":358,"h":148,"type":"iframe","use_iframe":true,"z":306,"code":"<div class=\"cont\">\n\n  <span id=\"container\">Jean Paul Gaultier\nLe Male Elixir\n\nDirector/Producer: Nathan Baxter\nDP: Cassius Kane\n1st AC: Teddy\nGaffer: Adam Trz\nSpark: Kenneth Liew\nArt Dept: The Looney Studio\nEditor: Eden Rae Read\nEdit Producer: Troy Smith\nEdit House: The Assembly Rooms\nColourist: Isaac Hargreaves\nMUA: Alice Howlett\n  </span> \n\n</div>\n\n\n <link rel=\"stylesheet\" href=\"https://use.typekit.net/hkv1mkr.css\">\n\n\n<style>\n\n.cont {\n  text-align:left; \n  display:flex; \n  flex-direction: column; \n  align-items: left;\n  width: 100%;\n  font-family: \"lft-etica-mono\", sans-serif;\n  letter-spacing: 0.0em;\n  font-weight:normal;  \n  overflow: hidden;\n  color: #fff;\n  margin-top: 0px;\n  text-transform: none;\n  font-weight:normal;\n  font-size: 7px;\n}\n\nspan {\n  display:flex; \n  flex-direction: column; \n  margin-left: 0px;\n  content: \"\\A\";\n  white-space: pre;\n  margin-top: 0px;\n  text-transform: none;\n  font-weight:normal;\n    line-height: 8px;\n  text-transform: uppercase;\n}\n</style>\n\n\n\n\n<script>\n\n(function($) {\n\n  $.fn.shuffleLetters = function(prop) {\n\n    var options = $.extend({\n      \"step\": 9, // How many times should the letters be changed\n      \"fps\": 75, // Frames Per Second\n      \"text\": \"\", // Use this text instead of the contents\n      \"callback\": function() {} // Run once the animation is complete\n    }, prop)\n\n    return this.each(function() {\n      var el = $(this),\n        str = \"\";\n\n      // Preventing parallel animations using a flag;\n      if (el.data('animated')) {\n        return true;\n      }\n      el.data('animated', true);\n\n      if (options.text) {\n        str = options.text.split('');\n      } else {\n        str = el.text().split('');\n      }\n\n      // The types array holds the type for each character;\n      // Letters holds the positions of non-space characters;\n\n      var types = [],\n        letters = [];\n\n      // Looping through all the chars of the string\n\n      for (var i = 0; i < str.length; i++) {\n\n        var ch = str[i];\n\n        if (ch == \" \") {\n          types[i] = \"space\";\n          continue;\n        } else if (/[a-z]/.test(ch)) {\n          types[i] = \"lowerLetter\";\n        } else if (/[A-Z]/.test(ch)) {\n          types[i] = \"upperLetter\";\n        } else {\n          types[i] = \"symbol\";\n        }\n\n        letters.push(i);\n      }\n\n      el.html(\"\");\n\n      // Self executing named function expression:\n\n      (function shuffle(start) {\n\n        // This code is run options.fps times per second\n        // and updates the contents of the page element\n\n        var i,\n          len = letters.length,\n          strCopy = str.slice(0); // Fresh copy of the string\n\n        if (start > len) {\n\n          // The animation is complete. Updating the\n          // flag and triggering the callback;\n\n          el.data('animated', false);\n          options.callback(el);\n          return;\n        }\n\n        // All the work gets done here\n        for (i = Math.max(start, 0); i < len; i++) {\n\n          // The start argument and options.step limit\n          // the characters we will be working on at once\n\n          if (i < start + options.step) {\n            // Generate a random character at thsi position\n            strCopy[letters[i]] = randomChar(types[letters[i]]);\n          } else {\n            strCopy[letters[i]] = \"\";\n          }\n        }\n\n        el.text(strCopy.join(\"\"));\n\n        setTimeout(function() {\n\n          shuffle(start + 1);\n\n        }, 1000 / options.fps);\n\n      })(-options.step);\n\n\n    });\n  };\n\n  function randomChar(type) {\n    var pool = \"\";\n\n    if (type == \"lowerLetter\") {\n      pool = \"abcdefghijklmnopqrstuvwxyz\";\n    } else if (type == \"upperLetter\") {\n      pool = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\n    } else if (type == \"symbol\") {\n      pool = \",.?/\\\\!'\\\"\";\n    }\n\n    var arr = pool.split('');\n    return arr[Math.floor(Math.random() * arr.length)];\n  }\n\n})(jQuery);\n\n\n$(function() {\n  var container = $(\"#container\"),\n    userText = $('#userText');\n\n  // Shuffle the contents of container\n  container.shuffleLetters();\n\n  // Bind events\n  userText.click(function() {\n    userText.val(\"\");\n  }).bind('keypress', function(e) {\n    if (e.keyCode == 13) {\n      // The return key was pressed\n      container.shuffleLetters({\n        \"text\": userText.val()\n      });\n      userText.val(\"\");\n    }\n  }).hide();\n\n  // Leave a 4 second pause\n\n  function last() {\n    console.log(container);\n    // Shuffle the container with custom text\n    container.shuffleLetters({\n      \"text\": \"\"\n    });\n    userText.val(\"type anything and hit return..\").fadeIn();\n  }\n\n  var container = $(\"#container\");\n\n  container.shuffleLetters();\n\n  function shuffle(text) {\n    console.log(text);\n    // Shuffle the container with custom text\n    container.shuffleLetters({\n      text: text\n    });\n  }\n\n  var arr = ['A UK based creative collective led by filmmaker and colourist Isaac Hargreaves and creative director Rich Brown',]; \n  //var i = 0;\n  //var interval = setInterval(function() {\n  //  shuffle(arr[i++ % arr.length]);\n  //}, 3000);\n});\n        </script>","options":{"clear_content":false,"use_iframe":true},"clear_content":false,"viewport_phone_portrait":{"hidden":true,"z":307},"viewport_tablet_portrait":{"x":6,"y":245.16,"z":125},"name":"DT PROJ JEAN","full_width_initial_w":143,"full_width_initial_x":193,"full_width_margin":0,"is_full_width":false,"full_height_initial_h":18,"full_height_initial_y":69,"full_height_margin":0,"is_full_height":false,"animation":[{"steps":[{"speed":0.6,"delay_px":1340,"dx":10,"dy":-340,"rotate":-20,"acceleration":"ease-both","start_point":"bottom","start_offset":0,"from_opacity":0,"from_rotate":0,"use_move":true,"use_opacity":true,"use_rotate":true,"opacity":100},{"speed":1,"delay_px":900,"dx":0,"dy":-800,"opacity":0,"acceleration":"ease-both","use_move":true,"use_opacity":true}],"UUID":"1e543575-26b3-4e84-8096-9a7eb60ed7e6","type":"scroll"}],"hidden":false,"fixed_position":"nw","is_above":false,"sticked":"","wid":"648ae93a23e6010021f9462d","mag_num_id":4300655,"__v":0},{"_id":"648ae93a23e6010021f9462e","x":26,"y":3588,"w":973,"h":556,"type":"shots","basePath":"https://sh-p.rmcdn.net/53c4dbbc8d42d1f9116065be/34fb42e9-3fff-4773-a706-b0eb308c2e45","numberOfImages":56,"playbackType":"scroll","scrollSpeed":0.65,"scrollStartPoint":"bottom","scrollDelay":0,"hoverDirection":"horizontally","triggers":[],"startPointOffset":0,"pausable":true,"byStepSpeed":1,"byStepLoop":true,"byStepSpringLoop":false,"firstFrameLambdaUrl":"https://d2kq0urxkarztv.cloudfront.net/shots-templates/image-60d578d3-7c9b-4e16-a97a-f39b4d484fd0.jpg","z":312,"imageHeight":720,"imageWidth":1280,"totalSize":2844378,"useEasing":true,"animation":[],"hidden":false,"name":"DT Jeffery West","viewport_phone_portrait":{"hidden":true,"z":313},"wid":"648ae93a23e6010021f9462e","mag_num_id":4300655,"__v":0},{"_id":"648ae93a23e6010021f9462f","x":41,"y":3604,"w":358,"h":78,"type":"iframe","use_iframe":false,"z":313,"code":"<div class=\"cont\">\n\n  <span id=\"container\">Jeffery West\nBehind the scenes\n\nFilm: Isaac Hargreaves\nDOP/ Colourist: Isaac Hargreaves\nPhotoshoot: Tiyana Pentland\n  </span> \n\n</div>\n\n\n <link rel=\"stylesheet\" href=\"https://use.typekit.net/hkv1mkr.css\">\n\n\n<style>\n\n.cont {\n  text-align:left; \n  display:flex; \n  flex-direction: column; \n  align-items: left;\n  width: 100%;\n  font-family: \"lft-etica-mono\", sans-serif;\n  letter-spacing: 0.0em;\n  font-weight:normal;  \n  overflow: hidden;\n  color: #fff;\n  margin-top: 0px;\n  text-transform: none;\n  font-weight:normal;\n  font-size: 7px;\n}\n\nspan {\n  display:flex; \n  flex-direction: column; \n  margin-left: 0px;\n  content: \"\\A\";\n  white-space: pre;\n  margin-top: 0px;\n  text-transform: none;\n  font-weight:normal;\n  line-height: 8px;\n  text-transform: uppercase;\n}\n</style>\n\n\n\n\n<script>\n\n(function($) {\n\n  $.fn.shuffleLetters = function(prop) {\n\n    var options = $.extend({\n      \"step\": 9, // How many times should the letters be changed\n      \"fps\": 75, // Frames Per Second\n      \"text\": \"\", // Use this text instead of the contents\n      \"callback\": function() {} // Run once the animation is complete\n    }, prop)\n\n    return this.each(function() {\n      var el = $(this),\n        str = \"\";\n\n      // Preventing parallel animations using a flag;\n      if (el.data('animated')) {\n        return true;\n      }\n      el.data('animated', true);\n\n      if (options.text) {\n        str = options.text.split('');\n      } else {\n        str = el.text().split('');\n      }\n\n      // The types array holds the type for each character;\n      // Letters holds the positions of non-space characters;\n\n      var types = [],\n        letters = [];\n\n      // Looping through all the chars of the string\n\n      for (var i = 0; i < str.length; i++) {\n\n        var ch = str[i];\n\n        if (ch == \" \") {\n          types[i] = \"space\";\n          continue;\n        } else if (/[a-z]/.test(ch)) {\n          types[i] = \"lowerLetter\";\n        } else if (/[A-Z]/.test(ch)) {\n          types[i] = \"upperLetter\";\n        } else {\n          types[i] = \"symbol\";\n        }\n\n        letters.push(i);\n      }\n\n      el.html(\"\");\n\n      // Self executing named function expression:\n\n      (function shuffle(start) {\n\n        // This code is run options.fps times per second\n        // and updates the contents of the page element\n\n        var i,\n          len = letters.length,\n          strCopy = str.slice(0); // Fresh copy of the string\n\n        if (start > len) {\n\n          // The animation is complete. Updating the\n          // flag and triggering the callback;\n\n          el.data('animated', false);\n          options.callback(el);\n          return;\n        }\n\n        // All the work gets done here\n        for (i = Math.max(start, 0); i < len; i++) {\n\n          // The start argument and options.step limit\n          // the characters we will be working on at once\n\n          if (i < start + options.step) {\n            // Generate a random character at thsi position\n            strCopy[letters[i]] = randomChar(types[letters[i]]);\n          } else {\n            strCopy[letters[i]] = \"\";\n          }\n        }\n\n        el.text(strCopy.join(\"\"));\n\n        setTimeout(function() {\n\n          shuffle(start + 1);\n\n        }, 1000 / options.fps);\n\n      })(-options.step);\n\n\n    });\n  };\n\n  function randomChar(type) {\n    var pool = \"\";\n\n    if (type == \"lowerLetter\") {\n      pool = \"abcdefghijklmnopqrstuvwxyz\";\n    } else if (type == \"upperLetter\") {\n      pool = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\n    } else if (type == \"symbol\") {\n      pool = \",.?/\\\\!'\\\"\";\n    }\n\n    var arr = pool.split('');\n    return arr[Math.floor(Math.random() * arr.length)];\n  }\n\n})(jQuery);\n\n\n$(function() {\n  var container = $(\"#container\"),\n    userText = $('#userText');\n\n  // Shuffle the contents of container\n  container.shuffleLetters();\n\n  // Bind events\n  userText.click(function() {\n    userText.val(\"\");\n  }).bind('keypress', function(e) {\n    if (e.keyCode == 13) {\n      // The return key was pressed\n      container.shuffleLetters({\n        \"text\": userText.val()\n      });\n      userText.val(\"\");\n    }\n  }).hide();\n\n  // Leave a 4 second pause\n\n  function last() {\n    console.log(container);\n    // Shuffle the container with custom text\n    container.shuffleLetters({\n      \"text\": \"\"\n    });\n    userText.val(\"type anything and hit return..\").fadeIn();\n  }\n\n  var container = $(\"#container\");\n\n  container.shuffleLetters();\n\n  function shuffle(text) {\n    console.log(text);\n    // Shuffle the container with custom text\n    container.shuffleLetters({\n      text: text\n    });\n  }\n\n  var arr = ['A UK based creative collective led by filmmaker and colourist Isaac Hargreaves and creative director Rich Brown',]; \n  //var i = 0;\n  //var interval = setInterval(function() {\n  //  shuffle(arr[i++ % arr.length]);\n  //}, 3000);\n});\n        </script>","options":{"clear_content":false,"use_iframe":true},"clear_content":false,"name":"DT Jefferey","full_width_initial_w":143,"full_width_initial_x":193,"full_width_margin":0,"is_full_width":false,"full_height_initial_h":18,"full_height_initial_y":69,"full_height_margin":0,"is_full_height":false,"animation":[{"steps":[{"speed":0.6,"delay_px":1400,"dx":0,"dy":400,"rotate":-20,"acceleration":"ease-both","start_point":"bottom","start_offset":200,"from_rotate":0,"use_move":true,"use_rotate":true}],"UUID":"a472a085-c583-467c-af8f-f9445c2d28de","type":"scroll"}],"hidden":false,"sticked":"","_variationY":-2797,"is_above":false,"viewport_phone_portrait":{"hidden":true,"z":314},"wid":"648ae93a23e6010021f9462f","mag_num_id":4300655,"__v":0},{"_id":"648ae93a23e6010021f94631","x":-1002,"y":4180,"w":974,"h":549,"type":"shots","basePath":"https://sh-p.rmcdn.net/53c4dbbc8d42d1f9116065be/483dd072-1c03-413e-95e6-cefead32e45d","numberOfImages":100,"playbackType":"scroll","scrollSpeed":0.65,"scrollStartPoint":"bottom","scrollDelay":0,"hoverDirection":"horizontally","triggers":[],"startPointOffset":0,"pausable":true,"byStepSpeed":1,"byStepLoop":true,"byStepSpringLoop":false,"firstFrameLambdaUrl":"https://d2kq0urxkarztv.cloudfront.net/shots-templates/image-e8a9e882-8a01-4f21-aa31-89a5cf23fc67.jpg","z":314,"imageHeight":720,"imageWidth":1280,"totalSize":4659962,"useEasing":true,"animation":[{"steps":[{"speed":2,"dx":1060,"dy":0,"acceleration":"ease-both","start_point":"bottom","start_offset":0,"use_move":true},{"speed":1.5,"dx":990,"dy":0,"use_move":true},{"speed":2,"dx":1050,"dy":0,"use_move":true},{"speed":2.5,"dx":1005,"dy":0,"use_move":true},{"speed":3,"dx":1045,"dy":0,"use_move":true},{"speed":4,"dx":1018,"dy":0,"use_move":true},{"speed":4.5,"dx":1043,"dy":0,"use_move":true},{"speed":5,"dx":1028,"dy":0,"use_move":true}],"UUID":"c76d63a2-6c49-490b-86e4-e1af1d952a39","type":"scroll"}],"name":"DT FACE","viewport_phone_portrait":{"hidden":true,"z":315},"hidden":false,"wid":"648ae93a23e6010021f94631","mag_num_id":4300655,"__v":0},{"_id":"648ae93a23e6010021f94632","x":41,"y":4209,"w":358,"h":78,"type":"iframe","use_iframe":false,"z":315,"code":"<div class=\"cont\">\n \n  <span id=\"container\">FACE X AYA \n\"Where is your face\"\n\nDirector of Photography: Isaac Hargreaves\nDOP/ COLOURIST: Isaac Hargreaves\n  </span> \n\n</div>\n\n\n <link rel=\"stylesheet\" href=\"https://use.typekit.net/hkv1mkr.css\">\n\n\n<style>\n\n.cont {\n  text-align:left; \n  display:flex; \n  flex-direction: column; \n  align-items: left;\n  width: 100%;\n  font-family: \"lft-etica-mono\", sans-serif;\n  letter-spacing: 0.0em;\n  font-weight:normal;  \n  overflow: hidden;\n  color: #fff;\n  margin-top: 0px;\n  text-transform: none;\n  font-weight:normal;\n  font-size: 7px;\n}\n\nspan {\n  display:flex; \n  flex-direction: column; \n  margin-left: 0px;\n  content: \"\\A\";\n  white-space: pre;\n  margin-top: 0px;\n  text-transform: none;\n  font-weight:normal;\n  line-height: 8px;\n  text-transform: uppercase;\n}\n</style>\n\n\n\n\n<script>\n\n(function($) {\n\n  $.fn.shuffleLetters = function(prop) {\n\n    var options = $.extend({\n      \"step\": 9, // How many times should the letters be changed\n      \"fps\": 75, // Frames Per Second\n      \"text\": \"\", // Use this text instead of the contents\n      \"callback\": function() {} // Run once the animation is complete\n    }, prop)\n\n    return this.each(function() {\n      var el = $(this),\n        str = \"\";\n\n      // Preventing parallel animations using a flag;\n      if (el.data('animated')) {\n        return true;\n      }\n      el.data('animated', true);\n\n      if (options.text) {\n        str = options.text.split('');\n      } else {\n        str = el.text().split('');\n      }\n\n      // The types array holds the type for each character;\n      // Letters holds the positions of non-space characters;\n\n      var types = [],\n        letters = [];\n\n      // Looping through all the chars of the string\n\n      for (var i = 0; i < str.length; i++) {\n\n        var ch = str[i];\n\n        if (ch == \" \") {\n          types[i] = \"space\";\n          continue;\n        } else if (/[a-z]/.test(ch)) {\n          types[i] = \"lowerLetter\";\n        } else if (/[A-Z]/.test(ch)) {\n          types[i] = \"upperLetter\";\n        } else {\n          types[i] = \"symbol\";\n        }\n\n        letters.push(i);\n      }\n\n      el.html(\"\");\n\n      // Self executing named function expression:\n\n      (function shuffle(start) {\n\n        // This code is run options.fps times per second\n        // and updates the contents of the page element\n\n        var i,\n          len = letters.length,\n          strCopy = str.slice(0); // Fresh copy of the string\n\n        if (start > len) {\n\n          // The animation is complete. Updating the\n          // flag and triggering the callback;\n\n          el.data('animated', false);\n          options.callback(el);\n          return;\n        }\n\n        // All the work gets done here\n        for (i = Math.max(start, 0); i < len; i++) {\n\n          // The start argument and options.step limit\n          // the characters we will be working on at once\n\n          if (i < start + options.step) {\n            // Generate a random character at thsi position\n            strCopy[letters[i]] = randomChar(types[letters[i]]);\n          } else {\n            strCopy[letters[i]] = \"\";\n          }\n        }\n\n        el.text(strCopy.join(\"\"));\n\n        setTimeout(function() {\n\n          shuffle(start + 1);\n\n        }, 1000 / options.fps);\n\n      })(-options.step);\n\n\n    });\n  };\n\n  function randomChar(type) {\n    var pool = \"\";\n\n    if (type == \"lowerLetter\") {\n      pool = \"abcdefghijklmnopqrstuvwxyz\";\n    } else if (type == \"upperLetter\") {\n      pool = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\n    } else if (type == \"symbol\") {\n      pool = \",.?/\\\\!'\\\"\";\n    }\n\n    var arr = pool.split('');\n    return arr[Math.floor(Math.random() * arr.length)];\n  }\n\n})(jQuery);\n\n\n$(function() {\n  var container = $(\"#container\"),\n    userText = $('#userText');\n\n  // Shuffle the contents of container\n  container.shuffleLetters();\n\n  // Bind events\n  userText.click(function() {\n    userText.val(\"\");\n  }).bind('keypress', function(e) {\n    if (e.keyCode == 13) {\n      // The return key was pressed\n      container.shuffleLetters({\n        \"text\": userText.val()\n      });\n      userText.val(\"\");\n    }\n  }).hide();\n\n  // Leave a 4 second pause\n\n  function last() {\n    console.log(container);\n    // Shuffle the container with custom text\n    container.shuffleLetters({\n      \"text\": \"\"\n    });\n    userText.val(\"type anything and hit return..\").fadeIn();\n  }\n\n  var container = $(\"#container\");\n\n  container.shuffleLetters();\n\n  function shuffle(text) {\n    console.log(text);\n    // Shuffle the container with custom text\n    container.shuffleLetters({\n      text: text\n    });\n  }\n\n  var arr = ['A UK based creative collective led by filmmaker and colourist Isaac Hargreaves and creative director Rich Brown',]; \n  //var i = 0;\n  //var interval = setInterval(function() {\n  //  shuffle(arr[i++ % arr.length]);\n  //}, 3000);\n});\n        </script>","options":{"clear_content":false,"use_iframe":false},"clear_content":false,"name":"DT FACE","full_width_initial_w":143,"full_width_initial_x":193,"full_width_margin":0,"is_full_width":false,"full_height_initial_h":18,"full_height_initial_y":69,"full_height_margin":0,"is_full_height":false,"animation":[{"steps":[{"speed":0.6,"delay_px":1400,"dx":0,"dy":400,"rotate":-20,"acceleration":"ease-both","start_point":"bottom","start_offset":200,"from_rotate":0,"use_move":true,"use_rotate":true}],"UUID":"c5f99632-b18a-4e31-b59b-d59fa1af6be8","type":"scroll"}],"hidden":false,"sticked":"","_variationY":-2797,"is_above":false,"viewport_phone_portrait":{"hidden":true,"z":316},"wid":"648ae93a23e6010021f94632","mag_num_id":4300655,"__v":0},{"_id":"648ae93a23e6010021f94634","x":24.86,"y":36,"w":85.27,"h":21,"type":"picture","z":353,"cropH":33,"cropW":134,"cropX":0,"cropY":0,"originalH":33,"originalW":134,"picture":{"thumbUrl":"https://c-p.rmcdn.net/53c4dbbc8d42d1f9116065be/4274316/Image-2ea691d1-c5f7-4784-8f28-5a905d208a91.png","url":"https://c-p.rmcdn.net/53c4dbbc8d42d1f9116065be/4274316/Image-0142df02-d055-4dca-92ec-95653d4404a6.svg","originUrls":{"thumbUrl":"https://c-p.rmcdn.net/53c4dbbc8d42d1f9116065be/4274316/Image-2ea691d1-c5f7-4784-8f28-5a905d208a91.png","url":"https://c-p.rmcdn.net/53c4dbbc8d42d1f9116065be/4274316/Image-0142df02-d055-4dca-92ec-95653d4404a6.svg"},"type":"svg","editedVectorUrl":"https://c-p.rmcdn.net/53c4dbbc8d42d1f9116065be/4274316/Image-13f34bee-d98f-4427-bcc9-ee33515ed97f.svg"},"scale":0.6363636363636364,"fixed_position":"nw","sticked":"","name":"DT LOGO","hidden":false,"_variationY":-321,"animation":[{"steps":[{"duration":0.5,"delay":2,"dx":0,"dy":-20,"opacity":100,"from_opacity":0,"use_move":true,"use_opacity":true}],"UUID":"5108e3c6-b81b-4e7e-8960-5043ce2714fb","type":"load"}],"blurHash":"UtPQ87WBD%%M~qWBt7ofM{ayofWB?bt7Rjof","pic_color":"FFFFFF","pic_opacity":1,"viewport_phone_portrait":{"hidden":true,"z":347},"wid":"648ae93a23e6010021f94634","mag_num_id":4300655,"__v":0},{"_id":"648ae93a23e6010021f94635","x":1054,"y":4760,"w":974,"h":549,"type":"shots","basePath":"https://sh-p.rmcdn.net/53c4dbbc8d42d1f9116065be/d5c0cf87-dfd6-44f3-b8d6-6951c982e460","numberOfImages":84,"playbackType":"scroll","scrollSpeed":0.9,"scrollStartPoint":"bottom","scrollDelay":0,"hoverDirection":"horizontally","triggers":[],"startPointOffset":100,"pausable":true,"byStepSpeed":1,"byStepLoop":true,"byStepSpringLoop":false,"firstFrameLambdaUrl":"https://d2kq0urxkarztv.cloudfront.net/shots-templates/image-3a609ecc-02d1-488a-94a9-8ea25d08e55f.jpg","z":316,"imageHeight":720,"imageWidth":1280,"totalSize":5268369,"useEasing":true,"animation":[{"steps":[{"speed":2,"dx":-1060,"dy":0,"acceleration":"ease-both","start_point":"bottom","start_offset":0,"use_move":true},{"speed":1.5,"dx":-990,"dy":0,"use_move":true},{"speed":2,"dx":-1050,"dy":0,"use_move":true},{"speed":2.5,"dx":-1005,"dy":0,"use_move":true},{"speed":3,"dx":-1045,"dy":0,"use_move":true},{"speed":4,"dx":-1018,"dy":0,"use_move":true},{"speed":4.5,"dx":-1043,"dy":0,"use_move":true},{"speed":5,"dx":-1028,"dy":0,"use_move":true}],"UUID":"65095a3f-a754-4dbe-a68f-0d05c7c8db25","type":"scroll"}],"name":"DT PUMA","viewport_phone_portrait":{"hidden":true,"z":317},"hidden":false,"wid":"648ae93a23e6010021f94635","mag_num_id":4300655,"__v":0},{"_id":"648ae93a23e6010021f94636","x":41,"y":4793,"w":360,"h":80,"type":"iframe","use_iframe":false,"z":317,"code":"<div class=\"cont\">\n\n  <span id=\"container\">18Montrose: \nPuma x Butter Goods\n\nShot/Edited/Graded: Isaac Hargreaves\n  </span> \n\n</div>\n\n\n <link rel=\"stylesheet\" href=\"https://use.typekit.net/hkv1mkr.css\">\n\n\n<style>\n\n.cont {\n  text-align:left; \n  display:flex; \n  flex-direction: column; \n  align-items: left;\n  width: 100%;\n  font-family: \"lft-etica-mono\", sans-serif;\n  letter-spacing: 0.0em;\n  font-weight:normal;  \n  overflow: hidden;\n  color: #fff;\n  margin-top: 0px;\n  text-transform: none;\n  font-weight:normal;\n  font-size: 7px;\n}\n\nspan {\n  display:flex; \n  flex-direction: column; \n  margin-left: 0px;\n  content: \"\\A\";\n  white-space: pre;\n  margin-top: 0px;\n  text-transform: none;\n  font-weight:normal;\n  line-height: 8px;\n  text-transform: uppercase;\n}\n</style>\n\n\n\n\n<script>\n\n(function($) {\n\n  $.fn.shuffleLetters = function(prop) {\n\n    var options = $.extend({\n      \"step\": 9, // How many times should the letters be changed\n      \"fps\": 75, // Frames Per Second\n      \"text\": \"\", // Use this text instead of the contents\n      \"callback\": function() {} // Run once the animation is complete\n    }, prop)\n\n    return this.each(function() {\n      var el = $(this),\n        str = \"\";\n\n      // Preventing parallel animations using a flag;\n      if (el.data('animated')) {\n        return true;\n      }\n      el.data('animated', true);\n\n      if (options.text) {\n        str = options.text.split('');\n      } else {\n        str = el.text().split('');\n      }\n\n      // The types array holds the type for each character;\n      // Letters holds the positions of non-space characters;\n\n      var types = [],\n        letters = [];\n\n      // Looping through all the chars of the string\n\n      for (var i = 0; i < str.length; i++) {\n\n        var ch = str[i];\n\n        if (ch == \" \") {\n          types[i] = \"space\";\n          continue;\n        } else if (/[a-z]/.test(ch)) {\n          types[i] = \"lowerLetter\";\n        } else if (/[A-Z]/.test(ch)) {\n          types[i] = \"upperLetter\";\n        } else {\n          types[i] = \"symbol\";\n        }\n\n        letters.push(i);\n      }\n\n      el.html(\"\");\n\n      // Self executing named function expression:\n\n      (function shuffle(start) {\n\n        // This code is run options.fps times per second\n        // and updates the contents of the page element\n\n        var i,\n          len = letters.length,\n          strCopy = str.slice(0); // Fresh copy of the string\n\n        if (start > len) {\n\n          // The animation is complete. Updating the\n          // flag and triggering the callback;\n\n          el.data('animated', false);\n          options.callback(el);\n          return;\n        }\n\n        // All the work gets done here\n        for (i = Math.max(start, 0); i < len; i++) {\n\n          // The start argument and options.step limit\n          // the characters we will be working on at once\n\n          if (i < start + options.step) {\n            // Generate a random character at thsi position\n            strCopy[letters[i]] = randomChar(types[letters[i]]);\n          } else {\n            strCopy[letters[i]] = \"\";\n          }\n        }\n\n        el.text(strCopy.join(\"\"));\n\n        setTimeout(function() {\n\n          shuffle(start + 1);\n\n        }, 1000 / options.fps);\n\n      })(-options.step);\n\n\n    });\n  };\n\n  function randomChar(type) {\n    var pool = \"\";\n\n    if (type == \"lowerLetter\") {\n      pool = \"abcdefghijklmnopqrstuvwxyz\";\n    } else if (type == \"upperLetter\") {\n      pool = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\n    } else if (type == \"symbol\") {\n      pool = \",.?/\\\\!'\\\"\";\n    }\n\n    var arr = pool.split('');\n    return arr[Math.floor(Math.random() * arr.length)];\n  }\n\n})(jQuery);\n\n\n$(function() {\n  var container = $(\"#container\"),\n    userText = $('#userText');\n\n  // Shuffle the contents of container\n  container.shuffleLetters();\n\n  // Bind events\n  userText.click(function() {\n    userText.val(\"\");\n  }).bind('keypress', function(e) {\n    if (e.keyCode == 13) {\n      // The return key was pressed\n      container.shuffleLetters({\n        \"text\": userText.val()\n      });\n      userText.val(\"\");\n    }\n  }).hide();\n\n  // Leave a 4 second pause\n\n  function last() {\n    console.log(container);\n    // Shuffle the container with custom text\n    container.shuffleLetters({\n      \"text\": \"\"\n    });\n    userText.val(\"type anything and hit return..\").fadeIn();\n  }\n\n  var container = $(\"#container\");\n\n  container.shuffleLetters();\n\n  function shuffle(text) {\n    console.log(text);\n    // Shuffle the container with custom text\n    container.shuffleLetters({\n      text: text\n    });\n  }\n\n  var arr = ['A UK based creative collective led by filmmaker and colourist Isaac Hargreaves and creative director Rich Brown',]; \n  //var i = 0;\n  //var interval = setInterval(function() {\n  //  shuffle(arr[i++ % arr.length]);\n  //}, 3000);\n});\n        </script>","options":{"clear_content":false,"use_iframe":false},"clear_content":false,"name":"DT PUMA","full_width_initial_w":143,"full_width_initial_x":193,"full_width_margin":0,"is_full_width":false,"full_height_initial_h":18,"full_height_initial_y":69,"full_height_margin":0,"is_full_height":false,"animation":[{"steps":[{"speed":0.6,"delay_px":1400,"dx":0,"dy":400,"rotate":-20,"acceleration":"ease-both","start_point":"bottom","start_offset":200,"from_rotate":0,"use_move":true,"use_rotate":true}],"UUID":"42482afd-1747-4411-bc1e-a071f26c8bc5","type":"scroll"}],"hidden":false,"sticked":"","viewport_phone_portrait":{"hidden":true,"z":318},"wid":"648ae93a23e6010021f94636","mag_num_id":4300655,"__v":0},{"_id":"648ae93a23e6010021f94637","x":26,"y":5344,"w":973,"h":556,"type":"shots","basePath":"https://sh-p.rmcdn.net/53c4dbbc8d42d1f9116065be/0f2cb26f-f91c-41bf-93ee-a5297abe7377","numberOfImages":84,"playbackType":"scroll","scrollSpeed":0.65,"scrollStartPoint":"bottom","scrollDelay":0,"hoverDirection":"horizontally","triggers":[],"startPointOffset":0,"pausable":true,"byStepSpeed":1,"byStepLoop":true,"byStepSpringLoop":false,"firstFrameLambdaUrl":"https://d2kq0urxkarztv.cloudfront.net/shots-templates/image-2243e4ff-66ef-4efa-8e1e-b2c989bd09b0.jpg","z":318,"imageHeight":720,"imageWidth":1280,"totalSize":4059858,"useEasing":true,"animation":[{"steps":[{"speed":0.5,"scale":100,"acceleration":"ease-both","start_point":"bottom","start_offset":0,"from_scale":10,"use_scale":true}],"UUID":"76c62207-df3c-4921-9fac-4a59b25e795a","type":"scroll"}],"hidden":false,"name":"DT Goa","viewport_phone_portrait":{"hidden":true,"z":319},"wid":"648ae93a23e6010021f94637","mag_num_id":4300655,"__v":0},{"_id":"648ae93a23e6010021f94638","x":41,"y":5360,"w":358,"h":78,"type":"iframe","use_iframe":false,"z":319,"code":"<div class=\"cont\">\n\n  <span id=\"container\">The Goa Express\n“Portrait” Music Video\n\nDirector: Tommy Davis\nDoP/Colourist: Isaac Hargreaves\nEditor: Connor Hall\n  </span> \n\n</div>\n\n\n <link rel=\"stylesheet\" href=\"https://use.typekit.net/hkv1mkr.css\">\n\n\n<style>\n\n.cont {\n  text-align:left; \n  display:flex; \n  flex-direction: column; \n  align-items: left;\n  width: 100%;\n  font-family: \"lft-etica-mono\", sans-serif;\n  letter-spacing: 0.0em;\n  font-weight:normal;  \n  overflow: hidden;\n  color: #fff;\n  margin-top: 0px;\n  text-transform: none;\n  font-weight:normal;\n  font-size: 7px;\n}\n\nspan {\n  display:flex; \n  flex-direction: column; \n  margin-left: 0px;\n  content: \"\\A\";\n  white-space: pre;\n  margin-top: 0px;\n  text-transform: none;\n  font-weight:normal;\n  line-height: 8px;\n  text-transform: uppercase;\n}\n</style>\n\n\n\n\n<script>\n\n(function($) {\n\n  $.fn.shuffleLetters = function(prop) {\n\n    var options = $.extend({\n      \"step\": 9, // How many times should the letters be changed\n      \"fps\": 75, // Frames Per Second\n      \"text\": \"\", // Use this text instead of the contents\n      \"callback\": function() {} // Run once the animation is complete\n    }, prop)\n\n    return this.each(function() {\n      var el = $(this),\n        str = \"\";\n\n      // Preventing parallel animations using a flag;\n      if (el.data('animated')) {\n        return true;\n      }\n      el.data('animated', true);\n\n      if (options.text) {\n        str = options.text.split('');\n      } else {\n        str = el.text().split('');\n      }\n\n      // The types array holds the type for each character;\n      // Letters holds the positions of non-space characters;\n\n      var types = [],\n        letters = [];\n\n      // Looping through all the chars of the string\n\n      for (var i = 0; i < str.length; i++) {\n\n        var ch = str[i];\n\n        if (ch == \" \") {\n          types[i] = \"space\";\n          continue;\n        } else if (/[a-z]/.test(ch)) {\n          types[i] = \"lowerLetter\";\n        } else if (/[A-Z]/.test(ch)) {\n          types[i] = \"upperLetter\";\n        } else {\n          types[i] = \"symbol\";\n        }\n\n        letters.push(i);\n      }\n\n      el.html(\"\");\n\n      // Self executing named function expression:\n\n      (function shuffle(start) {\n\n        // This code is run options.fps times per second\n        // and updates the contents of the page element\n\n        var i,\n          len = letters.length,\n          strCopy = str.slice(0); // Fresh copy of the string\n\n        if (start > len) {\n\n          // The animation is complete. Updating the\n          // flag and triggering the callback;\n\n          el.data('animated', false);\n          options.callback(el);\n          return;\n        }\n\n        // All the work gets done here\n        for (i = Math.max(start, 0); i < len; i++) {\n\n          // The start argument and options.step limit\n          // the characters we will be working on at once\n\n          if (i < start + options.step) {\n            // Generate a random character at thsi position\n            strCopy[letters[i]] = randomChar(types[letters[i]]);\n          } else {\n            strCopy[letters[i]] = \"\";\n          }\n        }\n\n        el.text(strCopy.join(\"\"));\n\n        setTimeout(function() {\n\n          shuffle(start + 1);\n\n        }, 1000 / options.fps);\n\n      })(-options.step);\n\n\n    });\n  };\n\n  function randomChar(type) {\n    var pool = \"\";\n\n    if (type == \"lowerLetter\") {\n      pool = \"abcdefghijklmnopqrstuvwxyz\";\n    } else if (type == \"upperLetter\") {\n      pool = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\n    } else if (type == \"symbol\") {\n      pool = \",.?/\\\\!'\\\"\";\n    }\n\n    var arr = pool.split('');\n    return arr[Math.floor(Math.random() * arr.length)];\n  }\n\n})(jQuery);\n\n\n$(function() {\n  var container = $(\"#container\"),\n    userText = $('#userText');\n\n  // Shuffle the contents of container\n  container.shuffleLetters();\n\n  // Bind events\n  userText.click(function() {\n    userText.val(\"\");\n  }).bind('keypress', function(e) {\n    if (e.keyCode == 13) {\n      // The return key was pressed\n      container.shuffleLetters({\n        \"text\": userText.val()\n      });\n      userText.val(\"\");\n    }\n  }).hide();\n\n  // Leave a 4 second pause\n\n  function last() {\n    console.log(container);\n    // Shuffle the container with custom text\n    container.shuffleLetters({\n      \"text\": \"\"\n    });\n    userText.val(\"type anything and hit return..\").fadeIn();\n  }\n\n  var container = $(\"#container\");\n\n  container.shuffleLetters();\n\n  function shuffle(text) {\n    console.log(text);\n    // Shuffle the container with custom text\n    container.shuffleLetters({\n      text: text\n    });\n  }\n\n  var arr = ['A UK based creative collective led by filmmaker and colourist Isaac Hargreaves and creative director Rich Brown',]; \n  //var i = 0;\n  //var interval = setInterval(function() {\n  //  shuffle(arr[i++ % arr.length]);\n  //}, 3000);\n});\n        </script>","options":{"clear_content":false,"use_iframe":false},"clear_content":false,"name":"DT Goa","full_width_initial_w":143,"full_width_initial_x":193,"full_width_margin":0,"is_full_width":false,"full_height_initial_h":18,"full_height_initial_y":69,"full_height_margin":0,"is_full_height":false,"animation":[{"steps":[{"speed":0.6,"delay_px":1400,"dx":0,"dy":400,"rotate":-20,"acceleration":"ease-both","start_point":"bottom","start_offset":200,"from_rotate":0,"use_move":true,"use_rotate":true}],"UUID":"975e7972-fbca-4355-9f79-3fbfe54b24ff","type":"scroll"}],"hidden":false,"sticked":"","viewport_phone_portrait":{"hidden":true,"z":320},"wid":"648ae93a23e6010021f94638","mag_num_id":4300655,"__v":0},{"_id":"648ae93a23e6010021f9464b","x":-487,"y":0,"w":1997,"h":6400,"type":"iframe","use_iframe":true,"z":322,"code":"<!-- Paint effect !-->\n\n\n<style>\n  *,\n\n*:before,\n\n*:after {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  scroll-behavior: smooth;\n  background-color: none;\n  height: 100%;\n  width: 100%;\n\n}\n\n.bubble {\n  width: 30px;\n  height: 30px;\n  border-radius: 100%;\n  position: fixed;\n  z-index: 99;\n  animation: float 3s ease-in-out;\n  background-color: none;\n  box-shadow: 0 0 0 7px #ffffff, 0 0 0 0 rgba(255, 255, 255, 255);\n  filter: blur(20px);\n  transform: translateZ(-40px);\n}\n\n@keyframes float {\n  0% {\n    opacity: 0.9;\n  }\n\n  50% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 0;\n  }\n\n}\n\ninput[type=color]{\n  \n  z-index: 9999;\n  position: absolute;\n  bottom: 1rem;\n  left: 1rem;\n  overflow: hidden;\n  border: 3px solid white;\n  background-color: white;\n  color: white;\n  height: 2rem;\n  width: 2rem;\n  border-radius: .5rem;\n  padding: 0 1px;\n}\n  </style>\n\n<script>\n  function createBubble(x, y) {\n      var bubble = document.createElement(\"div\");\n      bubble.classList.add(\"bubble\");\n      bubble.style.left = (x - 25) + \"px\";\n      bubble.style.top = (y - 25) + \"px\";\n\n     \n      document.body.appendChild(bubble);\n\n      setTimeout(function() {\n        bubble.remove();\n      }, 3000);\n\n    }\n\n    document.addEventListener(\"touchmove\", function(event) {\n      event.preventDefault();\n      var touch = event.touches[0];\n      createBubble(touch.pageX, touch.pageY);\n    });\n\n    document.addEventListener(\"mousemove\", function(event) {\n     createBubble(event.pageX, event.pageY);\n\n    });\n</script>","options":{"clear_content":false,"use_iframe":true},"clear_content":false,"full_height_initial_h":360,"full_height_initial_y":241,"full_height_margin":0,"is_full_height":true,"viewport_phone_portrait":{"hidden":true,"z":321},"full_width_initial_w":480,"full_width_initial_x":272,"full_width_margin":0,"is_full_width":true,"name":"DT Cursor White","_hidden":[{"pid":"default","value":false}],"_z":[{"pid":"default","value":327}],"sticked":"","hidden":false,"wid":"648ae93a23e6010021f9464b","mag_num_id":4300655,"__v":0},{"_id":"648b0a451c0c43006d48fe2b","x":174,"y":5964,"w":290,"h":118,"type":"iframe","use_iframe":false,"z":320,"code":"<div class=\"cont\">\n\n  <span id=\"container\">As a freelance designer and creative director of full-service agency RVLV, Rich has left an indelible mark on the industry throughout his illustrious career spanning more than two-decades. He has flawlessly collaborated with renowned powerhouses including Superhero Cheesecake, AKQA, B-Reel, MediaMonks, Code d’Azur, Thinking Box. Rich's extraordinary wealth of experience is widely acclaimed, reflected in an impressive collection of over 40 awards wowing clients such as Ivy Park, Netflix, Chiva's Bros, Ben and Jerry's, Schwarzkopf, Sony and Zalando DE to name a few. His industry expertise has also earned him a seat on the Awwwards jury since 2013, further solidifying his standing as a discerning arbiter of exceptional design.\n  </span> \n\n</div>\n\n\n\n <link rel=\"stylesheet\" href=\"https://use.typekit.net/hkv1mkr.css\">\n\n\n<style>\n\n.cont {\n  text-align:left; \n  display:flex; \n  flex-direction: column; \n  align-items: left;\n  width: 100%;\n  font-family: \"lft-etica-mono\", sans-serif;\n  letter-spacing: 0.0em;\n  font-weight:normal;  \n  overflow: hidden;\n  text-decoration: none;   \n  color: #fff;\n  margin-top: 0px;\n  text-transform: none;\n  font-weight:normal;  \n  font-size: 7px;\n  line-height: 10px;\n}\n\n\nspan {\n  position: absolute;\n  margin-left: 0px;\n  content: \"\\A\";\n  white-space: pre-line;\n  text-transform: none;\n}\n  \n  \n  \n</style>\n\n\n\n\n<script>\n\n(function($) {\n\n  $.fn.shuffleLetters = function(prop) {\n\n    var options = $.extend({\n      \"step\": 9, // How many times should the letters be changed\n      \"fps\": 75, // Frames Per Second\n      \"text\": \"\", // Use this text instead of the contents\n      \"callback\": function() {} // Run once the animation is complete\n    }, prop)\n\n    return this.each(function() {\n      var el = $(this),\n        str = \"\";\n\n      // Preventing parallel animations using a flag;\n      if (el.data('animated')) {\n        return true;\n      }\n      el.data('animated', true);\n\n      if (options.text) {\n        str = options.text.split('');\n      } else {\n        str = el.text().split('');\n      }\n\n      // The types array holds the type for each character;\n      // Letters holds the positions of non-space characters;\n\n      var types = [],\n        letters = [];\n\n      // Looping through all the chars of the string\n\n      for (var i = 0; i < str.length; i++) {\n\n        var ch = str[i];\n\n        if (ch == \" \") {\n          types[i] = \"space\";\n          continue;\n        } else if (/[a-z]/.test(ch)) {\n          types[i] = \"lowerLetter\";\n        } else if (/[A-Z]/.test(ch)) {\n          types[i] = \"upperLetter\";\n        } else {\n          types[i] = \"symbol\";\n        }\n\n        letters.push(i);\n      }\n\n      el.html(\"\");\n\n      // Self executing named function expression:\n\n      (function shuffle(start) {\n\n        // This code is run options.fps times per second\n        // and updates the contents of the page element\n\n        var i,\n          len = letters.length,\n          strCopy = str.slice(0); // Fresh copy of the string\n\n        if (start > len) {\n\n          // The animation is complete. Updating the\n          // flag and triggering the callback;\n\n          // el.data('animated', false);\n          // options.callback(el);\n          \n        }\n\n        // All the work gets done here\n        for (i = Math.max(start, 0); i < len; i++) {\n\n          // The start argument and options.step limit\n          // the characters we will be working on at once\n\n          if (i < start + options.step) {\n            // Generate a random character at thsi position\n            strCopy[letters[i]] = randomChar(types[letters[i]]);\n          } else {\n            strCopy[letters[i]] = \"\";\n          }\n        }\n\n        el.text(strCopy.join(\"\"));\n\n        setTimeout(function() {\n\n          shuffle(start + 1);\n\n        }, 400 / options.fps);\n\n      })(-options.step);\n\n\n    });\n  };\n\n  function randomChar(type) {\n    var pool = \"\";\n\n    if (type == \"lowerLetter\") {\n      pool = \"abcdefghijklmnopqrstuvwxyz\";\n    } else if (type == \"upperLetter\") {\n      pool = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\n    } else if (type == \"symbol\") {\n      pool = \",.?/\\\\!'\\\"\";\n    }\n\n    var arr = pool.split('');\n    return arr[Math.floor(Math.random() * arr.length)];\n  }\n\n})(jQuery);\n\n\n$(function() {\n  var container = $(\"#container\"),\n    userText = $('#userText');\n\n  // Shuffle the contents of container\n  container.shuffleLetters();\n\n  // Bind events\n  userText.click(function() {\n    userText.val(\"\");\n  }).bind('keypress', function(e) {\n    if (e.keyCode == 13) {\n      // The return key was pressed\n      container.shuffleLetters({\n        \"text\": userText.val()\n      });\n      userText.val(\"\");\n    }\n  }).hide();\n\n  // Leave a 4 second pause\n\n  function last() {\n    console.log(container);\n    // Shuffle the container with custom text\n    container.shuffleLetters({\n      \"text\": \"\"\n    });\n    userText.val(\"type anything and hit return..\").fadeIn();\n  }\n\n  var container = $(\"#container\");\n\n  container.shuffleLetters();\n\n  function shuffle(text) {\n    console.log(text);\n    // Shuffle the container with custom text\n    container.shuffleLetters({\n      text: text\n    });\n  }\n\n  var arr = ['As a freelance designer and creative director of full-service agency RVLV, Rich has left an indelible mark on the industry throughout his illustrious career spanning more than two-decades. He has flawlessly collaborated with renowned powerhouses including Superhero Cheesecake, AKQA, B-Reel, MediaMonks, Code d’Azur, Thinking Box. Richs extraordinary wealth of experience is widely acclaimed, reflected in an impressive collection of over 40 awards wowing clients such as Ivy Park, Netflix, Chivas Bros, Ben and Jerrys, Schwarzkopf, Sony and Zalando DE to name a few. His industry expertise has also earned him a seat on the Awwwards jury since 2013, further solidifying his standing as a discerning arbiter of exceptional design.'\n            ]; \n  var i = 0;\n  //var interval = setInterval(function() {\n  //  shuffle(arr[i++ % arr.length]);\n  //}, 3000);\n});\n        </script>","options":{"clear_content":false,"use_iframe":false},"clear_content":false,"viewport_phone_portrait":{"hidden":true,"z":322},"name":"DT About P2","full_width_initial_w":143,"full_width_initial_x":193,"full_width_margin":0,"is_full_width":false,"full_height_initial_h":18,"full_height_initial_y":69,"full_height_margin":0,"is_full_height":false,"animation":[{"steps":[{"speed":0.3,"dx":0,"dy":200,"start_point":"bottom","start_offset":0,"use_move":true}],"UUID":"3d7b5f7c-4448-43bf-9276-6003e2a5fe9a","type":"scroll"}],"hidden":false,"sticked":"","wid":"648b0a451c0c43006d48fe2b","mag_num_id":4300655,"__v":0},{"_id":"648b24ee1c54b20013b7f6d5","x":560,"y":6014,"w":290,"h":121,"type":"iframe","use_iframe":false,"z":321,"code":"<div class=\"cont\">\n\n  <span id=\"container\">Isaac's reputation is quickly ascending to new heights, having already etched his name alongside industry giants such as Jean Paul Gaultier, CocaCola, Puma, Kappa, and Jeffery West. With a profound love for fashion and music videos, he seamlessly weaves his artistic prowess and effortlessly breathes life into each project, creating visually captivating and memorable experiences.\n  </span> \n\n</div>\n\n\n <link rel=\"stylesheet\" href=\"https://use.typekit.net/hkv1mkr.css\">\n\n\n<style>\n\n.cont {\n  text-align:left; \n  display:flex; \n  flex-direction: column; \n  align-items: left;\n  width: 100%;\n  font-family: \"lft-etica-mono\", sans-serif;\n  letter-spacing: 0.0em;\n  font-weight:normal;  \n  overflow: hidden;\n  text-decoration: none;   \n  color: #fff;\n  margin-top: 0px;\n  text-transform: none;\n  font-weight:normal;  \n  font-size: 7px;\n  line-height: 10px;\n}\n\n\nspan {\n  position: absolute;\n  margin-left: 0px;\n  content: \"\\A\";\n  white-space: pre-line;\n  text-transform: none;\n}\n\n\n\n\n<script>\n\n(function($) {\n\n  $.fn.shuffleLetters = function(prop) {\n\n    var options = $.extend({\n      \"step\": 9, // How many times should the letters be changed\n      \"fps\": 75, // Frames Per Second\n      \"text\": \"\", // Use this text instead of the contents\n      \"callback\": function() {} // Run once the animation is complete\n    }, prop)\n\n    return this.each(function() {\n      var el = $(this),\n        str = \"\";\n\n      // Preventing parallel animations using a flag;\n      if (el.data('animated')) {\n        return true;\n      }\n      el.data('animated', true);\n\n      if (options.text) {\n        str = options.text.split('');\n      } else {\n        str = el.text().split('');\n      }\n\n      // The types array holds the type for each character;\n      // Letters holds the positions of non-space characters;\n\n      var types = [],\n        letters = [];\n\n      // Looping through all the chars of the string\n\n      for (var i = 0; i < str.length; i++) {\n\n        var ch = str[i];\n\n        if (ch == \" \") {\n          types[i] = \"space\";\n          continue;\n        } else if (/[a-z]/.test(ch)) {\n          types[i] = \"lowerLetter\";\n        } else if (/[A-Z]/.test(ch)) {\n          types[i] = \"upperLetter\";\n        } else {\n          types[i] = \"symbol\";\n        }\n\n        letters.push(i);\n      }\n\n      el.html(\"\");\n\n      // Self executing named function expression:\n\n      (function shuffle(start) {\n\n        // This code is run options.fps times per second\n        // and updates the contents of the page element\n\n        var i,\n          len = letters.length,\n          strCopy = str.slice(0); // Fresh copy of the string\n\n        if (start > len) {\n\n          // The animation is complete. Updating the\n          // flag and triggering the callback;\n\n          // el.data('animated', false);\n          // options.callback(el);\n          \n        }\n\n        // All the work gets done here\n        for (i = Math.max(start, 0); i < len; i++) {\n\n          // The start argument and options.step limit\n          // the characters we will be working on at once\n\n          if (i < start + options.step) {\n            // Generate a random character at thsi position\n            strCopy[letters[i]] = randomChar(types[letters[i]]);\n          } else {\n            strCopy[letters[i]] = \"\";\n          }\n        }\n\n        el.text(strCopy.join(\"\"));\n\n        setTimeout(function() {\n\n          shuffle(start + 1);\n\n        }, 400 / options.fps);\n\n      })(-options.step);\n\n\n    });\n  };\n\n  function randomChar(type) {\n    var pool = \"\";\n\n    if (type == \"lowerLetter\") {\n      pool = \"abcdefghijklmnopqrstuvwxyz\";\n    } else if (type == \"upperLetter\") {\n      pool = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\n    } else if (type == \"symbol\") {\n      pool = \",.?/\\\\!'\\\"\";\n    }\n\n    var arr = pool.split('');\n    return arr[Math.floor(Math.random() * arr.length)];\n  }\n\n})(jQuery);\n\n\n$(function() {\n  var container = $(\"#container\"),\n    userText = $('#userText');\n\n  // Shuffle the contents of container\n  container.shuffleLetters();\n\n  // Bind events\n  userText.click(function() {\n    userText.val(\"\");\n  }).bind('keypress', function(e) {\n    if (e.keyCode == 13) {\n      // The return key was pressed\n      container.shuffleLetters({\n        \"text\": userText.val()\n      });\n      userText.val(\"\");\n    }\n  }).hide();\n\n  // Leave a 4 second pause\n\n  function last() {\n    console.log(container);\n    // Shuffle the container with custom text\n    container.shuffleLetters({\n      \"text\": \"\"\n    });\n    userText.val(\"type anything and hit return..\").fadeIn();\n  }\n\n  var container = $(\"#container\");\n\n  container.shuffleLetters();\n\n  function shuffle(text) {\n    console.log(text);\n    // Shuffle the container with custom text\n    container.shuffleLetters({\n      text: text\n    });\n  }\n\n  var arr = ['Isaacs reputation is quickly ascending to new heights, having already etched his name alongside industry giants such as Jean Paul Gaultier, CocaCola, Puma, Kappa, and Jeffery West. With a profound love for fashion and music videos, he seamlessly weaves his artistic prowess and effortlessly breathes life into each project, creating visually captivating and memorable experiences.'\n            ]; \n  var i = 0;\n  //var interval = setInterval(function() {\n  //  shuffle(arr[i++ % arr.length]);\n  //}, 3000);\n});\n        </script>","options":{"clear_content":false,"use_iframe":false},"clear_content":false,"viewport_phone_portrait":{"hidden":true,"z":323},"name":"DT About P3","full_width_initial_w":143,"full_width_initial_x":193,"full_width_margin":0,"is_full_width":false,"full_height_initial_h":18,"full_height_initial_y":69,"full_height_margin":0,"is_full_height":false,"animation":[{"steps":[],"UUID":"b0840cc3-a9f7-4ccd-8d7c-7273f57f83a4","type":"scroll"}],"hidden":false,"sticked":"","wid":"648b24ee1c54b20013b7f6d5","mag_num_id":4300655,"__v":0},{"_id":"64a6d31b58c6b3003d3c3e17","type":"shots","basePath":"https://sh-p.rmcdn.net/53c4dbbc8d42d1f9116065be/0f2cb26f-f91c-41bf-93ee-a5297abe7377","numberOfImages":84,"playbackType":"scroll","scrollSpeed":0.65,"scrollStartPoint":"bottom","scrollDelay":0,"hoverDirection":"horizontally","triggers":[],"startPointOffset":0,"pausable":true,"byStepSpeed":1,"byStepLoop":true,"byStepSpringLoop":false,"firstFrameLambdaUrl":"https://d2kq0urxkarztv.cloudfront.net/shots-templates/image-2243e4ff-66ef-4efa-8e1e-b2c989bd09b0.jpg","imageHeight":720,"imageWidth":1280,"totalSize":4059858,"useEasing":true,"animation":[{"steps":[{"speed":0.5,"scale":100,"acceleration":"ease-both","start_point":"bottom","start_offset":0,"from_scale":10,"use_scale":true}],"UUID":"85870277-8ea9-4156-9f4c-c62f06348b89","type":"scroll"}],"hidden":true,"name":"M Goa","viewport_phone_portrait":{"x":-240,"y":4264,"w":821,"h":470,"z":333,"hidden":false},"z":331,"wid":"64a6d31b58c6b3003d3c3e17","mag_num_id":4300655,"__v":0},{"_id":"64a6d39f717ff2006822bf14","type":"shots","basePath":"https://sh-p.rmcdn.net/53c4dbbc8d42d1f9116065be/d5c0cf87-dfd6-44f3-b8d6-6951c982e460","numberOfImages":84,"playbackType":"scroll","scrollSpeed":0.9,"scrollStartPoint":"bottom","scrollDelay":0,"hoverDirection":"horizontally","triggers":[],"startPointOffset":100,"pausable":true,"byStepSpeed":1,"byStepLoop":true,"byStepSpringLoop":false,"firstFrameLambdaUrl":"https://d2kq0urxkarztv.cloudfront.net/shots-templates/image-3a609ecc-02d1-488a-94a9-8ea25d08e55f.jpg","imageHeight":720,"imageWidth":1280,"totalSize":5268369,"useEasing":true,"name":"M PUMA","viewport_phone_portrait":{"x":818,"y":3746,"w":763,"h":431,"z":331,"hidden":false,"animation":[{"steps":[{"speed":2,"dx":-1060,"dy":0,"acceleration":"ease-both","start_point":"bottom","start_offset":0,"use_move":true},{"speed":1.5,"dx":-990,"dy":0,"use_move":true},{"speed":2,"dx":-1050,"dy":0,"use_move":true},{"speed":2.5,"dx":-1005,"dy":0,"use_move":true},{"speed":3,"dx":-1045,"dy":0,"use_move":true},{"speed":4,"dx":-1018,"dy":0,"use_move":true},{"speed":4.5,"dx":-1043,"dy":0,"use_move":true},{"speed":5,"dx":-1028,"dy":0,"use_move":true}],"UUID":"6d1d3a5a-2f0c-4d55-90c5-30a79c707fab","type":"scroll"}]},"hidden":true,"z":329,"wid":"64a6d39f717ff2006822bf14","mag_num_id":4300655,"__v":0},{"_id":"64a6d3bcf039920044d28741","type":"shots","basePath":"https://sh-p.rmcdn.net/53c4dbbc8d42d1f9116065be/483dd072-1c03-413e-95e6-cefead32e45d","numberOfImages":100,"playbackType":"scroll","scrollSpeed":0.65,"scrollStartPoint":"bottom","scrollDelay":0,"hoverDirection":"horizontally","triggers":[],"startPointOffset":0,"pausable":true,"byStepSpeed":1,"byStepLoop":true,"byStepSpringLoop":false,"firstFrameLambdaUrl":"https://d2kq0urxkarztv.cloudfront.net/shots-templates/image-e8a9e882-8a01-4f21-aa31-89a5cf23fc67.jpg","imageHeight":720,"imageWidth":1280,"totalSize":4659962,"useEasing":true,"animation":[{"steps":[{"speed":2,"dx":1060,"dy":0,"acceleration":"ease-both","start_point":"bottom","start_offset":0,"use_move":true},{"speed":1.5,"dx":990,"dy":0,"use_move":true},{"speed":2,"dx":1050,"dy":0,"use_move":true},{"speed":2.5,"dx":1005,"dy":0,"use_move":true},{"speed":3,"dx":1045,"dy":0,"use_move":true},{"speed":4,"dx":1018,"dy":0,"use_move":true},{"speed":4.5,"dx":1043,"dy":0,"use_move":true},{"speed":5,"dx":1028,"dy":0,"use_move":true}],"UUID":"8accb2de-dbfa-430c-aa83-30a06c13c908","type":"scroll"}],"name":"M FACE","viewport_phone_portrait":{"x":-1189,"y":3310,"w":741,"h":419,"z":328,"hidden":false},"hidden":true,"z":327,"wid":"64a6d3bcf039920044d28741","mag_num_id":4300655,"__v":0},{"_id":"64a6d3e0a2c007003605b564","type":"shots","basePath":"https://sh-p.rmcdn.net/53c4dbbc8d42d1f9116065be/34fb42e9-3fff-4773-a706-b0eb308c2e45","numberOfImages":56,"playbackType":"scroll","scrollSpeed":0.65,"scrollStartPoint":"bottom","scrollDelay":0,"hoverDirection":"horizontally","triggers":[],"startPointOffset":0,"pausable":true,"byStepSpeed":1,"byStepLoop":true,"byStepSpringLoop":false,"firstFrameLambdaUrl":"https://d2kq0urxkarztv.cloudfront.net/shots-templates/image-60d578d3-7c9b-4e16-a97a-f39b4d484fd0.jpg","imageHeight":720,"imageWidth":1280,"totalSize":2844378,"useEasing":true,"animation":[],"hidden":true,"name":"M Jeffery West","viewport_phone_portrait":{"x":-244,"y":2834,"w":734,"h":421,"z":325,"hidden":false},"z":325,"wid":"64a6d3e0a2c007003605b564","mag_num_id":4300655,"__v":0},{"_id":"64a6d4a62128c5004a7649e6","type":"shots","basePath":"https://sh-p.rmcdn.net/53c4dbbc8d42d1f9116065be/b421f407-6152-401b-9f0d-ca538f69c8d6","numberOfImages":183,"playbackType":"scroll","scrollSpeed":0.65,"scrollStartPoint":"bottom","scrollDelay":1074,"hoverDirection":"horizontally","triggers":[],"startPointOffset":0,"pausable":true,"byStepSpeed":1,"byStepLoop":true,"byStepSpringLoop":false,"firstFrameLambdaUrl":"https://d2kq0urxkarztv.cloudfront.net/shots-templates/image-be5cf9d1-4754-4c27-a97e-1facd5f2dba3.jpg","imageHeight":720,"imageWidth":1280,"totalSize":5279283,"hidden":true,"name":"M JeanPaul","useEasing":true,"viewport_phone_portrait":{"y":485,"w":821,"h":464,"z":309,"fixed_position":"n","sticked":"","hidden":false,"x":49,"animation":[{"steps":[{"speed":1,"delay_px":1200,"dx":0,"dy":-400,"acceleration":"ease-both","start_point":"bottom","start_offset":0,"use_move":true},{"speed":1,"dx":-10,"dy":-515,"scale":50,"use_move":true,"use_scale":true},{"speed":1.2,"delay_px":300,"dx":-145,"dy":-1400,"rotate":45,"acceleration":"ease-both","use_move":true,"use_rotate":true}],"UUID":"3d6d29a7-0d4e-406c-94c3-6ef0ffc95507","type":"scroll"}]},"_variationY":-3717,"z":309,"wid":"64a6d4a62128c5004a7649e6","mag_num_id":4300655,"__v":0},{"_id":"64a6d4b82128c5004a764aae","type":"picture","cropH":450,"cropW":1821,"cropX":0,"cropY":0,"originalH":450,"originalW":1821,"picture":{"url":"https://c-p.rmcdn.net/53c4dbbc8d42d1f9116065be/4274316/Image-45546a1d-7a29-48a9-a1f8-95d05778d6a2.svg","thumbUrl":"https://c-p.rmcdn.net/53c4dbbc8d42d1f9116065be/4274316/Image-7728ac1e-7cfd-4bdf-8d38-e9e29930b36f.png","originUrls":{"url":"https://c-p.rmcdn.net/53c4dbbc8d42d1f9116065be/4274316/Image-45546a1d-7a29-48a9-a1f8-95d05778d6a2.svg","thumbUrl":"https://c-p.rmcdn.net/53c4dbbc8d42d1f9116065be/4274316/Image-7728ac1e-7cfd-4bdf-8d38-e9e29930b36f.png"},"type":"svg","editedVectorUrl":"https://c-p.rmcdn.net/53c4dbbc8d42d1f9116065be/4274316/Image-f338300f-2a5f-41be-b0dc-2ddab9ff097a.svg"},"name":"M LOGO L","_z":[{"pid":"default","value":302}],"hidden":true,"blurHash":"UYNdO8xu9Ft7~qWBofWBD%fQayWB?bofRjof","pic_color":"00FF36","pic_opacity":1,"_variationY":-4138,"viewport_phone_portrait":{"x":2,"y":396,"w":320,"h":79,"z":353,"fixed_position":"n","sticked":"","_hidden":[{"pid":"default","value":null}],"sticked_margin":0,"hidden":false,"scale":0.175727622185612,"animation":[{"steps":[{"speed":0.4,"delay_px":150,"dx":0,"dy":-400,"acceleration":"ease-both","start_point":"bottom","start_offset":0,"use_move":true}],"UUID":"22500dc4-f028-469a-bfcd-f89df1afb8d8","type":"scroll"}]},"z":308,"wid":"64a6d4b82128c5004a764aae","mag_num_id":4300655,"__v":0},{"_id":"64a6d4cc2362a5006030c557","type":"shots","basePath":"https://sh-p.rmcdn.net/53c4dbbc8d42d1f9116065be/0e45214c-c796-41f8-9f03-739a499ac847","numberOfImages":150,"playbackType":"scroll","scrollSpeed":0.65,"scrollStartPoint":"bottom","scrollDelay":0,"hoverDirection":"horizontally","triggers":[],"startPointOffset":300,"pausable":true,"byStepSpeed":1,"byStepLoop":true,"byStepSpringLoop":false,"firstFrameLambdaUrl":"https://d2kq0urxkarztv.cloudfront.net/shots-templates/image-e88557aa-f1a0-4d59-b6c5-ca9ac5238c59.jpg","imageHeight":720,"imageWidth":1280,"totalSize":3425462,"viewport_phone_portrait":{"y":-2,"z":308,"hidden":false,"sticked":"","fixed_position":"n","w":939,"h":478,"x":13,"animation":[{"steps":[{"speed":1.2,"delay_px":1150,"dx":0,"dy":-800,"scale":0,"start_point":"bottom","start_offset":0,"from_rotate":0,"from_scale":100,"use_move":true,"use_rotate":true,"use_scale":true,"rotate":70}],"UUID":"a10018f4-d5af-4a22-84f6-17c6d24c0784","type":"scroll"}]},"name":"M Kasien","useEasing":true,"_variationY":-4265,"hidden":true,"is_above":false,"z":307,"wid":"64a6d4cc2362a5006030c557","mag_num_id":4300655,"__v":0},{"_id":"64affd52531e2a005dc94eb5","type":"shape","tp":"rectangle","bg_opacity":0,"color":"ffffff","opacity":1,"radius":0,"radius_rect_tl":0,"radius_rect_tr":0,"radius_rect_bl":0,"radius_rect_br":0,"radius_rect_independent":false,"sides":3,"stroke":"solid","hidden":true,"viewport_phone_portrait":{"borders":0,"weight":1,"bg_color":"13AC50","x":0,"y":18,"w":100,"h":34,"z":356,"hidden":false,"sticked":"","fixed_position":"se","animation":[]},"name":"M Email Button","clickLink":"mailto:talk@villainy.uk","clickTarget":"_self","z":336,"wid":"64affd52531e2a005dc94eb5","mag_num_id":4300655,"__v":0},{"_id":"64b0014be6297300671c4c67","type":"picture","cropH":450,"cropW":1821,"cropX":0,"cropY":0,"originalH":450,"originalW":1821,"picture":{"url":"https://c-p.rmcdn.net/53c4dbbc8d42d1f9116065be/4274316/Image-45546a1d-7a29-48a9-a1f8-95d05778d6a2.svg","thumbUrl":"https://c-p.rmcdn.net/53c4dbbc8d42d1f9116065be/4274316/Image-7728ac1e-7cfd-4bdf-8d38-e9e29930b36f.png","originUrls":{"url":"https://c-p.rmcdn.net/53c4dbbc8d42d1f9116065be/4274316/Image-45546a1d-7a29-48a9-a1f8-95d05778d6a2.svg","thumbUrl":"https://c-p.rmcdn.net/53c4dbbc8d42d1f9116065be/4274316/Image-7728ac1e-7cfd-4bdf-8d38-e9e29930b36f.png"},"type":"svg","editedVectorUrl":"https://c-p.rmcdn.net/53c4dbbc8d42d1f9116065be/4274316/Image-f338300f-2a5f-41be-b0dc-2ddab9ff097a.svg"},"name":"M LOGO LOADER","_z":[{"pid":"default","value":302}],"hidden":true,"blurHash":"UYNdO8xu9Ft7~qWBofWBD%fQayWB?bofRjof","pic_color":"00FF36","pic_opacity":1,"_variationY":182,"viewport_phone_portrait":{"x":2,"y":426,"w":320,"h":79,"z":359,"fixed_position":"n","sticked":"","_hidden":[{"pid":"default","value":null}],"sticked_margin":0,"hidden":false,"scale":0.175727622185612,"animation":[{"steps":[{"duration":0.6,"opacity":100,"acceleration":"ease-both","from_opacity":0,"use_move":true,"use_opacity":true,"dx":0,"dy":-30},{"duration":0.1,"delay":1.5,"opacity":0,"acceleration":"ease-both","use_opacity":true}],"UUID":"328a7a8f-587e-406a-a88c-b3ca17782f3e","type":"load"}]},"z":365,"wid":"64b0014be6297300671c4c67","mag_num_id":4300655,"__v":0},{"_id":"64b296caa09030005203e498","type":"text","version":3,"verticalAlign":"top","textDirection":"LTR","autosize":true,"blocks":[{"key":"cg9p6","text":"London based creative film production collective led by filmmaker Isaac Hargreaves and creative director Rich Brown","entityRanges":[],"depth":0}],"entityMap":{},"flags":{"baseline":true,"calculatedLineHeight":true,"updatedLinks":true,"newListPosition":true},"hidden":true,"viewport_phone_portrait":{"styles":[{"key":"cg9p6","type":"unstyled","inlineStyles":{"styles":[{"offset":0,"length":115,"styles":["0;0","1;1","2;2"]}],"keys":["FONT_FAMILY","COLOR","FONT_SIZE"],"values":["rgwr","FFFFFF64","9"]}}],"x":21,"y":24,"w":259,"h":39,"z":350,"hidden":false,"blocksMeta":[{"key":"cg9p6","data":{"lineHeight":13,"sizesLinkedStatus":false,"textStyle":"style-277be178-6979-4747-beaf-51b9b29ce74b"}}],"sticked":"","fixed_position":"nw","animation":[{"steps":[{"speed":0.3,"delay_px":750,"dx":0,"dy":-165,"rotate":-45,"acceleration":"ease-both","start_point":"bottom","start_offset":0,"from_rotate":0,"use_move":true,"use_rotate":true}],"UUID":"63db5344-bf70-411d-b50b-0b6384652024","type":"scroll"}]},"name":"M2 Intro","text":"","is_above":false,"z":337,"wid":"64b296caa09030005203e498","mag_num_id":4300655,"__v":0},{"_id":"64b2985b4fa147004439e1bf","type":"text","version":3,"verticalAlign":"top","textDirection":"LTR","autosize":true,"blocks":[{"key":"cg9p6","text":"OFFICIAL MUSIC VIDEO\nKASIEN “BREATHE\"\nDIRECTOR/ EDITOR: COSMO RUSH\nDOP/ COLOURIST: ISAAC HARGREAVES\n(AUDIO) PRODUCER: KARMA KID , SLIM TYPICAL & KASIEN","entityRanges":[],"depth":0}],"entityMap":{},"flags":{"baseline":true,"calculatedLineHeight":true,"updatedLinks":true,"newListPosition":true},"hidden":true,"viewport_phone_portrait":{"styles":[{"key":"cg9p6","type":"unstyled","inlineStyles":{"styles":[{"offset":0,"length":151,"styles":["0;0","1;1","2;2"]}],"keys":["FONT_FAMILY","COLOR","FONT_SIZE"],"values":["rgwr","FFFFFF64","7"]}}],"x":21,"y":13,"w":259,"h":45,"z":311,"hidden":false,"blocksMeta":[{"key":"cg9p6","data":{"lineHeight":9,"sizesLinkedStatus":false,"textStyle":"style-277be178-6979-4747-beaf-51b9b29ce74b"}}],"sticked":"","fixed_position":"nw","animation":[{"steps":[{"speed":0.3,"dx":0,"dy":340,"rotate":-20,"acceleration":"ease-both","start_point":"bottom","start_offset":0,"from_opacity":0,"from_rotate":0,"use_move":true,"use_opacity":true,"use_rotate":true,"opacity":100},{"speed":1,"dx":0,"dy":0,"acceleration":"ease-both","use_move":true,"use_opacity":true,"use_rotate":true,"use_scale":true,"scale":0,"opacity":0,"rotate":45}],"UUID":"904726b4-0cd9-4a5b-a4c0-c92078fd0717","type":"scroll"}]},"name":"M2 PROJ KASIEN","text":"","is_above":false,"z":338,"wid":"64b2985b4fa147004439e1bf","mag_num_id":4300655,"__v":0},{"_id":"64b29997ca635c0059dcd3c9","type":"text","version":3,"verticalAlign":"top","textDirection":"LTR","autosize":true,"blocks":[{"key":"cg9p6","text":"EMAIL US","entityRanges":[],"depth":0}],"entityMap":{},"flags":{"baseline":true,"calculatedLineHeight":true,"updatedLinks":true,"newListPosition":true},"hidden":true,"viewport_phone_portrait":{"styles":[{"key":"cg9p6","type":"unstyled","inlineStyles":{"styles":[{"offset":0,"length":8,"styles":["0;0","1;1","2;2","3;3","4;4"]}],"keys":["FONT_FAMILY","COLOR","FONT_STYLE","FONT_WEIGHT","FONT_SIZE"],"values":["rgwr","FFFFFF64","normal","500","12"]}}],"x":-8,"y":32,"w":87,"h":13,"z":354,"hidden":false,"blocksMeta":[{"key":"cg9p6","data":{"lineHeight":13,"sizesLinkedStatus":false,"textStyle":"style-277be178-6979-4747-beaf-51b9b29ce74b"}}],"sticked":"","fixed_position":"se","animation":[{"steps":[{"speed":0.3,"delay_px":4750,"acceleration":"ease-both","start_point":"bottom","start_offset":0,"from_rotate":0,"use_move":true,"use_rotate":true,"dx":150,"dy":-80,"rotate":45}],"UUID":"b090c9d1-57c2-45a9-badc-035662735fe3","type":"scroll"}]},"name":"M2 Email","text":"","is_above":false,"z":339,"wid":"64b29997ca635c0059dcd3c9","mag_num_id":4300655,"__v":0},{"_id":"64b29b058c58a5001a69801f","type":"text","version":3,"verticalAlign":"top","textDirection":"LTR","autosize":true,"blocks":[{"key":"cg9p6","text":"FILM PRODUCTION","entityRanges":[],"depth":0}],"entityMap":{},"flags":{"baseline":true,"calculatedLineHeight":true,"updatedLinks":true,"newListPosition":true},"hidden":true,"viewport_phone_portrait":{"styles":[{"key":"cg9p6","type":"unstyled","inlineStyles":{"styles":[{"offset":0,"length":15,"styles":["0;0","1;1","2;2","3;3","4;4"]}],"keys":["FONT_FAMILY","COLOR","FONT_STYLE","FONT_WEIGHT","FONT_SIZE"],"values":["rgwr","FFFFFF64","normal","500","12"]}}],"x":21,"y":32,"w":120,"h":13,"z":348,"hidden":false,"blocksMeta":[{"key":"cg9p6","data":{"lineHeight":13,"sizesLinkedStatus":false,"textStyle":"style-277be178-6979-4747-beaf-51b9b29ce74b"}}],"sticked":"","fixed_position":"sw","animation":[{"steps":[{"speed":0.3,"delay_px":4650,"dx":-170,"dy":-80,"rotate":-45,"acceleration":"ease-both","start_point":"bottom","start_offset":0,"from_rotate":0,"use_move":true,"use_rotate":true}],"UUID":"e29ccb79-2d92-4d41-a138-d5471ff4539c","type":"scroll"}]},"name":"M2 FILM PRODUCTION","text":"","is_above":false,"z":340,"wid":"64b29b058c58a5001a69801f","mag_num_id":4300655,"__v":0},{"_id":"64b29b8c30f45c004b664059","type":"text","version":3,"verticalAlign":"top","textDirection":"LTR","autosize":true,"blocks":[{"key":"cg9p6","text":"JEAN PAUL GAULTIER\nLE MALE ELIXIR\nDIRECTOR/PRODUCER: NATHAN BAXTER\nDP: CASSIUS KANE\n1ST AC: TEDDY\nGAFFER: ADAM TRZ\nSPARK: KENNETH LIEW\nART DEPT: THE LOONEY STUDIO\nEDITOR: EDEN RAE READ\nEDIT PRODUCER: TROY SMITH\nEDIT HOUSE: THE ASSEMBLY ROOMS\nMUA: ALICE HOWLETT","entityRanges":[],"depth":0}],"entityMap":{},"flags":{"baseline":true,"calculatedLineHeight":true,"updatedLinks":true,"newListPosition":true},"hidden":true,"viewport_phone_portrait":{"styles":[{"key":"cg9p6","type":"unstyled","inlineStyles":{"styles":[{"offset":0,"length":260,"styles":["0;0","1;1","2;2","3;3"]}],"keys":["FONT_FAMILY","COLOR","TRANSFORM","FONT_SIZE"],"values":["rgwr","FFFFFF64","uppercase","7"]}}],"x":21,"y":504,"w":259,"h":99,"z":360,"hidden":false,"blocksMeta":[{"key":"cg9p6","data":{"lineHeight":9,"sizesLinkedStatus":false,"textStyle":"style-277be178-6979-4747-beaf-51b9b29ce74b"}}],"sticked":"","fixed_position":"nw","animation":[{"steps":[{"speed":0.6,"delay_px":1150,"dx":10,"dy":-350,"rotate":-20,"acceleration":"ease-both","start_point":"bottom","start_offset":0,"from_opacity":0,"from_rotate":0,"use_move":true,"use_opacity":true,"use_rotate":true,"opacity":100},{"speed":1,"delay_px":300,"dx":0,"dy":-800,"opacity":0,"acceleration":"ease-both","use_move":true,"use_opacity":true}],"UUID":"e8485ed6-5ce5-4dba-bb6a-810f6cef7d67","type":"scroll"}]},"name":"M2 PRO JEAN","text":"","is_above":false,"z":341,"wid":"64b29b8c30f45c004b664059","mag_num_id":4300655,"__v":0},{"_id":"64b29dcaa8bb68005900709e","type":"text","version":3,"verticalAlign":"top","textDirection":"LTR","autosize":true,"blocks":[{"key":"cg9p6","text":"At the helm of Villainy, you'll find the dynamic duo of filmmaker and colorist Isaac Hargreaves, along with the visionary creative director Rich Brown. Our collective ardor for crafting compelling and visually striking narratives propels us forward, allowing us to seize those awe-inspiring moments that leave a lasting impact on audiences.\n\nCollaboration lies at the heart of our ethos. We thrive on forging partnerships with creative agencies, filmmakers, and clients who bring a wealth of diverse and stimulating challenges to the table. Together, we embark on a journey that fuels our passion, ignites our imagination, and paves the way for extraordinary results.","entityRanges":[],"depth":0}],"entityMap":{},"flags":{"baseline":true,"calculatedLineHeight":true,"updatedLinks":true,"newListPosition":true},"hidden":true,"viewport_phone_portrait":{"styles":[{"key":"cg9p6","type":"unstyled","inlineStyles":{"styles":[{"offset":0,"length":667,"styles":["0;0","1;1","2;2"]}],"keys":["FONT_FAMILY","COLOR","FONT_SIZE"],"values":["rgwr","FFFFFF64","9"]}}],"x":14,"y":893,"w":279,"h":208,"z":301,"hidden":false,"blocksMeta":[{"key":"cg9p6","data":{"lineHeight":13,"sizesLinkedStatus":false,"textStyle":"style-277be178-6979-4747-beaf-51b9b29ce74b"}}],"sticked":"","fixed_position":"nw","animation":[{"steps":[{"speed":1,"delay_px":1700,"dx":0,"dy":-800,"acceleration":"ease-both","start_point":"bottom","start_offset":0,"use_move":true},{"speed":1.5,"delay_px":300,"opacity":0,"acceleration":"ease-both","use_move":true,"use_opacity":true,"use_scale":true,"dx":0,"dy":-1300,"scale":0}],"UUID":"11321f3d-1387-4dae-af57-b3512f6d7d0c","type":"scroll"}]},"name":"M2 About P1","text":"","is_above":false,"z":342,"wid":"64b29dcaa8bb68005900709e","mag_num_id":4300655,"__v":0},{"_id":"64b2a27204da3000133e8218","type":"text","version":3,"verticalAlign":"top","textDirection":"LTR","autosize":true,"blocks":[{"key":"cg9p6","text":"Jeffery West\nBehind the scenes\nFilm: Isaac Hargreaves\nDOP/ Colourist: Isaac Hargreaves\nPhotoshoot: Tiyana Pentland","entityRanges":[],"depth":0}],"entityMap":{},"flags":{"baseline":true,"calculatedLineHeight":true,"updatedLinks":true,"newListPosition":true},"hidden":true,"viewport_phone_portrait":{"styles":[{"key":"cg9p6","type":"unstyled","inlineStyles":{"styles":[{"offset":0,"length":114,"styles":["0;0","1;1","2;2","3;3"]}],"keys":["FONT_FAMILY","COLOR","TRANSFORM","FONT_SIZE"],"values":["rgwr","FFFFFF64","uppercase","7"]}}],"x":21,"y":2855,"w":259,"h":45,"z":327,"hidden":false,"blocksMeta":[{"key":"cg9p6","data":{"lineHeight":9,"sizesLinkedStatus":false,"textStyle":"style-277be178-6979-4747-beaf-51b9b29ce74b"}}],"sticked":"","animation":[{"steps":[{"speed":0.6,"delay_px":1400,"dx":0,"dy":290,"rotate":-20,"acceleration":"ease-both","start_point":"bottom","start_offset":200,"from_rotate":0,"use_move":true,"use_rotate":true}],"UUID":"ff3eb0f9-a4d8-4028-b4f3-f2865840e140","type":"scroll"}]},"name":"M2 PRO JEFF","text":"","is_above":false,"z":343,"wid":"64b2a27204da3000133e8218","mag_num_id":4300655,"__v":0},{"_id":"64b2a2be9a0d8a00584d2737","type":"text","version":3,"verticalAlign":"top","textDirection":"LTR","autosize":true,"blocks":[{"key":"cg9p6","text":"FACE X AYA \n\"Where is your face\"\nDirector of Photography: Isaac Hargreaves\nDOP/ COLOURIST: Isaac Hargreaves","entityRanges":[],"depth":0}],"entityMap":{},"flags":{"baseline":true,"calculatedLineHeight":true,"updatedLinks":true,"newListPosition":true},"hidden":true,"viewport_phone_portrait":{"styles":[{"key":"cg9p6","type":"unstyled","inlineStyles":{"styles":[{"offset":0,"length":107,"styles":["0;0","1;1","2;2","3;3"]}],"keys":["FONT_FAMILY","COLOR","TRANSFORM","FONT_SIZE"],"values":["rgwr","FFFFFF64","uppercase","7"]}}],"x":21,"y":3324,"w":259,"h":33,"z":330,"hidden":false,"blocksMeta":[{"key":"cg9p6","data":{"lineHeight":9,"sizesLinkedStatus":false,"textStyle":"style-277be178-6979-4747-beaf-51b9b29ce74b"}}],"sticked":"","animation":[{"steps":[{"speed":0.6,"delay_px":1400,"dx":0,"dy":300,"rotate":-20,"acceleration":"ease-both","start_point":"bottom","start_offset":200,"from_rotate":0,"use_move":true,"use_rotate":true}],"UUID":"bccaf5d6-e1e5-4989-8972-cd6609884a9b","type":"scroll"}]},"name":"M2 PRO FACE","text":"","is_above":false,"z":344,"wid":"64b2a2be9a0d8a00584d2737","mag_num_id":4300655,"__v":0},{"_id":"64b2a2efa8bb68005900aa5d","type":"text","version":3,"verticalAlign":"top","textDirection":"LTR","autosize":true,"blocks":[{"key":"cg9p6","text":"18Montrose: \nPuma x Butter Goods\nShot/Edited/Graded: Isaac Hargreaves","entityRanges":[],"depth":0}],"entityMap":{},"flags":{"baseline":true,"calculatedLineHeight":true,"updatedLinks":true,"newListPosition":true},"hidden":true,"viewport_phone_portrait":{"styles":[{"key":"cg9p6","type":"unstyled","inlineStyles":{"styles":[{"offset":0,"length":69,"styles":["0;0","1;1","2;2","3;3"]}],"keys":["FONT_FAMILY","COLOR","TRANSFORM","FONT_SIZE"],"values":["rgwr","FFFFFF64","uppercase","7"]}}],"x":21,"y":3748,"w":259,"h":27,"z":342,"hidden":false,"blocksMeta":[{"key":"cg9p6","data":{"lineHeight":9,"sizesLinkedStatus":false,"textStyle":"style-277be178-6979-4747-beaf-51b9b29ce74b"}}],"sticked":"","animation":[{"steps":[{"speed":0.6,"delay_px":1400,"dx":0,"dy":330,"rotate":-20,"acceleration":"ease-both","start_point":"bottom","start_offset":200,"from_rotate":0,"use_move":true,"use_rotate":true}],"UUID":"f6eb2aad-7344-4a42-ac0a-7080b8d30839","type":"scroll"}]},"name":"M2 PRO PUMA","text":"","is_above":false,"z":345,"wid":"64b2a2efa8bb68005900aa5d","mag_num_id":4300655,"__v":0},{"_id":"64b2a335f081170047ff67ab","type":"text","version":3,"verticalAlign":"top","textDirection":"LTR","autosize":true,"blocks":[{"key":"cg9p6","text":"The Goa Express\n“Portrait” Music Video\nDirector: Tommy Davis\nDoP/Colourist: Isaac Hargreaves\nEditor: Connor Hall","entityRanges":[],"depth":0}],"entityMap":{},"flags":{"baseline":true,"calculatedLineHeight":true,"updatedLinks":true,"newListPosition":true},"hidden":true,"viewport_phone_portrait":{"styles":[{"key":"cg9p6","type":"unstyled","inlineStyles":{"styles":[{"offset":0,"length":112,"styles":["0;0","1;1","2;2","3;3"]}],"keys":["FONT_FAMILY","COLOR","TRANSFORM","FONT_SIZE"],"values":["rgwr","FFFFFF64","uppercase","7"]}}],"x":21,"y":4281,"w":259,"h":45,"z":335,"hidden":false,"blocksMeta":[{"key":"cg9p6","data":{"lineHeight":9,"sizesLinkedStatus":false,"textStyle":"style-277be178-6979-4747-beaf-51b9b29ce74b"}}],"sticked":"","animation":[{"steps":[{"speed":0.6,"delay_px":1400,"dx":0,"dy":330,"rotate":-20,"acceleration":"ease-both","start_point":"bottom","start_offset":200,"from_rotate":0,"use_move":true,"use_rotate":true}],"UUID":"768acbdc-e240-4406-b8e7-15f8dce54fbe","type":"scroll"}]},"name":"M2 PRO FACE","text":"","is_above":false,"z":346,"wid":"64b2a335f081170047ff67ab","mag_num_id":4300655,"__v":0},{"_id":"64b2a489670940003608489d","type":"text","version":3,"verticalAlign":"top","textDirection":"LTR","autosize":true,"blocks":[{"key":"cg9p6","text":"As a freelance designer and creative director of full-service agency RVLV, Rich has left an indelible mark on the industry throughout his illustrious career spanning more than two-decades. He has flawlessly collaborated with renowned powerhouses including Superhero Cheesecake, AKQA, B-Reel, MediaMonks, Code d’Azur, Thinking Box. Rich's extraordinary wealth of experience is widely acclaimed, reflected in an impressive collection of over 40 awards wowing clients such as Ivy Park, Netflix, Chiva's Bros, Ben and Jerry's, Schwarzkopf, Sony and Zalando DE to name a few. His industry expertise has also earned him a seat on the Awwwards jury since 2013, further solidifying his standing as a discerning arbiter of exceptional design.","entityRanges":[],"depth":0}],"entityMap":{},"flags":{"baseline":true,"calculatedLineHeight":true,"updatedLinks":true,"newListPosition":true},"hidden":true,"viewport_phone_portrait":{"styles":[{"key":"cg9p6","type":"unstyled","inlineStyles":{"styles":[{"offset":0,"length":733,"styles":["0;0","1;1","2;2"]}],"keys":["FONT_FAMILY","COLOR","FONT_SIZE"],"values":["rgwr","FFFFFF64","9"]}}],"x":21,"y":4771,"w":279,"h":208,"z":338,"hidden":false,"blocksMeta":[{"key":"cg9p6","data":{"lineHeight":13,"sizesLinkedStatus":false,"textStyle":"style-277be178-6979-4747-beaf-51b9b29ce74b"}}],"sticked":"","animation":[{"steps":[{"speed":0.3,"dx":0,"dy":200,"start_point":"bottom","start_offset":0,"use_move":true}],"UUID":"023a1de3-d5a9-4868-83be-075ec4879d54","type":"scroll"}]},"name":"M2 About P2","text":"","is_above":false,"z":347,"wid":"64b2a489670940003608489d","mag_num_id":4300655,"__v":0},{"_id":"64b2a70345b74f006d5c6d98","type":"text","version":3,"verticalAlign":"top","textDirection":"LTR","autosize":true,"blocks":[{"key":"cg9p6","text":"Isaac's reputation is quickly ascending to new heights, having already etched his name alongside industry giants such as Jean Paul Gaultier, CocaCola, Puma, Kappa, and Jeffery West. With a profound love for fashion and music videos, he seamlessly weaves his artistic prowess and effortlessly breathes life into each project, creating visually captivating and memorable experiences.","entityRanges":[],"depth":0}],"entityMap":{},"flags":{"baseline":true,"calculatedLineHeight":true,"updatedLinks":true,"newListPosition":true},"hidden":true,"viewport_phone_portrait":{"styles":[{"key":"cg9p6","type":"unstyled","inlineStyles":{"styles":[{"offset":0,"length":381,"styles":["0;0","1;1","2;2"]}],"keys":["FONT_FAMILY","COLOR","FONT_SIZE"],"values":["rgwr","FFFFFF64","9"]}}],"x":21,"y":4978,"w":279,"h":117,"z":340,"hidden":false,"blocksMeta":[{"key":"cg9p6","data":{"lineHeight":13,"sizesLinkedStatus":false,"textStyle":"style-277be178-6979-4747-beaf-51b9b29ce74b"}}],"sticked":"","animation":[{"steps":[{"speed":0.6,"dx":0,"dy":300,"start_point":"bottom","start_offset":0,"use_move":true}],"UUID":"c252db9f-4ff6-4949-9331-5593afc8d167","type":"scroll"}]},"name":"M2 About P3","text":"","is_above":false,"z":348,"wid":"64b2a70345b74f006d5c6d98","mag_num_id":4300655,"__v":0},{"_id":"64ccb82ac678fe004590aa4a","x":0,"y":-5,"w":87,"h":87,"type":"iframe","use_iframe":true,"z":356,"code":"<div class=\"container\">\n\t<div class=\"field\">\n\t\t<div class=\"mouse\"></div>\n\n\t</div>\n</div>\n\n\n<style>\n* {\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tpadding: 0;\n}\n\nhtml, body {\n\twidth: 100%;\n\theight: 100%;\n}\n\n.container {\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: none;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.field {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-around;\n\twidth: 300px;\n}\n\n.mouse {\n\twidth: 20px;\n\theight: 35px;\n\tborder: 1px solid #FFF;\n\tborder-radius: 30px;\n\tposition: relative;\n\t&::before {\n\t\tcontent: '';\n\t\twidth: 5px;\n\t\theight: 5px;\n\t\tposition: absolute;\n\t\ttop: 3px;\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t\tbackground-color: #FFF;\n\t\tborder-radius: 50%;\n\t\topacity: 1;\n\t\tanimation: wheel 2s infinite;\n\t\t-webkit-animation: wheel 2s infinite;\n\t}\n}\n\n@keyframes wheel {\n\tto {\n\t\topacity: 0;\n\t\ttop: 25px;\n\t}\n}\n\n@-webkit-keyframes wheel {\n\tto {\n\t\topacity: 0;\n\t\ttop: 25px;\n\t}\n}\n\n\n\n</style>","name":"D Mouse Scroll","options":{"clear_content":false,"use_iframe":true},"clear_content":false,"fixed_position":"s","sticked":"","animation":[{"steps":[{"speed":0.5,"delay_px":50,"opacity":0,"start_point":"bottom","start_offset":0,"from_opacity":100,"use_opacity":true}],"UUID":"f748b1bb-c4e0-4a9b-b2cd-bd02e678855a","type":"scroll"}],"hidden":false,"_variationY":-326,"viewport_phone_portrait":{"hidden":true,"z":361},"wid":"64ccb82ac678fe004590aa4a","mag_num_id":4300655,"__v":0},{"_id":"64ccb82b6150c90067b70746","x":0.27,"y":0,"w":1024.54,"h":714.12,"type":"iframe","use_iframe":true,"z":359,"code":"<link rel=\"stylesheet\" href=\"https://use.typekit.net/qiv5awe.css\">\n\n\n<div class=\"loadingpage\">\n\t<div class=\"counter\">\n\t\t<h1>0</h1>\n\t</div>\n</div>\n\n<style>\n  \n\n  }\n.fullcontainer{\n\twidth:100%;\n\theight:auto;\n\tfont-family: 'lft-etica-mono', sans-serif;\n\tpadding:10% 8%;\n    \n}\n.fullcontainer h2{\n\tmargin:0;\n\tpadding:0;\n\tcolor:#ffffff;\n\tfont-size:0.6rem;\n\tline-height:1.3;\n  font-weight: 700;\n}\n.fullcontainer p{\n\n\t\n}\n.loadingpage{\n\twidth:100vw;\n\theight:100vh;\n\tfont-family: 'lft-etica-mono', sans-serif;\n\tposition:fixed;\n\tz-index:1;\n\toverflow:hidden;\n}\n.loadingpage::before{\n\tcontent:'';\n\twidth:50%;\n\theight:100%;\n\tbackground:#101E21;\n\tposition:absolute;\n\tz-index:2;\n\tleft:0%;\n\ttop:0%;\n}\n.loadingpage::after{\n\tcontent:'';\n\twidth:51%;\n\theight:100%;\n\t// background:#101E21;\n\tbackground:#101E21;\n\tposition:absolute;\n\tz-index:2;\n\tright:0%;\n\ttop:0%;\n}\n.loadingpage .counter{\n\tmargin:auto;\n\tposition:absolute;\n\ttop:50%;\n\tleft:50%;\n\ttransform:translate(-50%,-50%);\n\tz-index:3;\n}\n.loadingpage h1{\n\tmargin-top:0px;\n\tpadding:0;\n\t// color:grey;\n\tcolor: #FFFFFF;\n\tfont-size:0.6rem;\n\tfont-weight:700;\n}\n/******** when page is loaded **********/\n.pageisloaded{\n\tvisibility:hidden;\n\t//opacity:0;\n\tpointer-events:none;\n\ttransform:translateY(-100%);\n\ttransition:transform 1s 1.3s ease-out;\n}\n.pageisloaded::before{\n\tcontent:'';\n\ttransform:translateX(-100%);\n\ttransition:all 1s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);\n}\n.pageisloaded::after{\n\tcontent:'';\n\ttransform:translateX(100%);\n\ttransition:all 1s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);\n}\n.pageisloaded .counter{\n\topacity:0;\n\ttransition:all 0.3s ease-out;\n}\n@media screen and (max-width:400px){\n\t.fullcontainer h2{\n\t\tline-height:1.2;\n\t\tfont-size:1.95rem;\n\t}\n\t.fullcontainer p{\n\t\tfont-size:0.91rem;\n\t}\n}\n  \n</style>\n\n<script>\n  $(document).ready(function() {\n\tvar counter = 0;\n\tfunction updateCounter(){\n\t\tif(counter == 101){\n\t\t\tclearInterval(foo);\n\t\t\t$('.loadingpage').addClass(\"pageisloaded\");\n\t\t}\n\t\telse{\n\t\t\t$('.counter h1').html(counter);\n\t\t\tcounter++;\n\t\t}\n\t}\n\t\n\tvar foo = setInterval(updateCounter , 30);\n\t\n});\n</script>","options":{"clear_content":false,"use_iframe":true},"clear_content":false,"_hidden":[{"pid":"default","value":null}],"_z":[{"pid":"64c8c2bdde3dea003d40fead","value":323},{"pid":"64c8c2bdde3dea003d40feae","value":333},{"pid":"64c8c2bdde3dea003d40feaf","value":306},{"pid":"default","value":333}],"fixed_position":"c","sticked":"","full_height_initial_h":360,"full_height_initial_y":-0.39999999999999997,"full_height_margin":0,"is_full_height":true,"full_width_initial_w":480,"full_width_initial_x":0,"full_width_margin":0,"is_full_width":true,"name":"D Countdown","animation":[{"steps":[{"duration":0.3,"delay":4.5,"opacity":0,"from_opacity":100,"use_opacity":true}],"UUID":"2d37d045-d49a-437b-9bb3-d94559e708b9","type":"load"}],"_variationY":0,"hidden":false,"viewport_phone_portrait":{"hidden":true,"z":362},"wid":"64ccb82b6150c90067b70746","mag_num_id":4300655,"__v":0},{"_id":"64ccb93cf32621003d373d0b","x":0.28,"y":0,"w":1024.55,"h":729.14,"type":"shape","tp":"rectangle","bg_color":"101E21","bg_opacity":1,"color":"ffffff","opacity":1,"borders":0,"radius":0,"radius_rect_tl":0,"radius_rect_tr":0,"radius_rect_bl":0,"radius_rect_br":0,"radius_rect_independent":false,"sides":3,"weight":1,"stroke":"solid","z":358,"name":"D Pre-Load BG","_hidden":[{"pid":"default","value":null}],"_z":[{"pid":"default","value":333}],"fixed_position":"c","sticked":"","full_height_initial_h":360,"full_height_initial_y":-0.06221646143875567,"full_height_margin":0,"is_full_height":true,"full_width_initial_w":480,"full_width_initial_x":0,"full_width_margin":0,"is_full_width":true,"animation":[{"steps":[{"duration":0.1,"delay":1.5,"opacity":0,"from_opacity":100,"use_opacity":true}],"UUID":"611bdc40-3c6a-45c3-89b2-ef7c880c9879","type":"load"}],"hidden":false,"_variationY":-6,"viewport_phone_portrait":{"hidden":true,"z":364},"wid":"64ccb93cf32621003d373d0b","mag_num_id":4300655,"__v":0},{"_id":"64ccb9cc01c36c003d78b5a8","type":"shape","tp":"rectangle","bg_color":"101E21","bg_opacity":1,"color":"ffffff","opacity":1,"borders":0,"radius":0,"radius_rect_tl":0,"radius_rect_tr":0,"radius_rect_bl":0,"radius_rect_br":0,"radius_rect_independent":false,"sides":3,"weight":1,"stroke":"solid","name":"M Pre-Load BG","_z":[{"pid":"default","value":333}],"full_height_initial_h":360,"full_height_initial_y":-0.06221646143875567,"full_height_margin":0,"full_width_initial_w":480,"full_width_initial_x":0,"full_width_margin":0,"hidden":true,"_variationY":0,"viewport_phone_portrait":{"x":-0.01,"y":-15.78,"w":480,"h":625,"z":358,"_hidden":[{"pid":"default","value":null}],"fixed_position":"c","sticked":"","is_full_height":false,"is_full_width":false,"hidden":false,"animation":[{"steps":[{"duration":0.5,"delay":1.5,"opacity":0,"from_opacity":100,"use_opacity":true}],"UUID":"8dfbad12-74c7-4178-a988-0e5e56e0860b","type":"load"}]},"z":357,"wid":"64ccb9cc01c36c003d78b5a8","mag_num_id":4300655,"__v":0}]