Quantum Flow Card

Live Playground

Neigen Sie Ihr Gerät oder bewegen Sie die Maus, um die 3D-Lichtbrechung zu aktivieren.

<div class="flex items-center justify-center py-6">
	<div id="card-container" class="relative w-full max-w-md [perspective:1000px]">
		<div id="tilt-card" class="relative rounded-[2.5rem] border border-white/10 bg-slate-900/60 p-10 backdrop-blur-2xl transition-transform duration-150 ease-out shadow-2xl overflow-hidden group">
			<div id="edge-light" class="pointer-events-none absolute -inset-[1px] rounded-[2.5rem] z-50 opacity-0 group-hover:opacity-100 transition-opacity duration-500" style=""></div>
			<div class="pointer-events-none absolute inset-0 z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-500" style="background: radial-gradient(600px circle at var(--x) var(--y), rgba(34, 211, 238, 0.15), transparent 40%);"></div>
			<div class="absolute top-0 left-1/4 h-[1px] w-1/2 bg-gradient-to-r from-transparent via-cyan-400 to-transparent shadow-[0_0_15px_rgba(34,211,238,0.8)] z-20"></div>
			<div class="absolute -bottom-[1px] left-1/2 h-[2px] w-40 -translate-x-1/2 animate-pulse bg-cyan-400 shadow-[0_0_15px_4px_rgba(34,211,238,0.6)] z-20 transition-all duration-1000 group-hover:w-64"></div>
			<div class="relative z-30">
				<div class="flex items-start justify-between">
					<div class="h-14 w-14 rounded-2xl bg-gradient-to-br from-cyan-500 to-blue-600 p-[1px]">
						<div class="flex h-full w-full items-center justify-center rounded-2xl bg-slate-900">
							<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
							</svg>
						</div>
					</div>
					<span class="text-[10px] font-black uppercase tracking-[0.4em] text-cyan-400">System 2026</span>
				</div>
				<div class="mt-12">
					<h3 class="text-4xl font-bold tracking-tighter text-white">Quantum <span class="text-cyan-400 italic">Flow</span></h3>
					<p class="mt-4 text-slate-400 text-sm leading-relaxed">
						Tilt your device or move the mouse to activate 3D light refraction.
					</p>
				</div>
				<div class="mt-10 flex gap-6">
					<div class="text-sm">
						<p class="font-mono text-cyan-400">LTC_01</p>
						<p class="text-xs text-slate-600 uppercase">Node ID</p>
					</div>
					<div class="text-sm">
						<p class="font-mono text-white">STABLE</p>
						<p class="text-xs text-slate-600 uppercase">Status</p>
					</div>
				</div>
				<button class="relative mt-10 w-full overflow-hidden rounded-xl bg-cyan-400 py-4 text-xs font-black uppercase tracking-widest text-slate-950 transition-all hover:scale-[1.05] hover:shadow-[0_0_30px_rgba(34,211,238,0.4)]">
					Initialize
				</button>
			</div>
		</div>
	</div>
</div>
<script>
	const container = document.getElementById('card-container');
	const card2 = document.getElementById('tilt-card');
	container.addEventListener('mousemove', (e) => {
		const rect = container.getBoundingClientRect();
		const x = e.clientX - rect.left;
		const y = e.clientY - rect.top;
		// 1. Koordinaten für den Lichteffekt
		card2.style.setProperty('--x', `${x}px`);
		card2.style.setProperty('--y', `${y}px`);
		// 2. 3D Tilt Berechnung
		const centerX = rect.width / 2;
		const centerY = rect.height / 2;
		const rotateX = (y - centerY) / 10 * -1; // Neigungswinkel X
		const rotateY = (x - centerX) / 10;      // Neigungswinkel Y
		card2.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
	});
	// Reset beim Verlassen
	container.addEventListener('mouseleave', () => {
		card2.style.transform = `rotateX(0deg) rotateY(0deg)`;
	});
</script>

Insider-Newsletter

Keine Trends mehr verpassen.

Exklusive Guides, neue Tools und Web-Strategien — handverlesen und direkt in dein Postfach. Kein Spam, jederzeit abbestellbar.

100 % Spam-frei

Max. 1× / Monat

Jederzeit kündbar

Quantum Flow Card

Keine Trends mehr verpassen.

Deine Privatsphäre