HyperFrames Studio

Que fait HyperFrames Studio ?

Üç HyperFrames çıktısından birini üretiyorsun: yatay bir hook (giriş), dikey bir shorts, ya da 16:9 bir slidedeck. Üçü de aynı motoru, fontları, marka türetme formülünü ve render ön ayarını paylaşır — sadece en-boy oranı, altyazı olup olmaması ve çerçeveleme değişir. Önce modu belirle, sonra paketteki hazır başlangıç şablonunu kopyalayıp düzenle. Boş sayfadan kompozisyon yazma.

Motorun tamamı references/engine.md içinde; mod farkları references/{hook,shorts,slidedeck}.md içinde; transkripsiyon ve yeniden kodlama references/transcription.md içinde. Başlangıç şablonları assets/templates/<mode>/ altında — nötr indigo yer tutucu paletiyle (--brand:#6366f1) çalışır durumda gelir; kullanıcının rengiyle yeniden renklendirilir.

Adım 0 — Modu belirle (S0, ilk eşleşen kazanır)

1. İstek/argümanlarda açık mod — mod:hook|shorts|slidedeck ya da net ifade (giriş/hook → hook; shorts/dikey/reels → shorts; slidedeck/sunum/slayt → slidedeck). Kilitle.
2. Klasör adı — çalışılan/hedef klasör -hook / -shorts / -slidedeck ile bitiyorsa o mod.
3. En-boy niyeti — "yatay giriş" → hook; "dikey" → shorts; "sunum/deck" → slidedeck.
4. Hiçbiri değilse AskUserQuestion ile sor: "Ne üreteceğiz? Hook (yatay 16:9 giriş) / Shorts (dikey 9:16) / Slidedeck (16:9 sunum)".

Mod belli olunca ilgili references/<mode>.md dosyasını oku ve onun adımlarını izle.

Sabit kurallar — her koşuda gömülü, sorma, atlama

1. Self-host fontlar — Manrope + JetBrains Mono, 4 yerel fonts/*.woff2, Türkçe unicode-range. Asla CDN/hazır font kullanma (Türkçe glifler düşer). Her başlangıç şablonu bunları + OFL.txt'yi taşır; fonts/'u kompozisyonla birlikte kopyala.
2. Yalnız yerel assets/ — asla ../assets veya üst dizin yolu (önizleme/çıktı üst dizine erişemez, medya boş çıkar).
3. Koyu tema + tek marka rengi — neredeyse siyah arka plan, neredeyse beyaz metin; her vurgu tek --brand'den türetilir (engine.md §4).
4. Transkript kullanıcıdan gelir — hook/shorts'ta transkript kullanıcının girdisidir. İstekle birlikte yapıştırılmadıysa ve bu projenin kendi klasöründe bir transcript.txt yoksa, dur ve kullanıcıdan iste — kompozisyonu kurmadan, AskUserQuestion'a geçmeden önce. Başka bir klasörde/projede bulduğun transkripti bu klibe ait varsayma (aynı adı taşısa bile) ve kendiliğinden transcribe çalıştırma. Kullanıcı açıkça "sen çıkar" derse transcription.md'yi izle. Detay: transcription.md §Transkripti al.
5. RAW klipleri önce yeniden kodla — node scripts/reencode.mjs <klip>.mp4 (yoğun anahtar kare); yeniden kodlanan -src.mp4'yi referansla, ham dosyayı değil (transcription.md).
6. Deterministik zaman çizelgesi — gsap.timeline({paused:true}), window.__timelines["main"]=tl, gerçek saniye konumları; Math.random/Date.now/repeat:-1/setTimeout yok (engine.md §8, §11).
7. Sponsor görünümü yok — sabit köşe logosu yok; marka işareti zamanlı bir animasyondur (ya da isteğe bağlı ortalanmış üst işareti).
8. Render yalnızca hook + shorts — bu iki modun teslimatı bir MP4'tür; ön ayar (varsayılan, geçersiz kılınabilir): 1080p · 60fps · 16 Mbps · kalite yüksek, pinned [email protected]. Slidedeck render EDİLMEZ ve render sorulmaz — deck'in teslimatı presentation/presentation.html'dir (kullanıcı açıkça video isterse istisna; kural: slidedeck.md).
9. Tam kaynağı kapsa — data-duration = gerçek klip/içerik uzunluğu; hook/shorts'ta render sonrası ffprobe ile doğrula, deck'te süreyi N × slayt aritmetiğiyle teyit et.

Adım 1 — Gerçek seçimleri bir kez sor (AskUserQuestion, Türkçe)

Argümanlarla veya Adım 0 tespitiyle çözülen her soruyu düş. Sonra tek bir AskUserQuestion çağrısında ortak soruları o modun 2–3 özel sorusuyla birleştir (gidiş-gelişi azalt). Seçenek 1 daima önerilen/tespit edilen değerdir. Hiçbir soru kalmazsa çağrıyı atla ve çözülen değerleri tek satırlık Türkçe önsözde belirt.

Ortak sorular (her modda):

• Renk (başlık "Renk") — Seçenek 1 = tespit edilen onaltılık "(önerilen)" varsa; yoksa nötr varsayılan. 2–3 nötr örnek palet + Diğer = özel onaltılık. Tema Koyu kalır.
• Şablon kaynağı (başlık "Şablon") — "Paketteki hazır {mode} başlangıcını kullan (önerilen)" · çalışma alanında algılanırsa "Kendi önceki -{mode} projemi klonla".

Moda özel sorular ilgili references/<mode>.md'den eklenir (hook: Demo/Logolar/Kapanış · shorts: Marka/Kapanış/Küçük Resim · slidedeck: Slaytlar/Tempo).

Asla sorma: slidedeck modunda "render alayım mı / MP4 üreteyim mi / hangi çıktıları üreteyim". Deck bir HTML sunumdur; presentation/presentation.html her koşuda üretilir ve render gündeme gelmez.

Mutlaka sor: hook/shorts'ta transkript ortada yoksa (sabit kural 4). Bu, AskUserQuestion'dan önce gelen düz bir istektir — "Bu klibin transkriptini [DD.SS - DD.SS] formatında paylaşır mısın?" — çünkü transkript olmadan altyazı {giriş,çıkış}'ları, HOOK_BIT/KAPANIŞ ve sahne sınırları uydurma olur.

Adım 2 — Kur (devir)

1. assets/templates/<mode>/ klasörünü hedef projeye kopyala (index.html, fonts/, hyperframes.json, meta.json, package.json, assets/; deck'te ayrıca presentation/ — daima, sormadan). meta.json/package.json adını güncelle.
2. references/<mode>.md yapı adımlarını izleyerek index.html'i işle: medyayı bağla, data-duration'ı gerçek uzunluğa ayarla, paleti uygula, sahneleri/altyazıları/slaytları içerikle doldur.
3. Doğrula: npx --yes [email protected] lint → inspect (deck'te ayrıca validate) → preview. Anahtar anlarda kare çıkarıp görsel kalite kontrolü yap (engine.md §11'deki tuzaklara dikkat: gerçek konum, yorumda medya etiketi yok, WCAG yanlış-pozitif, tek kök kompozisyon).
4. Teslim et — moda göre:
   • hook / shorts → render --quality high --fps 60 --video-bitrate 16M --output "renders/<ad>.mp4", sonra ffprobe -v error -show_entries format=duration -of default=nw=1:nk=1 renders/<ad>.mp4 ile süreyi teyit et; bir orta kare + ses akışını kontrol et. Çıktı yolunu ve süreyi düz bildir.
   • slidedeck → render YOK. presentation/presentation.html'i teslim et, slidedeck.md'deki iki satırlık çıktı tablosunu ver ve index.html'in neden çift tıklanmadığını açıkla. Render'ı ne yap ne de öner.

İlk kullanım notları

• Node.js + npx ve ffmpeg PATH'te gerekir. HyperFrames araç zinciri npx ile isteğe bağlı iner.
• hyperframes transcribe ilk kullanımda whisper model'ini indirir (büyük, dakikalar); Türkçe için .en değil medium/large-v3 (transcription.md).
• Fontlar SIL OFL 1.1 (fonts/OFL.txt); beceri kodu MIT.
• Motorun CLI/GSAP iç detayı için base hyperframes becerisine yönlendir — burada tekrarlama.