hyperframes-keyframesyazan HeyGen

HyperFrames Keyframes Skill.

Claude Code ve Codex için hareket ve video skill'i: HyperFrames için yakınlaşma, zoom, yeniden çerçeveleme, Ken Burns hareketleri ve 2D/3D keyframe'ler.

Motion & Video
Video

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

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

--- name: hyperframes-keyframes description: Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe 2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video … --- ## Creator editing boundary ## Procedure ## Contract ## Runtime Rules ## GSAP Skeleton ## Keyframe Forms

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

01 Ne yapar

Claude Code ve Codex'te hyperframes-keyframes Skill 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

HyperFrames kompozisyonları için yakınlaştırmaları (punch-in), uzaklaştırmaları (punch-out), zoom'ları, yeniden çerçevelemeleri, Ken Burns hareketlerini, kamera hareketlerini, görsel match/whip geçişlerini ve seek-safe 2D/3D keyframe'leri yönetir. GSAP, CSS keyframe'leri, Anime.js, WAAPI, FLIP, yolları (paths), maskeleri, SVG morph/draw'ı, metin izlerini ve 3D derinliği destekler. Keyframe'ler bir poz sözleşmesidir: görünür durumlar, sürekli özne kimliği, seek-safe çalışma zamanı, doğrulanmış pikseller.

Klip birleştirme veya sahne stratejisine değil, klipler içindeki görsel harekete odaklanır. Senkron çalışma zamanı oluşturmayı, kayıtlı zaman çizelgesi örneklerini ve deterministik zamanlamayı gerektirir. Yazarlar hyperframes lint, check, keyframes komutu, odaklanmış --shot tanılamaları ve kanıt zamanlarındaki anlık görüntülerle doğrulama yapar.

Neler üretir

window.__timelines[compositionId] içinde paused: true olarak kayıtlı GSAP zaman çizelgesi örneği

Örnek istemi görün ↗

Nasıl Çalışır

01
Özneyi ve Durumları Belirleyin
Keyframe'leri oluşturmadan önce animasyonlu özneyi, görünür durumları, son durumu ve çalışma zamanını belirleyin.
02
En Küçük Mekanizmayı Seçin
İstemi kanıtlayan en küçük mekanizmayı seçin; mekanizma belirsizse yalnızca references/keyframe-patterns.md'ye başvurun.
03
Oluşturun ve Kaydedin
Beyan edilen çalışma zamanında seek-safe keyframe'leri oluşturun; senkron biçimde inşa edip çalışma zamanı örneğini kaydedin.
04
Tanılamayla Doğrulayın
hyperframes lint, check, keyframes komutu, odaklanmış tek bir --shot ve kanıt zamanlarındaki anlık görüntülerle doğrulayın.
05
Düzeltin ve Yeniden Test Edin
Kanıt başarısız olursa, kaynak keyframe'leri düzeltin ve render almadan önce başarısız olan en küçük tanılamayı yeniden çalıştırın.

02 Uyumunuzu bulun

hyperframes-keyframes Skill Ne Zaman Kullanılır

Claude Code veya Codex içinde iş bu türden hareket ve video olduğunda hyperframes-keyframes skill'ini kullanın. Uygunluk ve sınırlar, skill'in kendi dosyasından alınmıştır.

İyi Uyum

Klip içindeki zamanlamasız görsel/kırpma sarmalayıcı üzerinde keyframe'li ölçek ve öteleme ile punch-in veya punch-out
Bir poz merdiveni olarak birden çok durumla tek bir özne sarmalayıcısını canlı tutan akıcı çok durumlu zoom veya yeniden çerçeveleme
Animasyonlu sarmalayıcı ötelemesi ile ölçek eklenmiş pan, yeniden çerçeveleme veya Ken Burns kamera hareketi
Tek bir kayıtlı seek-safe zaman çizelgesinde etiketlenmiş dönüşüm vuruşlarıyla zincirlenmiş kamera hareketleri
Oluşturulmuş geometriyi, yönü ve hızı koruyan match cut veya whip pan

Sınırları Bilin

Genel sahne stratejisi, marka tasarımı, medya kaynağı bulma, altyazılar veya genel video planlaması
hyperframes-core'a ait sabit kaynak aralığı kesimleri, kırpma, ekleme ve yeniden sıralama
Zamanla değişen oynatma hızı zarfına sahip kaynak hız rampaları, desteklenmiyor
Kaynağın ortasında keyfi dondurulmuş kareler, bir sabit/türetilmiş segmentin ön işlenmesini gerektirir

