React ile Apple Sıvı Cam Efekti Nasıl Oluşturulur

Apple, kullanıcı arayüzü tasarımında her zaman ön saflarda yer almıştır ve son zamanlardaki en büyüleyici efektlerinden biri "sıvı cam" görünümüdür. Akışkan, jöle benzeri görünümüyle karakterize edilen bu efekt, kullanıcı arayüzü öğelerine bir derinlik ve etkileşim katmanı ekler. Uygulamalarınızı daha dinamik ve ilgi çekici hale getirmenin incelikli ama güçlü bir yoludur.

Bu makalede, liquid-glass-react kütüphanesini kullanarak bu çarpıcı efekti React uygulamalarınızda nasıl yeniden oluşturacağımızı keşfedeceğiz.

Bu kütüphane, efektin karmaşıklığını kapsayan, son derece özelleştirilebilir ve kullanımı kolay bir bileşen sunarak projelerinize minimum çabayla Apple'ın tasarım sihrinden bir dokunuş eklemenizi sağlar.

Başlarken

Sıvı cam efektinin inceliklerine dalmadan önce, liquid-glass-react kütüphanesini projemizde kuralım.

Kurulum

Kütüphaneyi kurmak için terminalinizde aşağıdaki komutu çalıştırmanız yeterlidir:

npm install liquid-glass-react

Ya da Yarn kullanıyorsanız:

yarn add liquid-glass-react

Temel Kullanım

Kütüphane kurulduktan sonra, React uygulamanızda LiquidGlass bileşenini kullanmaya başlayabilirsiniz. İşte nasıl kullanılacağına dair temel bir örnek:

import React from 'react';
import LiquidGlass from 'liquid-glass-react';

function App() {
  return (
    <div className="App">
      <LiquidGlass>
        <div style={{ padding: '20px' }}>
          Hello, Liquid Glass!
        </div>
      </LiquidGlass>
    </div>
  );
}

export default App;

Bu, "Hello, Liquid Glass!" metninin etrafında temel bir sıvı cam kapsayıcı oluşturacaktır. Bu iyi bir başlangıç noktası olsa da, kütüphanenin gerçek gücü kapsamlı özelleştirme seçeneklerinde yatmaktadır.

Temel Kavramlar

liquid-glass-react kütüphanesini tam olarak takdir etmek ve etkili bir şekilde kullanmak için, efekti güçlendiren temel kavramları anlamak faydalı olacaktır. Sıvı cam efekti öncelikle SVG filtreleri, yer değiştirme haritaları (displacement maps) ve kromatik sapmanın (chromatic aberration) bir kombinasyonu yoluyla elde edilir.

SVG Filtreleri

SVG (Ölçeklenebilir Vektör Grafikleri) filtreleri, grafiklerinize geniş bir yelpazede efektler uygulamanıza olanak tanıyan güçlü bir SVG özelliğidir. Sıvı cam efektinde, SVG filtreleri, bileşene karakteristik görünümünü veren bozulma ve bulanıklığı oluşturmak için kullanılır.

liquid-glass-react kütüphanesi, istenen efekti elde etmek için bir dizi fe (filtre efekti) temel öğesi kullanır. Bunlar şunları içerir:

• feGaussianBlur: Bu temel öğe, cam efektinin temel bir bileşeni olan arka plan bulanıklığını oluşturmak için kullanılır.
• feImage: Bu temel öğe, bozulmayı oluşturmak için gerekli olan yer değiştirme haritasını yüklemek için kullanılır.
• feDisplacementMap: Bu, gösterinin yıldızıdır. Kaynak grafiği bozmak için yer değiştirme haritasındaki piksel değerlerini kullanır.
• feColorMatrix: Bu temel öğe, kromatik sapma efektinin nasıl oluşturulduğu olan görüntünün renk kanallarını manipüle etmek için kullanılır.
• feBlend: Bu temel öğe, kromatik sapma için kırmızı, yeşil ve mavi kanallar gibi efektin farklı katmanlarını birleştirmek için kullanılır.
• feComposite: Bu temel öğe, nihai efekti orijinal kaynak grafikle birleştirmek için kullanılır.

Yer Değiştirme Haritaları (Displacement Maps)

Yer değiştirme haritası, başka bir görüntüyü bozmak için kullanılan gri tonlamalı bir görüntüdür. feDisplacementMap filtresi, kaynak grafiğin piksellerini kaydırmak için yer değiştirme haritasının renk değerlerini kullanır. Yer değiştirme haritasının daha açık alanları, kaynak grafiğin piksellerini bir yöne iterken, daha koyu alanlar onları zıt yöne itecektir.

