The Physics of Attention: Designing Motion That Earns a Scroll

The first second is the whole pitch

Before your copy loads in a reader's mind, the composition has already spoken. In that first second you are setting expectations for motion. Three principles guide how we use it:

Anchor, then invite. Give the eye one clear focal point before you ask it to travel. A scene with five competing animations has no center of gravity.

Promise continuity. The first gesture should hint that scrolling continues the story, not interrupts it.

Respect stillness. Motion only reads as motion against calm. The quieter the resting state, the louder a transition speaks.

Animation is not decoration laid on top of content. It is the grammar that tells the eye what matters and in what order.

Morphing: the transition that tells a story

Our favorite tool for scroll-driven narrative is the morph — a single mass of points that flows from one form into the next as you move down the page. Nothing appears or disappears; everything transforms. That continuity is the message: ideas here are not assembled, they evolve.

Technically it is unremarkable — interpolate between two position buffers with an eased factor driven by scroll. Emotionally it is the difference between a slideshow and a journey.

Easing is empathy

If one parameter separates motion that feels expensive from motion that feels cheap, it is easing. Linear movement is robotic; the world doesn't move at constant velocity and neither should your camera. Scrubbing animation to scroll position hands the pacing back to the visitor — they become the projectionist.

Have a story that deserves momentum?

We design immersive, scroll-driven experiences for brands ready to move.

START A PROJECT →

Her kaydırma küçük bir güven sınavıdır. Ziyaretçi sayfayı iter ve sözsüzce sorar: devam etmeye değer mi? Hareket, bir web sitesinin bu soruya verdiği yanıttır — ve modern web'de yanıt, tek bir cümle okunmadan önce gelir.

Dönüp dolaşıp gelen ders neredeyse utandıracak kadar basit: dikkat fizikseldir. İnsanlar bir ana sayfayı okumaktan çok hisseder. Yerine oturan bir başlık, dağılıp yeniden şekillenen bir form, birkaç derece yaklaşan bir kamera — bunlar göze etki eden kuvvetlerdir. Fiziği doğru kurarsanız kaydırma zahmetsizleşir; yanlış kurarsanız en güzel iş bile ödev gibi gelir.

İlk saniye bütün sunumdur

Metniniz okuyucunun zihninde belirmeden önce kompozisyon çoktan konuşmuştur. O ilk saniyede hareket beklentisini kurarsınız. Bunu nasıl kullandığımızı üç ilke yönlendirir:

Önce sabitle, sonra davet et. Göze yolculuk yaptırmadan önce net bir odak noktası verin. Beş animasyonun yarıştığı bir sahnenin ağırlık merkezi yoktur.
Süreklilik vadet. İlk hareket, kaydırmanın hikâyeyi kestiğini değil sürdürdüğünü sezdirmeli.
Durağanlığa saygı duy. Hareket ancak sükûnetin karşısında hareket olarak okunur. Dinlenme hâli ne kadar sessizse, geçiş o kadar yüksek sesle konuşur.

Animasyon, içeriğin üstüne serpilen bir süs değildir. Göze neyin, hangi sırayla önemli olduğunu söyleyen dilbilgisidir.

Morph: hikâye anlatan geçiş

Kaydırmaya bağlı anlatı için en sevdiğimiz araç morph — sayfada ilerledikçe bir formdan diğerine akan tek bir nokta kütlesi. Hiçbir şey belirmez ya da kaybolmaz; her şey dönüşür. Bu süreklilik mesajın ta kendisidir: buradaki fikirler kurgulanmaz, evrilir.

Teknik olarak sıradandır — kaydırmaya bağlı yumuşatılmış bir oranla iki konum tamponu arasında geçiş yaparsınız. Duygusal olarak ise bir slayt gösterisi ile bir yolculuk arasındaki farktır.

Yumuşatma (easing) empatidir

Pahalı hisseden hareketi ucuz hisseden hareketten ayıran tek bir parametre varsa, o da yumuşatmadır. Doğrusal hareket robotiktir; dünya sabit hızda ilerlemez, kameranız da ilerlememeli. Animasyonu kaydırma konumuna bağlamak, temponun denetimini ziyaretçiye geri verir — projeksiyoncu artık odur.

İvmeyi hak eden bir hikâyeniz mi var?

Harekete hazır markalar için sürükleyici, kaydırmaya bağlı deneyimler tasarlıyoruz.

PROJE BAŞLAT →