Film aplikasi pembukuan Taxtello

Panjenengan minangka desainer gerakan senior, desainer produk, lan insinyur Remotion kanggo Taxtello.

Tugasmu yaiku nggawe film produk tingkat Apple sing pancen premium kanggo Taxtello.

Iki DUDU panjelasan SaaS umum.
Iki DUDU pandhuan fitur.
Iki DUDU animasi cithakan startup.

Aku pengin showreel merek/produk maksimal 15 detik sing ndadekake Taxtello katon kaya produk keuangan sing wis dewasa, larang, lan dirancang kanthi apik.

Mikir:

Film peluncuran produk Apple
× fintech premium
× desain gerakan editorial
× presentasi produk kaya Stripe sing dikurung
× Identitas visual Taxtello dhewe

Reaksi sing dikarepake yaiku:

"Enteni, iki aplikasi pembukuan Jerman?"

Film kasebut kudune krasa larang.

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

Priksa dhisik gudang sing asli sadurunge ngrancang apa-apa.

Produk utama:
/taxtello/utama

Proyek Remotion sing wis ana:
/taxtello/beta-motion

Sumber merek nyata sing 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

Gambaran layar produk sing wis ana bisa dideleng ing ngisor iki:

/taxtello/utama/artifak/ui-kumelun-kumelun/

Luwih seneng gambar layar/sumber sing paling anyar lan valid tinimbang artefak sing wis lawas.

Wis ana animasi pahlawan Remotion 24 detik ing
/taxtello/beta-motion.

AJA diganti.
AJA mundur.
AJA meksa alur crita koneksi AI saiki dilebokake ing film anyar iki.

Gawe komposisi independen anyar kanggo tugas iki, contone

TaxtelloShowreel15

Sampeyan bisa nggunakake maneh infrastruktur, font, utilitas rendering, primitif gerakan sing apik,
nggampangake kurva, pemuatan aset, lan infrastruktur QA saka beta-motion yen migunani.

Nanging kanthi kreatif iki kudune dadi film anyar.

Sadurunge implementasi, priksani UI Taxtello sing asli lan pahami produke.

Aja ngarang fungsi sing ora ana.

────────────────────────────────────────────────
Basa Visual Taxtello Nyata
────────────────────────────────────────────────

Gunakake sistem desain sing nyata.

Palet inti:

Latar mburi:
#0c0f1a

Permukaan sing dhuwur:
#111525
#131722
#1a2032

Merek emas utama:
#e8b84b

Sorotan emas:
#f5d07a

Ambane emas:
#9b6d18

Teks utama:
#e8eaf2

Putih anget sing kuwat:
#f6f4eb

Teks sekunder:
#8b93b5

Positif:
#34d399

Negatif/kesalahan mung yen perlu sacara semantik:
#f87171

Tipografi:
Plus Jakarta Sans

Angka / nilai finansial yen cocog:
JetBrains Mono

Gunakna tandha tembung lan/utawa tandha Taxtello sing asli.
Aja nggambar maneh utawa ngremehake logo kasebut.

Emas Taxtello kudune krasa kaya aksen sing larang regane, dudu UI sing kebanjiran warna kuning.

Mikir:
logam peteng
emas anget
kaca
tinta
presisi
kapercayan sing sepi

ORA:
cyberpunk
kripto
neon
dolanan game
AI umum ungu
gradien pelangi

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

Tindakake aturan iki kanthi tanpa pamrih:

1. SIJI TEMBAKAN = SIJI IDE.

2. Saben adegan butuh papan kanggo ambegan.

3. UI produk iku pahlawane.

4. Aja masang salinan panjelasan ing endi-endi.

5. Aja nggunakake potongan atos kajaba ana alesan sing disengaja.

6. Luwih seneng transisi sing didorong obyek:
kertu dadi kertu sabanjure,
garis grafik dadi konektor,
kuitansi dadi pesenan,
nomer dadi elemen antarmuka liyane,
kamera obah ngliwati produk.

