Filem aplikasi pembukuan Taxtello

Anda ialah pereka gerakan kanan, pereka produk dan jurutera Remotion untuk Taxtello.

Tugas anda adalah untuk mencipta filem produk tahap Apple yang benar-benar premium untuk Taxtello.

Ini BUKAN penjelasan SaaS generik.
Ini BUKAN panduan ciri.
Ini BUKAN animasi templat permulaan.

Saya mahukan tayangan jenama/produk berdurasi maksimum 15 saat yang menjadikan Taxtello kelihatan seperti produk kewangan yang matang, mahal dan direka bentuk dengan cantik.

Fikirkan:

Filem pelancaran produk Apple
× fintech premium
× reka bentuk gerakan editorial
× persembahan produk seperti Jalur yang terkawal
× Identiti visual Taxtello sendiri

Reaksi yang dikehendaki ialah:

"Tunggu, ini aplikasi pembukuan Jerman?"

Filem itu sepatutnya terasa mahal.

──────────────────────────────────────────────
REPO / SUMBER KEBENARAN
──────────────────────────────────────────────

Periksa dahulu repositori sebenar sebelum mereka bentuk apa-apa.

Produk utama:
/taxtello/utama

Projek Remotion sedia ada:
/taxtello/gerakan-beta

Sumber jenama sebenar yang penting:

/taxtello/main/public/css/app/_00-tokens.css
/taxtello/utama/dokumen/reka bentuk/TOKENS.md
/taxtello/main/public/taxtello-wordmark.png
/taxtello/main/public/icons.svg

Tangkapan skrin produk semasa yang sedia ada boleh didapati di bawah:

/taxtello/utama/artifak/ui-asap-asap/

Lebih suka tangkapan skrin/sumber semasa yang sah dan terkini berbanding artifak lapuk.

Animasi wira Remotion 24 saat sedia ada sudah tersedia dalam
/taxtello/gerakan-beta.

JANGAN gantikannya.
JANGAN mundurkannya.
JANGAN paksa jalan cerita sambungan AI semasa ke dalam filem baharu ini.

Cipta satu komposisi bebas yang baharu untuk tugasan ini, contohnya

TaxtelloShowreel15

Anda boleh menggunakan semula infrastruktur, fon, utiliti pemaparan, primitif gerakan yang baik,
pelonggaran lengkung, pemuatan aset dan infrastruktur QA daripada gerakan beta jika berguna.

Tetapi secara kreatifnya ini sepatutnya menjadi filem baharu.

Sebelum pelaksanaan, periksa UI Taxtello yang sebenar dan fahami produk tersebut.

Jangan mereka-reka fungsi yang tidak wujud.

──────────────────────────────────────────────
BAHASA VISUAL TAXTELLO SEBENAR
──────────────────────────────────────────────

Gunakan sistem reka bentuk sebenar.

Palet teras:

Latar Belakang:
#0c0f1a

Permukaan yang tinggi:
#111525
#131722
#1a2032

Emas jenama utama:
#e8b84b

Sorotan emas:
#f5d07a

Kedalaman emas:
#9b6d18

Teks utama:
#e8eaf2

Putih suam yang kuat:
#f6f4eb

Teks sekunder:
#8b93b5

Positif:
#34d399

Negatif/ralat sahaja jika perlu secara semantik:
#f87171

Tipografi:
Plus Jakarta Sans

Nombor / nilai kewangan jika sesuai:
JetBrains Mono

Gunakan tanda perkataan Taxtello dan/atau tanda Taxtello yang sebenar.
Jangan lukis semula atau hampirkan logo.

Emas Taxtello sepatutnya terasa seperti aksen yang berharga, bukan banjir UI kuning.

Fikirkan:
logam gelap
emas hangat
kaca
dakwat
ketepatan
keyakinan yang tenang

TIDAK:
siberpunk
kripto
neon
permainan
ungu AI generik
kecerunan pelangi

──────────────────────────────────────────────
PERATURAN KREATIF TERAS
──────────────────────────────────────────────

Ikuti peraturan ini dengan penuh kejam:

1. SATU TEMBAKAN = SATU IDEA.

2. Setiap babak memerlukan ruang untuk bernafas.

3. UI produk ialah wira.

4. Jangan tampal salinan penjelasan di merata tempat.

5. Jangan gunakan potongan keras melainkan terdapat sebab yang disengajakan.

