motion-designyazan LottieFiles

Motion Design Skill.

Claude Code ve Codex için motion ve video skill'i: motion design ilkelerini uygular: zamanlama, easing, koreografi ve animasyon temelleri.

Motion & Video

OpenDesign İndir Kullanım kılavuzunu görüntüle

LottieFiles/motion-design-skill · skills/motion-design/SKILL.mdSKILL.md

--- name: motion-design description: Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system. --- ## When to Apply ## Quick Reference: 8-Step Checklist ## Three Pillars (CRITICAL) ## Motion Personality ## Property Selection ## Duration Table

Üst bilgi ve bölüm başlıkları 2026-09-14 tarihinde üst akış dosyasından okundu · tam halde 12.489 karakter

01 Ne yapar

motion-design Skill'i Claude Code ve Codex'te Ne Yapar

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Arayüzleri animasyonlayan tasarımcılar ve geliştiriciler için sadece ilkelere dayalı bir motion design referansı. Duygusal amaç, görsel anlatı ve motion işçiliği olmak üzere üç temel ilkeden başlar, ardından her kararı dört motion kişiliğinden biri üzerinden (Playful, Premium, Corporate, Energetic) daraltır; her birinin sabit süre bantları, easing eğrileri ve overshoot yüzdeleri vardır.

Uygulamalı tarifler buton basma, kart girişi, başarı ve hata sallanmasını kapsar; öğe türüne göre süre tabloları, yönsel easing kuralları, koreografi ve stagger bütçeleri, bir duygu-motion haritası ve ağırlık sınıfları ile desteklenir. Rehberlik, halihazırda kullandığınız hangi animasyon sistemine de uygulanabilecek sayılar, varsayılanlar ve kısıtlamalar olarak ifade edilir.

Neler üretir

Tanımlanacak üç marka motion sabiti: imza easing, süre paleti ve giriş deseni
Platform standartlarından ödünç alınmış hazır cubic-bezier spesifikasyonları
Buton basma follow-through'u gibi adım başına zamanlamalara sahip çok adımlı desen tarifleri

Örnek istemi görün ↗

Nasıl Çalışır

01
Önce Üç Temel İlkeyi Belirleyin
Herhangi bir zamanlama veya eğri seçilmeden önce duygusal amacı, görsel mikro-hikayeyi ve hareketi inandırıcı kılan işçiliği belirleyin.
02
Tek Bir Kişilik Arketipini Sabitleyin
Playful, Premium, Corporate veya Energetic arketiplerinden tek birini seçin ve proje boyunca bu seçime bağlı kalın; çünkü her biri kendi süre bandını, easing eğrisini ve overshoot'unu taşır.
03
İşe Yarayan En Az Özelliği Kullanın
Özellik tabloları her efekt hedefini birincil bir özellik ve isteğe bağlı ikincillerle eşleştirir; bir özellik doğrudan hissettirir, iki özellik cilalı hissettirir, üç veya daha fazlası izleyiciyi bunaltma riski taşır.
04
Süreyi Mesafeye Göre Ölçeklendirin
Öğe türüne ait süreden başlayın, ardından kat edilen mesafeye göre uzatın: 100px temel değer, 200px 1,3x, 400px 1,6x olur.
05
Yöne Göre Easing Uygulayın
Girişler bir ease-out ailesi eğrisiyle yavaşlar, böylece hareket hızlı başlar ve yumuşak biter.

02 Uyumunuzu bulun

motion-design Skill Ne Zaman Kullanılır

Claude Code veya Codex'te motion-design skill'ini bu türden motion ve video işleri için kullanın. Aşağıdaki uygunluk ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

Butonlar, kartlar, modal'lar ve sayfa geçişleri gibi UI animasyonları
Mikro-etkileşimler ve geri bildirim animasyonları
Yükleniyor, başarılı ve hata durumları
Scroll tetiklemeli veya ilerlemeye dayalı animasyonlar planlama

Sınırları Bilin

Üç veya daha fazla öğesi olan sahnelerde, aynı anda öğelerin üçte birinden fazlası aktif hareket halinde olamaz.
Esnek hata geri bildirimi: hata durumları abartılı sıçrama içermez, çünkü hatalar kesin hissettirmelidir.

