Perde Arkası

Bu portfolyödeki fotoğraf hover efekti, Framer'ın ünlü X-Ray bileşeninden ilham alıyor. Fare ile fotoğrafın üzerine geldiğinizde, bir daire içinde kod matrisi görünür. İşte bu efektin nasıl çalıştığı.

Katmanlı Mimari

Efekt 4 katmandan oluşuyor:

1. Glitch Canvas (z-index: 1) — Rastgele harf ve sembollerle dolu bir canvas. Renkleri particle network ile senkronize.
2. CRT Overlay (z-index: 2) — Eski monitör tarama çizgileri efekti.
3. CRT Flicker (z-index: 3) — Titreşim animasyonu.
4. Normal Fotoğraf (z-index: 5) — En üstte, mask ile delik açılıyor.

Sihirli Kısım: CSS Mask

Fotoğrafın altındaki kodu göstermek için mask-image ile bir delik açıyoruz:

// Mouse pozisyonunda radial-gradient mask
const mask = `radial-gradient(
    circle 130px at ${x}px ${y}px,
    transparent 0%, transparent 35%,
    rgba(0,0,0,0.4) 55%,
    rgba(0,0,0,0.8) 70%,
    black 85%
)`;
element.style.maskImage = mask;

transparent kısımlar deliği oluşturur, black kısımlar fotoğrafı gösterir. Gradient geçişi sayesinde kenarlar yumuşak.

Silüet Maskeleme

Glitch canvas'ın fotoğraf dışına taşmaması için PNG silüet kullanılıyor:

.glitch-katman, .crt-overlay {
    mask-image: url('erdi-portrait.png');
    mask-size: contain;
    mask-position: bottom center;
    mask-repeat: no-repeat;
}

Renk Senkronizasyonu

Glitch harfleri, arka plan particle ağının rengini takip eder. window._particleHue değişkeni üzerinden HSL renk paylaşılır ve hslToRgb ile canvas'a uygulanır.

Sonuç

Sıfır framework, sıfır kütüphane — sadece CSS mask-image + Canvas API + matematiksel renk interpolasyonu. Efektin tamamı ~120 satır JavaScript.

Behind the Scenes

The photo hover effect in this portfolio is inspired by Framer's famous X-Ray component. When you hover over the photo, a code matrix appears within a circle. Here's how it works.

Layered Architecture

The effect consists of 4 layers:

1. Glitch Canvas (z-index: 1) — A canvas filled with random letters and symbols. Colors synced with the particle network.
2. CRT Overlay (z-index: 2) — Old monitor scan line effect.
3. CRT Flicker (z-index: 3) — Flicker animation.
4. Normal Photo (z-index: 5) — On top, with a hole opened via mask.

The Magic: CSS Mask

To reveal the code beneath the photo, we create a hole using mask-image:

// Radial-gradient mask at mouse position
const mask = `radial-gradient(
    circle 130px at ${x}px ${y}px,
    transparent 0%, transparent 35%,
    rgba(0,0,0,0.4) 55%,
    rgba(0,0,0,0.8) 70%,
    black 85%
)`;
element.style.maskImage = mask;

transparent areas create the hole, black areas show the photo. Gradient transitions create soft edges.

Silhouette Masking

To prevent the glitch canvas from spilling outside the photo, a PNG silhouette is used:

.glitch-layer, .crt-overlay {
    mask-image: url('erdi-portrait.png');
    mask-size: contain;
    mask-position: bottom center;
    mask-repeat: no-repeat;
}

Color Synchronization

Glitch characters follow the background particle network's color. The HSL color is shared via window._particleHue and applied to the canvas using hslToRgb.

Conclusion

Zero frameworks, zero libraries — just CSS mask-image + Canvas API + mathematical color interpolation. The entire effect is ~120 lines of JavaScript.