6. Lebih suka peralihan dipacu objek:
kad menjadi kad seterusnya,
garisan carta menjadi penyambung,
resit menjadi tempahan,
nombor menjadi elemen antara muka yang lain,
kamera bergerak melalui produk.

7. Gunakan pelonggaran premium.
Tiada pergerakan linear.

8. Gerakan harus bertindih secara semula jadi.
Elemen tidak sepatutnya bermula dan berhenti pada bingkai yang sama.

9. Gunakan kedalaman dengan berhati-hati:
perspektif,
paralaks lembut,
skala,
pemisahan latar depan/latar belakang,
kedalaman medan terkawal jika boleh dicapai.

10. TIADA kesan wujud hanya kerana ia kelihatan menarik.

11. Tiada spam zarah.

12. Tiada morfisme kaca palsu di merata tempat.

13. Tiada kabur yang berlebihan.

14. Tiada kad berputar 3D yang tidak berguna.

15. Tiada zum berterusan.

16. Tiada 20 gaya animasi yang berbeza.

17. Tiada UI yang melantun.

18. Tiada perenggan pemasaran yang besar.

19. Jangan tiru iklan Apple tertentu secara bersemuka.
Sebaliknya, tangkap falsafah dan kualiti pengeluaran.

Keyakinan visual harus datang daripada kekangan.

──────────────────────────────────────────────
FORMAT
──────────────────────────────────────────────

Guru utama:

1920 × 1080
60 fps
16:9
H.264
tempoh maksimum: 15.0 saat

Masa jalan sasaran:
kira-kira 14.0–15.0 saat.

Ia mesti berfungsi sebagai pendedahan produk media sosial walaupun tanpa bunyi.

Jika praktikal SELEPAS kerja induk selesai, cipta juga gubahan semula yang sengaja dibuat
varian menegak/sosial.

Jangan hanya pangkas komposisi desktop.

Tetapi desktop master adalah keutamaan.

──────────────────────────────────────────────
CERITA / ARKA EMOSI
──────────────────────────────────────────────

Jangan jadikan ini senarai lima ciri.

Ia sepatutnya terasa seperti satu pemikiran yang berterusan:

KEKACAUAN → KAWALAN → KEJELASAN → TAXTELLO

1.5 saat pertama mesti dah nampak premium.

Detik produk pertama yang bermakna sepatutnya berlaku kira-kira 2 saat.

Tiada pengenalan logo selama lima saat.

Arah naratif yang mungkin:

"Semuanya tentang perniagaan anda, akhirnya di satu tempat."

Tetapi TUNJUKKAN ini dan bukannya menjelaskannya.

Saya mahukan kira-kira empat idea visual merentasi keseluruhan filem.

Gunakan permukaan Taxtello SEBENAR yang paling kuat yang anda temui dalam repositori.

Calon yang kukuh termasuk:

• Finanzcockpit / Papan Pemuka
• Rechnungen
• Belege
• Bank / pemadanan
• Steuergesundheit / gambaran keseluruhan cukai

Anda TIDAK perlu menunjukkan semuanya.

Pilih kombinasi yang paling kuat secara visual.

──────────────────────────────────────────────
PAPAN CERITA 15 SAAT YANG DICADANGKAN
──────────────────────────────────────────────

Anggap ini sebagai titik permulaan yang kukuh, bukan templat yang kaku.

0.00 – 1.20

HITAM / BIRU TUA.

Kilauan kecil keemasan hangat muncul.

Kilauan itu dengan elegan mendedahkan sama ada tanda Taxtello atau serpihannya
tanda kata.

Tiada pudar logo generik.

Fikirkan ketepatan mesin.

Kamera bergerak melalui atau melepasi tanda dan UI mula muncul daripadanya.

Salinan yang sangat sedikit atau tiada langsung.

─────────────────────

1.20 – 4.40

KAWALAN KEWANGAN.

Dedahkan Kokpit Taxtello sebenar sebagai permukaan produk berdimensi.

Bukan sekadar tangkapan skrin yang diletakkan di skrin.

Bina semula/pangkas/lapiskannya supaya kawasan antara muka individu boleh dianimasikan.

Nombor kewangan wira diselesaikan dengan jelas.
Carta itu menarik perhatian.
Metrik sokongan akan diselesaikan sedikit kemudian.

Gunakan selang seli yang halus.

Satu baris salinan mungkin muncul, contohnya:

"Semua di dalam Blick."

atau frasa Jerman yang sama pendeknya jika anda mendapati sesuatu yang lebih sesuai.

Maksimum ~3–4 patah perkataan.

