İyi bir animasyon fark edilmez; yalnızca arayüzün daha doğal, daha akıcı ve daha pahalı hissettirmesini sağlar. Kötü bir animasyon ise gözden kaçmaz; kullanıcıyı yavaşlatır, dikkatini dağıtır ve hatta rahatsız eder. Web'de hareket, son yıllarda dekoratif bir süsten çok kullanıcı deneyiminin temel bir parçasına dönüştü. Bir butona dokunduğunuzda verdiği geri bildirim, bir sayfa açılırken içeriğin kademeli belirmesi, bir listenin akıcı sıralanması; bunların hepsi kullanıcının markaya duyduğu güveni sessizce şekillendirir. İşte Framer Motion, React ekosisteminde bu hareketi profesyonel ve sürdürülebilir biçimde kurmanın en güçlü araçlarından biri.
KaliteliWebsite olarak İstanbul merkezli bir yazılım ajansı kimliğiyle, kurumsal tanıtım sitelerinden etkileşimli ürün sayfalarına kadar pek çok projede Framer Motion kullanıyoruz. Bu rehberde Framer Motion'un ne olduğunu, temel kavramlarını, gerçek projelerde nasıl doğru kurgulandığını ve animasyonun performansını nasıl koruyacağınızı, pazarlama dilinden uzak ve mühendislik temelli bir bakışla, kod örnekleriyle anlatacağız. Hedefimiz, animasyonu rastgele eklenen bir efekt olarak değil, kullanıcı deneyimini güçlendiren bilinçli bir tasarım kararı olarak ele almaktır.
Framer Motion nedir?
Framer Motion, React için tasarlanmış bir animasyon kütüphanesidir. Temel vaadi, karmaşık animasyonları bildirimsel, yani ne istediğinizi tarif ettiğiniz bir söz dizimiyle kurabilmenizdir. Geleneksel yaklaşımlarda bir animasyonu adım adım, zamanlamaları elle yöneterek yazmanız gerekir. Framer Motion ise size bir bileşenin başlangıç ve hedef durumunu söyletir; aradaki geçişi kendisi akıcı biçimde yönetir.
Kütüphanenin merkezinde motion bileşenleri yer alır. Standart bir HTML elementini, örneğin bir div'i, motion sürümüyle değiştirerek ona animasyon yetenekleri kazandırırsınız. Bu motion bileşenine başlangıç durumunu, animasyon hedefini ve geçiş ayarlarını birer özellik olarak verirsiniz. Gerisini kütüphane halleder; kare kare hesaplamalarla, donanım hızlandırmasıyla ve akıcı bir zamanlama eğrisiyle animasyonu üretir.
Framer Motion'un öne çıkan gücü, basit bir geçişten karmaşık bir orkestrasyona kadar geniş bir yelpazeyi aynı tutarlı zihinsel modelle ele almasıdır. Tek bir elementi soldurmak da, onlarca elementi sıralı biçimde sahneye sokmak da aynı temel kavramlarla yapılır. Bu tutarlılık, öğrenme eğrisini kısaltır ve kodun bakımını kolaylaştırır.
Neden animasyon? Deneyim ve dönüşüme etkisi
Animasyonu yalnızca estetik bir tercih olarak görmek yaygın bir yanılgıdır. Doğru kullanıldığında hareket, kullanıcının arayüzü anlamasına doğrudan yardımcı olur. Bir öğenin nereden gelip nereye gittiğini gösteren bir geçiş, kullanıcının zihninde mekânsal bir harita kurar; böylece arayüzde kaybolmaz. Bir işlemin sürdüğünü bildiren akıcı bir gösterge, beklemeyi katlanılır kılar. Bir butonun dokunmaya verdiği anlık tepki, eylemin algılandığına dair güven verir.
İş sonuçları açısından da animasyonun ölçülebilir etkileri vardır. Akıcı geçişlerle tasarlanmış bir satın alma akışı, kullanıcının her adımda nerede olduğunu sezgisel olarak anlamasını sağlar ve bu, terk oranını düşürür. Mikro etkileşimler, formların doldurulma oranını artırır. Ürün sayfalarında doğru zamanlanmış belirme animasyonları, kullanıcının dikkatini önemli içeriğe yönlendirir. Bu etkilerin tasarım sürecindeki yerini daha geniş ele aldığımız UI/UX tasarım hizmetimiz, hareketin dönüşüme nasıl katkı sunduğunu somut örneklerle gösterir.
Ancak burada kritik bir denge vardır. Aşırı veya yersiz animasyon, faydanın tam tersini üretir; arayüzü yavaş, dikkat dağıtıcı ve amatörce gösterir. İyi animasyon, kullanıcının fark etmeden hissettiği animasyondur. Bu rehber boyunca hem tekniği hem de bu dengeyi vurgulayacağız.
Kurulum ve ilk motion bileşeni
Framer Motion'u bir React projesine eklemek son derece basittir. Paketi yükledikten sonra, motion bileşenlerini içe aktarıp kullanmaya başlayabilirsiniz. Aşağıdaki örnek, bir bileşenin sahneye yumuşak biçimde soldurularak girmesini sağlar:
// Kurulum (terminal)
// npm install framer-motion
import { motion } from 'framer-motion'
export function Kart() {
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4 }}
>
Bu kart yumuşak bir geçişle belirir.
</motion.div>
)
}
Bu örnekte üç temel özellik görülüyor. initial, bileşenin başlangıç durumudur; burada görünmez ve hafif aşağıdadır. animate, hedef durumdur; tam görünür ve yerine oturmuş. transition ise geçişin nasıl gerçekleşeceğini, burada süresini tanımlar. Framer Motion bu iki durum arasındaki geçişi otomatik olarak akıcı biçimde üretir. Bu üç kavram, kütüphanenin neredeyse tüm gücünün temelini oluşturur.
Temel kavramlar: initial, animate ve transition
Framer Motion'un zihinsel modeli üç soru üzerine kuruludur: Bileşen nereden başlıyor, nereye gidiyor ve bu yolculuk nasıl gerçekleşiyor? initial başlangıç noktasını, animate varış noktasını, transition ise yolculuğun karakterini belirler. Bu üçlüyü kavradığınızda, çok karmaşık animasyonları bile aynı mantıkla kurabilirsiniz.
transition özelliği, animasyonun hissiyatını belirleyen en önemli ayardır. İki temel geçiş türü vardır. İlki, süre tabanlı geçişlerdir; belirli bir sürede, belirli bir hızlanma eğrisiyle tamamlanırlar. İkincisi, fizik tabanlı yay geçişleridir; gerçek dünyadaki yay davranışını taklit ederek daha doğal ve canlı bir his verirler.
<motion.div
animate={{ scale: 1.1 }}
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
>
Yay tabanlı geçişle büyüyen kutu
</motion.div>
Yay geçişlerinde sertlik ve sönümleme değerlerini ayarlayarak, animasyonun ne kadar canlı veya yumuşak olacağını kontrol edersiniz. Düşük sönümleme daha zıplayan, yüksek sönümleme daha sakin bir his verir. Çoğu modern arayüzde yay tabanlı geçişler, süre tabanlı olanlara göre daha doğal hissettirir; çünkü gerçek dünyadaki hareketler nadiren sabit hızdadır.
Variants ile karmaşık animasyonları yönetmek
Animasyonlar karmaşıklaştıkça, durumları doğrudan bileşene yazmak kodu okunmaz hâle getirir. Framer Motion bu sorunu variants kavramıyla çözer. Variants, isimlendirilmiş animasyon durumlarıdır; durumları tek bir nesnede tanımlar ve bileşene yalnızca durumun adını verirsiniz. Bu, kodu hem temiz hem de yeniden kullanılabilir kılar.
import { motion } from 'framer-motion'
const kartVaryantlari = {
gizli: { opacity: 0, y: 30 },
gorunur: { opacity: 1, y: 0 },
}
export function Kart() {
return (
<motion.div
variants={kartVaryantlari}
initial="gizli"
animate="gorunur"
transition={{ duration: 0.4 }}
>
Variants ile yönetilen kart
</motion.div>
)
}
Variants'ın asıl gücü, ana ve alt bileşenler arasında otomatik koordinasyon sağlamasıdır. Bir ana bileşene variants verdiğinizde, alt bileşenler aynı durum adlarını miras alır. Bu sayede bir listenin tüm elemanlarını, tek tek yönetmeden, ardışık biçimde sahneye sokabilirsiniz.
Sahneleme ile ardışık animasyonlar
Variants ile sahneleme, yani staggering yapmak mümkündür. Bu, alt elemanların hepsinin aynı anda değil, hafif gecikmelerle birbiri ardına belirmesini sağlar; bu da çok daha zarif bir görsel ritim üretir.
const liste = {
gorunur: {
transition: { staggerChildren: 0.1 },
},
}
const oge = {
gizli: { opacity: 0, x: -20 },
gorunur: { opacity: 1, x: 0 },
}
Bu yapıda ana liste, alt öğelerin animasyonunu yüzde bir saniyelik gecikmelerle başlatır. Sonuç, elemanların akıcı bir dalga hâlinde sıralanmasıdır. Sahneleme, özellikle menüler, kart ızgaraları ve içerik listelerinde profesyonel bir his yaratmanın en etkili yollarından biridir.
Etkileşim animasyonları: hover, tap ve drag
Framer Motion'un en pratik özelliklerinden biri, etkileşim animasyonlarını son derece basit kılmasıdır. Bir öğenin üzerine gelindiğinde, tıklandığında veya sürüklendiğinde nasıl davranacağını, ayrı olay yöneticileri yazmadan doğrudan özelliklerle tanımlarsınız.
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
transition={{ type: 'spring', stiffness: 400, damping: 17 }}
>
Bana dokun
</motion.button>
Bu örnekte buton, üzerine gelindiğinde hafifçe büyür ve tıklandığında küçülerek dokunma hissini güçlendirir. Bu küçük geri bildirimler, kullanıcıya arayüzün canlı ve tepkisel olduğunu hissettirir. Sürükleme için ise drag özelliği yeterlidir; öğeyi sürüklenebilir kılar ve isterseniz sürükleme sınırlarını belirleyebilirsiniz.
Bu mikro etkileşimler, küçük görünseler de kullanıcı algısı üzerinde orantısız bir etkiye sahiptir. Bir arayüzün pahalı ve cilalı hissettirmesinin büyük bölümü, bu küçük dokunma tepkilerinden gelir. Önemli olan, bu etkileri abartmadan, dengeli ve tutarlı biçimde uygulamaktır.
Sayfa geçişleri ve AnimatePresence
Modern web uygulamalarında bir bileşenin sahneye girmesi kadar, sahneden çıkması da önemlidir. Standart React, bir bileşen ağaçtan kaldırıldığında onu anında yok eder; çıkış animasyonu için bir fırsat tanımaz. Framer Motion bu sorunu AnimatePresence ile çözer. AnimatePresence, içindeki bir bileşen kaldırılmak üzereyken çıkış animasyonunun tamamlanmasını bekler.
import { motion, AnimatePresence } from 'framer-motion'
export function Bildirim({ acik }) {
return (
<AnimatePresence>
{acik && (
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
>
Yeni bir bildiriminiz var.
</motion.div>
)}
</AnimatePresence>
)
}
Burada exit özelliği, bileşen kaldırılırken oynatılacak çıkış animasyonunu tanımlar. AnimatePresence, bileşen ağaçtan çıkmadan önce bu animasyonun bitmesini sağlar. Bu, modallar, bildirimler, açılır menüler ve sayfa geçişleri için vazgeçilmez bir yetenektir. Çıkış animasyonu olmadan arayüz sert ve ani hissettirirken, AnimatePresence ile her şey akıcı bir bütünlük kazanır.
Sunucu tarafı render kullanan modern uygulamalarda animasyonların doğru kurgulanması ayrı bir dikkat gerektirir. Bu konuyu render mimarisi açısından ele aldığımız React Server Components rehberimiz, istemci tarafı animasyonların sunucu bileşenleriyle nasıl uyum içinde çalıştığını açıklar.
Scroll tabanlı animasyonlar
Kullanıcının kaydırma hareketine bağlı animasyonlar, modern web tasarımının en etkileyici tekniklerinden biridir. İçeriğin kaydırıldıkça belirmesi, ilerleme çubuklarının dolması veya öğelerin paralaks etkisiyle hareket etmesi, sayfaya derinlik ve canlılık katar. Framer Motion, bu tür animasyonları kaydırma değerlerini izleyen kancalarla kurar.
import { motion, useScroll, useTransform } from 'framer-motion'
export function ParalaksBaslik() {
const { scrollYProgress } = useScroll()
const y = useTransform(scrollYProgress, [0, 1], [0, -150])
return (
<motion.h1 style={{ y }}>
Kaydırıldıkça yukarı süzülen başlık
</motion.h1>
)
}
Bu örnekte kaydırma ilerlemesi bir değere dönüştürülür ve başlığın konumuna bağlanır. Kullanıcı kaydırdıkça başlık yumuşak biçimde hareket eder. useScroll kaydırma durumunu izler, useTransform ise bu değeri istediğiniz bir aralığa eşler. Bu iki kancanın birleşimi, son derece kontrollü ve performanslı kaydırma animasyonları kurmanızı sağlar.
Kaydırma animasyonlarında en yaygın kullanım, öğelerin görünüm alanına girdiğinde belirmesidir. Bu, kullanıcının dikkatini içeriğe doğal biçimde yönlendirir. Ancak burada da ölçü önemlidir; her öğenin aşırı animasyonla belirmesi, sayfayı yavaş ve yorucu hissettirir. En etkili yaklaşım, animasyonu kullanıcının fark etmeyeceği kadar ince tutmaktır.
Animasyon yöntemlerinin karşılaştırması
Framer Motion'u yerli yerine oturtmak için onu diğer yaygın animasyon yaklaşımlarıyla karşılaştırmak yararlıdır. Aşağıdaki tablo dört temel yöntemin öne çıkan farklarını özetler:
| Özellik | CSS geçişleri | CSS animasyonları | Framer Motion | GSAP |
|---|---|---|---|---|
| React entegrasyonu | Manuel | Manuel | Yerleşik | Sarmalama gerekir |
| Çıkış animasyonu | Zor | Zor | Kolay (AnimatePresence) | Mümkün |
| Jest ve etkileşim | Sınırlı | Yok | Güçlü | Güçlü |
| Yay tabanlı fizik | Yok | Yok | Yerleşik | Eklenti ile |
| Öğrenme eğrisi | Düşük | Düşük | Orta | Orta-yüksek |
| Paket boyutu etkisi | Yok | Yok | Orta | Orta |
| En uygun kullanım | Basit geçişler | Döngüsel efektler | React arayüzleri | Karmaşık zaman çizelgeleri |
Tablodan görüleceği gibi Framer Motion, React projeleri için özellikle çıkış animasyonları, etkileşim ve yay tabanlı fizik konularında güçlü bir tercihtir. Çok basit geçişler için sade CSS yeterli olabilirken, son derece karmaşık zaman çizelgeleri gerektiren özel işler için GSAP gibi araçlar değerlendirilebilir. Doğru aracı seçmek, projenin gerçek ihtiyaçlarına bağlıdır.
Performans: animasyonu akıcı tutmak
Animasyonun en büyük düşmanı, takılmadır. Bir animasyon saniyede yeterli kare üretemediğinde, akıcılık bozulur ve deneyim profesyonellikten uzaklaşır. Akıcı animasyonun temel kuralı, tarayıcının ucuz biçimde işleyebildiği özellikleri canlandırmaktır. Bu özellikler, dönüşüm ve saydamlıktır; çünkü bunlar yerleşim hesaplamasını tetiklemez ve genellikle donanım hızlandırmasından yararlanır.
Animasyon performansını korumak için izlediğimiz temel ilkeler şunlardır:
- Mümkün olduğunca yalnızca dönüşüm ve saydamlık özelliklerini canlandırın; genişlik, yükseklik veya konum gibi yerleşimi tetikleyen özelliklerden kaçının.
- Aynı anda çok sayıda öğeyi animasyonlamaktan kaçının; sahneleme ile yükü zamana yayın.
- Animasyonları gerçek cihazlarda, özellikle orta segment Android telefonlarda test edin; üst segment cihazlardaki akıcılık yanıltıcı olabilir.
- Gereksiz yere sürekli çalışan animasyonlardan kaçının; bunlar pil ve işlemci yükü oluşturur.
Türkiye gibi mobil kullanımın yoğun ve cihaz çeşitliliğinin geniş olduğu bir pazarda bu disiplin kritik önem taşır. Üst segment bir telefonda pürüzsüz görünen bir animasyon, orta segment bir cihazda takılarak deneyimi bozabilir. Performans, animasyonun estetiğinden ayrı düşünülemez. Sayfa hızının iş sonuçlarına etkisini metriklerle ele aldığımız Core Web Vitals rehberimiz, animasyonların performans bütçesi içinde nasıl konumlandırılması gerektiğini açıklar.
Erişilebilirlik: harekete duyarlılık
Animasyonun gözden kaçan ama kritik bir boyutu erişilebilirliktir. Bazı kullanıcılar, vestibüler bozukluklar nedeniyle yoğun hareketten rahatsız olur, hatta baş dönmesi yaşayabilir. İşletim sistemleri bu kullanıcılar için hareketi azaltma tercihi sunar ve sorumlu bir geliştirici bu tercihe saygı göstermelidir. Framer Motion, bu tercihi algılamayı kolaylaştıran araçlar sunar.
import { useReducedMotion, motion } from 'framer-motion'
export function Kart() {
const hareketAzalt = useReducedMotion()
return (
<motion.div
initial={{ opacity: 0, y: hareketAzalt ? 0 : 30 }}
animate={{ opacity: 1, y: 0 }}
>
Kullanıcı tercihine saygılı animasyon
</motion.div>
)
}
Bu örnekte, kullanıcı hareketi azaltmayı tercih ettiyse, dikey kayma animasyonu devre dışı kalır ve yalnızca yumuşak bir soldurma uygulanır. Böylece deneyim hâlâ zarif kalırken, hareketten rahatsız olan kullanıcılar korunur. Erişilebilirlik, bir lüks değil, profesyonel bir sorumluluktur ve markaya duyulan güveni güçlendirir.
Türkiye pazarı için pratik öneriler
Türkiye pazarındaki projelerimizde edindiğimiz deneyim, animasyon konusunda birkaç pratik dersi öne çıkarıyor. İlki, mobil önceliğin animasyonda da geçerli olmasıdır. Animasyonlarınızı önce orta segment mobil cihazlarda tasarlayıp test edin; çünkü kullanıcı kitlenizin büyük bölümü bu cihazları kullanır. Masaüstünde kusursuz görünen bir efekt, mobilde deneyimi bozuyorsa, o efekt yeniden düşünülmelidir.
İkincisi, animasyonun marka kimliğiyle tutarlı olmasıdır. Ciddi bir kurumsal sitede zıplayan, abartılı animasyonlar güveni zedeler; oyunbaz bir ürün sayfasında ise aşırı sade geçişler heyecansız kalır. Bir e-ticaret müşterimiz için ürün ekleme ve sepet etkileşimlerine ince, yay tabanlı geri bildirimler eklediğimizde, kullanıcıların eylemlerini daha güvenle tamamladığını ve sepet etkileşiminin arttığını gözlemledik. Bu, animasyonun yalnızca estetik değil, ölçülebilir bir iş aracı olduğunu gösterir.
Üçüncüsü, az çoktur ilkesidir. En etkili animasyonlar, kullanıcının bilinçli olarak fark etmediği, ancak hissettiği animasyonlardır. Bir arayüzü animasyonla doldurmak yerine, yalnızca anlamı güçlendiren noktalara hareket eklemek daha profesyonel bir sonuç verir. Bu dengeyi kurmak, deneyim ve disiplin gerektirir; bizim web geliştirme hizmetimiz bu dengeyi her projenin karakterine göre kurar.
Sık yapılan hatalar
Animasyon kurarken en yaygın hataları bilmek, çoğunu önler. İlk ve en yaygın hata, aşırı animasyondur. Her öğeye animasyon eklemek, arayüzü yavaş ve dikkat dağıtıcı hâle getirir; kullanıcı asıl içeriğe odaklanamaz. İkinci hata, performansı tetikleyen özellikleri canlandırmaktır; genişlik veya konum gibi özellikler yerine dönüşüm kullanılmalıdır. Üçüncü hata, çıkış animasyonlarını ihmal etmektir; bir öğe sahneye akıcı girip aniden kaybolduğunda deneyim tutarsız hissettirir. Dördüncü hata ise erişilebilirliği göz ardı etmek, kullanıcının hareketi azaltma tercihine saygı göstermemektir.
Bu hataların ortak kökeni, animasyonu bir teknik gösteri olarak görmektir. Oysa animasyonun amacı, geliştiricinin yeteneğini sergilemek değil, kullanıcının deneyimini iyileştirmektir. Bu bakış açısı yerleştiğinde, çoğu hata kendiliğinden ortadan kalkar.
Sıkça Sorulan Sorular
Framer Motion öğrenmek zor mu?
Temel React bilgisine sahip bir geliştirici için Framer Motion'un öğrenme eğrisi oldukça makuldür. initial, animate ve transition kavramlarını kavradığınızda, animasyonların büyük çoğunluğunu kurabilirsiniz. Variants, AnimatePresence ve kaydırma kancaları gibi ileri konular ise ihtiyaç duydukça öğrenilebilir. Kütüphanenin tutarlı zihinsel modeli, öğrenmeyi kolaylaştıran en büyük avantajıdır.
Framer Motion performansı olumsuz etkiler mi?
Doğru kullanıldığında Framer Motion performanslıdır; dönüşüm ve saydamlık gibi ucuz özellikleri canlandırmaya teşvik eder. Performans sorunları genellikle kütüphaneden değil, yanlış kullanımdan kaynaklanır; örneğin yerleşimi tetikleyen özelliklerin canlandırılması veya çok sayıda öğenin aynı anda animasyonlanması. Disiplinli bir kullanımla akıcı sonuçlar elde edilir. Kütüphanenin paket boyutuna katkısını da, sağladığı yetenekler karşısında değerlendirmek gerekir.
Framer Motion mu yoksa sade CSS mi kullanmalıyım?
Bu, animasyonun karmaşıklığına bağlıdır. Basit geçişler, örneğin bir butonun renk değişimi, sade CSS ile rahatça yapılır ve ek bir kütüphane gerektirmez. Ancak çıkış animasyonları, sahneleme, sürükleme ve karmaşık koordinasyon gerektiren durumlarda Framer Motion belirgin biçimde öne çıkar. Pratikte birçok proje, basit efektler için CSS, karmaşık etkileşimler için Framer Motion kullanan dengeli bir yaklaşım benimser.
Framer Motion sunucu tarafı render ile çalışır mı?
Evet, ancak animasyonlar doğası gereği istemci tarafında çalışır. Sunucu tarafı render kullanan uygulamalarda, animasyonlu bileşenlerin istemci bileşeni olarak işaretlenmesi gerekir. Doğru kurgulandığında, sunucu tarafı render ile Framer Motion sorunsuz biçimde birlikte çalışır ve hem hızlı ilk yüklenme hem de zengin etkileşim sağlanır.
Mobil cihazlarda animasyonlar nasıl optimize edilir?
Mobil optimizasyonun anahtarı, yalnızca dönüşüm ve saydamlık özelliklerini canlandırmak, aynı anda animasyonlanan öğe sayısını sınırlamak ve animasyonları gerçek orta segment cihazlarda test etmektir. Ayrıca kullanıcının hareketi azaltma tercihine saygı göstermek hem erişilebilirlik hem de performans açısından değerlidir. Mobil kitlenin yoğun olduğu Türkiye pazarında bu disiplin, animasyon kalitesinin belirleyicisidir.
Sonuç
Framer Motion, React uygulamalarında profesyonel animasyonlar kurmanın en güçlü ve en sürdürülebilir yollarından biridir. Bildirimsel söz dizimiyle karmaşık animasyonları sadeleştirir, AnimatePresence ile çıkış animasyonlarını mümkün kılar, variants ile orkestrasyon sağlar ve kaydırma kancalarıyla zengin etkileşimler üretir. Ancak gerçek ustalık, kütüphaneyi bilmekten çok, animasyonu doğru yerde, doğru ölçüde ve performansı koruyarak kullanmaktır. İyi animasyon fark edilmez; yalnızca deneyimi daha akıcı, daha doğal ve daha güvenilir hissettirir.
KaliteliWebsite olarak İstanbul'dan tüm Türkiye'ye hizmet veren bir yazılım ajansı kimliğiyle, Framer Motion'u üretim projelerimizde aktif olarak kullanıyor ve markanıza yakışan, akıcı ve performanslı arayüzler kuruyoruz. Web geliştirme ve arayüz tasarımı projelerimizde fiyatlarımız 10.000 TL'den başlıyor ve her potansiyel iş için ücretsiz keşif görüşmesi sunuyoruz. Kullanıcılarınıza unutulmaz, akıcı bir deneyim sunmak için bizimle iletişime geçin; size pazarlama vaatleri değil, mühendislik temelli net bir yol haritası sunalım.