Menyiapkan: Film aplikasi pembukuan Taxtello

Anda adalah desainer gerak senior, desainer produk, dan insinyur Remotion untuk Taxtello.

Tugas Anda adalah membuat film produk yang benar-benar premium, setara dengan kualitas Apple, untuk Taxtello.

Ini BUKAN penjelasan umum tentang SaaS.
Ini BUKAN panduan fitur.
Ini BUKAN animasi template startup.

Saya menginginkan sebuah video promosi merek/produk berdurasi maksimal 15 detik yang membuat Taxtello terlihat seperti produk keuangan yang matang, mahal, dan berdesain indah.

Memikirkan:

Film peluncuran produk Apple
× fintech premium
× desain gerak editorial
× Presentasi produk yang terkendali ala Stripe
× Identitas visual Taxtello sendiri

Reaksi yang diinginkan adalah:

“Tunggu, ini aplikasi pembukuan dari Jerman?”

Film tersebut harus terasa mahal.

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

Periksa terlebih dahulu repositori sebenarnya sebelum merancang apa pun.

Produk utama:
/taxtello/utama

Proyek Remotion yang sedang berjalan:
/taxtello/beta-motion

Sumber merek asli yang penting:

/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

Screenshot produk terkini yang ada dapat ditemukan di:

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

Utamakan tangkapan layar/sumber terbaru yang valid daripada artefak usang.

Sudah ada animasi hero Remotion berdurasi 24 detik yang ada di
/taxtello/beta-motion.

JANGAN diganti.
JANGAN memundurkannya.
JANGAN memaksakan alur cerita tentang koneksi AI yang ada saat ini ke dalam film baru ini.

Buatlah komposisi independen baru untuk tugas ini, misalnya

TaxtelloShowreel15

Anda dapat menggunakan kembali infrastruktur, font, utilitas rendering, dan primitif gerakan yang baik.
Kurva pelonggaran, pemuatan aset, dan infrastruktur QA dari beta-motion jika diperlukan.

Namun secara kreatif, ini seharusnya menjadi film baru.

Sebelum implementasi, periksa antarmuka pengguna Taxtello yang sebenarnya dan pahami produk tersebut.

Jangan menciptakan fungsi yang tidak ada.

────────────────────────────────────
BAHASA VISUAL TAXTELLO ASLI
────────────────────────────────────

Gunakan sistem desain yang sebenarnya.

Palet warna inti:

Latar belakang:
#0c0f1a

Permukaan yang ditinggikan:
#111525
#131722
#1a2032

Emas merek utama:
#e8b84b

Sorotan emas:
#f5d07a

Kedalaman emas:
#9b6d18

Teks utama:
#e8eaf2

Putih hangat yang kuat:
#f6f4eb

Teks sekunder:
#8b93b5

Positif:
#34d399

Negatif/kesalahan hanya jika secara semantik diperlukan:
#f87171

Tipografi:
Plus Jakarta Sans

Angka/nilai keuangan jika sesuai:
JetBrains Mono

Gunakan logo Taxtello yang sebenarnya dan/atau merek Taxtello.
Jangan menggambar ulang atau mendekati logo tersebut.

Warna emas Taxtello seharusnya terasa seperti aksen yang berharga, bukan banjir warna kuning pada antarmuka pengguna.

Memikirkan:
logam gelap
emas hangat
kaca
tinta
presisi
kepercayaan diri yang tenang

BUKAN:
siberpunk
kripto
neon
bermain game
AI generik berwarna ungu
gradien pelangi

────────────────────────────────────
ATURAN KREATIF INTI
────────────────────────────────────

Ikuti aturan-aturan ini tanpa kompromi:

1. SATU KALI TAYANGAN = SATU IDE.

2. Setiap adegan membutuhkan ruang untuk bernapas.

3. Antarmuka pengguna produk adalah elemen utamanya.

4. Jangan menempelkan teks penjelasan di mana-mana.

5. Jangan menggunakan potongan keras kecuali ada alasan yang disengaja.

6. Lebih memilih transisi berbasis objek:
Satu kartu menjadi kartu berikutnya,
Garis grafik menjadi penghubung,
Tanda terima menjadi bukti pemesanan,
Angka tersebut menjadi elemen antarmuka lainnya,
Kamera bergerak menembus produk tersebut.