Antara muka mesti kekal dikenali sebagai produk sebenar.

─────────────────────

4.40 – 7.50

TRANSFORMASI DOKUMEN / PEMBEKALAN BUKU.

Gunakan objek visual daripada babak sebelumnya sebagai peralihan.

Contoh:

Titik carta emas mengembang ke sudut resit/kad.
Kamera mengekorinya.
Resit/dokumen dimasukkan.
Taxtello mengenal pasti atau menganjurkannya.
Dokumen itu dimuatkan dengan elegan ke dalam rekod tempahan/kewangan yang sepadan.

Gunakan penjajaran dan ketepatan magnet.

Tiada laser pengimbas yang murahan.

Tiada puting beliung kertas terapung.

Salinan mikro yang mungkin:

"Belege. Erledigt."

Hanya jika ia dapat memperbaiki keadaan.

─────────────────────

7.50 – 10.70

WANG / INVOIS.

Berubah atau beralih secara semula jadi ke dalam antara muka Rechnungen yang sebenar.

Gunakan satu momen yang kuat:

status invois berubah,
pembayaran diselesaikan,
jumlah bergerak ke tempatnya,
atau gambaran keseluruhan tersusun dengan sendirinya.

Nombor sepatutnya terasa seperti disentuh dan tepat.

Gunakan JetBrains Mono jika ini sepadan dengan produk sebenar.

Emas menonjolkan keadaan aktif.

Hijau hanya digunakan untuk keadaan semantik yang benar-benar positif.

Salinan berpotensi:

"Geld. Saya Griff."

Sekali lagi: pilihan dan sangat pendek.

─────────────────────

10.70 – 12.80

CUKAI / KEJELASAN.

Peralihan ke permukaan panduan kesihatan cukai/kewangan Taxtello yang sebenar.

Jangan dakwa bahawa Taxtello secara ajaib menjamin cukai yang betul.

Sampaikan keterlihatan dan kawalan.

Contoh:

pelbagai isyarat bising digabungkan menjadi satu gambaran keseluruhan cukai yang tenang dan berstruktur.

Salinan berpotensi:

“Steuern im Blick.”

Adegan ini sepatutnya terasa lebih tenang berbanding adegan sebelumnya.

Ritma itu perlahan seketika.

─────────────────────

12.80 – 15.00

GANJARAN JENAMA.

Tarik kamera ke luar.

UI dimampatkan atau dilipat menjadi satu objek/permukaan produk Taxtello yang cantik.

Kegelapan kembali di sekelilingnya.

Tanda perkataan emas Taxtello telah menyelesaikannya.

Satu barisan jenama pendek di bawahnya.

Terokai baris akhir yang kuat seperti:

"Perniagaan Anda. Jelas."

"Buchhaltung. Unter Kontrolle."

“Einfach meh Überblick.”

"Perniagaan Alles fürs. Ort einem."

Pilih berdasarkan kedudukan produk sebenar yang anda temui dalam repo.

Jangan gunakan baris hanya kerana saya yang mencadangkannya.

Bingkai terakhir mesti mempunyai kesunyian yang cukup untuk dirakam.

Akhiri dengan yakin.

Tiada CTA yang melantun secara besar-besaran.

──────────────────────────────────────────────
PERALIHAN
──────────────────────────────────────────────

Ini adalah salah satu bahagian yang paling penting.

Saya mahukan peralihan yang membuat penonton berfikir:

"Sudah tentu babak seterusnya datang daripada itu."

Bagus:

garisan carta → tepi dokumen
pil emas → butang invois
nombor kewangan → jumlah dalam invois
tepi kad → permukaan seterusnya
elemen antara muka tolak kamera
geometri yang dikongsi
mendedahkan topeng menggunakan bentuk produk sebenar

Buruk:

pudar silang
lap rawak
peralihan putaran
gangguan
pukul kuali setiap dua saat
SaaS generik gelongsor ke kiri
spam zum-kabur

Pemotongan langsung hanya dibenarkan apabila impak berirama yang disengajakan memberi manfaat kepada filem.

──────────────────────────────────────────────
GERAKAN
──────────────────────────────────────────────

Gerakan memerlukan berat.

Gunakan lengkung yang setanding dengan:

kubik-bezier(0.16, 1, 0.3, 1)

di mana sesuai.

Unsur-unsur yang berbeza sepatutnya mempunyai masa ketibaan yang sedikit berbeza.

Lebih suka:

jangkaan
melebihi had di bawah ~2%
menetap
kesinambungan gerakan
halaju yang dikongsi antara babak

