@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
1 lines • 3.27 kB
Source Map (JSON)
{"version":3,"sources":["webpack://./src/components/ui/bubble-background.module.css"],"names":[],"mappings":"AAAA;EACE,qDAAqD;EACrD,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,gBAAgB;AAClB;;AAEA;EACE,QAAQ;EACR,SAAS;EACT,kBAAkB;EAClB,MAAM;EACN,OAAO;AACT;;AAEA;EACE,8BAA8B;EAC9B,kBAAkB;EAClB,QAAQ;AACV;;AAEA;EACE,0BAA0B;EAC1B,qBAAqB;EACrB,kBAAkB;AACpB;;AAEA;EACE,UAAU;EACV,WAAW;EACX,QAAQ;EACR,SAAS;AACX;;AAGA;EAAE,4HAA4H;AAC9H;;AAGA;EAAE,uBAAuB;EACvB,mBAAmB;EACnB,aAAa;EACb,kBAAkB;EAClB,QAAQ;AACV;;AAGA;EAAE,mCAAmC;AACrC;;AAGA;EAAE,8HAA8H;EAC9H,UAAU;EACV,WAAW;EACX,QAAQ;EACR,SAAS;AACX;;AAGA;EAAE,mCAAmC;AACrC;;AAGA;EAAE,4HAA4H;EAC5H,UAAU;EACV,WAAW;EACX,kBAAkB;EAClB,sBAAsB;EACtB,uBAAuB;AACzB;;AAGA;EAAE,8HAA8H;EAC9H,WAAW;AACb;;AAGA;EAAE,qDAAqD;AACvD;;AAGA;EAAE,4HAA4H;EAC5H,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,SAAS;EACT,UAAU;AACZ;;AAGA;EAAE,4HAA4H;EAC5H,WAAW;EACX,WAAW;EACX,YAAY;AACd","sourcesContent":[".root {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n background: linear-gradient(135deg, #2e1065 0%, #1d4ed8 100%);\r\n}\r\n\r\n.hiddenSvg {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 0;\r\n height: 0;\r\n}\r\n\r\n.filterLayer {\r\n position: absolute;\r\n inset: 0;\r\n filter: url(#goo) blur(40px);\r\n}\r\n\r\n.bubble {\r\n position: absolute;\r\n border-radius: 9999px;\r\n mix-blend-mode: hard-light;\r\n}\r\n\r\n.bubbleFirst,\r\n.bubbleFourth {\r\n top: 10%;\r\n left: 10%;\r\n width: 80%;\r\n height: 80%;\r\n}\r\n\r\n.bubbleFirst {\r\n background: radial-gradient(circle at center, rgb(var(--ac-bubble-first-color) / 0.8) 0%, rgb(var(--ac-bubble-first-color) / 0) 50%);\r\n}\r\n\r\n.rotator {\r\n position: absolute;\r\n inset: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.rotatorSecond {\r\n transform-origin: calc(50% - 400px) 50%;\r\n}\r\n\r\n.bubbleSecond {\r\n top: 10%;\r\n left: 10%;\r\n width: 80%;\r\n height: 80%;\r\n background: radial-gradient(circle at center, rgb(var(--ac-bubble-second-color) / 0.8) 0%, rgb(var(--ac-bubble-second-color) / 0) 50%);\r\n}\r\n\r\n.rotatorThird {\r\n transform-origin: calc(50% + 400px) 50%;\r\n}\r\n\r\n.bubbleThird {\r\n position: absolute;\r\n top: calc(50% + 200px);\r\n left: calc(50% - 500px);\r\n width: 80%;\r\n height: 80%;\r\n background: radial-gradient(circle at center, rgb(var(--ac-bubble-third-color) / 0.8) 0%, rgb(var(--ac-bubble-third-color) / 0) 50%);\r\n}\r\n\r\n.bubbleFourth {\r\n opacity: 0.7;\r\n background: radial-gradient(circle at center, rgb(var(--ac-bubble-fourth-color) / 0.8) 0%, rgb(var(--ac-bubble-fourth-color) / 0) 50%);\r\n}\r\n\r\n.rotatorFifth {\r\n transform-origin: calc(50% - 800px) calc(50% + 200px);\r\n}\r\n\r\n.bubbleFifth {\r\n position: absolute;\r\n top: calc(50% - 80%);\r\n left: calc(50% - 80%);\r\n width: 160%;\r\n height: 160%;\r\n background: radial-gradient(circle at center, rgb(var(--ac-bubble-fifth-color) / 0.8) 0%, rgb(var(--ac-bubble-fifth-color) / 0) 50%);\r\n}\r\n\r\n.bubbleInteractive {\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0.7;\r\n background: radial-gradient(circle at center, rgb(var(--ac-bubble-sixth-color) / 0.8) 0%, rgb(var(--ac-bubble-sixth-color) / 0) 50%);\r\n}\r\n"],"sourceRoot":""}