Ne Sağlamalısınız

Görünür pozlar ve son durumAmaçlanan hareketi kanıtlamak için gereken pozlar, animasyonu tamamlayan son durum dahil.

03 Skill'in içinde

hyperframes-keyframes 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ı.

Duraklatılmış GSAP Zaman Çizelgeleri
GSAP zaman çizelgeleri gsap.timeline({ paused: true }) kullanmalı, render açısından kritik hareket için asla tl.play() çağırmamalı ve data-composition-id ile eşleşen bir anahtarla window.__timelines[compositionId] olarak kaydedilmelidir.
Anime.js Autoplay False
Anime.js örnekleri autoplay: false olmalı ve sonlu bir duration ile loops değeriyle window.__hfAnime içine eklenmelidir.
CSS Keyframes Fill Mode
CSS keyframes'ler sonlu bir duration ve iteration count, deterministik bir delay ve animation-fill-mode: both gerektirir.
Asla Zamanlayıcı veya Rastgelelik Kullanmayın
Render açısından kritik hareket için asla Date.now(), performance.now(), tohumlanmamış Math.random(), hover/scroll tetikleyicileri, zamanlayıcılar, eşzamansız oluşturulmuş zaman çizelgeleri, kaydedilmemiş requestAnimationFrame veya sonsuz döngüler kullanmayın.
Yalnızca Görünür Kanalları Keyframe'leyin
x/y/z, ölçek, opaklık, clip-path, maskeler gibi görünür kanalları keyframe'leyin, gizli yardımcı durumu değil.
Nesne Kimliğini Koruyun
Süreklilik önemli olduğunda nesne kimliğini koruyun. Yalnızca amaçlanan hareket yer değiştirme veya eriyip kaybolma olduğunda çapraz geçiş (crossfade) kullanın.
Son Kare Animasyonun Bir Parçasıdır
Son kare animasyonun bir parçasıdır, temizlik değil. İstenmedikçe dinlenme durumuna sıfırlamayın. İstenmedikçe siyah ekranda sonlandırmayın.
Özneleri ve Pozları Adlandırın
Hareket eden özneyi ve amaçlanan hareketi kanıtlamak için gereken pozları, son durum dahil, adlandırın.

04 İşe koyun

Claude Code veya Codex'te hyperframes-keyframes 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-keyframes 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-keyframes

skills/hyperframes-keyframes/SKILL.md için genel skills CLI biçimi; 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 Ken Burns punch-in to [clip-id] starting at 2.5s: scale from 1.0 to 1.4 over 3 seconds with ease-out, translating the wrapper 15% right and 10% up to reframe on the subject's face. Hold the final framing for 1 second. Register the timeline and verify with a strip shot showing the route.

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:

Yapısal sorunları kontrol etmek için hyperframes lint çalıştırın
Kompozisyonu doğrulamak için hyperframes check çalıştırın
Hedefleri, durakları, yolları ve zamanlama aralıklarını doğrulamak için hyperframes keyframes'i --shot ve --samples ile çalıştırın
Yerinde hareketi, çakışmaları, kontağı ve ince ölçek/opaklık değişimlerini kanıtlamak için --layout strip kullanın
Canvas, WebGL, shader hareketini ve 3D derinlik projeksiyonunu kanıtlamak için --ghost'u --angle ile birlikte kullanın
Maskeleri, metin okunabilirliğini, tam durumu ve siyah/sıfırlama kuyruklarının olmadığını doğrulamak için ilk kare, kanıt pozları, final-eksi-bekleme ve tam final anında anlık görüntü alın

OpenDesign içinde hyperframes-keyframes'i 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-keyframes/SKILL.md İçerik sağlama toplamı doğrulama sırasında kaydedildi; commit 558c11b
License: Apache-2.0 LICENSE dosyasından.
Repository yıldızları: 49.761 GitHub anlık görüntüsü 2026-09-14 tarihinde heygen-com/hyperframes deposunun tamamı için alınmıştır; bu depoda katalogda yer alan 9 skill bulunmaktadır. hyperframes-keyframes için bir derecelendirme 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

