Type Interactions 2 Live Preview

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"featureFlags":[],"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails"},"__user":{"anon":true,"base_url":"/anon/","cohorts":[],"current_team_hashid":null,"current_team_id":0,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNzMzNjcyNzg2LCJpYXQiOjE3MzM2NjkxODYsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.JUJ1YJKN5K4CvDxoO6UQVkTWFvmL_TWAIuxAe9nz4zUxqiT3owAmiFz0bo7xGyIN_HgYlX56hux_qFjmBoioK5FgeNh037NjTflo3sPSi-OaJ6edZf2kr5eTHX6AgG8c07WDkKTqmxqt56MtoGCApaC6osx4VO8T_iG5YGlqHG5hWDNcrerm784OWhFrDODd11I3L_jusjxw7LpM9QgffPfanu2ZBJkrI7HQVM_9QVrKyo-N5RCh0Jb7WzcW2Pc7AeuIJht-Bhq0fWDdmT9ikFWcDZYlSqdzH6-k20szTLJNOq3zLsaiO-idZlVW3RqHUfhko1oWm4ueE4SJliLFMw"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":54872000,\"user_id\":219932,\"html\":\"\\n\\n<div id=\\\"cursor-circle\\\"><\\/div>\\n\\n<div id=\\\"fixed\\\">\\n  <button class=\\\"btnFixed\\\" onclick=\\\"SWITCH(0)\\\">1 small line<\\/button>\\n  <button class=\\\"btnFixed\\\" onclick=\\\"SWITCH(1)\\\">2 medium line<\\/button>\\n  <button class=\\\"btnFixed\\\" onclick=\\\"SWITCH(2)\\\">3 big line<\\/button>\\n  <button class=\\\"btnFixed\\\" onclick=\\\"SWITCH(3)\\\">4 fading circle<\\/button>\\n  <button class=\\\"btnFixed\\\" onclick=\\\"SWITCH(4)\\\">5 rainbow trail<\\/button>\\n<\\/div> \\n\\n<section id=\\\"intro\\\">\\n  <h1 class=\\\"text-block\\\">Look at a stone cutter hammering away at his rock, perhaps a hundred times without as much as a crack showing in it. Yet at the hundred-and-first blow it will split in two, and I know it was not the last blow that did it, but all that had gone before. -Jacob Riis<\\/h1>\\n<\\/section>\\n\\n<div class=\\\"citation\\\">\\n  <p>Based on the amazing work of <a class=\\\"cite-link\\\" href=\\\"https:\\/\\/taliacotton.com\\/\\\" target=\\\"_blank\\\">taliacotton.com<\\/a>.<\\/p>\\n<\\/div>\",\"css\":\":root {\\n  --color: DeepPink;\\n  --height: 0;\\n  --citation-bg-color: #1E0519;\\n  --citation-p-color: Salmon;\\n  --citation-a-color: MediumVioletRed;\\n  --citation-a-hover-color: DeepPink;\\n}\\n\\nhtml {\\n  box-sizing: border-box;\\n}\\n\\n*, *::before, *::after {\\n  box-sizing: inherit;\\n  &:focus {\\n    outline: none;\\n  }\\n}\\n\\n* {\\n  font-family: 'IBM Plex Sans Arabic', monaco, courier;\\n  -webkit-font-smoothing: antialiased;\\n  cursor: none;\\n}\\n\\nbody {\\n  margin: 20px;\\n  padding: 0;\\n  background: #14072b;\\n}\\n\\n#cursor-circle {\\n  position: fixed;\\n  z-index: 110;\\n  width: 20px;\\n  height: 20px;\\n  background-color: white;\\n  border-radius: 50%;\\n  pointer-events: none;\\n  transition:\\n    background ease-in 10ms,\\n    box-shadow ease-in 150ms,\\n    transform ease-in 150ms;\\n  \\/* promote it to its own layer to enable  hardware accelerated rendering: *\\/\\n  transform: translate3d(0, 0, 0);\\n}\\n\\n#fixed {\\n  position: relative;\\n  z-index: 100;\\n  max-width: 800px;\\n}\\n\\n.btnFixed {\\n  margin: 0 10px 10px 0;\\n  padding: 0.5rem 1rem;\\n  border: 0;\\n  background: #FCF454;\\n  transition: background 0.25s ease;\\n  &.active {\\n    background: MediumSpringGreen;\\n  }\\n  &:hover {\\n    background: #D1C818;\\n  }\\n}\\n\\n#intro {\\n  display: block;\\n  max-width: 800px;\\n}\\n\\nh1 {\\n  display: inline-block;\\n  margin: 0;\\n  font-weight: 400;\\n  font-size: calc(6.2vmin - 5px);\\n  line-height: 1.4;\\n  color: white;\\n}\\n\\nspan {\\n  position: relative;\\n}\\n\\n.word {\\n  margin-right: 0.75rem;\\n  white-space: nowrap;\\n}\\n\\n.char {\\n  padding: 0 0.25rem;\\n}\\n\\n.char::before {\\n  content: '';\\n  position: absolute;\\n  display: inline;\\n  top: 50%;\\n  left: 50%;\\n  transform: translate(-50%,-50%) rotate(45deg);\\n  z-index: -1;\\n  width: 2px;\\n  height: var(--height);\\n  background: var(--color);\\n  border-radius: 500px;\\n}\\n\\n.small-line,\\n.medium-line,\\n.big-line {\\n  .char::before {\\n    transition: height 0.25s ease;\\n  }\\n}\\n\\n.char.small-less-100:before {\\n  height: 50px;\\n  background: salmon;\\n}\\n.char.small-bn-100-200:before {\\n  height: 40px;\\n  background: SandyBrown;\\n}\\n.char.small-bn-200-300:before {\\n  height: 30px;\\n  background: #FCF454;\\n}\\n.char.small-bn-300-400:before {\\n  height: 20px;\\n  background: palegreen;\\n}\\n.char.small-more-400:before {\\n  height: 10px;\\n  background: DodgerBlue;\\n}\\n\\n.char.medium-less-100:before {\\n  width: 4px;\\n  height: 75px;\\n  background: salmon;\\n}\\n.char.medium-bn-100-200:before {\\n  width: 3px;\\n  height: 50px;\\n  background: SandyBrown;\\n}\\n.char.medium-bn-200-300:before {\\n  width: 3px;\\n  height: 30px;\\n  background: #FCF454;\\n}\\n.char.medium-bn-300-400:before {\\n  width: 2px;\\n  height: 20px;\\n  background: palegreen;\\n}\\n.char.medium-more-400:before {\\n  width: 2px;\\n  height: 10px;\\n  background: DodgerBlue;\\n}\\n\\n.char.big-less-100:before {\\n  width: 22px;\\n  height: 200px;\\n  background: salmon;\\n}\\n.char.big-bn-100-200:before {\\n  width: 16px;\\n  height: 160px;\\n  background: SandyBrown;\\n}\\n.char.big-bn-200-300:before {\\n  width: 12px;\\n  height: 120px;\\n  background: #FCF454;\\n}\\n.char.big-bn-300-400:before {\\n  width: 9px;\\n  height: 80px;\\n  background: palegreen;\\n}\\n.char.big-more-400:before {\\n  width: 4px;\\n  height: 40px;\\n  background: DodgerBlue;\\n}\\n\\n.char.fading-circle:before {\\n  content: '';\\n  position: absolute;\\n  top: 50%;\\n  left: 50%;\\n  transform: translate(-50%,-50%);\\n  z-index: -1;\\n  width: 0;\\n  height: 0;\\n  border-radius: 500px;\\n  opacity: 0;\\n  background: SandyBrown;\\n  animation: 1s fadeOut;\\n}\\n\\n@keyframes fadeOut {\\n  0% {\\n    width: 0;\\n    height: 0;\\n    opacity: 0;\\n  }\\n  50% {\\n    width: 100px;\\n    height: 100px;\\n    opacity: 1;\\n  }\\n  100% {\\n    width: 0;\\n    height: 0;\\n    opacity: 0;\\n  }\\n}\\n\\n\\/\\/ .trail {\\n\\/\\/   animation: 3s fadeOutQuick;\\n\\/\\/ }\\n\\/\\/ @keyframes fadeOutQuick {\\n\\/\\/   0% {\\n\\/\\/     background: transparent;\\n\\/\\/   }\\n\\/\\/   50% {\\n\\/\\/     background: var(--color);\\n\\/\\/   }\\n\\/\\/   100% {\\n\\/\\/     background: transparent;\\n\\/\\/   }\\n\\/\\/ }\\n\\n\\/\\/ @for $i from 1 through 4 {\\n\\/\\/   .trail-#{$i} {\\n\\/\\/     animation: 3s fadeOutQuick#{$i};\\n\\/\\/   }\\n\\/\\/   @keyframes fadeOutQuick#{$i} {\\n\\/\\/     0% {\\n\\/\\/       background: transparent;\\n\\/\\/     }\\n\\/\\/     50% {\\n\\/\\/       background: var(--color#{$i});\\n\\/\\/     }\\n\\/\\/     100% {\\n\\/\\/       background: transparent;\\n\\/\\/     }\\n\\/\\/   }\\n\\/\\/ }\\n\\n\\/\\/ citation\\n\\n.citation {\\n  position: fixed;\\n  bottom: 0;\\n  left: 0;\\n  z-index: 100;\\n  background: var(--citation-bg-color);\\n  p {\\n    margin: 0;\\n    padding: 10px;\\n    font-size: 12px;\\n    color: var(--citation-p-color);\\n    a {\\n      color: var(--citation-a-color);\\n      cursor: pointer;\\n      &:hover {\\n        color: var(--citation-a-hover-color);\\n      }\\n    }\\n  }\\n}\",\"js\":\"\\/\\/ cursor circle\\n\\nconst circle = document.getElementById('cursor-circle');\\nconst circleStyle = circle.style;\\n\\ndocument.addEventListener('mousemove', e => {\\n  window.requestAnimationFrame(() => {\\n    circleStyle.top = `${ e.clientY - circle.offsetHeight\\/2 }px`;\\n    circleStyle.left = `${ e.clientX - circle.offsetWidth\\/2 }px`;\\n  });\\n  let eTarget = e.target;\\n  if (eTarget.classList.contains('cite-link')) {\\n    circleStyle.display = \\\"none\\\"\\n  } else {\\n    circleStyle.display = \\\"block\\\"\\n  }\\n});\\n\\n\\/\\/ Lettering.js\\n\\n$(\\\".text-block\\\").lettering('words').children('span').addClass('word').lettering();\\n$(\\\".text-block .word span\\\").addClass('char');\\n\\n\\/\\/ $(\\\".text-block\\\").lettering('words');\\n\\n\\/\\/ $(\\\".text-block > span\\\").each(function(index) {\\n\\/\\/   newIndex = index + 1;\\n\\/\\/   let wordSpan = '.word' + newIndex;\\n\\/\\/   $(wordSpan).lettering();\\n\\/\\/ });\\n\\n\\/\\/\\n\\nlet n;\\nlet btns = document.getElementById(\\\"fixed\\\").children;\\n\\nlet charArray = [];\\nlet wordArray = [];\\n\\nfunction lettersInView() {\\n  $(\\\".char\\\").each(function() {\\n    charArray.push(this);\\n  });\\n  $(\\\".word\\\").each(function() {\\n    wordArray.push(this);\\n  });\\n}\\n\\nlettersInView();\\n\\n\\/\\/ $( \\\".text-block\\\" ).mouseover(function() {\\n\\/\\/   document.documentElement.style.setProperty('--height', '100px');\\n\\/\\/   document.documentElement.style.setProperty('--color', \\\"aqua\\\");\\n\\/\\/ });\\n\\/\\/ $( \\\".text-block\\\" ).mouseout(function() {\\n\\/\\/   document.documentElement.style.setProperty('--height', '20px');\\n\\/\\/   document.documentElement.style.setProperty('--color', \\\"DeepPink\\\");\\n\\/\\/ });\\n\\nfor (let i = 0; i < charArray.length; i++) {\\n  let char = charArray[i];\\n  char.addEventListener(\\\"mouseenter\\\", function () {\\n    \\/\\/ 4 fading circle\\n    if (n == 3) {\\n      char.classList.add(\\\"fading-circle\\\");\\n      setTimeout(function() {\\n        char.classList.remove(\\\"fading-circle\\\");\\n      }, 1000);\\n    }\\n    \\/\\/ 5 rainbow trail\\n    if (n == 4) {\\n      let char1 = charArray[i-1];\\n      let char2 = charArray[i+1];\\n      let char3 = charArray[i-2];\\n      let char4 = charArray[i+2];\\n      let randomColor = \\\"#\\\" + Math.floor(Math.random()*16777215).toString(16);\\n      let randomColor1 = \\\"#\\\" + Math.floor(Math.random()*16777215).toString(16);\\n      let randomColor2 = \\\"#\\\" + Math.floor(Math.random()*16777215).toString(16);\\n      let randomColor3 = \\\"#\\\" + Math.floor(Math.random()*16777215).toString(16);\\n      let randomColor4 = \\\"#\\\" + Math.floor(Math.random()*16777215).toString(16);\\n      char.style.backgroundColor = randomColor;\\n      if (char1) {\\n        char1.style.backgroundColor = randomColor1;\\n      }\\n      if (char2) {\\n        char2.style.backgroundColor = randomColor2;\\n      }\\n      if (char3) {\\n        char3.style.backgroundColor = randomColor3;\\n      }\\n      if (char4) {\\n        char4.style.backgroundColor = randomColor4;\\n      }\\n      setTimeout(function() {\\n        char.style.backgroundColor = \\\"transparent\\\";\\n        char1.style.backgroundColor = \\\"transparent\\\";\\n        char2.style.backgroundColor = \\\"transparent\\\";\\n        char3.style.backgroundColor = \\\"transparent\\\";\\n        char4.style.backgroundColor = \\\"transparent\\\";\\n      }, 1000);\\n    }\\n  });\\n}\\n\\n\\/\\/\\n\\nfor (let container of document.querySelectorAll(\\\".text-block\\\")) {\\n  container.addEventListener(\\\"mousemove\\\", function (e) {\\n    container.classList.add(\\\"mouseover\\\");\\n  });\\n  container.addEventListener(\\\"mouseout\\\", function (e) {\\n    container.classList.remove(\\\"mouseover\\\");\\n  });\\n}\\n\\nfunction distance(x1, y1, x2, y2) {\\n  return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));\\n}\\n\\nfunction map(value, low1, high1, low2, high2) {\\n  return low2 + ((high2 - low2) * (value - low1)) \\/ (high1 - low1);\\n}\\n\\nfunction findAncestor(el, cls) {\\n  while ((el = el.parentElement) && !el.classList.contains(cls));\\n  return el;\\n}\\n\\ndocument.addEventListener(\\\"mousemove\\\", function (e) {\\n  for (let i = 0; i < charArray.length; i++) {\\n    let char = charArray[i];\\n    let bounds = char.getBoundingClientRect();\\n    let dist = distance(\\n      e.clientX,\\n      e.clientY,\\n      bounds.left + bounds.width \\/ 2,\\n      bounds.top + bounds.height \\/ 2\\n    );\\n    let ancestor = findAncestor(char, \\\"text-block\\\");\\n    \\n    \\/\\/ 1 small line\\n    if (n == 0) {\\n      if (dist <= 100) {\\n        char.classList.remove('small-bn-100-200', 'small-bn-200-300', 'small-bn-300-400', 'small-more-400');\\n        char.classList.add('small-less-100');\\n      } else if (dist > 100 && dist <= 200) {\\n        char.classList.remove('small-less-100', 'small-bn-200-300', 'small-bn-300-400', 'small-more-400');\\n        char.classList.add('small-bn-100-200');\\n      } else if (dist > 200 && dist <= 300) {\\n        char.classList.remove('small-less-100', 'small-bn-100-200', 'small-bn-300-400', 'small-more-400');\\n        char.classList.add('small-bn-200-300');\\n      } else if (dist > 300 && dist <= 400) {\\n        char.classList.remove('small-less-100', 'small-bn-100-200', 'small-bn-200-300', 'small-more-400');\\n        char.classList.add('small-bn-300-400');\\n      } else if (dist > 400) {\\n        char.classList.remove('small-less-100', 'small-bn-100-200', 'small-bn-200-300', 'small-bn-300-400');\\n        char.classList.add('small-more-400');\\n      }\\n    } else {\\n      char.classList.remove('small-less-100', 'small-bn-100-200', 'small-bn-200-300', 'small-bn-300-400', 'small-more-400');\\n    }\\n    \\n    \\/\\/ 2 medium line\\n    if (n == 1) {\\n      if (dist <= 100) {\\n        char.classList.remove('medium-bn-100-200', 'medium-bn-200-300', 'medium-bn-300-400', 'medium-more-400');\\n        char.classList.add('medium-less-100');\\n      } else if (dist > 100 && dist <= 200) {\\n        char.classList.remove('medium-less-100', 'medium-bn-200-300', 'medium-bn-300-400', 'medium-more-400');\\n        char.classList.add('medium-bn-100-200');\\n      } else if (dist > 200 && dist <= 300) {\\n        char.classList.remove('medium-less-100', 'medium-bn-100-200', 'medium-bn-300-400', 'medium-more-400');\\n        char.classList.add('medium-bn-200-300');\\n      } else if (dist > 300 && dist <= 400) {\\n        char.classList.remove('medium-less-100', 'medium-bn-100-200', 'medium-bn-200-300', 'medium-more-400');\\n        char.classList.add('medium-bn-300-400');\\n      } else if (dist > 400) {\\n        char.classList.remove('medium-less-100', 'medium-bn-100-200', 'medium-bn-200-300', 'medium-bn-300-400');\\n        char.classList.add('medium-more-400');\\n      }\\n    } else {\\n      char.classList.remove('medium-less-100', 'medium-bn-100-200', 'medium-bn-200-300', 'medium-bn-300-400', 'medium-more-400');\\n    }\\n    \\n    \\/\\/ 3 big line\\n    if (n == 2) {\\n      if (dist <= 100) {\\n        char.classList.remove('big-bn-100-200', 'big-bn-200-300', 'big-bn-300-400', 'big-more-400');\\n        char.classList.add('big-less-100');\\n      } else if (dist > 100 && dist <= 200) {\\n        char.classList.remove('big-less-100', 'big-bn-200-300', 'big-bn-300-400', 'big-more-400');\\n        char.classList.add('big-bn-100-200');\\n      } else if (dist > 200 && dist <= 300) {\\n        char.classList.remove('big-less-100', 'big-bn-100-200', 'big-bn-300-400', 'big-more-400');\\n        char.classList.add('big-bn-200-300');\\n      } else if (dist > 300 && dist <= 400) {\\n        char.classList.remove('big-less-100', 'big-bn-100-200', 'big-bn-200-300', 'big-more-400');\\n        char.classList.add('big-bn-300-400');\\n      } else if (dist > 400) {\\n        char.classList.remove('big-less-100', 'big-bn-100-200', 'big-bn-200-300', 'big-bn-300-400');\\n        char.classList.add('big-more-400');\\n      }\\n    } else {\\n      char.classList.remove('big-less-100', 'big-bn-100-200', 'big-bn-200-300', 'big-bn-300-400', 'big-more-400');\\n    }\\n\\n  }\\n});\\n\\nfunction SWITCH(x) {\\n  n = x;\\n  let buttons = document.querySelectorAll(\\\".btnFixed\\\");\\n  buttons.forEach(function(button) {\\n    if(button.classList.contains(\\\"active\\\")) {\\n     button.classList.remove(\\\"active\\\");\\n    }\\n  });\\n  btns.item(n).classList.add(\\\"active\\\");\\n  for (let i = 0; i < wordArray.length; i++) {\\n    let word = wordArray[i];\\n    \\/\\/ 1 small line\\n    if (n === 0) {\\n      word.classList.remove(\\\"big-line\\\");\\n      word.classList.remove(\\\"medium-line\\\");\\n      word.classList.add(\\\"small-line\\\");\\n    \\/\\/ 2 medium line\\n    } else if (n === 1) {\\n      word.classList.remove(\\\"small-line\\\");\\n      word.classList.remove(\\\"big-line\\\");\\n      word.classList.add(\\\"medium-line\\\");\\n    \\/\\/ 3 big line\\n    } else if (n === 2) {\\n      word.classList.remove(\\\"small-line\\\");\\n      word.classList.remove(\\\"medium-line\\\");\\n      word.classList.add(\\\"big-line\\\");\\n    \\/\\/ no line option active\\n    } else {\\n      word.classList.remove(\\\"small-line\\\");\\n      word.classList.remove(\\\"medium-line\\\");\\n      word.classList.remove(\\\"big-line\\\");\\n    }\\n  }\\n}\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2021-09-05T20:39:18.000Z\",\"updated_at\":\"2023-02-20T15:14:01.169Z\",\"title\":\"Type Interactions 2\",\"description\":\"\",\"slug_hash\":\"MWojROR\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"7df4c9ee76941a256c7bec13986e23bc\",\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"017bb7af-d0f0-7d5b-9d1c-9c5719430fe5\",\"is_new_editor_pen\":false,\"protected\":false,\"access\":\"Public\",\"pen_hash\":null,\"hashid\":\"MWojROR\"}"}