{"__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 *; serial *; vr *; web-share *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox 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.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNzUyMDY5NDAyLCJpYXQiOjE3NTIwNjU4MDIsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.1fnVLFhX6ZfOl09oFXX_HLojAgIfv6ncUwFfeOYMGOiuVl4Knpl-CVlylRQK9X4hUpWqQWs-MVNwvfHo2kJeaSFz80D846p4vZ4S7oBVebokpaceRzVNMTuxQG5LZ0kTsE8VsSwBDm-vcFuTenkzk5t5zhxsWWtFIbWiUFydZGKscrzC8Jj_6nAQe9Q_uZxKsQAHISuqs1l52iyJz70j79m6Thywi9a-0z-iH8Ud8_owStwpmktRGzW7g1LoFSbmhvgnEZmJazz5v9XkxpFga6TyduiszRDjngj417BzZSfepsa-wV8Z5GppJT21RTvx2U1j8Q9ZCbe9m1vK8nVRWg"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":82567643,\"user_id\":252820,\"html\":\"<div class=\\\"box black-bg\\\"><\\/div>\\n<div class=\\\"box white-bg\\\"><\\/div>\\n<button class=\\\"draggable jiggle\\\"><svg xmlns=\\\"http:\\/\\/www.w3.org\\/2000\\/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\">\\n\\t\\t<path fill=\\\"currentColor\\\" d=\\\"M3.253 2.93a.75.75 0 0 1 .817-.677l3.745.35c2.652.263 5.193.58 7.278.94c2.047.352 3.764.761 4.688 1.249a2.3 2.3 0 0 1 .662.492c.192.22.362.552.29.957c-.066.372-.307.632-.52.8a3.5 3.5 0 0 1-.818.452c-1.234.511-3.595 1.005-7.328 1.493c-2.38.312-3.895.615-4.758.89l.077.023c.41.121.934.24 1.548.353c1.226.225 2.768.418 4.404.564c1.24.111 2.567.287 3.697.51c.564.112 1.09.237 1.538.376c.43.134.848.299 1.152.51c.15.104.335.26.454.489a1 1 0 0 1 .03.88a1.34 1.34 0 0 1-.49.55c-.18.122-.397.225-.634.317c-.927.357-2.604.69-5.237 1.005c-2.618.313-4.217.711-5.11 1.117c-.448.203-.65.378-.73.483c-.05.064-.043.083-.039.097l.002.004c.015.06.081.194.287.391c.199.19.48.394.832.602c.702.415 1.601.797 2.466 1.093l3.246 1.046a.75.75 0 0 1-.46 1.428l-3.266-1.053c-.923-.316-1.928-.737-2.749-1.222a6 6 0 0 1-1.106-.81c-.303-.29-.587-.656-.702-1.097c-.126-.485-.022-.971.297-1.39c.293-.384.748-.687 1.302-.938c1.111-.505 2.9-.923 5.552-1.24c2.287-.273 3.724-.55 4.543-.802l-.086-.027c-.38-.118-.85-.232-1.383-.337a35 35 0 0 0-3.54-.488c-1.662-.149-3.254-.346-4.541-.583a17 17 0 0 1-1.703-.39c-.461-.137-.9-.304-1.212-.525a1.3 1.3 0 0 1-.46-.542a1 1 0 0 1 .06-.901c.134-.232.338-.39.516-.5c.187-.116.411-.218.66-.31c.977-.363 2.705-.714 5.348-1.06c3.749-.49 5.922-.966 6.95-1.392l.125-.055c-.732-.34-2.16-.696-4.108-1.032c-2.037-.35-4.537-.663-7.17-.924l-3.739-.35a.75.75 0 0 1-.677-.816\\\" \\/>\\n\\t<\\/svg> Liquid Glass<\\/button>\\n<div class=\\\"photo-frame\\\">\\n\\t<img src=\\\"https:\\/\\/assets.codepen.io\\/252820\\/unsplash-mountain3.webp\\\" alt=\\\"\\\" \\/>\\n<\\/div>\",\"css\":\"body {\\n\\tmargin: 0;\\n\\tpadding: 0;\\n\\tfont-family: sans-serif;\\n\\tdisplay: flex;\\n\\theight: 100vh;\\n\\toverflow: hidden;\\n}\\n\\n.draggable {\\n\\tposition: absolute;\\n\\ttop: 50%;\\n\\tleft: 50%;\\n\\ttransform: translate(-50%, -50%);\\n\\ttouch-action: none;\\n\\tz-index: 1;\\n}\\n\\n.photo-frame {\\n\\tposition: absolute;\\n\\ttop: 50%;\\n\\tleft: 50%;\\n\\twidth: 800px;\\n\\ttransform: translate(-50%, -50%);\\n\\tz-index: 0;\\n}\\n\\n.photo-frame img {\\n\\twidth: 100%;\\n\\tdisplay: block;\\n\\tborder: 4px solid white;\\n\\tbox-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);\\n\\tborder-radius: 8px;\\n}\\n\\n.box {\\n\\tflex: 1;\\n\\theight: 100vh;\\n\\tdisplay: flex;\\n\\tjustify-content: center;\\n\\talign-items: center;\\n}\\n\\n.black-bg {\\n\\tbackground-color: black;\\n}\\n\\n.white-bg {\\n\\tbackground-color: white;\\n}\\n\\nbutton {\\n\\tfont-size: 1.5rem;\\n\\tpadding: 1rem 2rem;\\n\\tborder: 1px solid rgba(255, 255, 255, 0.4);\\n\\tcursor: grab;\\n\\tcolor: white;\\n\\tbackground: rgba(255, 255, 255, 0.1);\\n\\tmix-blend-mode: difference;\\n\\tbackdrop-filter: blur(10px);\\n\\t-webkit-backdrop-filter: blur(10px);\\n\\tborder-radius: 2rem;\\n\\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\\n}\\n\\nbutton:active {\\n\\tcursor: grabbing;\\n}\\n\\nbutton svg {\\n\\twidth: 1.75rem;\\n\\theight: 1.75rem;\\n\\tvertical-align: middle;\\n\\tmargin-right: 0.5rem;\\n}\\n\\n@keyframes jiggle {\\n\\t0%,\\n\\t100% {\\n\\t\\ttransform: translate(-50%, -50%) rotate(0deg);\\n\\t}\\n\\n\\t25% {\\n\\t\\ttransform: translate(-50%, -50%) rotate(-1.5deg);\\n\\t}\\n\\n\\t75% {\\n\\t\\ttransform: translate(-50%, -50%) rotate(1.5deg);\\n\\t}\\n}\\n\\n.jiggle {\\n\\tanimation: jiggle 0.25s ease-in-out;\\n}\\n\",\"js\":\"\\/\\/ JS for drag & jiggle\\ndocument.querySelectorAll(\\\".draggable\\\").forEach((btn) => {\\n\\tlet offsetX = 0,\\n\\t\\toffsetY = 0,\\n\\t\\tisDragging = false;\\n\\n\\tlet jiggleInterval = setInterval(() => {\\n\\t\\tbtn.classList.add(\\\"jiggle\\\");\\n\\t\\tsetTimeout(() => btn.classList.remove(\\\"jiggle\\\"), 250);\\n\\t}, 3000);\\n\\n\\tbtn.addEventListener(\\\"pointerdown\\\", (e) => {\\n\\t\\tclearInterval(jiggleInterval);\\n\\t\\tbtn.classList.remove(\\\"jiggle\\\");\\n\\n\\t\\tisDragging = true;\\n\\t\\toffsetX = e.clientX - btn.offsetLeft;\\n\\t\\toffsetY = e.clientY - btn.offsetTop;\\n\\t\\tbtn.setPointerCapture(e.pointerId);\\n\\t});\\n\\n\\tbtn.addEventListener(\\\"pointermove\\\", (e) => {\\n\\t\\tif (isDragging) {\\n\\t\\t\\tbtn.style.left = `${e.clientX - offsetX}px`;\\n\\t\\t\\tbtn.style.top = `${e.clientY - offsetY}px`;\\n\\t\\t\\tbtn.style.transform = \\\"\\\";\\n\\t\\t}\\n\\t});\\n\\n\\tbtn.addEventListener(\\\"pointerup\\\", (e) => {\\n\\t\\tisDragging = false;\\n\\t\\tbtn.releasePointerCapture(e.pointerId);\\n\\t});\\n});\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2025-06-12T17:51:16.489Z\",\"updated_at\":\"2025-06-12T18:35:25.669Z\",\"title\":\"Apple Liquid Glass\",\"description\":\"This demo uses mix-blend-mode: difference to create an adaptive text and icon effect that visually mimics Apple’s “liquid glass” aesthetic. The button sits atop a split black-and-white background with a blurred, semi-transparent surface, giving it a soft frosted-glass feel. Instead of conditionally styling text color, the blend mode allows the white text and icon to invert automatically depending on the underlying background, ensuring high contrast without logic. This technique works well for dynamic backgrounds, maintaining legibility while achieving a modern, glassy interface that feels responsive and alive. The glass effect is further enhanced with backdrop-filter: blur.\",\"slug_hash\":\"qEdYxyL\",\"head\":\"<script src=\\\"https:\\/\\/peterbenoit.com\\/js\\/badge.js\\\" defer><\\/script><script src=\\\"https:\\/\\/uiguy.dev\\/libs\\/console.js\\\"><\\/script>\\n<meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\">\\n<meta name=\\\"author\\\" content=\\\"Peter Benoit\\\">\",\"private\":false,\"slug_hash_private\":\"8924e906e77b42e3de63ccc71e428551\",\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":2,\"pick\":false,\"popularity\":26,\"views_count\":156,\"pick_visible_at\":null,\"cpid\":\"01976544-7c09-7dea-85fa-cece182ceb56\",\"is_new_editor_pen\":false,\"access\":\"Public\",\"pen_hash\":null,\"hashid\":\"qEdYxyL\"}"}