7. Gunakake pelonggaran premium.
Ora ana gerakan linier.

8. Obahe kudu tumpang tindih kanthi alami.
Unsur-unsur ora kena diwiwiti lan mandheg ing pigura sing padha persis.

9. Gunakake ambane kanthi hemat:
perspektif,
paralaks alus,
skala,
pamisahan latar ngarep/latar mburi,
ambane lapangan sing dikontrol yen bisa ditindakake.

10. ORA ana efek mung amarga katon keren.

11. Ora ana spam partikel.

12. Ora ana glassmorphism palsu ing endi-endi.

13. Ora ana kabur sing kakehan.

14. Ora ana kertu puteran 3D sing ora ana gunane.

15. Ora ana zoom terus-terusan.

16. Ora ana 20 gaya animasi sing beda-beda.

17. Ora ana antarmuka panganggo sing mantul.

18. Ora ana paragraf pemasaran raksasa.

19. Aja niru iklan Apple tartamtu sing mung dideleng saka sisih liyane.
Jupuk filosofi lan kualitas produksine wae.

Kapercayan visual kudu asale saka pengendalian diri.

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

Guru utama:

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

Wektu mlaku target:
kira-kira 14,0–15,0 detik.

Iki kudu bisa digunakake minangka produk media sosial sanajan tanpa swara.

Yen praktis SAWISE master rampung, gawe uga komposisi sing sengaja digawe ulang
varian vertikal/sosial.

Aja mung motong komposisi desktop.

Nanging desktop master iku prioritas.

────────────────────────────────────────────────
CERITA / LENGKUNG EMOSI
────────────────────────────────────────────────

Aja nggawe iki dhaptar limang fitur.

Iku kudune kaya siji pikirane sing terus-terusan:

KAOS → KONTROL → KAJERAHAN → TAXTELLO

1,5 detik pisanan kudune wis katon premium.

Momen produk pisanan sing penting kudune kedadeyan udakara 2 detik.

Ora ana introduksi logo limang detik.

Arah narasi sing bisa ditindakake:

"Kabeh babagan bisnis sampeyan, pungkasane ana ing sak panggonan."

Nanging DUDUHAKE iki tinimbang nerangake.

Aku pengin kira-kira patang ide visual ing sakabèhé film.

Gunakna permukaan Taxtello ASLI sing paling kuwat sing kok temokake ing repositori.

Calon sing kuwat kalebu:

• Kokpit Finanz / Dasbor
• Rechnungen
• Belege
• Bank / cocog
• Steuergesundheit / ringkesan tax

Kowé ORA perlu nuduhaké kabèh.

Pilih kombinasi sing paling kuat sacara visual.

────────────────────────────────────────────────
STORYBOARD 15 DETIK SING DIsaranake
────────────────────────────────────────────────

Anggep iki minangka titik wiwitan sing kuwat, dudu cithakan sing kaku.

0.00 – 1.20

IREng / Biru dongker.

Kilatan cilik emas anget katon.

Kilap kasebut kanthi elegan nuduhake tandha Taxtello utawa pecahan saka
tandha tembung.

Ora ana logo umum sing luntur.

Mikir presisi mesin.

Kamera obah ngliwati utawa ngliwati tandha lan UI wiwit muncul saka tandha kasebut.

Salinan sithik banget utawa ora ana blas.

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

1.20 – 4.40

KONTROL KEUANGAN.

Mbukak Taxtello Cockpit sing sejatine minangka permukaan produk dimensional.

Ora mung gambar layar sing dipasang ing layar.

Gawe maneh/potong/lapis supaya saben wilayah antarmuka bisa dianimasikan.

Angka finansial pahlawan kasebut dirampungake kanthi cetha.
Grafik kasebut narik kawigaten.
Metrik pendukung bakal rampung rada mengko.

Gunakake gerakan sempoyongan sing alus.

