feat(core): add theme provider and dots pattern background

2026-04-13 23:30:12 +02:00
parent 1922053565
commit a90cf0561f
10 changed files with 7934 additions and 130 deletions
@@ -0,0 +1,120 @@
+/* ===== Container ===== */
+.bg-container {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 0;
+
+  opacity: 0;
+  transform: scale(0.95);
+  animation: bg-fade-in 1.2s ease-out forwards;
+}
+
+/* ===== DOT GRID ===== */
+.bg-dots {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+
+  background-image: radial-gradient(
+    circle at 1px 1px,
+    color-mix(in oklch, var(--foreground) 25%, transparent) 1px,
+    transparent 0
+  );
+
+  background-size: 35px 35px;
+
+  -webkit-mask-image: radial-gradient(
+    ellipse at center,
+    rgba(0,0,0,1) 55%,
+    rgba(0,0,0,0) 100%
+  );
+
+  mask-image: radial-gradient(
+    ellipse at center,
+    rgba(0,0,0,1) 55%,
+    rgba(0,0,0,0) 100%
+  );
+}
+
+/* ===== GLOWS BASE ===== */
+.bg-glow {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(120px);
+  opacity: 0;
+  transform: scale(0.6);
+
+  animation: bg-glow-in 1.8s cubic-bezier(.34,1.56,.64,1) forwards,
+             bg-glow-pulse 10s ease-in-out infinite;
+
+  will-change: transform, opacity;
+}
+
+/* ===== GLOW 1 ===== */
+.bg-glow-1 {
+  top: 20%;
+  left: 15%;
+  width: 500px;
+  height: 500px;
+
+  background: radial-gradient(
+    circle,
+    color-mix(in oklch, var(--foreground) 18%, transparent) 0%,
+    color-mix(in oklch, var(--primary) 9%, transparent) 45%,
+    transparent 70%
+  );
+
+  opacity: 0.6;
+}
+
+/* ===== GLOW 2 ===== */
+.bg-glow-2 {
+  bottom: 25%;
+  right: 20%;
+  width: 450px;
+  height: 450px;
+
+  background: radial-gradient(
+    circle,
+    color-mix(in oklch, var(--foreground) 15%, transparent) 0%,
+    color-mix(in oklch, var(--primary) 6%, transparent) 50%,
+    transparent 75%
+  );
+
+  opacity: 0.55;
+}
+
+/* ===== ANIMATIONS ===== */
+
+@keyframes bg-fade-in {
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes bg-dot-fade {
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes bg-glow-in {
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes bg-glow-pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 0.8;
+  }
+}