Oluşturucu düzenleme sınırıKeyframes görsel hareketin sahibidir; core ise klip montajı, kırpma, ekleme, kaynak ofsetleri ve sert kesimlerin sahibidir
ProsedürÖzneyi ve durumları belirlemekten yazma, doğrulama ve tanı odaklı düzeltmelere kadar beş adımlı iş akışı
SözleşmeÖzneleri ve pozları adlandırın, görünür kanalları keyframe'leyin, kimliği koruyun, durumları yeterince uzun tutun, son kareyi animasyon olarak ele alın
Çalışma Zamanı KurallarıGSAP duraklatılmış zaman çizelgeleri, CSS fill-mode both, Anime autoplay false, kayıt gereksinimleri, yasak timer/random/async desenleri
Keyframe BiçimleriDizi keyframe'leri, yüzde keyframe'leri, özellik dizileri, durak başına easing ile ease-none ebeveyn, ortak his için easeEach
Kanallarx/y/scale/opacity gibi compositor/görsel kanalları tercih edin; top/left, width/height, display gibi layout/lifecycle kanallarından kaçının
Mekanizma Seçimiİhtiyaçları en küçük mekanizmalarla eşleştiren tablo: FLIP, yol hareketi, stroke çizimi, şekil interpolasyonu, stagger, metin bölümlendirme, 3D
ZamanlamaBeklenti, hızlanma, tepe kanıtı, takip hareketi, aşma, ease seçimi, stagger ofsetleri, final beklemeleri, sürekli hız
MetinSatır kutularını, kelime aralığını, okunabilirliği, son uyumu koruyun; glifleri veya maskelenmiş bantları hareket ettirin; okunabilir kareleri anlık görüntüleyin
SVGStroke büyümesi için DrawSVGPlugin, şekil interpolasyonu için MorphSVGPlugin, ilkel şekilleri yollara dönüştürme, karmaşık silüetleri bölme
3Dperspective, preserve-3d, z hareketi, döndürme, kamera/dünya hareketi, örtüşme, katman düzeni kullanın; derinliği tanı açılarıyla kanıtlayın
Canvas / WebGLKamerayı, nesne dönüşümünü, materyali, shader uniform'larını keyframe'leyin; HyperFrames zamanından render edin; kanıt için --ghost kullanın

Skill'in Kendi Açıklaması

"Bir HyperFrames kompozisyonunun punch-in, punch-out, yakınlaştırma, yeniden çerçeveleme, Ken Burns işlemi, kamera hareketi, görsel eşleşme/whip geçişi veya diğer arama-güvenli 2D/3D keyframe'lere ihtiyacı olduğunda kullanın; ayrıca GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, yollar, maskeler, SVG morph/draw, metin izleri, 3D derinlik veya `hyperframes keyframes` tanılamaları için. Geniş sahne stratejisi, marka tasarımı, medya kaynak bulma, altyazılar veya genel video planlama için kullanmayın."

SKILL.md dosyasından ön bilgi açıklaması. Dosyanın tamamı yaklaşık 15.899 karakterdir. GitHub'da tam dosyayı okuyun.

06 Kurmadan önce

hyperframes-keyframes 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 skill ile hyperframes-animation arasındaki fark nedir?

Bu skill, keyframe uygulamasının ve görsel hareket mekaniğinin sahibidir. Geniş sahne tarifleri ve görsel teslim koreografisi için hyperframes-animation'ı kullanın. Tam komut belgeleri için hyperframes-cli'yi kullanın. Bu skill, gerçek keyframe'leri yazma, kaydetme ve doğrulama üzerine odaklanır.

HyperFrames Keyframes

hyperframes-keyframes'i gerçek bir Hareket ve Video Görevi üzerinde çalıştırın.

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

Claude Code ve Codex'te hyperframes-keyframes Skill Ne Yapar

Skill'in Kendi İfadeleriyle

Nasıl Çalışır

hyperframes-keyframes Skill Ne Zaman Kullanılır

İyi Uyum

Sınırları Bilin

Ne Sağlamalısınız

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

Duraklatılmış GSAP Zaman Çizelgeleri

Anime.js Autoplay False

CSS Keyframes Fill Mode

Asla Zamanlayıcı veya Rastgelelik Kullanmayın

Yalnızca Görünür Kanalları Keyframe'leyin

Nesne Kimliğini Koruyun

Son Kare Animasyonun Bir Parçasıdır

Özneleri ve Pozları Adlandırın