Elakkan keanjalan kartun.

Pergerakan kamera sepatutnya terasa seperti penggambaran produk makro mewah.

Bayangkan kita sedang merakam objek premium fizikal walaupun ia adalah perisian.

──────────────────────────────────────────────
PENCAHAYAAN / BAHAN
──────────────────────────────────────────────

Gunakan pencahayaan persekitaran yang sangat halus.

Rawatan yang mungkin:

• pencahayaan rim emas lembut
• jatuhan biru laut gelap
• mekar ambien yang samar
• sorotan spekular lembut yang melalui permukaan
• vignette terkawal
• butiran halus jika ia membantu secara material

Pastikan antara muka sentiasa kemas.

JANGAN kaburkan produk hanya untuk kelihatan sinematik.

Tiada pantulan berkilat palsu yang merosakkan keterbacaan.

──────────────────────────────────────────────
TIPOGRAFI
──────────────────────────────────────────────

Gunakan salinan yang sangat sedikit.

Tiada ayat yang sepatutnya bersaing dengan produk tersebut.

Tajuk utama biasanya muat pada satu baris.

Gunakan Plus Jakarta Sans.

Tipografi yang kuat kadangkala boleh berskala sangat besar dan menjadi peralihan
peranti itu sendiri.

Elakkan tingkah laku grafik gerakan generik yang mana setiap perkataan bernyawa secara bebas.

Tipografi harus bergerak seperti objek yang direka bentuk.

──────────────────────────────────────────────
BUNYI / RITMA
──────────────────────────────────────────────

Reka bentuk gerakan seolah-olah ia dipotong kepada kira-kira 115–120 BPM:
premium, kinetik, sofistikated, tidak terburu-buru.

Detik-detik penting sepatutnya tiba secara muzikal.

Bahasa bunyi yang dicadangkan:

• impak lembut rendah untuk pendedahan utama
• klik UI sentuhan terkawal
• tik ton logam/kaca yang halus
• pergerakan frekuensi rendah yang lembut semasa peralihan kamera
• nada yang elegan dan jelas pada hasil logo

Elakkan:

• ledakan treler sinematik yang hebat
• Penaik EDM
• bunyi gemuruh yang kuat di mana-mana
• bunyi "antara muka teknologi" stok
• rentak rap
• bes agresif

Jika tiada aset muzik/audio yang selamat dari segi undang-undang dalam projek ini, JANGAN tarik
audio berhak cipta dari internet.

Sampaikan induk visual tanpa muzik berhak cipta dan cipta isyarat ringkas
helaian yang menerangkan di mana muzik/SFX sepatutnya dimainkan.

Jika terdapat audio selamat/tempatan yang sesuai, gunakannya.

──────────────────────────────────────────────
PRODUK SEBENAR SAHAJA
──────────────────────────────────────────────

Ini kritikal.

Periksa arus utama.

Jangan mereka-reka skrin.

Jangan mereka-reka metrik yang membayangkan data pelanggan sebenar.

Gunakan nilai sintetik/demo yang jelas jika diperlukan.

Jangan mendedahkan sebarang maklumat peribadi, pengguna ujian atau maklumat pengeluaran secara tidak sengaja.

Gunakan semula struktur visual UI Taxtello yang sebenar.

Jika skrin perlu dipisahkan daripada gerakan, cipta semula skrin tersebut dengan tepat dalam React daripada
sistem reka bentuk sebenar dan bukannya sekadar menskala tangkapan skrin gergasi.

Hasilnya sepatutnya kelihatan seperti Taxtello.

──────────────────────────────────────────────
JANGKAAN PELAKSANAAN
──────────────────────────────────────────────

Bekerja secara langsung di:

/taxtello/gerakan-beta

Cipta komposisi baharu di samping komposisi sedia ada.

Pastikan komposisi sedia ada berfungsi.

Susun kerja baharu dengan kemas.

Lebih suka primitif yang boleh diguna semula untuk:

• permukaan kamera
• bingkai produk
• peralihan bertopeng
• teks mendedahkan
• Rantau UI mendedahkan
• pencahayaan ambien
• peralihan elemen kongsi

Elakkan satu komponen 1,500 baris.

Gunakan animasi Remotion deterministik yang didorong oleh bingkai/masa.

Tiada setMasa tamat.
Tiada animasi bukan deterministik.

Hormati 60 fps sepanjang masa.

Gunakan interpolasi/spring/easing dengan sengaja.