Ne Sağlamalısınız

Duygusal hedefİzleyicinin ne hissetmesi gerektiğine önce siz karar verin; sevinç, sükunet, aciliyet veya zarafet arasından seçim yapın.
Bir hareket kişiliği arketipiZamanlama, yumuşama ve sıçramanın tutarlı kalması için kişiliği adlandırın: Oyuncu, Premium, Kurumsal veya Enerjik.
Birincil özellikHerhangi bir animasyon yazmadan önce gerçekte neyin hareket ettiğini belirtin — konum, ölçek, döndürme veya opaklık.

03 Skill'in içinde

Hareket tasarımı Skill'inin Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 8 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

Uzamsal Hareket için Doğrusal Yumuşama Yok
Uzamsal hareket yumuşama eğrileri kullanmalıdır; doğrusal yumuşama yalnızca yükleme çarkları ve ilerleme çubukları için ayrılmıştır.
Durum Değişikliği için Asla Yalnızca Opaklık
Önemli durum değişiklikleri, yerinde solmak yerine opaklığı konum veya ölçekle birleştirmelidir.
Üç Hareket Katmanının Tamamını Koruyun
Her animasyon bir birincil eylem, ikincil zenginlik ve ortam arka plan hareketi taşır; düz bir animasyon bir katmanı eksik olan animasyondur.
UI için Varsayılan olarak Kurumsal
Bir kişilik belirtilmediğinde, UI çalışmaları için Kurumsal, illüstrasyonlar için Oyuncu kullanın.
Girişleri Çıkışlardan Daha Uzun Yapın
Girişler çıkışlardan %30-50 daha uzun sürer, çünkü kullanıcılar neyin ortaya çıktığıyla ilgilenir.
Ekranın Üçte Birini Asla Zorlanmadan Geçmeyin
Hiçbir hareket, ara bir anahtar kare değişikliği olmadan ekranın 1/3'ünden fazlasını geçmez.
Toplam Kademeyi Sınırlayın
Hangi kademe deseni kullanılırsa kullanılsın, toplam gecikme bütçesi 500ms'nin altında kalmalıdır.
Disney İlkelerini Uygulayın
Disney animasyon ilkeleri beklenir, özellikle beklenti (anticipation) ve devamlılık (follow-through).

04 İşe koyun

Claude Code veya Codex'e motion-design yükleyin

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

Claude Code, Codex veya kendi ajanınıza motion-design ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal

npx skills add https://github.com/LottieFiles/motion-design-skill --skill motion-design

skills/motion-design/SKILL.md için genel skills CLI formu; depo kendi yolunu belgeleyebilir.

Skill'e İlk Hareket ve Video Görevi Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt

Add a card entrance to [the pricing section] of my [React dashboard]. The cards should feel Premium: start 20px below target at opacity 0, take a slight curve in the path, and let the shadow arrive about 50ms after each card. Stagger the four cards at 60ms with the total under 400ms, and dim the surrounding content to 80%.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

Değerlendirme kriterleri için eksiksiz kalite kontrol listesi dosyasını inceleyin.
Her sürenin, süre tablolarına göre kendi eleman türüyle eşleştiğini doğrulayın.
Sonuç ucuz veya düz hissediliyorsa, ikincil ve çevresel katmanlar olarak gölge hareketi ve arka plan canlılığı ekleyin.
Karakteri yoksa, her yerde genel yumuşatma kullanmak yerine tek bir arketipi tutarlı biçimde uygulayın.
Yayınlamadan önce platform, erişilebilirlik ve performans uyarlamasını kontrol edin.

OpenDesign'da motion-design'ı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubuktan seçin.

OpenDesign İndir Hızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author: LottieFiles
Repository: github.com/LottieFiles/motion-design-skill Dal main
Skill dosyası: skills/motion-design/SKILL.md Doğrulamada içerik sağlama kaydedildi; commit f9a8a04
License: MIT LICENSE dosyasından; SKILL.md "MIT" belirtiyor.
Repository yıldızları: 1.626 GitHub anlık görüntüsü tüm LottieFiles/motion-design-skill deposu için 2026-09-14 tarihinde alındı. motion-design için bir değerlendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı: 2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

