Configurarea: Film cu aplicația de contabilitate Taxtello

Ești designerul senior de mișcare, designerul de produs și inginerul Remotion pentru Taxtello.

Sarcina ta este să creezi un film de produs cu adevărat premium, la nivel Apple, pentru Taxtello.

Aceasta NU este o explicație generică SaaS.
Aceasta NU este o prezentare detaliată a funcțiilor.
Aceasta NU este o animație pentru un șablon de startup.

Îmi doresc un showreel de maximum 15 secunde pentru brand/produs, care să facă Taxtello să pară un produs financiar matur, scump și frumos conceput.

Gândește-te:

Film de lansare a produsului Apple
× fintech premium
× design editorial de mișcare
× prezentare discretă a produsului, în stil Stripe
× Identitatea vizuală proprie a Taxtello

Reacția dorită este:

„Stai puțin, asta e o aplicație germană de contabilitate?”

Filmul ar trebui să pară scump.

──────────────────────────────────────
REPO / SURSĂ DE ADEVĂR
──────────────────────────────────────

Mai întâi inspectați depozitele reale înainte de a proiecta orice.

Produs principal:
/taxtello/principal

Proiect Remotion existent:
/taxtello/beta-motion

Surse importante despre branduri reale:

/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

Capturi de ecran ale produselor actuale existente pot fi găsite la:

/taxtello/main/artefacte/smoke-ui-smoke/

Preferați cele mai noi capturi de ecran valide/sursa actuală în locul artefactelor învechite.

Există deja o animație eroică Remotion de 24 de secunde în
/taxtello/beta-motion.

NU îl înlocuiți.
NU regresa.
NU forțați povestea actuală cu conexiunile inteligenței artificiale în acest nou film.

Creați o nouă compoziție independentă pentru această sarcină, de ex.

TaxtelloShowreel15

Puteți reutiliza o infrastructură bună, fonturi, utilitare de randare, primitive de mișcare,
relaxarea curbelor, încărcarea activelor și infrastructura de asigurare a calității din mișcarea beta, acolo unde este cazul.

Dar din punct de vedere creativ, acesta ar trebui să fie un film nou.

Înainte de implementare, inspectați interfața cu utilizatorul Taxtello și înțelegeți produsul.

Nu inventați funcționalități care nu există.

──────────────────────────────────────
REAL TAXTELLO LIMBAJ VIZUAL
──────────────────────────────────────

Folosește sistemul de proiectare real.

Paletă de bază:

Fundal:
#0c0f1a

Suprafețe ridicate:
#111525
#131722
#1a2032

Aur de marcă principală:
#e8b84b

Evidențiere aurie:
#f5d07a

Adâncimea aurului:
#9b6d18

Textul principal:
#e8eaf2

Alb cald puternic:
#f6f4eb

Text secundar:
#8b93b5

Pozitiv:
#34d399

Negativ/eroare doar acolo unde este necesar din punct de vedere semantic:
#f87171

Tipografie:
Plus Jakarta Sans

Numere / valori financiare, după caz:
JetBrains Mono

Folosește marca verbală Taxtello și/sau marca Taxtello propriu-zisă.
Nu redesenați și nu aproximați sigla.

Aurul lui Taxtello ar trebui să se simtă ca un accent prețios, nu ca o inundație galbenă a interfeței utilizator.

Gândește-te:
metal întunecat
aur cald
sticlă
cerneală
precizie
încredere liniștită

NU:
cyberpunk
criptomonede
neon
jocuri
AI generic violet
gradienți de curcubeu

──────────────────────────────────────
REGULI CREATIVE DE BAZĂ
──────────────────────────────────────

Urmați aceste reguli cu nemiloc:

1. O SINGURĂ ÎNCEPERE = O SINGURĂ IDEE.

2. Fiecare scenă are nevoie de spațiu pentru a respira.

3. Interfața utilizator a produsului este eroul.

4. Nu lipiți texte explicative peste tot.

5. Nu folosiți tăieturi dure decât dacă există un motiv înțeles.

