hyperframes-animationyazan HeyGen

HyperFrames Animation Skill.

Claude Code ve Codex için hareket ve video skill'i: HyperFrames için animasyon kuralları, sahne planları, geçişler ve çalışma zamanı adaptörleri.

Motion & Video
Video

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

heygen-com/hyperframes · skills/hyperframes-animation/SKILL.mdSKILL.md

--- name: hyperframes-animation description: All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie … --- ## Default: compose atomic rules ## Load a blueprint when ## Routing ## Picking a runtime ## Critical Constraints ## Scripts

Ön bilgi ve bölüm başlıkları yukarı akış dosyasından 2026-09-14 tarihinde okundu · tam hâliyle 7.755 karakter

01 Ne yapar

hyperframes-animation Skill'inin Claude Code ve Codex İçinde Yaptıkları

Ö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

HyperFrames için tüm animasyon bilgisini sağlar: atomik hareket kuralları, çok fazlı sahne şablonları, sahne geçişleri, hareket tasarımı teknikleri ve yedi çalışma zamanı adaptörü (varsayılan olarak GSAP, ayrıca Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Kullanıcılar 2-4 atomik kural seçip bunları tek bir duraklatılmış GSAP zaman çizelgesiyle bir araya getirir, karmaşık 4-5 fazlı koreografi için çok fazlı bir blueprint yükler veya çalışma zamanına özgü API'lere bakar.

Ayrıca animation-map.mjs ile mevcut kompozisyonların denetlenmesini ve 24 adet isimlendirilmiş metin animasyonu efektini kapsar. GSAP, zaman çizelgesi orkestrasyonu, dönüşümler, yumuşatma (easing) ve stagger'ı kapsayan hareket işlerinin %95'i için varsayılan seçenektir. Her şey HyperFrames'e özgüdür: tek duraklatılmış zaman çizelgesi, seek-safe, deterministik.

Neler üretir

Ölü bölgeler, stagger tutarlılığı ve yaşam döngüsü uyarılarını içeren koreografi denetim verilerini barındıran animation-map.json

Örnek istemi görün ↗

Nasıl Çalışır

01
Atomik Kuralları Seçin ve Birleştirin
rules-index.md dosyasından 2-4 kural seçin ve bunları tek bir duraklatılmış GSAP zaman çizelgesiyle birbirine bağlayın. Bu, bir blueprint'ten başlamaktan daha hızlı olan varsayılan iş akışıdır.
02
Çok Fazlı Sahneler için Bir Blueprint Yükleyin
Sahne, brand-reveal veya social-proof gibi mevcut önceden tasarlanmış bir şablonla eşleştiğinde, faz ardışık düzenini yeniden kullanmak için blueprints-index.md'den tarifini yükleyin.
03
Çalışma Zamanına Özgü API'lere Bakın
GSAP easing'lerini ve zaman çizelgesi kontrollerini, Lottie oynatıcı yöntemlerini, Three.js mixer API'lerini veya gerektiğinde diğer çalışma zamanına özgü belgeleri bulmak için yönlendirme tablosunu kullanın.
04
animation-map ile Koreografiyi Denetleyin
Her GSAP zaman çizelgesini okumak, tween'leri sıralamak, bbox'ları örneklemek, bayrakları hesaplamak ve ölü bölgeleri ile stagger tutarlılığını denetlemek için animation-map.json çıktısını üretmek amacıyla animation-map.mjs'yi çalıştırın.

02 Uyumunuzu bulun

hyperframes-animation Skill Ne Zaman Kullanılır

Claude Code veya Codex'te iş bu tür hareket ve video olduğunda hyperframes-animation skill'ini kullanın. Uygunluk ve sınırlar aşağıda skill'in kendi dosyasından alınmıştır.

İyi Uyum

rules-index.md'den tetikleyici veya etikete göre seçilen atomik hareket kalıpları
İki klip arasında CSS tabanlı sahne geçişleri
Three.js kullanılarak 3D sahneler, kamera hareketi ve shader tabanlı görseller
TypeGPU kullanılarak parçacıklar, sıvı cam veya özel shader'lar içeren GPU render'lı tuvaller

Sınırları Bilin

Düzen değişiklikleri için width, height, top veya left animasyonu

Ne Sağlamalısınız

Kompozisyon diziniKoreografiyi denetlemek için animation-map.mjs çalıştırırken kompozisyon dizininizin yolunu belirtin.
Blueprint IDSahneniz çok fazlı bir şablonla eşleştiğinde, tam tarifini yüklemek için blueprints-index.md'den blueprint ID'sini belirtin.

03 Skill'in içinde

hyperframes-animation Skill'inin Claude Code ve Codex'e Verdiği Kurallar

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

Düzen Sabitlerini Önceden Hesaplayın
Tween sırasında konumları asla getBoundingClientRect'ten türetmeyin.
Uzamsal Hareket Yalnızca GSAP Transform Diğer Adlarını Kullanır
Tüm konumsal hareketler için x, y, scale, rotation kullanın. Yerleşim değişiklikleri için width, height, top veya left özelliklerini asla animasyonlu hale getirmeyin.
GSAP Varsayılan Çalışma Zamanıdır
GSAP, zaman çizelgesi düzenlemesi, transformlar, easing ve stagger'ı kapsayan hareket işlerinin %95'i için varsayılandır. Bu skill'deki tüm atomik kurallar GSAP tabanlıdır.
Varsayılan Olarak Atomik Kuralları Bir Arada Kullanın
rules-index.md'den 2-4 kural seçip bunları birleştirin. Bu, bir blueprint'ten başlamaktan daha hızlıdır ve daha az kod üretir.
Birden Fazla Çalışma Zamanı Bir Arada Bulunabilir
Bir kompozisyonda birden fazla çalışma zamanı bir arada bulunabilir. Her biri, örneklerini çalışma zamanına özgü global üzerinde kaydeder, böylece HyperFrames hepsini tek bir geçişte arayabilir.
Blueprint'leri Tahmini Olarak Okumayın
Bir blueprint dosyasını tahmini olarak okumayın; yalnızca sahne düzeyinde düzenlemeye gerçekten ihtiyacınız olduğuna karar verdiğinizde yükleyin.
Uzamsal Olmayan Özelliklere İzin Verilir
İzin listesi, uzamsal olmayan özellik tween'leri için opacity, color, backgroundColor ve borderRadius'a izin verir, ancak düzen değişiklikleri için asla width, height, top veya left'e izin vermez.

04 İşe koyun

Claude Code veya Codex'e hyperframes-animation 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 Ajanınıza hyperframes-animation Ekleyin

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

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-animation

skills/hyperframes-animation/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

Build a brand-reveal scene for [product name] using the multi-phase blueprint. The hero text should fade in with elastic ease at y:40, followed by a product card sliding up from y:60 with 0.2s stagger between child elements. Add a subtle pulse to the CTA button starting at 2.5s. Use GSAP as the runtime, ensure all spatial motion uses transform aliases (x, y, scale, rotation), and pre-calculate any layout constants at composition setup. Run animation-map.mjs on [composition directory] and output the audit results.

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:

Tüm çalışma zamanı örneklerinin, kendi çalışma zamanına özgü global'lerinde kayıtlı olduğunu doğrulayın, böylece HyperFrames onları bir geçişte arayabilir

OpenDesign'da hyperframes-animation'ı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubukta 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: HeyGen
Repository: github.com/heygen-com/hyperframes Dal main
Skill dosyası: skills/hyperframes-animation/SKILL.md Doğrulamada kaydedilen içerik sağlama toplamı; commit 558c11b
License: Apache-2.0 LICENSE dosyasından.
Repository yıldızları: 49.761 Bu katalogda 9 skill içeren tüm heygen-com/hyperframes deposu için 2026-09-14 tarihinde alınan GitHub anlık görüntüsü. hyperframes-animation 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

Varsayılan: atomik kuralları bir arada kullanınrules-index.md'den 2-4 kural seçip GSAP timeline ile birleştirin, blueprint'lerden daha hızlıdır
Şu durumda bir blueprint yükleyinSahne çok aşamalı bir şablonla eşleştiğinde veya çalıştırılabilir 4-5 aşamalı bir koreografiye ihtiyaç olduğunda kullanın
YönlendirmeGörevleri dosyalara eşleyen tablo: rules, blueprints, transitions, techniques, adapters, scripts
Bir çalışma zamanı seçmeGSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU ne zaman kullanılır
Kritik KısıtlamalarÖnceden hesaplanmış düzen sabitleri, yalnızca GSAP transform diğer adları, width/height/top/left tween'i yok
BetiklerKoreografiyi denetlemek ve animation-map.json çıkarmak için animation-map.mjs'yi çalıştırın
Ayrıca Bakınızhyperframes-core, hyperframes-creative, hyperframes-cli bağlantıları

Skill'in Kendi Açıklaması

"HyperFrames için tüm animasyon bilgisi — atomik hareket kuralları, çok aşamalı sahne planları, sahne geçişleri, daha geniş hareket tasarımı teknikleri VE yedi çalışma zamanı adaptörü (GSAP varsayılan, artı Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Herhangi bir hareket veya animasyon görevi için kullanın: 2-4 kural seçip birleştirin veya bir plan yükleyin veya çalışma zamanına özgü API'ye bakın (örn. GSAP eases / Lottie player / Three.js mixer). Ayrıca mevcut bir kompozisyonun koreografisini (animasyon haritası) denetlemeyi ve 24 adlandırılmış metin animasyonu efektini kapsar. HyperFrames-doğal: tek duraklatılmış zaman çizelgesi, arama güvenli, deterministik."

SKILL.md'den ön bilgi açıklaması. Tam dosya yaklaşık 7.755 karakterdir. Tam dosyayı GitHub'da okuyun.

HyperFrames Animation

hyperframes-animation'ı Gerçek Bir Hareket ve Video Görevinde Çalıştırın.

OpenDesign'ı indirin, hyperframes-animation'ı 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

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-animation

hyperframes-animation Skill'inin Claude Code ve Codex İçinde Yaptıkları

Skill'in Kendi İfadeleriyle

Nasıl Çalışır

hyperframes-animation Skill Ne Zaman Kullanılır

İyi Uyum

Sınırları Bilin

Ne Sağlamalısınız

hyperframes-animation Skill'inin Claude Code ve Codex'e Verdiği Kurallar

Düzen Sabitlerini Önceden Hesaplayın

Uzamsal Hareket Yalnızca GSAP Transform Diğer Adlarını Kullanır

GSAP Varsayılan Çalışma Zamanıdır

Varsayılan Olarak Atomik Kuralları Bir Arada Kullanın

Birden Fazla Çalışma Zamanı Bir Arada Bulunabilir

Blueprint'leri Tahmini Olarak Okumayın

Uzamsal Olmayan Özelliklere İzin Verilir