Add particle effect

2026-04-08 09:20:17 +02:00
parent 4540f1895d
commit 00a49f0a11
7 changed files with 413 additions and 2 deletions
--- a/src/components/interactive-background/interactive-background.css
+++ b/src/components/interactive-background/interactive-background.css
@@ -0,0 +1,49 @@
+:host {
+  position: fixed;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.background-layer {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+.particle-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.custom-cursor {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 26px;
+  height: 26px;
+  border: 1px solid rgba(147, 197, 253, 0.9);
+  border-radius: 50%;
+  transform: translate3d(-9999px, -9999px, 0);
+  margin-left: -13px;
+  margin-top: -13px;
+  box-shadow: 0 0 24px rgba(56, 189, 248, 0.28);
+  background: radial-gradient(circle, rgba(96, 165, 250, 0.25) 0%, rgba(96, 165, 250, 0) 70%);
+  transition: width 130ms ease, height 130ms ease, margin 130ms ease, border-color 130ms ease;
+}
+
+.custom-cursor.pointer-down {
+  width: 38px;
+  height: 38px;
+  margin-left: -19px;
+  margin-top: -19px;
+  border-color: rgba(196, 181, 253, 0.95);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .custom-cursor {
+    transition: none;
+  }
+}
+