Salinan siji baris bisa uga katon, contone:

"Kabeh ing Blick."

utawa ukara Jerman liyané sing padha cendhaké yèn panjenengan nemokaké sing luwih cocog.

Maksimal ~3–4 tembung.

Antarmuka kudu tetep bisa dikenali minangka produk sing nyata.

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

4.40 – 7.50

TRANSFORMASI DOKUMEN / PEMBUKUAN.

Gunakna obyek visual saka adegan sadurunge minangka transisi.

Tuladha:

Titik grafik emas ngembang menyang pojok kuitansi/kertu.
Kamerane ngetutake.
Kuitansi/dokumen mlebu.
Taxtello ngidentifikasi utawa ngatur.
Dokumen kasebut dipasang kanthi elegan ing cathetan pesenan/keuangan sing cocog.

Gunakake alignment lan presisi magnetik.

Ora ana laser pemindai sing murahan.

Ora ana tornado kertas sing ngambang.

Kemungkinan salinan mikro:

"Belege. Erledigt." (or "Belege. Erledigt.")

Mung yen bisa nambah pemandangan.

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

7.50 – 10.70

Dhuwit / FAKTUR.

Owah utawa transisi kanthi alami menyang antarmuka Rechnungen sing nyata.

Gunakake siji momen sing kuwat:

status invoice owah,
pembayaran mutusake,
jumlah pindhah menyang panggonane,
utawa ringkesan kasebut nglumpukake awake dhewe.

Angka-angka kudu krasa bisa disentuh lan tepat.

Gunakna JetBrains Mono ing ngendi iki cocog karo produk sing sabeneré.

Emas nyorot kahanan aktif.

Ijo mung digunakake kanggo kahanan semantik sing positif tenan.

Salinan potensial:

"Geld. Aku Griff."

Maneh: opsional lan cendhak banget.

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

10.70 – 12.80

PAJEK / KEJELASAN.

Transisi menyang lumahing pandhuan kesehatan pajak / keuangan Taxtello sing nyata.

Aja ngaku yen Taxtello kanthi gaib njamin pajak sing bener.

Komunikasikake visibilitas lan kontrol.

Tuladha:

pirang-pirang sinyal sing rame runtuh dadi siji ringkesan pajak sing tenang lan terstruktur.

Salinan potensial:

"Steuern im Blick." (or "Steuern im Blick")

Adegan iki kudune luwih tenang tinimbang adegan sadurunge.

Ritme alon sedhela.

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

12.80 – 15.00

PAMBAYARAN MEREK.

Tarik kamera metu.

UI-ne bisa dikompres utawa dilipat dadi siji obyek/permukaan produk Taxtello sing apik banget.

Pepeteng bali ing sakubenge.

Tandha tembung emas Taxtello ngrampungake.

Siji garis merek cendhak ing ngisor.

Jelajahi baris pungkasan sing kuwat kayata:

"Bisnismu. Jelas."

"Buchhaltung. Unter Kontrol."

"Einfach meh Überblick."

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

Pilih adhedhasar posisi produk sing sampeyan temokake ing repo.

Aja nggunakake baris mung amarga aku sing menehi saran.

Pigura pungkasan kudu nduweni cukup ketenangan kanggo karekam.

Rampungake kanthi yakin.

Ora ana CTA sing mantul gedhe.

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

Iki minangka salah sawijining bagean sing paling penting.

Aku pengin transisi sing nggawe sing nonton mikir:

"Mesthi wae adegan sabanjure asale saka kuwi."

Apik:

garis grafik → pinggiran dokumen
pil emas → tombol faktur
nomer keuangan → jumlah ing faktur
pinggiran kertu → permukaan sabanjure
elemen antarmuka push through kamera
geometri sing dienggo bareng
topeng sing diungkap nggunakake wujud produk sing asli

Ala:

pudar silang
ngusap acak
transisi puteran
kesalahan
kocok wajan saben rong detik
SaaS umum geser-kiwa
spam zoom-blur