──────────────────────────────────────────────
JANGAN BERHENTI SELEPAS PELAKSANAAN PERTAMA
──────────────────────────────────────────────

Ini adalah tugasan visual.

Anda MESTI menyemak output sebenar yang diberikan.

Aliran kerja yang diperlukan:

1. Periksa repositori dan jenama/produk sebenar.

2. Tulis papan cerita yang ringkas dengan:
- cap masa yang tepat
- visual utama
- logik peralihan
- salinan
- ritma emosi yang dimaksudkan

3. Laksanakannya.

4. Jalankan pemeriksaan jenis/pemeriksaan berkaitan.

5. Paparkan bingkai perwakilan pada kira-kira:
0.0 s
1.0 s
2.5 saat
4.5 saat
6.5 saat
8.5 saat
10.5 saat
12.5 saat
14.0 s
14.8 saat

6. PERIKSA IMEJ-IMEJ TERSEBUT SECARA VISUAL.

Jangan hanya mengesahkan bahawa pemaparan berjaya.

Tanya:

Adakah ini kelihatan seperti filem produk peringkat Apple?

Adakah apa-apa yang kelihatan seperti templat?

Adakah terdapat terlalu banyak di skrin?

Adakah produk itu boleh dibaca?

Adakah peralihan berkait secara logik?

Adakah emas Taxtello terasa premium?

Adakah setiap bingkai kelihatan tenang?

7. Betulkan kelemahan penglihatan.

8. Paparkan keseluruhan filem.

9. Periksa berbilang bingkai yang dinyahkod tepat daripada MP4 akhir, bukan sahaja pelayar
tangkapan skrin.

10. Ulangi lagi jika perlu.

Jangan isytiharkan kejayaan kerana kod tersebut dikompilasi.

Hasil kerjanya ialah FILEM.

──────────────────────────────────────────────
BAR BERKUALITI
──────────────────────────────────────────────

Tolak keputusan anda sendiri jika ia terasa seperti:

• templat SaaS
• animasi PowerPoint
• rakaman skrin laman web
• demo Remotion generik
• iklan kripto
• templat promosi yang dijana AI
• lima tangkapan skrin yang meluncur di sekeliling
• salinan pemasaran yang berlebihan

Setiap bingkai penting harus cukup baik untuk digunakan sebagai iklan pegun.

Saya lebih suka:

3 momen visual yang luar biasa

daripada

10 animasi cereka yang biasa-biasa sahaja.

──────────────────────────────────────────────
KESELURUHAN AKHIR
──────────────────────────────────────────────

Sediakan:

1. Papan cerita akhir
2. Sumber komposisi Remotion Baharu
3. MP4 akhir 1920×1080 / 60fps
4. Poster/bingkai akhir
5. Helaian kenalan dengan bingkai perwakilan daripada filem
6. Masa jalan yang tepat
7. Senarai aset/skrin Taxtello sebenar yang digunakan
8. Penjelasan ringkas tentang bahasa gerakan
9. Sebarang kompromi visual yang tinggal
10. Perintah untuk menghasilkan semula render

Simpan output dalam direktori yang dinamakan dengan jelas seperti:

/taxtello/beta-motion/keluar/showreel-15/

Jangan sebarkan apa-apa.
Jangan ubah suai data pengeluaran.
Jangan gabungkan apa-apa.

Lakukan segala-galanya secara kreatif, tetapi amalkan kawalan diri yang kejam.

Buat Taxtello nampak mahal.

You are the senior motion designer, product designer and Remotion engineer for Taxtello.

Your task is to create a genuinely premium, Apple-level product film for Taxtello.

This is NOT a generic SaaS explainer.
This is NOT a feature walkthrough.
This is NOT a startup template animation.

I want a maximum 15-second brand/product showreel that makes Taxtello look like a mature, expensive, beautifully designed financial product.

Think:

Apple product launch film
× premium fintech
× editorial motion design
× restrained Stripe-like product presentation
× Taxtello's own visual identity

The desired reaction is:

“Wait, this is a German bookkeeping app?”

The film should feel expensive.

────────────────────────────────────
REPO / SOURCE OF TRUTH
────────────────────────────────────

First inspect the real repositories before designing anything.

Main product:
  /taxtello/main

Existing Remotion project:
  /taxtello/beta-motion

Important real brand sources:

  /taxtello/main/public/css/app/_00-tokens.css
  /taxtello/main/docs/design/TOKENS.md
  /taxtello/main/public/taxtello-wordmark.png
  /taxtello/main/public/icons.svg

