@arolariu/components/dist/components/ui/bubble-background_module.css

🎨 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! ⚡

.root-J8xptl {
  background: linear-gradient(135deg, #2e1065, #1d4ed8);
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.hiddenSvg-eHjXf_ {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.filterLayer-9CIW2r {
  filter: url("#goo") blur(40px);
  position: absolute;
  inset: 0;
}

.bubble-aokqGt {
  mix-blend-mode: hard-light;
  border-radius: 9999px;
  position: absolute;
}

.bubbleFirst-gPpCTk, .bubbleFourth-JIcMNJ {
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
}

.bubbleFirst-gPpCTk {
  background: radial-gradient(circle at center,rgb(var(--ac-bubble-first-color)/.8) 0,rgb(var(--ac-bubble-first-color)/0) 50%);
}

.rotator-zoYRBc {
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.rotatorSecond-qNszdb {
  transform-origin: calc(50% - 400px);
}

.bubbleSecond-CC10ks {
  background: radial-gradient(circle at center,rgb(var(--ac-bubble-second-color)/.8) 0,rgb(var(--ac-bubble-second-color)/0) 50%);
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
}

.rotatorThird-obzzF3 {
  transform-origin: calc(50% + 400px);
}

.bubbleThird-hOtab1 {
  background: radial-gradient(circle at center,rgb(var(--ac-bubble-third-color)/.8) 0,rgb(var(--ac-bubble-third-color)/0) 50%);
  width: 80%;
  height: 80%;
  position: absolute;
  top: calc(50% + 200px);
  left: calc(50% - 500px);
}

.bubbleFourth-JIcMNJ {
  background: radial-gradient(circle at center,rgb(var(--ac-bubble-fourth-color)/.8) 0,rgb(var(--ac-bubble-fourth-color)/0) 50%);
  opacity: .7;
}

.rotatorFifth-TckMdN {
  transform-origin: calc(50% - 800px) calc(50% + 200px);
}

.bubbleFifth-zchqfe {
  background: radial-gradient(circle at center,rgb(var(--ac-bubble-fifth-color)/.8) 0,rgb(var(--ac-bubble-fifth-color)/0) 50%);
  width: 160%;
  height: 160%;
  position: absolute;
  top: -30%;
  left: -30%;
}

.bubbleInteractive-XwtaGk {
  background: radial-gradient(circle at center,rgb(var(--ac-bubble-sixth-color)/.8) 0,rgb(var(--ac-bubble-sixth-color)/0) 50%);
  opacity: .7;
  width: 100%;
  height: 100%;
}


/*# sourceMappingURL=bubble-background_module.css.map */