{"roots":["0:3"],"nodeById":{"0:6":{"type":"FRAME","id":"0:6","name":"Mobile","absoluteBoundingBox":{"x":1408.0,"y":100.0,"width":375.0,"height":1080.0},"isolatedAbsoluteRenderBounds":{"x":1408.0,"y":100.0,"width":375.0,"height":1080.0},"relativeTransform":[[1.0,0.0,1408.0],[0.0,1.0,100.0]],"size":{"x":375.0,"y":1080.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":0.0,"g":0.0,"b":0.0,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"INSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"clipsContent":true,"overflowDirection":"VERTICAL_SCROLLING","isBreakpointFrame":true,"children":["3:12","3:45"]},"3:45":{"type":"CODE_INSTANCE","id":"3:45","name":"Code layer 1","absoluteBoundingBox":{"x":1408.0,"y":418.0,"width":375.0,"height":455.0},"isolatedAbsoluteRenderBounds":{"x":1408.0,"y":418.0,"width":375.0,"height":455.0},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,318.0]],"size":{"x":375.0,"y":455.0},"fills":[],"constraints":{"vertical":"TOP","horizontal":"CENTER"},"constraintValues":{"left":{"pixelOffset":-187.5,"sizeFraction":0.5},"right":{"pixelOffset":187.5,"sizeFraction":0.5},"top":{"pixelOffset":318.0,"sizeFraction":0.0}},"strokeAlign":"INSIDE","strokes":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"codeExportName":"Code3_42.default","componentProperties":{"projects#3:1":{"type":"INSTANCE_SWAP","value":"-1:-1","isDefault":true}}},"0:4":{"type":"FRAME","id":"0:4","name":"Desktop","absoluteBoundingBox":{"x":64.0,"y":100.0,"width":1280.0,"height":1080.0},"isolatedAbsoluteRenderBounds":{"x":64.0,"y":100.0,"width":1280.0,"height":1080.0},"relativeTransform":[[1.0,0.0,64.0],[0.0,1.0,100.0]],"size":{"x":1280.0,"y":1080.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":0.0,"g":0.0,"b":0.0,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"INSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"clipsContent":true,"overflowDirection":"VERTICAL_SCROLLING","isBreakpointFrame":true,"children":["3:10","3:41"]},"3:41":{"type":"CODE_INSTANCE","id":"3:41","name":"Code layer 1","absoluteBoundingBox":{"x":124.0,"y":418.0,"width":1161.0,"height":455.0},"isolatedAbsoluteRenderBounds":{"x":124.0,"y":418.0,"width":1161.0,"height":455.0},"relativeTransform":[[1.0,0.0,60.0],[0.0,1.0,318.0]],"size":{"x":1161.0,"y":455.0},"fills":[],"constraints":{"vertical":"TOP","horizontal":"CENTER"},"constraintValues":{"left":{"pixelOffset":-580.0,"sizeFraction":0.5},"right":{"pixelOffset":581.0,"sizeFraction":0.5},"top":{"pixelOffset":318.0,"sizeFraction":0.0}},"strokeAlign":"INSIDE","strokes":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"codeExportName":"Code3_42.default","componentProperties":{"projects#3:1":{"type":"INSTANCE_SWAP","value":"-1:-1","isDefault":true}}},"3:12":{"type":"WIDGET","id":"3:12","name":"Embed 1","absoluteBoundingBox":{"x":1408.0,"y":100.0,"width":375.0,"height":250.0},"targetAspectRatio":{"x":600.0,"y":400.0},"isolatedAbsoluteRenderBounds":{"x":1408.0,"y":100.0,"width":375.0,"height":250.0},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,0.0]],"size":{"x":375.0,"y":250.0},"constraints":{"vertical":"TOP","horizontal":"CENTER"},"constraintValues":{"left":{"pixelOffset":-187.5,"sizeFraction":0.5},"right":{"pixelOffset":187.5,"sizeFraction":0.5},"top":{"pixelOffset":0.0,"sizeFraction":0.0}},"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"widgetType":"GENERIC","syncedState":{"embedAllowFullscreen":"false","embedCodeType":"html","embedIframeHtml":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>jbsndbx</title>\n  <style>\n    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n    body {\n      background: #000;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 100vh;\n      overflow: hidden;\n    }\n    canvas {\n      display: block;\n      max-width: 100%;\n      height: auto;\n    }\n  </style>\n</head>\n<body>\n\n  <canvas id=\"gc\"></canvas>\n\n  <script>\n\n    /* ============================================================\n       SETTINGS — tweak these to adjust the glitch effect\n       ============================================================ */\n\n    const SETTINGS = {\n\n      // How often glitch slices fire (higher = more frequent)\n      // Range: 0.0 – 1.0\n      INTENSITY: 0.52,\n\n      // How fast the glitch cycle runs (higher = faster)\n      // Range: 1 – 10\n      SPEED: 4,\n\n      // Strength of the red/blue chromatic aberration split\n      // Range: 0.0 – 1.0  |  0 = off\n      CHROMA: 0.6,\n\n      // Max horizontal pixel shift of a glitch slice (in px)\n      // Range: 1 – 100\n      SLICE_SHIFT: 60,\n\n      // Max height of each glitch slice in pixels\n      // Range: 1 – 60\n      SLICE_HEIGHT: 20,\n\n      // Max number of slices spawned per glitch event\n      // Range: 1 – 20\n      SLICE_COUNT: 14,\n\n      // How many frames each slice lives before disappearing\n      // Range: 1 – 10\n      SLICE_DURATION: 5,\n\n    };\n\n    /* ============================================================\n       IMAGE SOURCE\n       ============================================================ */\n\n    const IMAGE_URL = 'https://carrot-leaves-73919500.figma.site/_assets/v11/2cc6765b3b5e6e7b5f61ac7a0f0d832288984876.png?w=1536';\n\n    /* ============================================================\n       ENGINE — no need to edit below this line\n       ============================================================ */\n\n    const canvas = document.getElementById('gc');\n    const ctx = canvas.getContext('2d');\n\n    let offscreen = null;\n    let activeSlices = [];\n    let glitchTimer = 0;\n    let frame = 0;\n\n    function spawnSlices() {\n      const count = Math.floor(2 + SETTINGS.INTENSITY * SETTINGS.SLICE_COUNT);\n      activeSlices = [];\n      for (let i = 0; i < count; i++) {\n        activeSlices.push({\n          y:        Math.floor(Math.random() * canvas.height),\n          h:        Math.floor(Math.random() * SETTINGS.SLICE_HEIGHT + 1),\n          shiftX:   Math.round((Math.random() - 0.5) * SETTINGS.INTENSITY * SETTINGS.SLICE_SHIFT),\n          duration: Math.floor(Math.random() * SETTINGS.SLICE_DURATION) + 1,\n          life:     0\n        });\n      }\n    }\n\n    function render() {\n      if (!offscreen) return;\n      const W = canvas.width;\n      const H = canvas.height;\n\n      ctx.clearRect(0, 0, W, H);\n      ctx.drawImage(offscreen, 0, 0);\n\n      const imgData = ctx.getImageData(0, 0, W, H);\n      const orig    = new Uint8ClampedArray(imgData.data);\n      const data    = imgData.data;\n\n      // Slice displacement\n      activeSlices.forEach(s => {\n        const sy = Math.max(0, s.y);\n        const ey = Math.min(H, s.y + s.h);\n        for (let row = sy; row < ey; row++) {\n          for (let col = 0; col < W; col++) {\n            const srcCol = ((col - s.shiftX) % W + W) % W;\n            const dstIdx = (row * W + col)    * 4;\n            const srcIdx = (row * W + srcCol) * 4;\n            data[dstIdx]     = orig[srcIdx];\n            data[dstIdx + 1] = orig[srcIdx + 1];\n            data[dstIdx + 2] = orig[srcIdx + 2];\n            data[dstIdx + 3] = orig[srcIdx + 3];\n          }\n        }\n      });\n\n      // Chromatic aberration\n      if (SETTINGS.CHROMA > 0.05) {\n        const drift = Math.round(SETTINGS.CHROMA * 6);\n        for (let i = 0; i < data.length; i += 4) {\n          const col  = (i / 4) % W;\n          const row  = Math.floor(i / 4 / W);\n          const rCol = Math.min(W - 1, col + drift);\n          const bCol = Math.max(0, col - drift);\n          const rIdx = (row * W + rCol) * 4;\n          const bIdx = (row * W + bCol) * 4;\n          data[i]     = Math.min(255, orig[rIdx]     * SETTINGS.CHROMA * 0.6 + data[i]     * (1 - SETTINGS.CHROMA * 0.3));\n          data[i + 2] = Math.min(255, orig[bIdx + 2] * SETTINGS.CHROMA * 0.6 + data[i + 2] * (1 - SETTINGS.CHROMA * 0.3));\n        }\n      }\n\n      ctx.putImageData(imgData, 0, 0);\n\n      activeSlices = activeSlices.filter(s => ++s.life < s.duration);\n    }\n\n    function tick() {\n      frame++;\n      glitchTimer++;\n      const interval = Math.max(2, Math.floor(20 / SETTINGS.SPEED));\n      if (glitchTimer >= interval) {\n        glitchTimer = 0;\n        if (Math.random() < 0.5 + SETTINGS.INTENSITY * 0.5) spawnSlices();\n      }\n      render();\n      requestAnimationFrame(tick);\n    }\n\n    // Load image\n    const img = new Image();\n    img.crossOrigin = 'anonymous';\n    img.onload = () => {\n      canvas.width  = img.naturalWidth;\n      canvas.height = img.naturalHeight;\n      offscreen = document.createElement('canvas');\n      offscreen.width  = img.naturalWidth;\n      offscreen.height = img.naturalHeight;\n      offscreen.getContext('2d').drawImage(img, 0, 0);\n      tick();\n    };\n    img.onerror = () => console.error('Image failed to load. Check IMAGE_URL or CORS headers.');\n    img.src = IMAGE_URL;\n\n  </script>\n</body>\n</html>","embedURL":""}},"0:3":{"type":"WEBPAGE","id":"0:3","name":"/","absoluteBoundingBox":{"x":0.0,"y":0.0,"width":1847.0,"height":1244.0},"isolatedAbsoluteRenderBounds":{"x":0.0,"y":0.0,"width":1847.0,"height":1244.0},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,0.0]],"size":{"x":1847.0,"y":1244.0},"fills":[{"opacity":0.298039227724075,"blendMode":"NORMAL","type":"SOLID","color":{"r":1.0,"g":1.0,"b":1.0,"a":1.0},"visible":true}],"strokeAlign":"INSIDE","strokes":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"children":["0:4","0:6"]},"3:10":{"type":"WIDGET","id":"3:10","name":"Embed 1","absoluteBoundingBox":{"x":442.0,"y":134.0,"width":524.0,"height":192.0},"isolatedAbsoluteRenderBounds":{"x":442.0,"y":134.0,"width":524.0,"height":192.0},"relativeTransform":[[1.0,0.0,378.0],[0.0,1.0,34.0]],"size":{"x":524.0,"y":192.0},"constraints":{"vertical":"TOP","horizontal":"CENTER"},"constraintValues":{"left":{"pixelOffset":-262.0,"sizeFraction":0.5},"right":{"pixelOffset":262.0,"sizeFraction":0.5},"top":{"pixelOffset":34.0,"sizeFraction":0.0}},"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"widgetType":"GENERIC","syncedState":{"embedAllowFullscreen":"false","embedCodeType":"html","embedIframeHtml":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>jbsndbx</title>\n  <style>\n    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n    body {\n      background: #000;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 100vh;\n      overflow: hidden;\n    }\n    canvas {\n      display: block;\n      max-width: 100%;\n      height: auto;\n    }\n  </style>\n</head>\n<body>\n\n  <canvas id=\"gc\"></canvas>\n\n  <script>\n\n    /* ============================================================\n       SETTINGS — tweak these to adjust the glitch effect\n       ============================================================ */\n\n    const SETTINGS = {\n\n      // How often glitch slices fire (higher = more frequent)\n      // Range: 0.0 – 1.0\n      INTENSITY: 0.52,\n\n      // How fast the glitch cycle runs (higher = faster)\n      // Range: 1 – 10\n      SPEED: 4,\n\n      // Strength of the red/blue chromatic aberration split\n      // Range: 0.0 – 1.0  |  0 = off\n      CHROMA: 0.6,\n\n      // Max horizontal pixel shift of a glitch slice (in px)\n      // Range: 1 – 100\n      SLICE_SHIFT: 60,\n\n      // Max height of each glitch slice in pixels\n      // Range: 1 – 60\n      SLICE_HEIGHT: 20,\n\n      // Max number of slices spawned per glitch event\n      // Range: 1 – 20\n      SLICE_COUNT: 14,\n\n      // How many frames each slice lives before disappearing\n      // Range: 1 – 10\n      SLICE_DURATION: 5,\n\n    };\n\n    /* ============================================================\n       IMAGE SOURCE\n       ============================================================ */\n\n    const IMAGE_URL = 'https://carrot-leaves-73919500.figma.site/_assets/v11/2cc6765b3b5e6e7b5f61ac7a0f0d832288984876.png?w=1536';\n\n    /* ============================================================\n       ENGINE — no need to edit below this line\n       ============================================================ */\n\n    const canvas = document.getElementById('gc');\n    const ctx = canvas.getContext('2d');\n\n    let offscreen = null;\n    let activeSlices = [];\n    let glitchTimer = 0;\n    let frame = 0;\n\n    function spawnSlices() {\n      const count = Math.floor(2 + SETTINGS.INTENSITY * SETTINGS.SLICE_COUNT);\n      activeSlices = [];\n      for (let i = 0; i < count; i++) {\n        activeSlices.push({\n          y:        Math.floor(Math.random() * canvas.height),\n          h:        Math.floor(Math.random() * SETTINGS.SLICE_HEIGHT + 1),\n          shiftX:   Math.round((Math.random() - 0.5) * SETTINGS.INTENSITY * SETTINGS.SLICE_SHIFT),\n          duration: Math.floor(Math.random() * SETTINGS.SLICE_DURATION) + 1,\n          life:     0\n        });\n      }\n    }\n\n    function render() {\n      if (!offscreen) return;\n      const W = canvas.width;\n      const H = canvas.height;\n\n      ctx.clearRect(0, 0, W, H);\n      ctx.drawImage(offscreen, 0, 0);\n\n      const imgData = ctx.getImageData(0, 0, W, H);\n      const orig    = new Uint8ClampedArray(imgData.data);\n      const data    = imgData.data;\n\n      // Slice displacement\n      activeSlices.forEach(s => {\n        const sy = Math.max(0, s.y);\n        const ey = Math.min(H, s.y + s.h);\n        for (let row = sy; row < ey; row++) {\n          for (let col = 0; col < W; col++) {\n            const srcCol = ((col - s.shiftX) % W + W) % W;\n            const dstIdx = (row * W + col)    * 4;\n            const srcIdx = (row * W + srcCol) * 4;\n            data[dstIdx]     = orig[srcIdx];\n            data[dstIdx + 1] = orig[srcIdx + 1];\n            data[dstIdx + 2] = orig[srcIdx + 2];\n            data[dstIdx + 3] = orig[srcIdx + 3];\n          }\n        }\n      });\n\n      // Chromatic aberration\n      if (SETTINGS.CHROMA > 0.05) {\n        const drift = Math.round(SETTINGS.CHROMA * 6);\n        for (let i = 0; i < data.length; i += 4) {\n          const col  = (i / 4) % W;\n          const row  = Math.floor(i / 4 / W);\n          const rCol = Math.min(W - 1, col + drift);\n          const bCol = Math.max(0, col - drift);\n          const rIdx = (row * W + rCol) * 4;\n          const bIdx = (row * W + bCol) * 4;\n          data[i]     = Math.min(255, orig[rIdx]     * SETTINGS.CHROMA * 0.6 + data[i]     * (1 - SETTINGS.CHROMA * 0.3));\n          data[i + 2] = Math.min(255, orig[bIdx + 2] * SETTINGS.CHROMA * 0.6 + data[i + 2] * (1 - SETTINGS.CHROMA * 0.3));\n        }\n      }\n\n      ctx.putImageData(imgData, 0, 0);\n\n      activeSlices = activeSlices.filter(s => ++s.life < s.duration);\n    }\n\n    function tick() {\n      frame++;\n      glitchTimer++;\n      const interval = Math.max(2, Math.floor(20 / SETTINGS.SPEED));\n      if (glitchTimer >= interval) {\n        glitchTimer = 0;\n        if (Math.random() < 0.5 + SETTINGS.INTENSITY * 0.5) spawnSlices();\n      }\n      render();\n      requestAnimationFrame(tick);\n    }\n\n    // Load image\n    const img = new Image();\n    img.crossOrigin = 'anonymous';\n    img.onload = () => {\n      canvas.width  = img.naturalWidth;\n      canvas.height = img.naturalHeight;\n      offscreen = document.createElement('canvas');\n      offscreen.width  = img.naturalWidth;\n      offscreen.height = img.naturalHeight;\n      offscreen.getContext('2d').drawImage(img, 0, 0);\n      tick();\n    };\n    img.onerror = () => console.error('Image failed to load. Check IMAGE_URL or CORS headers.');\n    img.src = IMAGE_URL;\n\n  </script>\n</body>\n</html>","embedURL":""}}},"assetIdToGuid":{},"guidToUrl":{"0:3":"/","6:183":"/asciiwave","6:98":"/article-full-page-block","3:33":"/assets"},"fonts":{},"assets":{"4c68e63afe85ea86c594f92206ecac82867bc604":{"type":"GENERATED_ASSET","url":"4c68e63afe85ea86c594f92206ecac82867bc604.png","size":{"x":48.0,"y":48.0},"offsets":{"top":{"value":0,"unit":"PIXELS"},"right":{"value":0,"unit":"PIXELS"},"bottom":{"value":0,"unit":"PIXELS"},"left":{"value":0,"unit":"PIXELS"}},"format":"PNG"}},"stablePathToAssetInfo":{"3:2":{"hash":"4c68e63afe85ea86c594f92206ecac82867bc604"}},"animateRootIds":[],"siteSettings":{"title":"jbsndbx.dev","scalingMode":"REFLOW","lang":"en","blockSearchIndexing":true,"faviconFilename":"4c68e63afe85ea86c594f92206ecac82867bc604.png","labs":{"E5FBBA911B2B7A09E649D4BE6CDF8591EAEFC881":false}},"sourceCodeHash":"687c1d3d016d970c16d216df70f28b5b23702052"}