7. Gunakan premium easing.
Tidak ada pergerakan linier.

8. Gerakan harus tumpang tindih secara alami.
Elemen-elemen tersebut tidak boleh semuanya dimulai dan berakhir tepat pada bingkai yang sama.

9. Gunakan kedalaman dengan hemat:
perspektif,
paralaks lembut,
skala,
pemisahan latar depan/latar belakang,
Kedalaman bidang fokus yang terkontrol jika memungkinkan.

10. Tidak ada efek yang ada hanya karena terlihat keren.

11. Tidak ada spam partikel.

12. Tidak ada glassmorphism palsu di mana-mana.

13. Tidak ada pengaburan yang berlebihan.

14. Tidak ada kartu putar 3D yang tidak berguna.

15. Tidak perlu melakukan zoom terus-menerus.

16. Tidak ada 20 gaya animasi yang berbeda.

17. Tidak ada UI yang memantul.

18. Tidak ada paragraf pemasaran yang panjang lebar.

19. Jangan meniru iklan Apple tertentu secara persis.
Yang terpenting, fokuslah pada filosofi dan kualitas produksinya.

Kepercayaan diri visual harus berasal dari pengendalian diri.

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

Guru utama:

1920 × 1080
60 fps
16:9
H.264
durasi maksimum: 15,0 detik

Waktu eksekusi target:
sekitar 14,0–15,0 detik.

Produk ini harus tetap berfungsi sebagai pengumuman di media sosial meskipun tanpa suara.

Jika memungkinkan, SETELAH karya utama selesai, buat juga karya yang disusun ulang secara sengaja.
varian vertikal/sosial.

Jangan hanya memotong komposisi desktop.

Namun, master desktop adalah prioritas utama.

────────────────────────────────────
ALUR CERITA / PERKEMBANGAN EMOSIONAL
────────────────────────────────────

Jangan jadikan ini daftar lima fitur.

Seharusnya terasa seperti satu pemikiran yang berkelanjutan:

KEKACAUAN → KONTROL → KEJELASAN → TAXTELLO

1,5 detik pertama harus sudah terlihat premium.

Momen produk yang bermakna pertama seharusnya terjadi dalam waktu sekitar 2 detik.

Tidak ada intro logo lima detik.

Kemungkinan arah narasi:

“Segala hal tentang bisnis Anda, akhirnya dalam satu tempat.”

Namun, TUNJUKKAN hal ini, bukan hanya menjelaskannya.

Saya menginginkan kurang lebih empat ide visual yang贯穿 keseluruhan film.

Gunakan permukaan Taxtello ASLI terkuat yang Anda temukan di repositori.

Kandidat yang kuat meliputi:

• Finanzcockpit / Dasbor
• Faktur
• Belege
• Bank / pencocokan
• Steuergesundheit / ikhtisar pajak

Anda TIDAK perlu menunjukkan semuanya.

Pilih kombinasi yang paling menarik secara visual.

────────────────────────────────────
CONTOH STORYBOARD 15 DETIK
────────────────────────────────────

Anggap ini sebagai titik awal yang kuat, bukan sebagai templat yang kaku.

0,00 – 1,20

HITAM / BIRU TUA.

Muncul kilauan keemasan hangat yang sangat kecil.

Kilauan itu dengan elegan memperlihatkan tanda Taxtello atau fragmen darinya.
logo kata.

Tidak ada efek pudar logo generik.

Bayangkan ketelitian yang dihasilkan mesin.

Kamera bergerak melewati atau menembus tanda tersebut dan antarmuka pengguna mulai muncul darinya.

Salinannya sangat sedikit atau bahkan tidak ada sama sekali.

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

1.20 – 4.40

KONTROL KEUANGAN.

Ungkapkan kokpit Taxtello yang sebenarnya sebagai permukaan produk dimensional.

Bukan sekadar tangkapan layar yang diletakkan di layar.

Rekonstruksi/potong/lapisi agar setiap wilayah antarmuka dapat beranimasi.