liquid-glass-react kütüphanesi, üç yerleşik yer değiştirme haritasıyla birlikte gelir:

• standard: Standart, pürüzsüz bir yer değiştirme haritası.
• polar: Polar koordinat tabanlı bir bozulmaya sahip bir yer değiştirme haritası.
• prominent: Daha belirgin, "kabarcıklı" bir efekte sahip bir yer değiştirme haritası.

Kendi özel yer değiştirme haritanızı da sağlayabilir veya hatta bir shader kullanarak dinamik olarak bir tane oluşturabilirsiniz.

Kromatik Sapma (Chromatic Aberration)

Kromatik sapma, bir merceğin tüm renkleri aynı noktaya odaklayamaması durumunda ortaya çıkan optik bir efekttir. Bu, nesnelerin kenarlarında renklerin "saçaklanması" ile sonuçlanır. Fotoğrafçılıkta genellikle istenmeyen bir efekt olarak kabul edilse de, dijital grafiklerde şık ve fütüristik bir görünüm oluşturmak için kullanılabilir.

liquid-glass-react kütüphanesi, görüntüyü kırmızı, yeşil ve mavi kanallarına ayırarak ve ardından her kanalı biraz farklı bir miktarda yer değiştirerek kromatik sapmayı simüle eder. Bu, bileşenin genel "camsı" hissine katkıda bulunan incelikli ama etkili bir renk saçaklanma efekti yaratır.

LiquidGlass Bileşeni

Artık sıvı cam efektinin arkasındaki kavramlar hakkında temel bir anlayışa sahip olduğumuza göre, LiquidGlass bileşenine ve onun proplarına daha yakından bakalım.

LiquidGlass bileşeni, kütüphanenin ana bileşenidir. Sıvı cam efektinin her yönünü kontrol etmenizi sağlayan son derece özelleştirilebilir bir bileşendir.

İşte bileşeni özelleştirmek için kullanabileceğiniz bazı temel proplar:

• displacementScale: Bozulma efektinin yoğunluğunu kontrol eder. Daha yüksek bir değer, daha bozuk, "titrek" bir görünüme neden olur.
• blurAmount: Arka plana uygulanan bulanıklık miktarını kontrol eder.
• saturation: Arka planın doygunluğunu kontrol eder.
• aberrationIntensity: Kromatik sapma efektinin yoğunluğunu kontrol eder.
• elasticity: Bileşenin fare imlecine doğru ne kadar "esnediğini" kontrol eder. Bu eğlenceli, etkileşimli bir efekt yaratır.
• cornerRadius: Bileşenin köşe yarıçapını kontrol eder.
• mode: Hangi yer değiştirme haritasının kullanıldığını kontrol eder. standard, polar, prominent ve shader arasında seçim yapabilirsiniz.
• overLight: True olduğunda, camı açık arka planlarda daha iyi görünürlük için daha koyu yapan bir boolean.

Özelleştirme

Gerçek eğlence, LiquidGlass bileşeninin proplarıyla oynamaya başladığınızda başlar. Farklı propları birleştirerek, çok çeşitli benzersiz ve ilginç efektler oluşturabilirsiniz.

İşte daha özelleştirilmiş bir LiquidGlass bileşeni örneği:

import React from 'react';
import LiquidGlass from 'liquid-glass-react';

function App() {
  return (
    <div className="App">
      <LiquidGlass
        displacementScale={100}
        blurAmount={0.5}
        saturation={140}
        aberrationIntensity={2}
        elasticity={0.35}
        cornerRadius={32}
        mode="polar"
        overLight={false}
      >
        <div style={{ padding: '20px' }}>
          Customized Liquid Glass
        </div>
      </LiquidGlass>
    </div>
  );
}

export default App;

Bu örnekte, daha belirgin bir bozulma oluşturmak için displacementScale'i artırdık ve polar yer değiştirme haritasını kullanmak için mode'u polar olarak ayarladık. Bileşenin fare imlecine tepki vermesi için biraz elasticity de ekledik.

Sonuç

liquid-glass-react kütüphanesi, React uygulamalarınızda çarpıcı sıvı cam efektleri oluşturmak için güçlü ve kullanımı kolay bir araçtır. İster deneyimli bir tasarımcı olun, ister projelerinize biraz hava katmak isteyen bir geliştirici, bu kütüphanenin sunabileceği bir şeyler var.

Kapsamlı özelleştirme seçenekleri ve gelişmiş özellikleriyle liquid-glass-react kütüphanesi, yeni nesil kullanıcı arayüzleri oluşturmak için mükemmel bir araçtır. Öyleyse ne bekliyorsunuz? Bir deneyin ve neler yaratabileceğinizi görün!