... Eltern: position:relative; overflow:hidden; Inhalt: z-index:1 ------------------------------------------------------------ */ .aurora { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; } .aurora__blob { position: absolute; width: 46vw; height: 46vw; min-width: 320px; min-height: 320px; border-radius: 50%; filter: blur(72px); opacity: 0.5; mix-blend-mode: screen; will-change: transform; } .aurora__blob--1 { background: var(--wb-aurora-1); top: -12%; left: -6%; animation: wb-drift-1 19s var(--wb-ease-inout) infinite alternate; } .aurora__blob--2 { background: var(--wb-aurora-2); top: 8%; right: -10%; animation: wb-drift-2 23s var(--wb-ease-inout) infinite alternate; } .aurora__blob--3 { background: var(--wb-aurora-3); bottom: -18%; left: 28%; animation: wb-drift-3 27s var(--wb-ease-inout) infinite alternate; opacity: 0.38; } @keyframes wb-drift-1 { to { transform: translate(22%, 28%) scale(1.18); } } @keyframes wb-drift-2 { to { transform: translate(-24%, 18%) scale(1.1); } } @keyframes wb-drift-3 { to { transform: translate(14%, -22%) scale(1.22); } } /* Heller Modus: Blobs multiplizieren statt screen */ :root:not([data-theme="dark"]) .aurora__blob { mix-blend-mode: multiply; opacity: 0.3; filter: blur(80px); } /* ---------- 3) KINETIC TEXT ---------- Shimmer (CSS): Text Scramble (JS):

Text

| data-scramble-on="load" ------------------------------------------------------------ */ .text-shimmer { background: linear-gradient(100deg, var(--wb-aurora-1), var(--wb-aurora-2), var(--wb-aurora-3), var(--wb-aurora-1)); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: wb-shimmer 7s linear infinite; } @keyframes wb-shimmer { to { background-position: 220% center; } } .scramble-ghost { color: var(--primary, #8b6dff); opacity: .85; } /* ---------- 4) HOVER / CURSOR ---------- Magnet: data-magnetic (data-magnetic-strength="0.35") Tilt: data-tilt (data-tilt-max="9") Cursor-Blob: data-cursor am (+ data-cursor-grow einzeln) ------------------------------------------------------------ */ [data-magnetic] { transition: transform var(--wb-dur) var(--wb-ease-snap); will-change: transform; } [data-tilt] { transition: transform var(--wb-dur) var(--wb-ease); transform-style: preserve-3d; will-change: transform; } .cursor-blob { position: fixed; top: 0; left: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--primary, #22d3ee); mix-blend-mode: difference; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width var(--wb-dur) var(--wb-ease), height var(--wb-dur) var(--wb-ease), opacity var(--wb-dur) var(--wb-ease); opacity: 0; } .cursor-blob.is-active { opacity: 1; } .cursor-blob.grow { width: 68px; height: 68px; } /* ---------- 5) MARQUEE ----------

…

------------------------------------------------------------ */ .marquee { display: flex; overflow: hidden; user-select: none; gap: 4rem; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .marquee__track { display: flex; align-items: center; gap: 4rem; flex-shrink: 0; min-width: 100%; animation: wb-marquee 30s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes wb-marquee { to { transform: translateX(calc(-100% - 4rem)); } } /* ---------- 6) KARTEN-ENTRANCE (für core.html Grid) ---------- Grid bekommt Klasse "wb-animate" -> Karten faden gestaffelt rein. CSS-only + fill-mode backwards = flackerfrei, auch bei JS-Rendering. ------------------------------------------------------------ */ @media (prefers-reduced-motion: no-preference) { .wb-animate .card { animation: wb-card-in var(--wb-dur) var(--wb-ease) backwards; } .wb-animate .card:nth-child(1) { animation-delay: 20ms; } .wb-animate .card:nth-child(2) { animation-delay: 65ms; } .wb-animate .card:nth-child(3) { animation-delay: 110ms; } .wb-animate .card:nth-child(4) { animation-delay: 155ms; } .wb-animate .card:nth-child(5) { animation-delay: 200ms; } .wb-animate .card:nth-child(6) { animation-delay: 245ms; } .wb-animate .card:nth-child(7) { animation-delay: 290ms; } .wb-animate .card:nth-child(8) { animation-delay: 335ms; } .wb-animate .card:nth-child(9) { animation-delay: 380ms; } .wb-animate .card:nth-child(n+10) { animation-delay: 420ms; } } @keyframes wb-card-in { from { opacity: 0; transform: translateY(16px); } } /* ---------- Reduced Motion: alles ruhig ---------- */ @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } .aurora__blob { animation: none !important; } .text-shimmer { animation: none; background-position: 0 center; } .marquee__track { animation: none; } .cursor-blob { display: none !important; } [data-magnetic], [data-tilt] { transition: none !important; } }