Prism Interface
Home
Snippets
Prism Interface
HTML
CSS
JS
<div class="ambient-glow"></div> <div class="prism-card" id="interactive-card"> <canvas class="prism-canvas" id="prism-canvas"></canvas> <div class="card-content"> <span class="system-tag">Secure Node // 09X</span> <h2>Distributed Quantum Vectors</h2> <p>Deploy responsive encryption interfaces with native hardware tracking maps built directly into spatial mobile viewports.</p> <div class="action-tray"> <div class="metric-group"> <span class="metric-val" id="telemetry-val">94.2%</span> <span class="metric-lbl">Efficiency</span> </div> <button class="btn-connect">Initialize</button> </div> </div> </div>
:root { --bg-dark: #050508; --card-surface: #0c0d14; --border-alpha: rgba(255, 255, 255, 0.04); --text-primary: #f8fafc; --text-secondary: #64748b; } body { margin: 0; background-color: var(--bg-dark); color: var(--text-primary); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; user-select: none; -webkit-user-select: none; padding: 20px; box-sizing: border-box; } .ambient-glow { position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%); top: 20%; left: 10%; z-index: 1; pointer-events: none; } .prism-card { position: relative; z-index: 5; width: 100%; max-width: 360px; background: var(--card-surface); border-radius: 24px; padding: 32px 24px; box-sizing: border-box; border: 1px solid var(--border-alpha); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); overflow: hidden; transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); } .prism-card:active { transform: scale(0.98); } .prism-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; mix-blend-mode: screen; } .card-content { position: relative; z-index: 3; pointer-events: none; } .system-tag { font-size: 10px; font-weight: 700; color: #818cf8; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 32px; display: inline-block; } h2 { font-size: 24px; font-weight: 600; margin: 0 0 12px; letter-spacing: -0.5px; } p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 40px; } .action-tray { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 24px; } .metric-group { display: flex; flex-direction: column; gap: 2px; } .metric-val { font-size: 18px; font-weight: 700; font-family: monospace; } .metric-lbl { font-size: 10px; color: var(--text-secondary); letter-spacing: 1px; text-transform: uppercase; } .btn-connect { background: #fff; color: #000; font-size: 13px; font-weight: 600; padding: 10px 20px; border-radius: 12px; border: none; }
const card = document.getElementById('interactive-card'); const canvas = document.getElementById('prism-canvas'); const ctx = canvas.getContext('2d'); const telemetry = document.getElementById('telemetry-val'); let pointer = { x: null, y: null, targetX: null, targetY: null, active: false }; function resizeCanvas() { const rect = card.getBoundingClientRect(); canvas.width = rect.width; canvas.height = rect.height; } function drawPrismGlow() { ctx.clearRect(0, 0, canvas.width, canvas.height); if (pointer.x !== null) { pointer.x += (pointer.targetX - pointer.x) * 0.15; pointer.y += (pointer.targetY - pointer.y) * 0.15; let radius = pointer.active ? 160 : 120; let gradient = ctx.createRadialGradient(pointer.x, pointer.y, 0, pointer.x, pointer.y, radius); gradient.addColorStop(0, 'rgba(255, 255, 255, 0.15)'); gradient.addColorStop(0.2, 'rgba(99, 102, 241, 0.25)'); // Indigo gradient.addColorStop(0.5, 'rgba(236, 72, 153, 0.15)'); // Pink gradient.addColorStop(0.8, 'rgba(56, 189, 248, 0.05)'); // Light Blue gradient.addColorStop(1, 'transparent'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.strokeStyle = 'rgba(255, 255, 255, 0.08)'; ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(pointer.x, pointer.y, 14, 0, Math.PI * 2); ctx.stroke(); } if (Math.random() > 0.97) { let currentNum = (94.0 + Math.random() * 0.8).toFixed(1); telemetry.textContent = currentNum + "%"; } requestAnimationFrame(drawPrismGlow); } function updatePointer(clientX, clientY) { const rect = card.getBoundingClientRect(); pointer.targetX = clientX - rect.left; pointer.targetY = clientY - rect.top; if (pointer.x === null) { pointer.x = pointer.targetX; pointer.y = pointer.targetY; } } card.addEventListener('touchstart', (e) => { pointer.active = true; updatePointer(e.touches[0].clientX, e.touches[0].clientY); }, { passive: true }); card.addEventListener('touchmove', (e) => { updatePointer(e.touches[0].clientX, e.touches[0].clientY); }, { passive: true }); card.addEventListener('touchend', () => { pointer.active = false; }); card.addEventListener('mouseenter', () => { pointer.active = true; }); card.addEventListener('mousemove', (e) => { updatePointer(e.clientX, e.clientY); }); card.addEventListener('mouseleave', () => { pointer.active = false; }); window.addEventListener('resize', resizeCanvas); resizeCanvas(); drawPrismGlow();
Ad #1
Ad #2
Scroll to Top