Dark OLED Cyber-Glassmorphic Engine

Cyber Animasyon & Görselleştirme Stüdyosu

GPU hızlandırmalı HTML5 Canvas ve CSS 3D dönüşüm mimarisiyle oluşturulmuş interaktif görselleştirme laboratuvarı. Parametreleri canlı olarak değiştirin veya farenizle siber alana müdahale edin.

60 FPS
MOD: NÖRON AĞI
|
PARTİKÜL: 120
|
FARE: ETKİSİZ
Canvas üzerinde hareket edin veya tıklayın
Canlı Kare Hızı 60.0 FPS
Render Süresi 1.2 ms
Aktif Düğüm / Nokta 120 Düğüm
Hızlandırma Modu WebGL/2D GPU

Simülasyon & Fizik Parametreleri

120
20 (Minimal) 120 (Önerilen) 260 (Yoğun)
1.0x
0.2x (Yavaş) 1.0x (Normal) 3.0x (Hiper)
130px
50px (Dar) 130px (Dengeli) 250px (Geniş)
CSS 3D TILT ENGINE

Holografik Kart

Farenizi bu kartın üzerinde gezdirerek gerçek zamanlı 3D perspektif eğim ve parlama efektini test edin.

Canlı Siber Glitch Üreteci

CSS KEYFRAMES
CYBER_PULSE_2026

Geliştirici Kılavuzu & Entegrasyon

Web projelerinizde 'Dark OLED Cyber-Glassmorphic' animasyonlarını kullanmak için hazır CSS ve Canvas şablonları.

cyber-glassmorphism.scss 
/* Dark OLED Glassmorphic Card with Neon Glow */
.glass-card {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-6px);
    border-color: rgba(59, 130, 246, 0.35);
    box-shadow: 0 20px 40px -15px rgba(59, 130, 246, 0.2);
}

/* Glowing Pill Buttons */
.btn-glow-primary {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    border-radius: 50rem;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-glow-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.55);
}
cyber-particle-engine.js 
// High-performance Particle Loop
function animateParticles() {
    ctx.clearRect(0, 0, width, height);
    
    // Draw links between nearby particles
    for (let i = 0; i < particles.length; i++) {
        for (let j = i + 1; j < particles.length; j++) {
            const dx = particles[i].x - particles[j].x;
            const dy = particles[i].y - particles[j].y;
            const dist = Math.hypot(dx, dy);
            
            if (dist < maxDistance) {
                const alpha = (1 - dist / maxDistance) * 0.4;
                ctx.strokeStyle = `rgba(59, 130, 246, ${alpha})`;
                ctx.lineWidth = 1;
                ctx.beginPath();
                ctx.moveTo(particles[i].x, particles[i].y);
                ctx.lineTo(particles[j].x, particles[j].y);
                ctx.stroke();
            }
        }
    }
    requestAnimationFrame(animateParticles);
}