6. Preferați tranzițiile bazate pe obiecte:
o carte devine următoarea carte,
o linie a graficului devine un conector,
o chitanță devine o rezervare,
un număr devine un alt element de interfață,
camera se mișcă prin produs.

7. Folosește easing premium.
Fără mișcare liniară.

8. Mișcarea ar trebui să se suprapună în mod natural.
Elementele nu ar trebui să înceapă și să se oprească toate exact în același cadru.

9. Folosește adâncimea cu moderație:
perspectivă,
paralaxă moale,
scară,
separarea prim-planului/fundalului,
adâncime de câmp controlată, dacă este posibil.

10. Nu există niciun efect doar pentru că arată grozav.

11. Fără spam de particule.

12. Niciun vitromorfism fals peste tot.

13. Fără estompare excesivă.

14. Fără cărți de joc 3D inutile care se rotesc.

15. Fără zoom constant.

16. Nu există 20 de stiluri de animație diferite.

17. Fără interfață cu utilizatorul care sări peste cap.

18. Niciun paragraf de marketing voluminos.

19. Nu imitați o anumită reclamă Apple, imagine cu imagine.
Surprindeți în schimb filosofia și calitatea producției.

Încrederea vizuală ar trebui să vină din reținere.

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

Maestru principal:

1920 × 1080
60 cadre pe secundă
16:9
H.264
durată maximă: 15,0 secunde

Timp de execuție țintă:
aproximativ 14,0–15,0 secunde.

Trebuie să funcționeze ca o dezvăluire a produsului pentru rețelele sociale, chiar și fără sunet.

Dacă este practic DUPĂ ce masterul este terminat, creați și o recompunere deliberată
variantă verticală/socială.

Nu decupați doar compoziția de pe desktop.

Dar desktop master este prioritatea.

──────────────────────────────────────
POVESTE / ARC EMOȚIONAL
──────────────────────────────────────

Nu faceți din asta o listă de cinci caracteristici.

Ar trebui să se simtă ca un gând continuu:

HAOS → CONTROL → CLARITATE → TAXTELLO

Primele 1,5 secunde trebuie să arate deja premium.

Primul moment semnificativ al produsului ar trebui să aibă loc cu ~2 secunde înainte.

Fără o introducere de cinci secunde pentru logo.

Posibilă direcție narativă:

„Totul despre afacerea ta, în sfârșit într-un singur loc.”

Dar ARATĂ asta în loc să explici.

Vreau aproximativ patru idei vizuale pentru întregul film.

Folosește cele mai rezistente suprafețe REALE Taxtello pe care le găsești în depozit.

Printre candidații puternici se numără:

• Finanzcockpit / Tablou de bord
• Recunungen
• Belege
• Bancă / potrivire
• Steuergesundheit / prezentare generală a taxelor

NU este nevoie să le arăți pe toate.

Alege combinația cea mai puternică din punct de vedere vizual.

──────────────────────────────────────
STORYBOARD SUGESTIAT DE 15 SECUNDE
──────────────────────────────────────

Tratează acest lucru ca un punct de plecare solid, nu ca un șablon rigid.

0,00 – 1,20

NEGRU / BLEUMARIN.

Apare o mică licărire aurie caldă.

Sclipirea dezvăluie elegant fie marca Taxtello, fie un fragment din aceasta.
marcă verbală.

Fără estompare generică a logo-ului.

Gândiți-vă la precizie prelucrată mecanic.

Camera se mișcă prin sau dincolo de marcaj, iar interfața cu utilizatorul începe să iasă din acesta.

Foarte puține sau deloc copii.

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

1,20 – 4,40

CONTROL FINANCIAR.

Dezvăluiți cabina de pilotaj Taxtello reală ca o suprafață dimensională a produsului.

Nu doar o captură de ecran plasată pe ecran.

Reconstruiește/decupează/stratifiază-l astfel încât regiunile individuale ale interfeței să poată fi animate.