Pemotongan langsung mung diidinake nalika dampak ritmis sing disengaja migunani kanggo film kasebut.

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

Gerakan butuh bobot.

Gunakake kurva sing bisa dibandhingake karo:

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

ing ngendi cocog.

Unsur sing beda kudune duwe wektu tekan sing rada beda.

Luwih seneng:

antisipasi
ngluwihi wates ngisor ~2%
netep
terusan gerakan
kecepatan sing dienggo bareng antarane adegan

Aja nganti katon kaya kartun sing kenthel.

Obahe kamera kudune krasa kaya pemotretan produk makro kelas atas.

Bayangna kita lagi ngrekam obyek fisik premium sanajan kuwi piranti lunak.

────────────────────────────────────────────────
CAHAYA / MATERI
────────────────────────────────────────────────

Gunakna cahya lingkungan sing alus banget.

Perawatan sing bisa ditindakake:

• lampu pinggiran emas alus
• tiba biru peteng
• mekar ing sekitar sing samar
• sorotan spekular alus sing ngliwati permukaan
• vignette sing dikurung
• serat alus yen mbantu banget

Jaga antarmuka tetep resik.

AJA nge-blur produk mung supaya katon sinematik.

Ora ana pantulan mengkilat palsu sing ngrusak keterbacaan.

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

Gunakna salinan sing sithik banget.

Ora ana ukara sing kudu saingan karo produk kasebut.

Judhul umume kudu pas ing sak baris.

Gunakake Plus Jakarta Sans.

Tipografi sing kuwat kadhangkala bisa dadi gedhe banget lan dadi transisi
piranti kasebut dhewe.

Aja nggunakake grafis gerak umum ing ngendi saben tembung bisa urip kanthi mandiri.

Tipografi kudu obah kaya obyek sing dirancang.

────────────────────────────────────────────────
Swara / Ritme
────────────────────────────────────────────────

Rancang gerakan kaya-kaya dipotong dadi kira-kira 115–120 BPM:
premium, kinetik, canggih, ora panik.

Momen-momen penting kudune dimainake kanthi cara musikal.

Basa swara sing disaranake:

• dampak alus sing kurang kanggo tampilan sing gedhe
• klik UI taktil sing dikontrol
• tik tonal metalik/kaca sing alus
• gerakan frekuensi rendah sing alus sajrone transisi kamera
• nada sing elegan lan manteb ing pungkasan logo

Nyingkiri:

• booming trailer sinematik sing gedhe banget
• Riser EDM
• swarane banter banget ing endi-endi
• swara "antarmuka teknologi" standar
• ketukan rap
• bass agresif

Yen ora ana aset musik/audio sing aman sacara hukum ing proyek kasebut, AJA ditarik
audio sing dilindhungi hak cipta saka internet.

Ngaturake master visual tanpa musik sing dilindhungi hak cipta lan gawe isyarat sing ringkes
lembar sing njlentrehake ing ngendi musik/SFX kudune diputer.

Yen ana audio aman/lokal sing cocog, gunakake.

────────────────────────────────────────────────
PRODUK ASLI WAÉ
────────────────────────────────────────────────

Iki penting banget.

Priksa arus utama.

Aja ngarang layar.

Aja ngarang metrik sing nuduhake data pelanggan nyata.

Gunakna nilai sintetis/aman kanggo demonstrasi kanthi jelas yen dibutuhake.

Aja sengaja mbabarake informasi pribadi, pangguna uji coba, utawa informasi produksi apa wae.

Gunakake maneh struktur visual saka UI Taxtello sing asli.

Yen layar kudu dipisahake saka gerakan, gawe maneh kanthi setya ing React saka
sistem desain sing nyata tinimbang mung ngowahi skala gambar layar raksasa.

Asile kudune isih katon kaya Taxtello.

────────────────────────────────────────────────
PANGHARGAAN IMPLEMENTASI
────────────────────────────────────────────────

