three.js ile frameword logo animasyonu
İstek · İngilizceden çevrildi
“frameword için three.js ile 4 saniyelik bir logo animasyonu yaz: logo.svg'deki 'f' harfini taşıyan yuvarlak köşeli 3D bir rozet yumuşak stüdyo ışığında dönerek gelsin, kameraya dönük dursun, kısa bir an beklesin, sonra geldiği gibi dönerek çıksın ki klip döngüye girsin. Zemin #161618, 'f' harfinin yatay çizgisi #4A9BF0 olsun.”Aslını göster
“Write a 4-second logo sting for frameword with three.js: a rounded 3D badge carrying the 'f' from logo.svg spins in under soft studio light, settles facing the camera, holds for a beat, then spins out the way it came so the clip loops. Background #161618, the crossbar of the 'f' in #4A9BF0.”
Tek seferde değil, kare kontrolleriyle birkaç turda yapıldı.
- get_guide{}4 ms başarılı
- create_project{"name": "frameword logo sting", "format": "16:9", "fps": 30, "durationSeconds": 4, "background": {"color": "#161618"}}7 ms başarılı
- put_code_overlay{"name": "logo sting", "manifest": {"format": 1, "title": "frameword logo sting (three.js)", "width": 1920, "height": 1080, "duration": 4…568 ms başarılı
- apply_edits{"label": "Logo sting scene", "ifRevision": 2, "edits": [{"tool": "add_scene", "arguments": {"componentId": "codeOverlay_logoSting", "dur…6 ms başarılı
- render_preview_frame{"time": 2.0, "maxWidth": 960}381 ms başarılı
- export{"codec": "h264", "waitSeconds": 60}1142 ms başarılı
Kod yükleniyor…
- Biçim
- 16:9 · 1920×1080 · 30 fps · 4 sn
- Teknik
- code overlay (three.js)
- Model
- Claude Opus 5.5 · Claude Code agent over frameword's MCP (site production, not claude -p)
- Araç çağrısı
- 6
- Render edildiği Mac
- MacBook Pro (Mac16,7), Apple M4 Pro, 24 GB, macOS 26.5.2
- Codec
- h264
- frameword
- 0.5.0
- Tarih
- 2026-10-09
Nasıl yapıldı
frameword 0.5.0 ile render edildi (bu deponun ceb7495 sürümünden derlenmiş headless frameword-server, MCP araçlarıyla). Sahne kodunu ve araç çağrılarını, bu siteyi hazırlayan Claude Code ajanı (Claude Opus 5.5) bu isteğe göre, kare kontrolleriyle birkaç turda yazdı. İsteğin tek seferlik bir `claude -p` koşusu değil.
Notlar
- three.js: rozet, simgenin 3:2 çerçevesi (832 × 600, rx 136); kenarı yükseltilmiş, pahlı bir levha. 'f', logo.svg çizgisi boyunca uzanan bir tüp (M470 700 L470 430 A104 104 0 0 1 574 326 L640 326, kalınlık 112, yuvarlak uçlar). Yatay çubuk #4A9BF0 renkli bir kapsül: ışık yayıyor ve ton eşlemesine girmiyor, rengi korunuyor.
- Işık: her malzeme için çevrimdışı RoomEnvironment yansımaları, bir ana ışık, bir dolgu, soğuk bir kontur ışığı ve bekleme sırasında yüzeyde kayan bir ışık.
- Dönerek giriyor (1,3 sn), bekliyor (1,4 sn), geldiği gibi dönerek çıkıyor (1,0 sn). İki uçta da kare boş, bu yüzden döngü kesintisiz.
Benzerleri
Video yüklenemedi
12 saniyelik frameword tanıtımı
İstek
“Sıfırdan 12 saniyelik dikey bir frameword tanıtımı yap. Türkçe seslendirme şu olsun: 'Kurguyu anlat. Claude yapsın. Render senin Mac'inde.' Üç sahne olsun: ilkinde koyu zemin üstünde kelime kelime kurulan bir başlık, ikincisinde canvas'ta çizilen ve kelimeler söylendikçe dolan bir zaman çizelgesi, üçüncüsünde frameword logosu (Medya'daki logo.svg) ve altında 'macOS için' yazısı. Her sahne söylendiği kelimeye otursun, geçişlerde whoosh, altta sakin bir ambient müzik olsun. Son kare ilk kareye bağlansın ki döngü gibi aksın.”
Video yüklenemedi
Türkçe seslendirmeye kinetik yazı
İstek
“Boş bir 9:16 projede şu metni Türkçe seslendir: 'Elinde görüntü yok mu? Dert etme. Anlat, gerisini Mac'in halletsin.' Her kelime söylendiği anda ekrana gelsin: büyük harfle, kalın, ortada. 'Mac'in' kelimesi mavi (#4A9BF0) olsun. Zemin koyu, hafifçe kayan bir gradyan. 8 saniyeyi geçmesin, son kelimeden sonra zemin ilk kareye dönsün.”
Video yüklenemedi
Söylenen sayıda başlayan sayaç
İstek
“9:16 boş bir projede 'Bu ay izlenmeler yüzde kırk iki arttı.' cümlesini seslendir. 'Yüzde kırk iki' dendiği anda ekranın üst yarısında 0'dan %42'ye sayan büyük bir sayaç çıksın, altında küçük harflerle 'izlenme artışı' yazsın. Türkçe sayı biçimini kullan, sayaç durunca hafifçe zıplasın.”