{"__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.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNzI1ODA4ODUyLCJpYXQiOjE3MjU4MDUyNTIsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.S5PXbSapsMp33UlepgYSzCNEpoTIWMsyBa-tw2REeN36R0-Rutf88inHAT3aAwPv8SpRkZeEI7PjcT3lcfB6b7ZffpviwDXSu0BWlf18zQysYMGg7THZ2MsunWad3IiWJUjl7dRi94VGSpRt6W7klTspFnr2oOlHWAMmG_MxYZsU51S4mTKzl1gjX-9BGESwcKvw4wHr0B0EEUTJtz2GA9rk1fLkTE5UcVuCGIhKgWZEVvkMPKn9XDDPAFBVZMmdmru9dlHEgajv5OUJqlFj-RhtIhbArfRdHw3Lwnkf7FuKjgz83QNaTqze5KGzbwzEGrKv0x8AzflwdbIw8t_BIA"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":54794889,\"user_id\":219932,\"html\":\"<!-- https:\\/\\/taliacotton.com\\/ -->\\n\\n<div id=\\\"cursor-circle\\\"><\\/div>\\n\\n<div id=\\\"fixed\\\">\\n <button class=\\\"btnFixed\\\" onclick=\\\"SWITCH(0)\\\">1 wave<\\/button>\\n <button class=\\\"btnFixed\\\" onclick=\\\"SWITCH(1)\\\">2 blue rect <\\/button>\\n <button class=\\\"btnFixed\\\" onclick=\\\"SWITCH(2)\\\">3 rainbow radius<\\/button>\\n <button class=\\\"btnFixed\\\" onclick=\\\"SWITCH(3)\\\">4 clone<\\/button>\\n <button class=\\\"btnFixed\\\" onclick=\\\"SWITCH(4)\\\">5 rainbow letters<\\/button>\\n <button class=\\\"btnFixed\\\" onclick=\\\"SWITCH(5)\\\">6 flip<\\/button>\\n <button class=\\\"btnFixed\\\" onclick=\\\"SWITCH(6)\\\">7 size + color (re-click button)<\\/button>\\n <button class=\\\"btnFixed\\\" onclick=\\\"SWITCH(7)\\\">8 show letter<\\/button>\\n <button class=\\\"btnFixed\\\" onclick=\\\"SWITCH(8)\\\">9 erase<\\/button>\\n <button class=\\\"btnFixed\\\" onclick=\\\"SWITCH(9)\\\">10 bottom border<\\/button>\\n <button class=\\\"btnFixed\\\" onclick=\\\"SWITCH(10)\\\">11 move up<\\/button>\\n <button class=\\\"btnFixed\\\" onclick=\\\"SWITCH(11)\\\">12 random size (re-click button)<\\/button>\\n<\\/div>\\n\\n<div class=\\\"display-letter-wrapper\\\">\\n <p id=\\\"display-letter\\\"><\\/p>\\n<\\/div>\\n\\n<section id=\\\"intro\\\">\\n <h1 class=\\\"text-block\\\">I like the scientific spirit—the holding off, the being sure but not too sure, the willingness to surrender ideas when the evidence is against them: this is ultimately fine—it always keeps the way beyond open—always gives life, thought, affection, the whole man, a chance to try over again after a mistake—after a wrong guess. -Walt Whitman<\\/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>\\n\",\"css\":\":root {\\n --bg-color: #14072b;\\n --display-letter-color: #9565eb;\\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: var(--bg-color);\\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.display-letter-wrapper {\\n position: fixed;\\n top: 0;\\n right: 0;\\n z-index: -1;\\n overflow: hidden;\\n #display-letter {\\n position: relative;\\n top: -60px;\\n margin: 0;\\n font-size: 300px;\\n color: var(--display-letter-color);\\n }\\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\\ni {\\n position: relative;\\n font-style: normal;\\n border-bottom-width: 0;\\n border-bottom-style: solid;\\n border-bottom-color: DeepPink;\\n &.on {\\n background-color: blue;\\n color: transparent;\\n }\\n &.flip {\\n display: inline-block;\\n top: 6px;\\n transform: rotate(180deg);\\n }\\n &.fade-letter {\\n background: #222;\\n animation: 1s fadeOut forwards;\\n }\\n}\\n\\n@keyframes fadeOut {\\n 0% {\\n opacity: 1;\\n }\\n 100% {\\n opacity: 0;\\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\":\"\\/\\/ letterize.js\\n\\n!function(t,e){\\\"object\\\"==typeof exports&&\\\"undefined\\\"!=typeof module?module.exports=e():\\\"function\\\"==typeof define&&define.amd?define(e):(t=t||self).Letterize=e()}(this,function(){\\\"use strict\\\";function n(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,\\\"value\\\"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function d(t){return function(t){if(Array.isArray(t)){for(var e=0,r=new Array(t.length);e<t.length;e++)r[e]=t[e];return r}}(t)||function(t){if(Symbol.iterator in Object(t)||\\\"[object Arguments]\\\"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError(\\\"Invalid attempt to spread non-iterable instance\\\")}()}function h(t,e,r){var n=t.textContent.trim(),i=n.length,o=[];t.textContent=\\\"\\\";for(var s=0;s<i;s++){var a=document.createElement(e);r&&r.length&&a.classList.add(r),a.textContent=\\\" \\\"===n[s]?\\\" \\\":n[s],t.before(a),o.push(a)}return o}function y(t,e,r,n,i,o,s,a){var l;if(Array.isArray(e.letterize_id)||(e.letterize_id=[]),!e.letterize_id.includes(a)){e.letterize_id.push(a);for(var u=d(e.childNodes),c=u.length,f=0;f<c;f++){var p=void 0;switch(u[f].nodeType){case 1:-1===Array.prototype.indexOf.call(t,u[f])&&y(t,u[f],r,n,i,o,s,a);break;case 3:p=h(u[f],r,n),o.push.apply(o,d(p)),(l=i[s]).push.apply(l,d(p))}}}}return function(){function c(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};!function(t,e){if(!(t instanceof e))throw new TypeError(\\\"Cannot call a class as a function\\\")}(this,c);var e,r=(e=t.targets,NodeList.prototype.isPrototypeOf(e)||HTMLCollection.prototype.isPrototypeOf(e)||Array.isArray(e)?e:HTMLElement.prototype.isPrototypeOf(e)?[e]:\\\"string\\\"==typeof e?document.querySelectorAll(e):null);if(!r||!r.length)return console.error(\\\"Letterize: targets '\\\".concat(this.targets,\\\"' not found or not specified\\\")),!1;var n=r.length;c.numInstances=(c.numInstances||0)+1;for(var i=t.wrapper||\\\"span\\\",o=t.className,s=c.numInstances,a=[],l=[],u=0;u<n;u++)a[u]=[],y(r,r[u],i,o,a,l,u,s);this.getWrapper=function(){return i},this.getTargets=function(){return r},this.list=function(){return a},this.listAll=function(){return l},this.getClassName=function(){return o}}var t,e,r;return t=c,(e=[{key:\\\"deletterize\\\",value:function(){for(var t=this.listAll().length,e=0;e<t;e++){var r;(r=this.listAll()[e]).before.apply(r,d(this.listAll()[e].childNodes)),this.listAll()[e].remove()}this.getWrapper=void 0,this.getTargets=void 0,this.list=void 0,this.listAll=void 0,this.getClassName=void 0,this.deletterize=void 0}}])&&n(t.prototype,e),r&&n(t,r),c}()});\\n\\n\\/\\/ 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\\/\\/ custom\\n\\nlet n;\\nlet h1 = document.querySelector(\\\"h1\\\");\\n\\/\\/ let probability = Math.random();\\n\\n\\/\\/ if (probability <= 0.5) {\\n\\/\\/ n = 1;\\n\\/\\/ } else if (probability <= 0.8) {\\n\\/\\/ n = 2;\\n\\/\\/ } else if (probability <= 0.9) {\\n\\/\\/ n = 3;\\n\\/\\/ } else {\\n\\/\\/ n = 0;\\n\\/\\/ }\\n\\n\\/\\/ console.log(\\\"probability: \\\" + probability);\\n\\nlet letters = new Letterize({\\n targets: \\\"h1, li, button:not(.btnFixed)\\\",\\n wrapper: \\\"i\\\"\\n});\\n\\nlet btns = document.getElementById(\\\"fixed\\\").children;\\n\\nfor (br of document.querySelectorAll(\\\"br.dt\\\")) {\\n let spacer = document.createElement(\\\"i\\\");\\n spacer.innerHTML = \\\" \\\";\\n insertAfter(spacer, br);\\n}\\n\\n\\/\\/ 1 wave\\n\\nfunction isScrolledIntoView(el) {\\n let rect = el.getBoundingClientRect();\\n let elemTop = rect.top;\\n let elemBottom = rect.bottom;\\n \\/\\/ partially visible elements return true:\\n isVisible = elemTop < window.innerHeight && elemBottom >= 0;\\n return isVisible;\\n}\\n\\nlet spanArray = [];\\n\\nfunction lettersInView() {\\n \\/\\/ 1 wave\\n if (n == 0) {\\n spanArray = [];\\n for (let i of letters.listAll()) {\\n if (isScrolledIntoView(i)) {\\n spanArray.push(i);\\n }\\n }\\n \\/\\/ not 1 wave\\n } else {\\n spanArray = letters.listAll();\\n }\\n}\\n\\nlettersInView();\\n\\n\\/\\/\\n\\nlet palette = [\\\"MediumSpringGreen\\\", \\\"DodgerBlue\\\", \\\"Orange\\\", \\\"OrangeRed\\\"];\\n\\nfor (let i of letters.listAll()) {\\n i.innerHTML = i.innerHTML.replace(\\/ \\/g, \\\" \\\");\\n i.addEventListener(\\\"mouseenter\\\", function () {\\n \\/\\/ 2 blue rect\\n if (n == 1) {\\n i.classList.add(\\\"on\\\");\\n }\\n \\/\\/ 4 clone\\n if (n == 3) {\\n let cln = i.cloneNode(true);\\n cln.classList.add(\\\"clone\\\");\\n insertAfter(cln, i);\\n }\\n \\/\\/ 5 rainbow letters\\n if (n == 4) {\\n i.style.color = palette[Math.floor(Math.random() * palette.length)];\\n }\\n \\/\\/ 6 flip\\n if (n == 5) {\\n i.classList.add(\\\"flip\\\");\\n }\\n \\/\\/ 8 show letter\\n if (n == 7) {\\n let letter = i.innerHTML;\\n console.log(\\\"letter: \\\" + letter);\\n document.getElementById('display-letter').innerHTML = letter;\\n }\\n \\/\\/ 9 erase\\n if (n == 8) {\\n i.classList.add(\\\"fade-letter\\\");\\n }\\n \\/\\/ 10 bottom border\\n if (n == 9) {\\n let letterStyle = window.getComputedStyle(i);\\n let letterBorderBottomWidth = parseInt(letterStyle.getPropertyValue('border-bottom-width'));\\n let updatedLetterBorderBottomWidth = letterBorderBottomWidth + 10;\\n i.style.borderBottomWidth = updatedLetterBorderBottomWidth+\\\"px\\\";\\n }\\n \\/\\/ 11 move up\\n if (n == 10) {\\n let newColor = palette[Math.floor(Math.random() * palette.length)];\\n let letterStyle = window.getComputedStyle(i);\\n let letterBottom = parseInt(letterStyle.getPropertyValue('bottom'));\\n let updatedLetterBottom;\\n if (letterBottom == 0) {\\n updatedLetterBottom = 20;\\n } else {\\n updatedLetterBottom = letterBottom + 10;\\n }\\n let letterBorderBottomWidth = parseInt(letterStyle.getPropertyValue('border-bottom-width'));\\n let updatedLetterBorderBottomWidth = letterBorderBottomWidth + 10;\\n i.style.bottom = updatedLetterBottom+\\\"px\\\";\\n i.style.borderBottomWidth = updatedLetterBorderBottomWidth+\\\"px\\\";\\n i.style.borderBottomColor = newColor;\\n i.style.backgroundColor = newColor;\\n i.style.marginTop = \\\"-10px\\\";\\n }\\n });\\n}\\n\\n\\/\\/ 4 clone\\n\\nfunction insertAfter(newNode, referenceNode) {\\n referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);\\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 < spanArray.length; i++) {\\n let s = spanArray[i];\\n let bounds = s.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(s, \\\"text-block\\\");\\n if (n == 0 || ancestor.classList.contains(\\\"mouseover\\\")) {\\n if (dist < 200) {\\n \\/\\/ 1 wave\\n if (n == 0) {\\n s.style.top = map(dist, 0, 200, -1.5, 0) + \\\"2em\\\";\\n }\\n \\/\\/ 3 rainbow radius\\n if (n == 2) {\\n s.style.color = palette[Math.floor(Math.random() * palette.length)];\\n }\\n } else {\\n \\/\\/ 1 wave\\n if (n == 0) {\\n s.style.top = \\\"0px\\\";\\n }\\n \\/\\/ 3 rainbow radius\\n if (n == 2) {\\n s.style.color = \\\"#361e61\\\";\\n }\\n }\\n } else {\\n \\/\\/ 3 rainbow radius\\n if (n == 2) {\\n s.removeAttribute(\\\"style\\\");\\n }\\n }\\n }\\n});\\n\\nlet mouseoverNum = 100;\\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 \\n for (i of letters.listAll()) {\\n i.classList.remove(\\\"on\\\");\\n i.classList.remove(\\\"flip\\\");\\n i.classList.remove(\\\"fade-letter\\\");\\n i.removeAttribute(\\\"style\\\");\\n }\\n \\/\\/ not 4 clone\\n if (n != 3) {\\n for (c of document.querySelectorAll(\\\".clone\\\")) {\\n c.remove();\\n }\\n }\\n \\/\\/ 7 size + color\\n if (n === 6) { \\n let newColor = palette[Math.floor(Math.random() * palette.length)];\\n h1.style.lineHeight = 1;\\n mouseoverNum += 6;\\n for (i of letters.listAll()) {\\n i.style.fontSize = mouseoverNum + \\\"%\\\";\\n i.style.color = newColor;\\n }\\n } else {\\n h1.style.lineHeight = 1.4;\\n }\\n \\/\\/ not 8 show letter\\n if (n != 7) {\\n document.getElementById('display-letter').innerHTML = \\\"\\\";\\n }\\n \\/\\/ 12 random size\\n if (n === 11) {\\n for (i of letters.listAll()) {\\n let newSize = Math.floor(Math.random() * (200 - 20 + 1)) + 20;\\n i.style.fontSize = newSize+\\\"px\\\";\\n i.style.lineHeight = 0;\\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-01T20:33:26.000Z\",\"updated_at\":\"2023-02-20T21:22:07.997Z\",\"title\":\"Type Interactions 1\",\"description\":\"\",\"slug_hash\":\"BaZKqOK\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"69baed2256c735879f21ed986a7fcc18\",\"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\":\"017ba311-01f0-7925-adaf-93b2bbb4b718\",\"is_new_editor_pen\":false,\"protected\":false,\"access\":\"Public\",\"pen_hash\":null,\"hashid\":\"BaZKqOK\"}"}