{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"35872613-215a-cc3c-a487-ecc29804c5b8","type":"Block","tag":"div","classes":["3bc82e99-3a79-1bfe-2605-e3306af9119f"],"children":["aa2a9dea-4dee-4a16-e0b1-b39bf5ea2b02","68e748f7-5be2-a08b-0159-6f16360f2bca"],"data":{"text":false,"tag":"div"}},{"_id":"aa2a9dea-4dee-4a16-e0b1-b39bf5ea2b02","type":"Block","tag":"div","classes":["4ec7d4d4-e9da-ac4f-d582-fddd279ba660"],"children":["bed4c272-124d-fe83-3467-72cee0d8f07b"],"data":{"text":false,"tag":"div"}},{"_id":"bed4c272-124d-fe83-3467-72cee0d8f07b","type":"Block","tag":"div","classes":["93c15c0d-55c7-64f9-d74d-19aba7340abb"],"children":["8c19ab6a-569f-117e-11b8-34ceeb9576df","bdff37ef-53ed-e8b3-d0af-9b11f492fb8d"],"data":{"text":false,"tag":"div"}},{"_id":"8c19ab6a-569f-117e-11b8-34ceeb9576df","type":"Image","tag":"img","classes":["7a899357-2f3b-4e13-74a3-c79d15274433"],"children":[],"data":{"img":{"id":"68f5cd25795886eef58d61d3"},"srcsetDisabled":false,"attr":{"width":"auto","height":"auto","alt":"__wf_reserved_inherit","src":"https://cdn.prod.website-files.com/6715c43e07e7fb1e8d235584/68f5cd25795886eef58d61d3_undraw_page-not-found_6wni.svg","loading":"lazy"},"sizes":[]}},{"_id":"bdff37ef-53ed-e8b3-d0af-9b11f492fb8d","type":"Block","tag":"div","classes":["25b5afed-40e5-cafb-187c-2497a49cf6fc"],"children":["21c263c1-bfc9-ec8e-2c8b-d5be30e7e0a4","39b1fb28-694f-1438-6087-88d2de8f11d9"],"data":{"text":false,"tag":"div"}},{"_id":"21c263c1-bfc9-ec8e-2c8b-d5be30e7e0a4","type":"Heading","tag":"h1","classes":["fc02aeff-e0d8-bf2c-4e00-1c01e63243ad"],"children":["77b6dd7b-ce85-7d7c-6670-d9c1857e75f3"],"data":{"tag":"h1"}},{"_id":"77b6dd7b-ce85-7d7c-6670-d9c1857e75f3","text":true,"v":"Content not found"},{"_id":"39b1fb28-694f-1438-6087-88d2de8f11d9","type":"Link","tag":"a","classes":["071d7fab-07e5-249a-5f01-7e8beb846f70"],"children":["7dd9e1e6-563c-7d0b-11ba-1029b6bdeceb"],"data":{"button":true,"block":"","link":{"mode":"external","url":"#"},"eventIds":[],"search":{"exclude":true}}},{"_id":"7dd9e1e6-563c-7d0b-11ba-1029b6bdeceb","text":true,"v":"Go back to home page"},{"_id":"68e748f7-5be2-a08b-0159-6f16360f2bca","type":"Block","tag":"div","classes":["34e965a1-ac16-2d55-3d6f-b50be9fc9e8b"],"children":["9b8f105e-7ab5-12f7-ec0b-46443c989cf5"],"data":{"text":false,"tag":"div"}},{"_id":"9b8f105e-7ab5-12f7-ec0b-46443c989cf5","type":"HtmlEmbed","tag":"div","classes":[],"children":[],"v":"<script src=\"https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js\"></script>\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n\n  const container = document.querySelector('.bubble-pills-container');\n  if (!container) return;\n\n  /// These variables can be changed by user\n  const dropDelay = 10;          // ms between each bubble drop\n  const verticalSpawnOffset = 50; // extra random vertical offset for spawn\n  const restitution = 0.6;        // bounciness (0 = no bounce, 1 = very bouncy)\n\n  const responsiveBubbleCounts = { large: 30, medium: 20, small: 10}; \n\n  // Bubble appearance\n  const fontSize = 14;\n  const fontFamily = \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial\";\n  const paddingX = 20;\n  const paddingY = 12;\n  const cornerRadius = 20;\n  const blackColor = \"#000\";\n  const grayColor = \"#E5E5EA\";\n  const blueTextColor = \"#fff\";\n  const grayTextColor = \"#000\";\n\n  // Resize debounce (ms)\n  const resizeDelay = 300;\n  // =========================\n\n  let engine, render, runner, resizeTimeout;\n\n  const messages = [\n    \"Flowbits\",\"Best components\",\"Easy to use\",\"Love the design\",\n    \"Smooth animation\",\"copy and paste\",\"Very smooth\",\"Perfect design\",\n    \"Flowbits the best\",\"Highly recommend Flowbits\",\"Top quality components\",\"Pixel perfect\",\n    \"Top notch elements\",\"Complexity removed\",\"Saves time\",\"Really cool\",\n    \"Very happy with Flowbits\",\"Exactly right\",\"Love Flowbits\",\"So intuitive\",\n    \"Easy workflow\",\"Nice layout\",\"Elegently functional\",\"Seemlessly modular\",\n    \"Super friendly\",\"Perfect fit\",\"Runs fast\",\"Looks sharp\",\n    \"Always aligned features\",\"Neatly packed\",\"Powderfully practical\",\"Very useful\",\n    \"Works flawless\",\"Zero hassle\",\"Design ready\",\"UX mastery\",\n    \"Dev friendly\",\"Perfect harmony\",\"Best amogst all\",\"Performance First\"\n  ];\n\n  function createBubbleTexture(text, color, textColor) {\n    const tempCanvas = document.createElement(\"canvas\");\n    const ctx = tempCanvas.getContext(\"2d\");\n    ctx.font = `${fontSize}px ${fontFamily}`;\n    const textWidth = ctx.measureText(text).width;\n    const bubbleWidth = textWidth + paddingX*2;\n    const bubbleHeight = fontSize + paddingY*2;\n    tempCanvas.width = bubbleWidth;\n    tempCanvas.height = bubbleHeight;\n\n    ctx.font = `${fontSize}px ${fontFamily}`;\n    ctx.textBaseline = \"middle\";\n\n    ctx.fillStyle = color;\n    ctx.beginPath();\n    ctx.roundRect(0, 0, bubbleWidth, bubbleHeight, cornerRadius);\n    ctx.fill();\n\n    ctx.fillStyle = textColor;\n    ctx.fillText(text, paddingX, bubbleHeight/2);\n\n    return { texture: tempCanvas.toDataURL(), width: bubbleWidth, height: bubbleHeight };\n  }\n\n  function initSimulation() {\n    if(engine) {\n      Matter.Render.stop(render);\n      Matter.Runner.stop(runner);\n      container.innerHTML = '';\n    }\n\n    const width = container.clientWidth;\n    const height = container.clientHeight;\n    engine = Matter.Engine.create();\n\n    render = Matter.Render.create({\n      element: container,\n      engine: engine,\n      options: {\n        width,\n        height,\n        background: 'transparent',\n        wireframes: false,\n        pixelRatio: 2\n      }\n    });\n\n    const numBubbles = width >= 1200 ? responsiveBubbleCounts.large :\n                       width >= 800  ? responsiveBubbleCounts.medium :\n                                       responsiveBubbleCounts.small;\n\n    for(let i=0;i<numBubbles;i++){\n      setTimeout(() => {\n        const msg = messages[i % messages.length];\n        const isBlue = i % 2 === 0;\n        const color = isBlue ? blackColor : grayColor;\n        const textColor = isBlue ? blueTextColor : grayTextColor;\n        const bubbleData = createBubbleTexture(msg,color,textColor);\n\n        const bubble = Matter.Bodies.rectangle(\n          bubbleData.width/2 + Math.random()*(width - bubbleData.width),\n          -bubbleData.height - Math.random()*verticalSpawnOffset,\n          bubbleData.width,\n          bubbleData.height,\n          { restitution, render:{ sprite:{ texture: bubbleData.texture, xScale:1, yScale:1 } } }\n        );\n        Matter.Composite.add(engine.world,bubble);\n      }, i * dropDelay);\n    }\n\n    const wallThickness = 160;\n    const ground = Matter.Bodies.rectangle(width/2, height+wallThickness/2,\n                                           width+wallThickness*2, wallThickness, { isStatic:true });\n    const wallLeft = Matter.Bodies.rectangle(-wallThickness/2, height/2,\n                                             wallThickness, height, { isStatic:true });\n    const wallRight = Matter.Bodies.rectangle(width+wallThickness/2, height/2,\n                                              wallThickness, height, { isStatic:true });\n    Matter.Composite.add(engine.world,[ground, wallLeft, wallRight]);\n\n    const mouse = Matter.Mouse.create(render.canvas);\n    const mouseConstraint = Matter.MouseConstraint.create(engine,{\n      mouse, constraint:{stiffness:0.2, render:{visible:false}}\n    });\n    Matter.Composite.add(engine.world, mouseConstraint);\n\n    Matter.Render.run(render);\n    runner = Matter.Runner.create();\n    Matter.Runner.run(runner, engine);\n  }\n\n  initSimulation();\n\n  // Debounced resize handler\n  window.addEventListener('resize', () => {\n    clearTimeout(resizeTimeout);\n    resizeTimeout = setTimeout(() => {\n      initSimulation();\n    }, resizeDelay);\n  });\n\n});\n</script>","data":{"search":{"exclude":true},"embed":{"meta":{"html":"<script src=\"https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js\"></script>\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n\n  const container = document.querySelector('.bubble-pills-container');\n  if (!container) return;\n\n  /// These variables can be changed by user\n  const dropDelay = 10;          // ms between each bubble drop\n  const verticalSpawnOffset = 50; // extra random vertical offset for spawn\n  const restitution = 0.6;        // bounciness (0 = no bounce, 1 = very bouncy)\n\n  const responsiveBubbleCounts = { large: 30, medium: 20, small: 10}; \n\n  // Bubble appearance\n  const fontSize = 14;\n  const fontFamily = \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial\";\n  const paddingX = 20;\n  const paddingY = 12;\n  const cornerRadius = 20;\n  const blackColor = \"#000\";\n  const grayColor = \"#E5E5EA\";\n  const blueTextColor = \"#fff\";\n  const grayTextColor = \"#000\";\n\n  // Resize debounce (ms)\n  const resizeDelay = 300;\n  // =========================\n\n  let engine, render, runner, resizeTimeout;\n\n  const messages = [\n    \"Flowbits\",\"Best components\",\"Easy to use\",\"Love the design\",\n    \"Smooth animation\",\"copy and paste\",\"Very smooth\",\"Perfect design\",\n    \"Flowbits the best\",\"Highly recommend Flowbits\",\"Top quality components\",\"Pixel perfect\",\n    \"Top notch elements\",\"Complexity removed\",\"Saves time\",\"Really cool\",\n    \"Very happy with Flowbits\",\"Exactly right\",\"Love Flowbits\",\"So intuitive\",\n    \"Easy workflow\",\"Nice layout\",\"Elegently functional\",\"Seemlessly modular\",\n    \"Super friendly\",\"Perfect fit\",\"Runs fast\",\"Looks sharp\",\n    \"Always aligned features\",\"Neatly packed\",\"Powderfully practical\",\"Very useful\",\n    \"Works flawless\",\"Zero hassle\",\"Design ready\",\"UX mastery\",\n    \"Dev friendly\",\"Perfect harmony\",\"Best amogst all\",\"Performance First\"\n  ];\n\n  function createBubbleTexture(text, color, textColor) {\n    const tempCanvas = document.createElement(\"canvas\");\n    const ctx = tempCanvas.getContext(\"2d\");\n    ctx.font = `${fontSize}px ${fontFamily}`;\n    const textWidth = ctx.measureText(text).width;\n    const bubbleWidth = textWidth + paddingX*2;\n    const bubbleHeight = fontSize + paddingY*2;\n    tempCanvas.width = bubbleWidth;\n    tempCanvas.height = bubbleHeight;\n\n    ctx.font = `${fontSize}px ${fontFamily}`;\n    ctx.textBaseline = \"middle\";\n\n    ctx.fillStyle = color;\n    ctx.beginPath();\n    ctx.roundRect(0, 0, bubbleWidth, bubbleHeight, cornerRadius);\n    ctx.fill();\n\n    ctx.fillStyle = textColor;\n    ctx.fillText(text, paddingX, bubbleHeight/2);\n\n    return { texture: tempCanvas.toDataURL(), width: bubbleWidth, height: bubbleHeight };\n  }\n\n  function initSimulation() {\n    if(engine) {\n      Matter.Render.stop(render);\n      Matter.Runner.stop(runner);\n      container.innerHTML = '';\n    }\n\n    const width = container.clientWidth;\n    const height = container.clientHeight;\n    engine = Matter.Engine.create();\n\n    render = Matter.Render.create({\n      element: container,\n      engine: engine,\n      options: {\n        width,\n        height,\n        background: 'transparent',\n        wireframes: false,\n        pixelRatio: 2\n      }\n    });\n\n    const numBubbles = width >= 1200 ? responsiveBubbleCounts.large :\n                       width >= 800  ? responsiveBubbleCounts.medium :\n                                       responsiveBubbleCounts.small;\n\n    for(let i=0;i<numBubbles;i++){\n      setTimeout(() => {\n        const msg = messages[i % messages.length];\n        const isBlue = i % 2 === 0;\n        const color = isBlue ? blackColor : grayColor;\n        const textColor = isBlue ? blueTextColor : grayTextColor;\n        const bubbleData = createBubbleTexture(msg,color,textColor);\n\n        const bubble = Matter.Bodies.rectangle(\n          bubbleData.width/2 + Math.random()*(width - bubbleData.width),\n          -bubbleData.height - Math.random()*verticalSpawnOffset,\n          bubbleData.width,\n          bubbleData.height,\n          { restitution, render:{ sprite:{ texture: bubbleData.texture, xScale:1, yScale:1 } } }\n        );\n        Matter.Composite.add(engine.world,bubble);\n      }, i * dropDelay);\n    }\n\n    const wallThickness = 160;\n    const ground = Matter.Bodies.rectangle(width/2, height+wallThickness/2,\n                                           width+wallThickness*2, wallThickness, { isStatic:true });\n    const wallLeft = Matter.Bodies.rectangle(-wallThickness/2, height/2,\n                                             wallThickness, height, { isStatic:true });\n    const wallRight = Matter.Bodies.rectangle(width+wallThickness/2, height/2,\n                                              wallThickness, height, { isStatic:true });\n    Matter.Composite.add(engine.world,[ground, wallLeft, wallRight]);\n\n    const mouse = Matter.Mouse.create(render.canvas);\n    const mouseConstraint = Matter.MouseConstraint.create(engine,{\n      mouse, constraint:{stiffness:0.2, render:{visible:false}}\n    });\n    Matter.Composite.add(engine.world, mouseConstraint);\n\n    Matter.Render.run(render);\n    runner = Matter.Runner.create();\n    Matter.Runner.run(runner, engine);\n  }\n\n  initSimulation();\n\n  // Debounced resize handler\n  window.addEventListener('resize', () => {\n    clearTimeout(resizeTimeout);\n    resizeTimeout = setTimeout(() => {\n      initSimulation();\n    }, resizeDelay);\n  });\n\n});\n</script>","div":false,"script":true,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false}}],"styles":[{"_id":"3bc82e99-3a79-1bfe-2605-e3306af9119f","fake":false,"type":"class","name":"section  pills","namespace":"","comb":"","styleLess":"position: relative; overflow: hidden; width: 100%; height: auto; min-height: 100vh;","variants":{},"children":[],"createdBy":"65dd4f97913fe8903f949566","origin":null,"selector":null},{"_id":"4ec7d4d4-e9da-ac4f-d582-fddd279ba660","fake":false,"type":"class","name":"padding global","namespace":"","comb":"","styleLess":"padding-top: 0rem; padding-right: 1.5rem; padding-left: 1.5rem;","variants":{"tiny":{"styleLess":"padding-right: 1rem; padding-left: 1rem;"}},"children":[],"createdBy":"5f7f49e224bc1e2823d682e0","origin":null,"selector":null},{"_id":"93c15c0d-55c7-64f9-d74d-19aba7340abb","fake":false,"type":"class","name":"container 404","namespace":"","comb":"","styleLess":"position: relative; z-index: 3; display: flex; padding-top: 2rem; padding-bottom: 2rem; flex-direction: column; justify-content: center; flex-wrap: nowrap; align-items: center;","variants":{},"children":[],"createdBy":"65dd4f97913fe8903f949566","origin":null,"selector":null},{"_id":"7a899357-2f3b-4e13-74a3-c79d15274433","fake":false,"type":"class","name":"image section","namespace":"","comb":"","styleLess":"width: 100%; max-height: 40vh; margin-bottom: 3rem;","variants":{},"children":[],"createdBy":"65dd4f97913fe8903f949566","origin":null,"selector":null},{"_id":"25b5afed-40e5-cafb-187c-2497a49cf6fc","fake":false,"type":"class","name":"Heading wrapper","namespace":"","comb":"","styleLess":"display: flex; flex-direction: column; justify-content: center; flex-wrap: nowrap; align-items: center; grid-column-gap: 3rem; grid-row-gap: 3rem;","variants":{},"children":[],"createdBy":"65dd4f97913fe8903f949566","origin":null,"selector":null},{"_id":"fc02aeff-e0d8-bf2c-4e00-1c01e63243ad","fake":false,"type":"class","name":"Heading h1","namespace":"","comb":"","styleLess":"color: hsla(0, 0.00%, 0.00%, 1.00); font-size: 4rem;","variants":{"medium":{"styleLess":"line-height: 1.3;"},"small":{"styleLess":"font-size: 3.5rem; line-height: 1.1; text-align: center;"},"tiny":{"styleLess":"font-size: 3rem; line-height: 1;"}},"children":["fc02aeff-e0d8-bf2c-4e00-1c01e63243b4"],"createdBy":"5f7f49e224bc1e2823d682e0","origin":null,"selector":null},{"_id":"071d7fab-07e5-249a-5f01-7e8beb846f70","fake":false,"type":"class","name":"btn primary","namespace":"","comb":"","styleLess":"display: flex; padding-top: 0.8rem; padding-right: 1.25rem; padding-bottom: 0.8rem; padding-left: 1.25rem; justify-content: flex-start; align-items: center; border-top-style: solid; border-top-width: 1px; border-top-color: black; border-right-style: solid; border-right-width: 1px; border-right-color: black; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: black; border-left-style: solid; border-left-width: 1px; border-left-color: black; border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; background-color: hsla(208.00000000000003, 0.00%, 0.00%, 1.00); color: hsla(129, 0.00%, 100.00%, 1.00); text-align: center; text-decoration: none; text-transform: capitalize;","variants":{"main_hover":{"styleLess":"background-color: hsla(208.00000000000003, 0.00%, 100.00%, 1.00); color: hsla(129, 0.00%, 0.00%, 1.00);"}},"children":["071d7fab-07e5-249a-5f01-7e8beb846f76","fc02aeff-e0d8-bf2c-4e00-1c01e63243b6","cfda3060-4ac4-9e1d-34ba-753a67448f57"],"createdBy":"5f7f49e224bc1e2823d682e0","origin":null,"selector":null},{"_id":"34e965a1-ac16-2d55-3d6f-b50be9fc9e8b","fake":false,"type":"class","name":"bubble pills container","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: 0%; right: auto; bottom: auto; overflow: hidden; width: 100%; height: 100%;","variants":{},"children":[],"createdBy":"65dd4f97913fe8903f949566","origin":null,"selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/6715c43e07e7fb1e8d235584/68f5cd25795886eef58d61d3_undraw_page-not-found_6wni.svg","siteId":"6715c43e07e7fb1e8d235584","width":860,"height":571,"fileName":"undraw_page-not-found_6wni.svg","createdOn":"2025-10-20T05:48:21.672Z","origFileName":"undraw_page-not-found_6wni.svg","fileHash":"2e5e19b9ed09995b6abd3a09a5c3f3a3","mimeType":"image/svg+xml","isFromWellKnownFolder":false,"s3Url":"https://s3.amazonaws.com/webflow-prod-assets/6715c43e07e7fb1e8d235584/68f5cd25795886eef58d61d3_undraw_page-not-found_6wni.svg","_id":"68f5cd25795886eef58d61d3","markedAsDeleted":false,"fileSize":23666}],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0,"codeComponentsRemovedCount":0}}