Numărul financiar al eroului se rezolvă rapid.
Graficul se atrage.
Indicatorii de susținere se stabilesc puțin mai târziu.

Folosește o eșalonare subtilă.

Poate apărea o singură linie de text, de exemplu:

„Totul în ochi.” or „Totul în ochi.”

sau o altă expresie germană la fel de scurtă, dacă găsiți ceva mai potrivit.

Maxim ~3–4 cuvinte.

Interfața trebuie să rămână ușor de recunoscut ca fiind produsul real.

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

4,40 – 7,50

TRANSFORMARE DOCUMENTE / CONTABILITATE.

Folosește un obiect vizual din scena anterioară ca tranziție.

Exemplu:

Un punct auriu în formă de diagramă se extinde în colțul unei chitanțe/carduri.
Camera îl urmărește.
Intră o chitanță/un document.
Taxtello îl identifică sau îl organizează.
Documentul se integrează elegant în înregistrarea/înregistrarea financiară corespunzătoare.

Folosește alinierea magnetică și precizia.

Fără scaner laser de calitate inferioară.

Nicio tornadă de hârtie plutitoare.

Microcopie posibilă:

„Belege. Erledigt.” or „Aflat în Belgia. Remarcabil.”

Numai dacă îmbunătățește scena.

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

7,50 – 10,70

BANI / FACTURĂ.

Transformă-te sau transformă-te natural în interfața reală Rechnungen.

Folosește un moment puternic:

se modifică starea unei facturi,
o plată se rezolvă,
o cantitate se deplasează la locul ei,
sau prezentarea generală se alcătuiește singură.

Numerele ar trebui să fie tactile și precise.

Folosește JetBrains Mono acolo unde acesta corespunde produsului real.

Aurul evidențiază starea activă.

Verdele este folosit doar pentru o stare semantică autentic pozitivă.

Copie potențială:

„Geld. Im Griff.” or „Geld. Im Griff.”

Din nou: opțional și extrem de scurt.

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

10,70 – 12,80

IMPOZIT / CLARITATE.

Tranziția către suprafața reală de îndrumare financiară/sănătate fiscală Taxtello.

Nu pretinde că Taxtello garantează în mod magic impozite corecte.

Comunicați vizibilitate și control.

Exemplu:

Mai multe semnale zgomotoase se combină într-o singură prezentare generală a impozitelor, calmă și structurată.

Copie potențială:

„Steuern im Blick.” or „Steuern in Blick.”

Această scenă ar trebui să pară mai calmă decât scena anterioară.

Ritmul încetinește pentru scurt timp.

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

12.80 – 15.00

RECOMPENSA MARCII.

Trageți camera în exterior.

Interfața cu utilizatorul se comprimă sau se pliază într-un singur obiect/suprafață de produs Taxtello.

Întunericul se întoarce în jurul lui.

Însemnul verbal auriu Taxtello se rezolvă.

O scurtă linie cu marca dedesubt.

Explorează replici finale puternice, cum ar fi:

„Afacerea ta. Clar.”

"Buchhaltung. Unter Kontrolle."

„Einfach mehr Überblick.”

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

Alegeți în funcție de poziționarea reală a produsului pe care o găsiți în depozit.

Nu folosi o replică doar pentru că am sugerat-o eu.

Cadrul final trebuie să aibă suficientă nemișcare pentru a fi înregistrat.

Încheie cu încredere.

Fără un îndemn la acțiune (CTA) gigantic și revoltător.

──────────────────────────────────────
TRANZIȚII
──────────────────────────────────────

Aceasta este una dintre cele mai importante părți.

Vreau tranziții care să-l facă pe privitor să gândească:

„Bineînțeles că următoarea scenă a venit de acolo.”

Bun:

linie diagramă → margine document
pastilă de aur → buton de factură
număr financiar → sumă din factură
marginea cărții → suprafața următoare
element de interfață push-through pentru cameră
geometrie partajată
dezvăluirea măștii folosind forme reale ale produsului

Rău:

estompare încrucișată
ștergere aleatorie
tranziție de spin
eroare
tigaie la fiecare două secunde
diapozitiv SaaS generic spre stânga
spam cu zoom-blur

Tăierile directe sunt permise doar atunci când un impact ritmic deliberat este în beneficiul filmului.

──────────────────────────────────────
MIŞCARE
──────────────────────────────────────

Mișcarea are nevoie de greutate.

Folosiți curbe comparabile cu:

cubic-bezier(0,16, 1, 0,3, 1)

acolo unde este cazul.

Elemente diferite ar trebui să aibă timpi de sosire subtil diferiți.

Prefera:

anticipare
depășire sub ~2%
așezare
continuarea mișcării
viteză partajată între scene

Evitați primăvara de desene animate.

Mișcarea camerei ar trebui să se simtă ca o ședință foto macro de înaltă calitate.

Imaginați-vă că filmăm un obiect fizic premium, chiar dacă este un software.

──────────────────────────────────────
ILUMINARE / MATERIAL
──────────────────────────────────────

Folosește o iluminare ambientală extrem de subtilă.

Tratamente posibile:

• iluminare cu ramă aurie delicată
• cădere bleumarin închis
• înflorire ambientală slabă
• evidențiere speculară ușoară care trece pe o suprafață
• vinietă restrânsă
• granulație subtilă dacă ajută material

Păstrează interfața impecabilă.

NU estompați produsul doar ca să arătați cinematografic.

Fără reflexii lucioase false care distrug lizibilitatea.

──────────────────────────────────────
TIPOGRAFIE
──────────────────────────────────────

Folosește foarte puțin text.

Nicio propoziție nu ar trebui să concureze cu produsul.

Titlurile ar trebui, în general, să se încadreze pe un singur rând.

Folosește Plus Jakarta Sans.

Tipografia puternică poate uneori să se extindă foarte mult și să devină o tranziție
dispozitivul în sine.

Evitați comportamentul generic al graficii în mișcare, în care fiecare cuvânt se animă independent.

Tipografia ar trebui să se miște la fel ca obiectele proiectate.

──────────────────────────────────────
SUNET / RITM
──────────────────────────────────────

Proiectați mișcarea ca și cum ar fi redusă la aproximativ 115–120 BPM:
premium, kinetic, sofisticat, nu frenetic.

Momentele importante ar trebui să aterizeze muzical.

Limbaj sonor sugerat:

• impact redus pentru dezvăluiri majore
• clicuri tactile restrânse pe interfața cu utilizatorul
• nuanță subtilă metalică/sticloasă
• mișcare ușoară de joasă frecvență în timpul tranzițiilor camerei
• ton elegant și rezolvat la nivelul logo-ului

Evita:

• boom uriaș de trailere cinematografice
• Ride-uri EDM
• șuieraturi puternice peste tot
• sunete standard pentru „interfața tehnică”
• ritm de rap
• bas agresiv

Dacă în proiect nu există niciun element muzical/audio sigur din punct de vedere legal, NU extrageți
audio protejat prin drepturi de autor de pe internet.

Prezentați masterul vizual fără muzică protejată de drepturi de autor și creați un indiciu concis.
foaie care descrie unde ar trebui să apară muzica/efectele sonore.

Dacă există un sistem audio sigur/local adecvat, utilizați-l.

──────────────────────────────────────
NUMAI PRODUS REAL
──────────────────────────────────────

Acest lucru este esențial.

Inspectați conducta principală de curent.

Nu inventați ecrane.

Nu inventați valori care implică date reale despre clienți.

Folosiți valori sintetice/demo-safe în mod clar, dacă este necesar.

Nu expuneți accidental informații personale, despre utilizatorii de testare sau despre producție.

Reutilizează structura vizuală a interfeței utilizator Taxtello.

Dacă un ecran trebuie separat de mișcare, recreați-l fidel în React.
sistemul de design real, în loc să scaleze pur și simplu o captură de ecran gigantică.