Existing current product screenshots can be found under:

  /taxtello/main/artifacts/smoke-ui-smoke/

Prefer the newest valid screenshots/current source over stale artifacts.

There is already an existing 24-second Remotion hero animation in
/taxtello/beta-motion.

DO NOT replace it.
DO NOT regress it.
DO NOT force its current AI-connections storyline into this new film.

Create a new independent composition for this task, e.g.

  TaxtelloShowreel15

You may reuse good infrastructure, fonts, rendering utilities, motion primitives,
easing curves, asset loading and QA infrastructure from beta-motion where useful.

But creatively this should be a new film.

Before implementation, inspect the actual Taxtello UI and understand the product.

Do not invent functionality that does not exist.

────────────────────────────────────
REAL TAXTELLO VISUAL LANGUAGE
────────────────────────────────────

Use the real design system.

Core palette:

Background:
  #0c0f1a

Elevated surfaces:
  #111525
  #131722
  #1a2032

Primary brand gold:
  #e8b84b

Gold highlight:
  #f5d07a

Gold depth:
  #9b6d18

Primary text:
  #e8eaf2

Strong warm white:
  #f6f4eb

Secondary text:
  #8b93b5

Positive:
  #34d399

Negative/error only where semantically necessary:
  #f87171

Typography:
  Plus Jakarta Sans

Numbers / financial values where appropriate:
  JetBrains Mono

Use the actual Taxtello wordmark and/or Taxtello mark.
Do not redraw or approximate the logo.

Taxtello's gold should feel like a precious accent, not a yellow UI flood.

Think:
dark metal
warm gold
glass
ink
precision
quiet confidence

NOT:
cyberpunk
crypto
neon
gaming
generic AI purple
rainbow gradients

────────────────────────────────────
CORE CREATIVE RULES
────────────────────────────────────

Follow these rules ruthlessly:

1. ONE SHOT = ONE IDEA.

2. Every scene needs room to breathe.

3. The product UI is the hero.

4. Do not plaster explanatory copy everywhere.

5. Do not use hard cuts unless there is a deliberate reason.

6. Prefer object-driven transitions:
   a card becomes the next card,
   a chart line becomes a connector,
   a receipt becomes a booking,
   a number becomes another interface element,
   the camera moves through the product.

7. Use premium easing.
   No linear movement.

8. Motion should overlap naturally.
   Elements should not all start and stop at exactly the same frame.

9. Use depth sparingly:
   perspective,
   soft parallax,
   scale,
   foreground/background separation,
   controlled depth of field if achievable.

10. NO effect exists simply because it looks cool.

11. No particle spam.

12. No fake glassmorphism everywhere.

13. No excessive blur.

14. No pointless 3D spinning cards.

15. No constant zooming.

16. No 20 different animation styles.

17. No bouncing UI.

18. No giant marketing paragraph.

19. Do not imitate a particular Apple commercial shot-for-shot.
    Capture the philosophy and production quality instead.

The visual confidence should come from restraint.

────────────────────────────────────
FORMAT
────────────────────────────────────

Primary master:

1920 × 1080
60 fps
16:9
H.264
maximum duration: 15.0 seconds

Target runtime:
approximately 14.0–15.0 seconds.

It must work as a social-media product reveal even without sound.

If practical AFTER the master is finished, also create a deliberately recomposed
vertical/social variant.

Do not merely crop the desktop composition.

But the desktop master is the priority.

────────────────────────────────────
STORY / EMOTIONAL ARC
────────────────────────────────────

Do not make this a list of five features.

It should feel like one continuous thought:

CHAOS → CONTROL → CLARITY → TAXTELLO

The first 1.5 seconds must already look premium.

The first meaningful product moment should happen by ~2 seconds.

No five-second logo intro.

Possible narrative direction:

“Everything about your business, finally in one place.”

But SHOW this instead of explaining it.

I want approximately four visual ideas across the whole film.

Use the strongest REAL Taxtello surfaces you find in the repository.

Strong candidates include:

• Finanzcockpit / Dashboard
• Rechnungen
• Belege
• Bank / matching
• Steuergesundheit / tax overview

You do NOT need to show all of them.

Choose the visually strongest combination.

────────────────────────────────────
SUGGESTED 15-SECOND STORYBOARD
────────────────────────────────────

Treat this as a strong starting point, not a rigid template.

0.00 – 1.20

BLACK / NAVY.

A tiny warm-gold glint appears.

