{"version":3,"file":"SoapBubbles.C9Csof0e.mjs","names":[],"sources":["https:/framerusercontent.com/modules/MJyE9JyU1ciC89cbvydz/F6yOaTMnaKp3t3cCSy8b/SoapBubbles.js"],"sourcesContent":["/**\n * SoapBubbles — Framer Code Component\n *\n * Reproduceert exact de zeepbellen-animatie uit de Flitsmeister wasstraat hero.\n *\n * Gebruik:\n *  1. Kopieer dit bestand naar Framer via Assets → Code → + New Code File\n *  2. Noem het bestand \"SoapBubbles\"\n *  3. Sleep \"SoapBubbles\" vanuit het Assets-paneel op de hero-sectie\n *  4. Stel de breedte en hoogte in op \"Fill\" zodat hij de volledige hero vult\n *  5. Zet de laag ACHTER de tekst-lagen in het layers-paneel\n */import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useEffect}from\"react\";// ── CSS keyframes ───────────────────────────────────────────────────────────\nconst KEYFRAME_CSS=`\n@keyframes soapBubbleRise {\n  0%   { transform: translateY(0)       scale(1.0); opacity: 0;   }\n  8%   {                                             opacity: 1;   }\n  92%  {                                             opacity: 0.7; }\n  100% { transform: translateY(-110vh)  scale(1.2); opacity: 0;   }\n}\n@keyframes soapBubbleWobble {\n  0%,  100% { border-radius: 52% 48% 55% 45% / 48% 52% 48% 52%; }\n  33%        { border-radius: 45% 55% 48% 52% / 55% 45% 52% 48%; }\n  66%        { border-radius: 55% 45% 52% 48% / 45% 55% 45% 55%; }\n}\n`;// ── Bubble configuratie (identiek aan de HTML-versie) ───────────────────────\nconst BUBBLE_CONFIGS=[{size:55,left:6,delay:0,dur:8},{size:38,left:14,delay:1.5,dur:6.5},{size:72,left:24,delay:3,dur:10},{size:28,left:38,delay:.8,dur:7.5},{size:45,left:50,delay:4,dur:9},{size:60,left:62,delay:2.2,dur:11},{size:32,left:74,delay:5.5,dur:7},{size:50,left:83,delay:1,dur:8.5},{size:40,left:92,delay:3.8,dur:9.5}];export default function SoapBubbles({speedMultiplier,opacity,style}){// Inject keyframes één keer in de document head\nuseEffect(()=>{const id=\"flitsmeister-soap-bubbles-css\";if(!document.getElementById(id)){const el=document.createElement(\"style\");el.id=id;el.textContent=KEYFRAME_CSS;document.head.appendChild(el);}// Cleanup bij unmount\nreturn()=>{const el=document.getElementById(id);if(el)el.remove();};},[]);return /*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",inset:0,overflow:\"hidden\",pointerEvents:\"none\",...style},children:BUBBLE_CONFIGS.map((b,i)=>{const riseDur=b.dur*speedMultiplier;const wobbleDur=3*speedMultiplier;const delay=b.delay*speedMultiplier;return /*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",width:b.size,height:b.size,left:`${b.left}%`,bottom:-(b.size+20),borderRadius:\"50%\",// Iriserende glans: witte glinstering linksboven,\n// blauw rechtsonder, paars linksonder, groen rechtsboven\nbackground:[\"radial-gradient(circle at 32% 28%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.10) 18%, transparent 40%)\",\"radial-gradient(circle at 65% 72%, rgba(0,180,255,.18) 0%, transparent 45%)\",\"radial-gradient(circle at 20% 70%, rgba(200,80,255,.12) 0%, transparent 40%)\",\"radial-gradient(circle at 80% 20%, rgba(0,255,180,.08) 0%, transparent 35%)\"].join(\", \"),border:\"1.5px solid rgba(255,255,255,.35)\",boxShadow:\"inset 0 0 12px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.10)\",opacity,// Twee gelijktijdige animaties:\n// 1. soapBubbleRise  — beweegt omhoog en faded in/uit\n// 2. soapBubbleWobble — organische vormverandering\nanimation:[`soapBubbleRise   ${riseDur}s   ${delay}s linear        infinite`,`soapBubbleWobble ${wobbleDur}s ${delay}s ease-in-out   infinite alternate`].join(\", \")}},i);})});}SoapBubbles.defaultProps={speedMultiplier:1,opacity:1};addPropertyControls(SoapBubbles,{speedMultiplier:{type:ControlType.Number,title:\"Snelheid\",defaultValue:1,min:.25,max:3,step:.25,displayStepper:true,description:\"1 = normaal \\xb7 0.5 = 2\\xd7 sneller \\xb7 2 = 2\\xd7 langzamer\"},opacity:{type:ControlType.Number,title:\"Zichtbaarheid\",defaultValue:1,min:0,max:1,step:.05,displayStepper:true}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"SoapBubbles\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./SoapBubbles.map"],"mappings":"2KAyByU,SAAwB,EAAY,CAAC,kBAAgB,UAAQ,SAAO,CAEnU,OAD1E,MAAc,CAAC,IAAM,EAAG,gCAAgC,GAAG,CAAC,SAAS,eAAe,CAAE,EAAE,CAAC,IAAM,EAAG,SAAS,cAAc,OAAO,EAAE,EAAG,GAAG,EAAG,EAAG,YAAY,EAAa,SAAS,KAAK,YAAY,CAAE,CAAE,CACrM,UAAU,CAAC,IAAM,EAAG,SAAS,eAAe,CAAE,EAAK,GAAG,EAAG,OAAO,CAAE,CAAE,EAAE,CAAC,CAAC,EAAsB,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,EAAE,SAAS,SAAS,cAAc,OAAO,GAAG,CAAK,EAAE,SAAS,EAAe,KAAK,EAAE,IAAI,CAAC,IAAM,EAAQ,EAAE,IAAI,EAAsB,EAAU,EAAE,EAAsB,EAAM,EAAE,MAAM,EAAgB,OAAoB,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,EAAE,KAAK,OAAO,EAAE,KAAK,KAAK,GAAG,EAAE,KAAK,GAAG,OAAO,EAAE,EAAE,KAAK,IAAI,aAAa,MAErd,WAAW,CAAC,2GAA2G,8EAA8E,+EAA+E,6EAA6E,CAAC,CAAC,KAAK,IAAI,EAAE,OAAO,oCAAoC,UAAU,kEAAkE,UAGre,UAAU,CAAC,oBAAoB,EAAQ,MAAM,EAAM,0BAA0B,oBAAoB,EAAU,IAAI,EAAM,mCAAmC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,EAAE,CAAC,CAAE,CAAC,CAAC,CAAC,CAAE,qBArBlI,IAAoD,IAA6B,EACxH,EAAa;;;;;;;;;;;;EAab,EAAe,CAAC,CAAC,KAAK,GAAG,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,GAAG,KAAK,GAAG,MAAM,IAAI,IAAI,GAAG,EAAE,CAAC,KAAK,GAAG,KAAK,GAAG,MAAM,EAAE,IAAI,EAAE,EAAE,CAAC,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC,KAAK,GAAG,KAAK,GAAG,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,GAAG,KAAK,GAAG,MAAM,IAAI,IAAI,EAAE,EAAE,CAAC,KAAK,GAAG,KAAK,GAAG,MAAM,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,GAAG,KAAK,GAAG,MAAM,EAAE,IAAI,GAAG,EAAE,CAAC,KAAK,GAAG,KAAK,GAAG,MAAM,IAAI,IAAI,GAAG,CAAC,EAOvJ,EAAY,aAAa,CAAC,gBAAgB,EAAE,QAAQ,CAAC,EAAE,EAAoB,EAAY,CAAC,gBAAgB,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,aAAa,EAAE,IAAI,IAAI,IAAI,EAAE,KAAK,IAAI,eAAe,GAAK,YAAY,mDAA+D,EAAE,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,gBAAgB,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,eAAe,EAAI,CAAC,CAAC"}