Rezultatul ar trebui să semene în mod inconfundabil cu Taxtello.

──────────────────────────────────────
AȘTEPTĂRI PRIVIND IMPLEMENTAREA
──────────────────────────────────────

Lucrează direct în:

/taxtello/beta-motion

Creați noua compoziție alături de cea existentă.

Mențineți funcționale compozițiile existente.

Structurează noua lucrare în mod curat.

Prefer primitive reutilizabile pentru:

• suprafața camerei
• cadrul produsului
• tranziții mascate
• textul dezvăluie
• Regiunea UI dezvăluie
• iluminare ambientală
• tranziții cu elemente partajate

Evitați o componentă de 1.500 de linii.

Folosește animație deterministă Remotion, condusă de cadre/timp.

Fără setare de timp de expirare.
Fără animații nedeterministe.

Respectă 60 fps pe tot parcursul jocului.

Folosește interpolare/resort/relaxare în mod deliberat.

──────────────────────────────────────
NU VĂ OPRIȚI DUPĂ PRIMA IMPLEMENTARE
──────────────────────────────────────

Aceasta este o sarcină vizuală.

TREBUIE să revizuiți rezultatul real randat.

Flux de lucru necesar:

1. Inspectați depozitul și marca/produsul real.

2. Scrieți un storyboard concis cu:
- marcaje temporale exacte
- element vizual cheie
- logică de tranziție
- copie
- ritmul emoțional intenționat

3. Implementați-l.

4. Executați verificarea tipului / verificările relevante.

5. Redați cadre reprezentative la aproximativ:
0,0 secunde
1,0 secunde
2,5 secunde
4,5 secunde
6,5 secunde
8,5 secunde
10,5 secunde
12,5 secunde
14,0 secunde
14,8 secunde

6. INSPECTAȚI VIZUAL ACESTE IMAGINI.

Nu confirmați doar că randarea a reușit.

Întreabă:

Arată asta ca un film de produs de nivel Apple?

Arată ceva ca un șablon?

Este prea mult pe ecran?

Este produsul lizibil?

Sunt tranzițiile conectate logic?

Aurul Taxtello pare premium?

Fiecare cadru arată compus?

7. Remediați punctele slabe vizuale.

8. Randați filmul complet.

9. Inspectați mai multe cadre decodificate exact din MP4 final, nu doar din browser
capturi de ecran.

10. Iterați din nou dacă este necesar.

Nu declarați succes deoarece codul se compilează.

Livrabilul este FILMUL.

──────────────────────────────────────
BARĂ DE CALITATE
──────────────────────────────────────

Respinge-ți propriul rezultat dacă simți că:

• un șablon SaaS
• o animație PowerPoint
• o înregistrare a ecranului unui site web
• o demonstrație generică Remotion
• o reclamă criptografică
• un șablon promoțional generat de inteligență artificială
• cinci capturi de ecran care alunecă
• texte de marketing excesive

Fiecare cadru important ar trebui să fie suficient de bun pentru a fi folosit ca reclamă statică.

Aș prefera să am:

3 momente vizuale extraordinare

decât

10 animații mediocre.

──────────────────────────────────────
REZULTATE FINALE
──────────────────────────────────────

Furnizați:

1. Storyboard-ul final
2. Noua sursă de compoziție Remotion
3. MP4 final 1920×1080 / 60fps
4. Poster/cadru final
5. Coală de contact cu cadre reprezentative din film
6. Durata exactă de execuție
7. Lista de active/ecrane reale Taxtello utilizate
8. Scurtă explicație a limbajului de mișcare
9. Orice compromisuri vizuale rămase
10. Comenzi pentru reproducerea randării

Salvați ieșirile într-un director denumit clar, cum ar fi:

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

Nu implementați nimic.
Nu modificați datele de producție.
Nu îmbinați nimic.

Dă dovadă de toată creativitatea, dar de o reținere nemiloasă.

Fă ca Taxtello să pară scump.

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.

Îndemn preluat de la post @daniel_haida.