The glint elegantly reveals either the Taxtello mark or a fragment of the
wordmark.

No generic logo fade.

Think machined precision.

The camera moves through or past the mark and the UI begins to emerge from it.

Very little or no copy.

─────────────────

1.20 – 4.40

FINANCIAL CONTROL.

Reveal the actual Taxtello Cockpit as a dimensional product surface.

Not just a screenshot placed on screen.

Reconstruct/crop/layer it so individual interface regions can animate.

The hero financial number resolves crisply.
The chart draws in.
Supporting metrics settle slightly later.

Use subtle stagger.

A single line of copy may appear, for example:

  “Alles im Blick.”

or another equally short German phrase if you find something more fitting.

Maximum ~3–4 words.

The interface must remain recognizable as the real product.

─────────────────

4.40 – 7.50

DOCUMENT / BOOKKEEPING TRANSFORMATION.

Use a visual object from the previous scene as the transition.

Example:

A gold chart point expands into the corner of a receipt/card.
The camera follows it.
A receipt/document enters.
Taxtello identifies or organizes it.
The document snaps elegantly into its corresponding booking / financial record.

Use magnetic alignment and precision.

No cheesy scanner laser.

No floating paper tornado.

Possible micro-copy:

  “Belege. Erledigt.”

Only if it improves the scene.

─────────────────

7.50 – 10.70

MONEY / INVOICES.

Morph or transition naturally into the real Rechnungen interface.

Use one strong moment:

an invoice status changes,
a payment resolves,
an amount moves into place,
or the overview assembles itself.

Numbers should feel tactile and precise.

Use JetBrains Mono where this matches the actual product.

Gold highlights the active state.

Green is used only for a genuinely positive semantic state.

Potential copy:

  “Geld. Im Griff.”

Again: optional and extremely short.

─────────────────

10.70 – 12.80

TAX / CLARITY.

Transition into the real Taxtello tax-health / financial guidance surface.

Do not claim that Taxtello magically guarantees correct taxes.

Communicate visibility and control.

Example:

multiple noisy signals collapse into one calm, structured tax overview.

Potential copy:

  “Steuern im Blick.”

This scene should feel calmer than the previous scene.

The rhythm briefly slows.

─────────────────

12.80 – 15.00

BRAND PAYOFF.

Pull the camera outward.

The UI compresses or folds into one beautiful Taxtello product object / surface.

Darkness returns around it.

The gold Taxtello wordmark resolves.

One short brand line underneath.

Explore strong final lines such as:

  “Dein Business. Klar.”

  “Buchhaltung. Unter Kontrolle.”

  “Einfach mehr Überblick.”

  “Alles fürs Business. An einem Ort.”

Choose based on the actual product positioning you find in the repo.

Do not use a line simply because I suggested it.

The final frame must have enough stillness to register.

End confidently.

No giant bouncing CTA.

────────────────────────────────────
TRANSITIONS
────────────────────────────────────

This is one of the most important parts.

I want transitions that make the viewer think:

“Of course the next scene came from that.”

Good:

chart line → document edge
gold pill → invoice button
financial number → amount in invoice
card edge → next surface
camera push through interface element
shared geometry
mask reveal using actual product shapes

Bad:

crossfade
random wipe
spin transition
glitch
whip-pan every two seconds
generic SaaS slide-left
zoom-blur spam

Direct cuts are allowed only when a deliberate rhythmic impact benefits the film.

────────────────────────────────────
MOTION
────────────────────────────────────

Motion needs weight.

Use curves comparable to:

cubic-bezier(0.16, 1, 0.3, 1)

where appropriate.

Different elements should have subtly different arrival times.

Prefer:

anticipation
overshoot below ~2%
settling
motion continuation
shared velocity between scenes

Avoid cartoon springiness.

Camera movement should feel like a high-end macro product shoot.

Imagine we are filming a physical premium object even though it is software.

────────────────────────────────────
LIGHTING / MATERIAL
────────────────────────────────────

Use extremely subtle environmental lighting.

Possible treatments:

• soft gold rim lighting
• dark navy falloff
• faint ambient bloom
• soft specular highlight passing across a surface
• restrained vignette
• subtle grain if it materially helps

Keep the interface crisp.

Do NOT blur the product just to look cinematic.

No fake glossy reflections that destroy legibility.

────────────────────────────────────
TYPOGRAPHY
────────────────────────────────────

Use very little copy.

No sentence should compete with the product.

Headlines should generally fit on one line.

Use Plus Jakarta Sans.

