Tarayıcıda interaktif 3D roket motoru modeli

Prompt

<inputs> 
Benden şunları iste: 
• ürünüm + URL 
• hikâyesini anlatan 8–12 UI durumu 
• her durumda gösterilen gerçek veriler 
• marka renkleri + yazı tipleri + vurgu rengi 
• gerekli formatlar (1:1, 16:9, 9:16) 
</inputs>

<rules> 
Tek bir HTML dosyası. Tek bir canvas
Tek bir draw(t) fonksiyonu

CSS geçişleri yok
Zamanlayıcı yok
Kareler arasında taşınan durum yok

Tek bir şekil, asla kesme

Her durum, içerik değişirken boyutunu, yarıçapını ve rengini değiştiren aynı öğedir

Gerçek UI. Gerçek veri. Yer tutucu yok.

</rules>
<structure> 
120 BPM ızgarası

Her bea'de bir şey olur

logo → düğme → kullanıcı adı alanı → “is this you?” → yükleyici → PIN → kullanıcılarla dolan küre → eşleşmeler → sekmeler → RSVP → arama → logo

</structure>

<motion> 
Her yerde, yalnızca çok küçük bir aşımı olan kapalı biçimli yaylar kullan.

Bir değer hedefini birden fazla kez değiştiriyorsa, her değişim için bir yay topla

İçerik, kapsayıcısı dönüşmeye başladıktan sonra girsin ve bir sonraki dönüşümden önce çıksın; böylece metin hiçbir zaman üst üste binmesin

Geçişlerde kısa bir bulanıklık kullan

Siyahı doğrudan vurgu rengine dönüştürme. Bunun yerine bir vurgu öğesini durumlar arasında taşı

Her kenarı farklı bir yaya bağlayarak sekme göstergelerinin uzamasını sağla

Her durumun kareyi doldurması için kamerayı yakınlaştır

Tüm animasyonun döngüye girmesi için son kareyi ilk kareyle aynı yap
</motion>

<export> 
Önce her vuruş için bir kareyi kontak sayfası olarak oluştur

Sıkışık veya bozuk görünen her şeyi düzelt

Ardından her kareyi headless Chrome'da 60fps hızında oluştur; hareket bulanıklığı için 6 alt kareyi ortala

ffmpeg'e aktar:
H.264 + yuv420p

Tüm en-boy oranlarını paralel olarak dışa aktar
</export>

motion design is becoming a prompt

<inputs> 
Ask me for: 
• my product + URL 
• 8–12 UI states that tell its story 
• the real data shown in each state 
• brand colors + fonts + accent color 
• required formats (1:1, 16:9, 9:16) 
</inputs>

<rules> 
One HTML file. One canvas
One draw(t) function

No CSS transitions
No timers
No state carried between frames

One shape, never cut

Every state is the same element changing size, radius and color while the content swaps

A cursor drives the sequence with real clicks, typing and one drag

Real UI. Real data. No placeholders.

</rules>
<structure> 
120 BPM grid

Something happens on every bea

logo → button → handle field → “is this you?” → loader → pin → globe filling with users → matches → tabs → RSVP → search → logo

</structure>

<motion> 
Closed-form springs everywhere with only a tiny overshoot.

If a value changes target multiple times, sum one spring per change

Content enters after its container starts morphing and leaves before the next morph so text never overlaps

Use a short blur on transitions

Never fade black directly into the accent color. Move an accent element between states instead

Make tab indicators stretch by putting each edge on a different spring

Zoom the camera so every state fills the frame

Make the last frame equal the first so the whole thing loops
</motion>

<export> 
First render one frame per beat as a contact sheet

Fix anything cramped or broken

Then render every frame in headless Chrome at 60fps, averaging 6 subframes for motion blur

Pipe into ffmpeg:
H.264 + yuv420p

Export all aspect ratios in parallel
</export>

motion design is becoming a prompt