{"product_id":"testing-vibration","title":"testing vibration","description":"\u003cstyle\u003e\n  .active:after {\n    content: \"\";\n}\n  .display-area {\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    line-height: 0;\n    background: #000;\n    position: relative;\n    overflow: hidden;\n  }\n  .display-area video {\n    width: 100%;\n    display: block;\n    transition: opacity 0.4s ease;\n  }\n  .btn-row-top {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-image: url('https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Shake-Effect-buytton-background.gif?v=1778830233');\n    background-size: 100% 100%;\n    background-position: center;\n    background-repeat: no-repeat;\n    padding: 40px 10px 10px 10px;\n    min-height: 120px;\n  }\n  .btn-inner-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;}\n  .active:after {\n    content: \"\";\n}\n  .display-area {\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    line-height: 0;\n    background: #000;\n    position: relative;\n    overflow: hidden;\n  }\n  .display-area video {\n    width: 100%;\n    display: block;\n    transition: opacity 0.4s ease;\n  }\n  .btn-row-top {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-image: url('https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Shake-Effect-buytton-background.gif?v=1778830233');\n    background-size: 100% 100%;\n    background-position: center;\n    background-repeat: no-repeat;\n    padding: 40px 10px 10px 10px;\n    min-height: 120px;\n  }\n  .btn-inner-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 8px;\n    width: 100%;\n    max-width: 480px;\n  }\n  .btn-inner-grid .mode-btn:nth-child(3) {\n    grid-column: 1 \/ 3;\n  }\n  .mode-btn {\n    border: 2px solid #664733;\n    border-radius: 10px;\n    background: #f5f5f5;\n    padding: 0;\n    cursor: pointer;\n    overflow: hidden;\n    transition: border-color 0.2s;\n  }\n  .mode-btn video {\n    width: 100%;\n    display: block;\n  }\n\u003c\/style\u003e\n\n\u003c!-- MAIN DISPLAY: two video layers for crossfade --\u003e\n\u003cdiv class=\"display-area\" id=\"display-area\"\u003e\n  \u003cvideo id=\"video-a\" muted playsinline style=\"opacity:1; position:relative; z-index:2;\"\u003e\n    \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/414a88bbd7fd4fc287820da868fe3eaa.mp4\" type=\"video\/mp4\"\u003e\u003c\/video\u003e\n  \u003cvideo id=\"video-b\" muted playsinline style=\"opacity:0; position:absolute; top:0; left:0; width:100%; z-index:1;\"\u003e\n    \u003csource src=\"\" type=\"video\/mp4\"\u003e\u003c\/video\u003e\n\u003c\/div\u003e\n\n\u003c!-- TOP BUTTONS --\u003e\n\u003cdiv class=\"btn-row-top\"\u003e\n  \u003cdiv class=\"btn-inner-grid\"\u003e\n    \u003cbutton class=\"mode-btn active\" id=\"btn-0\" onclick=\"setMode(0)\"\u003e\n      \u003cvideo muted playsinline preload=\"metadata\"\u003e\n        \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/75a257177e17405e85fb08246d7088c7.mp4\" type=\"video\/mp4\"\u003e\u003c\/video\u003e\n    \u003c\/button\u003e\n    \u003cbutton class=\"mode-btn\" id=\"btn-1\" onclick=\"setMode(1)\"\u003e\n      \u003cvideo muted playsinline preload=\"metadata\"\u003e\n        \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/c494a1b7b4ae4083b0b95e4512588d5c.mp4\" type=\"video\/mp4\"\u003e\u003c\/video\u003e\n    \u003c\/button\u003e\n    \u003cbutton class=\"mode-btn\" id=\"btn-2\" onclick=\"setMode(2)\"\u003e\n      \u003cvideo muted playsinline preload=\"metadata\"\u003e\n        \u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/8cc4e7b16c9f4f138d8a86b5d5e1b1ad.mp4\" type=\"video\/mp4\"\u003e\u003c\/video\u003e\n    \u003c\/button\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cscript\u003e\n  const videoSrcs = [\n    \"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/414a88bbd7fd4fc287820da868fe3eaa.mp4\",\n    \"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/0bed827bc4414f63acc1779623b0ce36.mp4\",\n    \"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/b66fecdc90e444ecad1c5b048ad8bfff.mp4\"\n  ];\n\n  const vibrationPatterns = {\n    0: { pattern: [500, 500, 500, 1000], pause: 300 },\n    1: { pattern: [\n      2,50, 3,45, 5,40, 7,35, 10,30,\n      14,26, 19,22, 25,19, 33,16, 43,13,\n      55,10, 70,10, 88,10, 108,10, 130,10,\n      160,10, 160,10, 160,10,\n      130,10, 108,10, 88,10, 70,10, 55,10,\n      43,13, 33,16, 25,19, 19,22, 14,26,\n      10,30, 7,35, 5,40, 3,45, 2\n    ], pause: 0 },\n    2: { pattern: [3000], pause: 0 }\n  };\n\n  let activeVideo = 'a';\n  let isTransitioning = false;\n\n  function triggerVibration(modeIndex) {\n    if (!navigator.vibrate) return;\n    const { pattern, pause } = vibrationPatterns[modeIndex];\n    if (pause === 0) {\n      navigator.vibrate(pattern);\n    } else {\n      const full = [];\n      pattern.forEach((p, idx) =\u003e {\n        full.push(p);\n        if (idx \u003c pattern.length - 1) full.push(pause);\n      });\n      navigator.vibrate(full);\n    }\n  }\n\n  function setMode(i) {\n    if (isTransitioning) return;\n    isTransitioning = true;\n\n    const vA = document.getElementById('video-a');\n    const vB = document.getElementById('video-b');\n\n    const current = activeVideo === 'a' ? vA : vB;\n    const next    = activeVideo === 'a' ? vB : vA;\n\n    \/\/ Load new video into the hidden layer\n    next.src = videoSrcs[i];\n    next.load();\n\n    function doFade() {\n      next.removeEventListener('canplay', doFade);\n      next.play().catch(() =\u003e {});\n\n      \/\/ Swap z-index: bring next on top\n      next.style.zIndex = '2';\n      next.style.position = 'relative';\n      current.style.zIndex = '1';\n      current.style.position = 'absolute';\n      current.style.top = '0';\n      current.style.left = '0';\n      current.style.width = '100%';\n\n      \/\/ Crossfade\n      next.style.opacity = '1';\n      current.style.opacity = '0';\n\n      \/\/ Cleanup after transition\n      setTimeout(() =\u003e {\n        current.pause();\n        current.src = '';\n        activeVideo = activeVideo === 'a' ? 'b' : 'a';\n        isTransitioning = false;\n      }, 450);\n    }\n\n    if (next.readyState \u003e= 3) {\n      doFade();\n    } else {\n      next.addEventListener('canplay', doFade);\n    }\n\n    \/\/ Update buttons\n    [0, 1, 2].forEach(j =\u003e {\n      const btn = document.getElementById('btn-' + j);\n      btn.classList.toggle('active', j === i);\n      const btnVid = btn.querySelector('video');\n      if (j === i) {\n        btnVid.play().catch(() =\u003e {});\n      } else {\n        btnVid.pause();\n        btnVid.currentTime = 0;\n      }\n    });\n\n    triggerVibration(i);\n  }\n\n  window.addEventListener('load', () =\u003e {\n    document.querySelector('#btn-0 video').play().catch(() =\u003e {});\n    document.getElementById('video-a').play().catch(() =\u003e {});\n  });\n\u003c\/script\u003e\n   ","brand":"ACwO","offers":[{"title":"Default Title","offer_id":53488707535166,"sku":null,"price":0.0,"currency_code":"INR","in_stock":false}],"url":"https:\/\/acwo.com\/products\/testing-vibration","provider":"ACwO","version":"1.0","type":"link"}