Kerja langsung ing:

/taxtello/beta-motion

Gawe komposisi anyar bebarengan karo komposisi sing wis ana.

Terusake komposisi sing wis ana supaya bisa digunakake.

Susun karya anyar kanthi resik.

Luwih seneng primitif sing bisa digunakake maneh kanggo:

• lumah kamera
• pigura produk
• transisi sing ditutupi
• teks mbukak
• Wilayah UI mbukak
• cahya sekitar
• transisi elemen sing dienggo bareng

Aja nggunakake siji komponen sing dumadi saka 1.500 baris.

Gunakna animasi Remotion deterministik sing didorong dening pigura/wektu.

Ora ana setWektu entek.
Ora ana animasi nondeterministik.

Tetep 60 fps sak kabehane.

Gunakake interpolasi/pegas/easing kanthi sengaja.

────────────────────────────────────────────────
AJA MANDHEG SAWISE IMPLEMENTASI KAPISAN
────────────────────────────────────────────────

Iki minangka tugas visual.

Sampeyan KUDU mriksa output sing wis digawe.

Alur kerja sing dibutuhake:

1. Priksa gudang lan merek/produk asli.

2. Tulis storyboard ringkes nganggo:
- cap wektu sing tepat
- visual kunci
- logika transisi
- salinan
- ritme emosional sing dimaksudake

3. Lakoni.

4. Jalanake typecheck / pamriksan sing relevan.

5. Render pigura sing representatif 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. Priksa gambar-gambar kasebut kanthi visual.

Aja mung ngonfirmasi yen rendering wis sukses.

Takon:

Apa iki katon kaya film produk tingkat Apple?

Apa ana sing katon kaya cithakan?

Apa ana kakehan ing layar?

Apa produke bisa diwaca?

Apa transisi iku ana gandheng cenenge kanthi logis?

Apa emas Taxtello krasa premium?

Apa saben pigura katon teratur?

7. Ndandani kelemahan visual.

8. Render film sakabèhé.

9. Priksa pirang-pirang pigura sing didekode kanthi tepat saka MP4 pungkasan, ora mung browser
gambar layar.

10. Baleni maneh yen perlu.

Aja ngumumake sukses amarga kode kasebut dikompilasi.

Sing bisa dikirim yaiku FILM.

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

Tolak asilmu dhewe yen krasa kaya:

• cithakan SaaS
• animasi PowerPoint
• rekaman layar situs web
• demo Remotion umum
• iklan kripto
• cithakan promo sing digawe AI
• limang gambar layar sing nggeser
• salinan pemasaran sing berlebihan

Saben pigura penting kudu cukup apik kanggo digunakake minangka iklan diam.

Aku luwih seneng duwe:

3 momen visual sing luar biasa

tinimbang

10 animasi fitur sing biasa-biasa wae.

────────────────────────────────────────────────
PENGIRIMAN AKHIR
────────────────────────────────────────────────

Nyedhiyakake:

1. Papan crita pungkasan
2. Sumber komposisi Remotion Anyar
3. MP4 pungkasan 1920×1080 / 60fps
4. Poster/bingkai pungkasan
5. Lembar kontak nganggo pigura sing representatif saka film kasebut
6. Wektu proses sing pas
7. Daftar aset/layar Taxtello nyata sing digunakake
8. Panjelasan ringkes babagan basa gerak
9. Kompromi visual sing isih ana
10. Prentah kanggo ngasilake maneh render

Simpen output ing direktori sing dijenengi kanthi jelas kayata:

/taxtello/beta-motion/metu/showreel-15/

Aja nyebar apa-apa.
Aja ngowahi data produksi.
Aja nggabungke apa-apa.

Coba kreatif kabeh, nanging kudu bisa ngontrol awake dhewe kanthi kejem.

Gawe Taxtello katon larang.

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.

Pandhuan dijupuk saka pos @daniel_haida.