Angka keuangan sang pahlawan terselesaikan dengan jelas.
Grafik tersebut menarik ke dalam.
Metrik pendukung akan stabil sedikit lebih lambat.

Gunakan penataan yang sedikit berbeda.

Contohnya, satu baris teks dapat muncul:

“Alles im Blick.”

atau frasa bahasa Jerman pendek lainnya jika Anda menemukan sesuatu yang lebih sesuai.

Maksimal ~3–4 kata.

Antarmuka harus tetap mudah dikenali sebagai produk aslinya.

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

4.40 – 7.50

TRANSFORMASI DOKUMEN / PEMBUKUAN.

Gunakan objek visual dari adegan sebelumnya sebagai transisi.

Contoh:

Titik grafik berwarna emas meluas ke sudut struk/kartu.
Kamera mengikutinya.
Sebuah tanda terima/dokumen masuk.
Taxtello mengidentifikasi atau mengorganisirnya.
Dokumen tersebut terpasang dengan rapi ke dalam catatan pemesanan/keuangan yang sesuai.

Gunakan penyelarasan dan presisi magnetik.

Tidak ada pemindai laser murahan.

Tidak ada tornado kertas yang melayang.

Kemungkinan salinan mikro:

“Belege. Erledigt.”

Hanya jika hal itu memperbaiki suasana.

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

7,50 – 10,70

UANG / FAKTUR.

Berubah bentuk atau bertransisi secara alami menjadi antarmuka Rechnungen yang sebenarnya.

Manfaatkan satu momen yang kuat:

Status faktur berubah,
Pembayaran diselesaikan,
sejumlah uang bergeser ke tempatnya,
atau gambaran umum tersebut terbentuk dengan sendirinya.

Angka-angka harus terasa nyata dan tepat.

Gunakan JetBrains Mono jika sesuai dengan produk sebenarnya.

Warna emas menyoroti kondisi aktif.

Warna hijau hanya digunakan untuk keadaan semantik yang benar-benar positif.

Contoh teks:

“Geld. Im Griff.”

Sekali lagi: opsional dan sangat singkat.

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

10,70 – 12,80

PAJAK / KEJELASAN.

Beralih ke antarmuka panduan kesehatan pajak/keuangan Taxtello yang sebenarnya.

Jangan mengklaim bahwa Taxtello secara ajaib menjamin pajak yang benar.

Komunikasikan visibilitas dan kontrol.

Contoh:

Berbagai sinyal yang berisik menyatu menjadi satu gambaran umum pajak yang tenang dan terstruktur.

Contoh teks:

“Steuern im Blick.”

Adegan ini seharusnya terasa lebih tenang daripada adegan sebelumnya.

Ritmenya melambat sesaat.

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

12.80 – 15.00

KEUNTUNGAN MEREK.

Tarik kamera ke luar.

UI tersebut terkompresi atau terlipat menjadi satu objek/permukaan produk Taxtello yang indah.

Kegelapan kembali menyelimutinya.

Logo Taxtello berwarna emas tersebut tampak jelas.

Satu baris merek singkat di bawahnya.

Jelajahi kalimat penutup yang kuat seperti:

“Urusanmu. Jelas.”

"Buchhaltung. Di Bawah Kendali."

“Einfach mehr Überblick.”

"Alles fürs Business. An einem Ort."

Pilih berdasarkan posisi produk sebenarnya yang Anda temukan di repositori.

Jangan menggunakan kalimat tersebut hanya karena saya menyarankan.

Gambar terakhir harus cukup tenang agar bisa terekam.

Akhiri dengan percaya diri.

Tidak ada tombol ajakan bertindak (CTA) yang besar dan bergoyang-goyang.

────────────────────────────────────
TRANSISI
────────────────────────────────────

Ini adalah salah satu bagian terpenting.

Saya menginginkan transisi yang membuat penonton berpikir:

“Tentu saja adegan selanjutnya berasal dari situ.”

Bagus:

garis grafik → tepi dokumen
pil emas → tombol faktur
nomor keuangan → jumlah dalam faktur
tepi kartu → permukaan berikutnya
kamera menembus elemen antarmuka
geometri bersama
Pengungkapan topeng menggunakan bentuk produk sebenarnya

Buruk:

transisi
penghapusan acak
transisi putaran
kesalahan
kocok wajan setiap dua detik
SaaS generik (geser ke kiri)
spam zoom-blur

Pengeditan langsung hanya diperbolehkan jika dampak ritmis yang disengaja bermanfaat bagi film tersebut.

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

Gerakan membutuhkan bobot.

Gunakan kurva yang sebanding dengan:

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

bila sesuai.

Elemen yang berbeda seharusnya memiliki waktu kedatangan yang sedikit berbeda.

Lebih menyukai:

antisipasi
melampaui batas di bawah ~2%
penyelesaian
kelanjutan mosi
kecepatan yang sama antar adegan

Hindari kelenturan seperti kartun.

Pergerakan kamera harus terasa seperti pemotretan produk makro kelas atas.

Bayangkan kita sedang merekam sebuah objek fisik premium meskipun objek tersebut berupa perangkat lunak.

────────────────────────────────────
PENCAHAYAAN / MATERIAL
────────────────────────────────────

Gunakan pencahayaan lingkungan yang sangat halus.

Kemungkinan pengobatan:

• pencahayaan tepi emas lembut
• warna biru tua pudar
• cahaya ambient yang samar
• pantulan cahaya lembut yang melewati permukaan
• cuplikan yang terkendali
• butiran halus jika itu membantu secara material

Jaga agar antarmuka tetap rapi.

JANGAN mengaburkan produk hanya untuk terlihat seperti film.

Tidak ada pantulan mengkilap palsu yang merusak keterbacaan.

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

Gunakan teks sesedikit mungkin.

Tidak ada kalimat yang boleh bersaing dengan produk.

Judul berita umumnya harus muat dalam satu baris.

Gunakan Plus Jakarta Sans.

Tipografi yang kuat terkadang dapat diperbesar hingga sangat besar dan menjadi transisi.
perangkat itu sendiri.

Hindari perilaku motion graphics generik di mana setiap kata beranimasi secara independen.

Tipografi harus bergerak seperti objek yang dirancang.

────────────────────────────────────
SUARA / RITME
────────────────────────────────────

Rancang gerakan tersebut seolah-olah kecepatannya dikurangi menjadi sekitar 115–120 BPM:
Premium, dinamis, canggih, tidak terburu-buru.

Momen-momen penting harus disampaikan dengan musik yang tepat.

Bahasa suara yang disarankan:

• dampak lembut rendah untuk pengungkapan utama
• Klik UI taktil yang terkendali
• bunyi denting metalik/kaca yang halus
• Gerakan frekuensi rendah yang lembut selama transisi kamera
• Nada yang elegan dan terstruktur pada bagian akhir logo

Menghindari:

• ledakan besar trailer film
• Panggung EDM
• suara desisan keras di mana-mana
• suara "antarmuka teknologi" standar
• irama rap
• bass agresif

Jika tidak ada aset musik/audio yang aman secara hukum dalam proyek tersebut, JANGAN mengambilnya.
Audio berhak cipta dari internet.

Sajikan master visual tanpa musik berhak cipta dan buat isyarat yang ringkas.
Lembar yang menjelaskan di mana musik/efek suara harus ditempatkan.

Jika tersedia audio lokal/aman yang sesuai, gunakanlah.

────────────────────────────────────
HANYA PRODUK ASLI
────────────────────────────────────

Ini sangat penting.

Periksa arus utama saat ini.

Jangan mengarang layar.

Jangan mengarang metrik yang menyiratkan data pelanggan yang sebenarnya.

Gunakan nilai sintetis/demo yang jelas aman jika diperlukan.

Jangan sampai secara tidak sengaja membocorkan informasi pribadi, informasi pengguna uji, atau informasi produksi apa pun.

Gunakan kembali struktur visual dari UI Taxtello yang sebenarnya.

Jika layar perlu dipisahkan berdasarkan gerakan, buat ulang dengan tepat di React dari
Sistem desain yang sebenarnya, bukan sekadar memperbesar tangkapan layar raksasa.

Hasilnya tetap harus terlihat jelas sebagai Taxtello.

────────────────────────────────────
HARAPAN IMPLEMENTASI
────────────────────────────────────

Bekerja langsung di:

/taxtello/beta-motion

Buat komposisi baru di samping komposisi yang sudah ada.

Pertahankan agar komposisi yang ada tetap berfungsi.

Susun karya baru tersebut dengan rapi.

Utamakan penggunaan kembali elemen dasar untuk:

• permukaan kamera
• bingkai produk
• transisi bertopeng
• teks mengungkapkan
• Wilayah UI mengungkapkan
• pencahayaan sekitar
• transisi elemen bersama

Hindari satu komponen dengan 1.500 baris kode.

Gunakan animasi Remotion deterministik yang digerakkan oleh bingkai/waktu.

Tidak ada setTimeout.
Tidak ada animasi nondeterministik.

Pertahankan 60 fps secara keseluruhan.

Gunakan interpolasi/spring/easing dengan sengaja.

────────────────────────────────────
JANGAN BERHENTI SETELAH IMPLEMENTASI PERTAMA
────────────────────────────────────

Ini adalah tugas visual.

Anda WAJIB meninjau hasil akhir yang telah di-render.

Alur kerja yang dibutuhkan:

1. Periksa repositori dan merek/produk asli.

2. Tulis storyboard yang ringkas dengan:
- cap waktu yang tepat
- visual utama
- logika transisi
- salin
- ritme emosional yang dimaksudkan

3. Terapkan.

4. Jalankan pemeriksaan tipe/pemeriksaan terkait.

5. Render frame representatif pada kira-kira:
0,0 detik
1,0 detik
2,5 detik
4,5 detik
6,5 detik
8,5 detik
10,5 detik
12,5 detik
14,0 detik
14,8 detik

6. PERIKSA GAMBAR-GAMBAR TERSEBUT SECARA VISUAL.

Jangan hanya sekadar memastikan bahwa proses rendering berhasil.

Bertanya:

Apakah ini terlihat seperti film produk sekelas Apple?

Apakah ada yang terlihat seperti templat?

Apakah terlalu banyak yang ditampilkan di layar?

Apakah produk tersebut mudah dibaca?

Apakah transisi-transisi tersebut terhubung secara logis?

Apakah emas Taxtello terasa premium?

Apakah setiap frame terlihat tertata dengan baik?

7. Perbaiki kelemahan visual.

8. Render film secara keseluruhan.

9. Periksa beberapa frame yang telah didekode secara tepat dari MP4 akhir, bukan hanya dari browser.
tangkapan layar.

10. Ulangi lagi jika perlu.

Jangan nyatakan sukses hanya karena kode berhasil dikompilasi.

Hasil yang diharapkan adalah FILM.

────────────────────────────────────
BAR KUALITAS
────────────────────────────────────

Tolak hasil Anda sendiri jika terasa seperti:

• sebuah template SaaS
• animasi PowerPoint
• rekaman layar situs web
• Demo Remotion umum
• iklan kripto
• Templat promosi yang dihasilkan oleh AI
• lima tangkapan layar yang bergeser-geser
• Teks pemasaran yang berlebihan

Setiap adegan penting harus cukup bagus untuk digunakan sebagai iklan statis.

Saya lebih memilih:

3 momen visual luar biasa

dibandingkan

10 film animasi fitur yang biasa-biasa saja.

────────────────────────────────────
HASIL AKHIR YANG DIHARAPKAN
────────────────────────────────────

Menyediakan:

1. Papan cerita akhir
2. Sumber komposisi Remotion Baru
3. 1920×1080 / 60fps MP4 final
4. Poster/bingkai akhir
5. Lembar kontak dengan bingkai representatif dari film
6. Waktu eksekusi yang tepat
7. Daftar aset/layar Taxtello asli yang digunakan
8. Penjelasan singkat mengenai bahasa mosi
9. Kompromi visual yang masih ada
10. Perintah untuk mereproduksi render

Simpan hasil keluaran di direktori yang diberi nama dengan jelas, misalnya:

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

Jangan sebarkan apa pun.
Jangan mengubah data produksi.
Jangan menggabungkan apa pun.

Berkreasilah sepuasnya, tetapi tetaplah terkendali tanpa kompromi.

Buat Taxtello terlihat 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.

Petunjuk diambil dari pos @daniel_haida.