Ne Zaman UygulanırSkill'i kullanma tetikleyicileri ile zamanlama, karakter, Disney ilkeleri veya kademelendirmeye yönlendiren dört sorulu bir karar ağacı.
Üç Temel Direk (KRİTİK)Duygusal amaç, görsel anlatı ve hareket ustalığı, ayrıca her animasyonun gerektirdiği üç hareket katmanı.
Hareket KarakteriSüre, yumuşatma ve taşma değerleriyle dört arketip, ayrıca üç marka hareket sabiti.
Özellik SeçimiEfekt hedeflerini birincil ve ikincil özelliklerle eşleştirir, sadelik eşiğiyle birlikte.
Süre TablosuEleman başına süreler, mesafe ölçeklendirmesi, giriş-çıkış oranı ve etkileşimli geri bildirim zamanlamaları.
Yumuşatma SeçimiYönsel yumuşatma kuralları, sektör cubic-bezier standartları ve malzeme temelli süre ve taşma ölçekleri.
Yaygın KalıplarButon basımı, kart girişi, başarı durumu ve hata sallanması için adım adım tarifler.
Koreografi TemelleriKahraman öncülüğü, uzamsal tutarlılık, karşı hareket, 1/3 kuralları ve kademelendirme gecikme bütçeleri.
Duygudan Harekete EşlemeKarakter, yol, yumuşatma ve süreyle eşleştirilmiş yedi duygu, ayrıca dilin bir aracı olarak yol anlamları.
Ağırlık SınıflandırmasıAğır, orta ve hafif elemanlar için süre, taşma ve sönümleme rehberliği.
Kalite KurallarıSüre, yumuşatma ve tutarlılık için asla bozulmaması gereken KRİTİK öğeler ve YÜKSEK öncelikli öneriler.
Sorun Giderme Hızlı ReferansıRobotik olandan düz olana kadar, olası nedenleri ve düzeltmeleriyle beş animasyon kokusu.

Skill'in Kendi Açıklaması

"Duygusal ve teknik açıdan sağlam animasyonlar ve geçişler oluşturmak için hareket tasarımı ilkelerini uygular. Zamanlama, yumuşatma, koreografi ve UI için uyarlanmış Disney animasyon ilkeleri sağlar. Animasyonlar, geçişler, mikro etkileşimler, yükleme durumları, sayfa geçişleri, scroll-tetikli efektler veya herhangi bir hareket işi oluştururken kullanın. CSS, Framer Motion, GSAP, Lottie, Spring veya herhangi bir animasyon sistemiyle çalışır."

SKILL.md dosyasından ön bilgi açıklaması. Tam dosya yaklaşık 12.489 karakter. Tam dosyayı GitHub'da okuyun.

06 Kurmadan önce

motion-design Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

Bu beni tek bir animasyon kütüphanesine kilitler mi?

Hayır. Dosya, CSS, Framer Motion, GSAP, Lottie, Spring veya herhangi bir animasyon sistemi için destek belirtir, dolayısıyla rehberlik kütüphaneye özgü kod yerine zamanlama, yumuşatma ve koreografi kararları olarak gelir.

Bir modal geçişi ne kadar sürmeli?

Süre tablosu, modallara ve diyaloglara bir odak değişimi olarak çerçevelenen 300-400ms süre verir. Karşılaştırma için, araç ipuçları ve mikro geri bildirim 80-120ms'de kalır çünkü anında hissettirmeleri gerekir.

Elastik bir eleman kağıt bir karttan daha fazla zıplamalı mı?

Evet. Malzeme tabanlı yumuşatma (easing) tablosu, süreyi ve aşmayı (overshoot) örtük malzemeye göre ölçeklendirir: elastik, %15-25 aşmayla 0,8x süre ölçeğinde çalışırken, kağıt %3-5 aşmayla 1,0x'te kalır.

Hareket Tasarımı

Gerçek bir hareket ve video görevinde motion-design'ı çalıştırın.

OpenDesign indirin, motion-design'ı SKILL.md bağlantısından içe aktarın, yukarıdaki istemi yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirin Tüm skill'lere göz atın