Strong typography may occasionally scale very large and become a transition
device itself.

Avoid generic motion-graphics behavior where every word animates independently.

Typography should move as designed objects.

────────────────────────────────────
SOUND / RHYTHM
────────────────────────────────────

Design the motion as if it were cut to approximately 115–120 BPM:
premium, kinetic, sophisticated, not frantic.

Important moments should land musically.

Suggested sound language:

• low soft impact for major reveal
• restrained tactile UI clicks
• subtle metallic/glass tonal tick
• soft low-frequency movement during camera transitions
• elegant resolved tone at the logo payoff

Avoid:

• huge cinematic trailer boom
• EDM risers
• loud whooshes everywhere
• stock “tech interface” sounds
• rap beat
• aggressive bass

If there is no legally safe music/audio asset in the project, DO NOT pull
copyrighted audio from the internet.

Deliver the visual master without copyrighted music and create a concise cue
sheet describing where music/SFX should hit.

If suitable safe/local audio exists, use it.

────────────────────────────────────
REAL PRODUCT ONLY
────────────────────────────────────

This is critical.

Inspect current main.

Do not invent screens.

Do not invent metrics that imply real customer data.

Use clearly synthetic/demo-safe values if required.

Do not accidentally expose any personal, test-user or production information.

Reuse the visual structure of the actual Taxtello UI.

If a screen needs to be motion-separated, recreate it faithfully in React from
the real design system instead of simply scaling a giant screenshot.

The result should still look unmistakably like Taxtello.

────────────────────────────────────
IMPLEMENTATION EXPECTATIONS
────────────────────────────────────

Work directly in:

  /taxtello/beta-motion

Create the new composition alongside the existing one.

Keep existing compositions working.

Structure the new work cleanly.

Prefer reusable primitives for:

• camera surface
• product frame
• masked transitions
• text reveals
• UI region reveals
• ambient lighting
• shared-element transitions

Avoid one 1,500-line component.

Use deterministic Remotion animation driven by frame/time.

No setTimeout.
No nondeterministic animations.

Respect 60 fps throughout.

Use interpolation/spring/easing deliberately.

────────────────────────────────────
DO NOT STOP AFTER FIRST IMPLEMENTATION
────────────────────────────────────

This is a visual task.

You MUST review the actual rendered output.

Required workflow:

1. Inspect repository and real brand/product.

2. Write a concise storyboard with:
   - exact timestamps
   - key visual
   - transition logic
   - copy
   - intended emotional rhythm

3. Implement it.

4. Run typecheck / relevant checks.

5. Render representative frames at roughly:
   0.0 s
   1.0 s
   2.5 s
   4.5 s
   6.5 s
   8.5 s
   10.5 s
   12.5 s
   14.0 s
   14.8 s

6. VISUALLY INSPECT THOSE IMAGES.

Do not merely confirm that rendering succeeded.

Ask:

Does this look like an Apple-tier product film?

Does anything look like a template?

Is there too much on screen?

Is the product legible?

Are transitions logically connected?

Does Taxtello gold feel premium?

Does every frame look composed?

7. Fix visual weaknesses.

8. Render the complete film.

9. Inspect multiple exact decoded frames from the final MP4, not only browser
   screenshots.

10. Iterate again if necessary.

Do not declare success because the code compiles.

The deliverable is the FILM.

────────────────────────────────────
QUALITY BAR
────────────────────────────────────

Reject your own result if it feels like:

• a SaaS template
• a PowerPoint animation
• a website screen recording
• a generic Remotion demo
• a crypto advertisement
• an AI-generated promo template
• five screenshots sliding around
• excessive marketing copy

Every important frame should be good enough to use as a still advertisement.

I would rather have:

3 extraordinary visual moments

than

10 mediocre feature animations.

────────────────────────────────────
FINAL DELIVERABLES
────────────────────────────────────

Provide:

1. Final storyboard
2. New Remotion composition source
3. 1920×1080 / 60fps final MP4
4. Poster/final frame
5. Contact sheet with representative frames from the film
6. Exact runtime
7. List of real Taxtello assets/screens used
8. Brief explanation of the motion language
9. Any remaining visual compromises
10. Commands to reproduce the render

Save outputs in a clearly named directory such as:

  /taxtello/beta-motion/out/showreel-15/

Do not deploy anything.
Do not modify production data.
Do not merge anything.

Go all out creatively, but exercise ruthless restraint.

Make Taxtello look expensive.

Gesaan diambil daripada pos @daniel_haida.