Nastavenie: Film o účtovníckej aplikácii Taxtello

Ste senior motion dizajnér, produktový dizajnér a Remotion inžinier pre Taxtello.

Vašou úlohou je vytvoriť pre Taxtello skutočne prémiový produktový film na úrovni Apple.

Toto NIE JE všeobecné vysvetľovanie SaaS.
Toto NIE JE návod na funkcie.
Toto NIE JE animácia šablóny pre spustenie.

Chcem maximálne 15-sekundovú prezentáciu značky/produktu, vďaka ktorej bude Taxtello vyzerať ako zrelý, drahý a krásne navrhnutý finančný produkt.

Myslite:

Film o uvedení produktov spoločnosti Apple na trh
× prémiové finančné technológie
× redakčný motion dizajn
× decentná prezentácia produktu v štýle Stripe
× Vlastná vizuálna identita spoločnosti Taxtello

Požadovaná reakcia je:

„Počkajte, toto je nemecká účtovnícka aplikácia?“

Film by mal pôsobiť draho.

─────────────────────────────────────────────
REPO / ZDROJ PRAVDY
─────────────────────────────────────────────

Predtým, ako začnete čokoľvek navrhovať, si najprv skontrolujte skutočné repozitáre.

Hlavný produkt:
/taxtello/hlavné

Existujúci projekt Remotion:
/taxtello/beta-motion

Dôležité zdroje skutočných značiek:

/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

Existujúce snímky obrazovky aktuálneho produktu nájdete pod:

/taxtello/main/artefacts/dym-ui-dym/

Uprednostnite najnovšie platné snímky obrazovky/aktuálny zdroj pred zastaranými artefaktmi.

Už existuje 24-sekundová animácia hrdinu Remotion.
/taxtello/beta-motion.

NEVYMIENAJTE ho.
NEVRACAJTE to späť.
NEVNUCUJTE do tohto nového filmu jeho súčasný dej o prepojení s umelou inteligenciou.

Vytvorte pre túto úlohu novú nezávislú kompozíciu, napr.

TaxtelloShowreel15

Môžete znovu použiť dobrú infraštruktúru, fonty, vykresľovacie nástroje, primitívy pohybu,
krivky zmierňovania, načítavanie aktív a infraštruktúra QA z beta-motion, kde boli užitočné.

Ale kreatívne by to mal byť nový film.

Pred implementáciou si prezrite skutočné používateľské rozhranie Taxtello a pochopte produkt.

Nevymýšľajte si funkcionalitu, ktorá neexistuje.

─────────────────────────────────────────────
SKUTOČNÝ VIZUÁLNY JAZYK TAXTELLO
─────────────────────────────────────────────

Použite skutočný dizajnový systém.

Základná paleta:

Pozadie:
#0c0f1a

Vyvýšené plochy:
#111525
#131722
#1a2032

Primárna značka zlata:
#e8b84b

Zlatý zvýraznenie:
#f5d07a

Hĺbka zlata:
#9b6d18

Primárny text:
#e8eaf2

Silná teplá biela:
#f6f4eb

Sekundárny text:
#8b93b5

Pozitívne:
#34d399

Záporné/chybné iba tam, kde je to sémanticky nevyhnutné:
#f87171

Typografia:
Plus Jakarta Sans

Čísla / finančné hodnoty, ak je to vhodné:
JetBrains Mono

Používajte skutočnú slovnú ochrannú známku Taxtello a/alebo ochrannú známku Taxtello.
Logo neprekresľujte ani ho neaproximujte.

Taxtellova zlatá farba by mala pôsobiť ako vzácny prízvuk, nie ako žltá záplava používateľského rozhrania.

Myslite:
tmavý kov
teplé zlato
sklo
atrament
presnosť
tichá sebadôvera

NIE:
kyberpunk
krypto
neón
hranie hier
generická fialová AI
dúhové prechody

─────────────────────────────────────────────
ZÁKLADNÉ KREATÍVNE PRAVIDLÁ
─────────────────────────────────────────────

Nemilosrdne dodržiavajte tieto pravidlá:

1. JEDEN NÁPAD = JEDEN NÁPAD.

2. Každá scéna potrebuje priestor na dýchanie.

3. Hrdinom je používateľské rozhranie produktu.

4. Nelepte vysvetľujúci text všade.

5. Nepoužívajte ostré rezy, pokiaľ na to nie je zámerný dôvod.

6. Uprednostňujte prechody riadené objektmi:
karta sa stane ďalšou kartou,
čiara grafu sa stane spojnicou,
potvrdenka sa stane rezerváciou,
číslo sa stáva ďalším prvkom rozhrania,
Kamera sa pohybuje cez produkt.

7. Používajte prémiové uvoľňovanie.
Žiadny lineárny pohyb.

8. Pohyb by sa mal prirodzene prekrývať.
Prvky by nemali všetky začínať a končiť v presne tom istom frame.

9. Hĺbku používajte striedmo:
perspektíva,
mäkká paralaxa,
mierka,
oddelenie popredia/pozadia,
kontrolovaná hĺbka ostrosti, ak je to možné.

10. ŽIADNY efekt neexistuje len preto, že to vyzerá skvele.

11. Žiadny spam častíc.

12. Žiadny falošný sklenený morfizmus všade.

13. Žiadne nadmerné rozmazanie.

14. Žiadne zbytočné 3D rotujúce karty.

15. Žiadne neustále priblížovanie.

16. Nie 20 rôznych štýlov animácie.

17. Žiadne poskakujúce používateľské rozhranie.

18. Žiadny obrovský marketingový odsek.

19. Nenapodobňujte konkrétnu reklamu spoločnosti Apple záber za záberom.
Zachyťte radšej filozofiu a kvalitu produkcie.

Vizuálna sebadôvera by mala prameniť zo zdržanlivosti.

─────────────────────────────────────────────
FORMÁT
─────────────────────────────────────────────

Hlavný majster:

1920 × 1080
60 snímok za sekundu
16:9
H.264
maximálne trvanie: 15,0 sekúnd

Cieľová doba behu:
približne 14,0 – 15,0 sekúnd.

Musí to fungovať ako produkt na sociálnych sieťach aj bez zvuku.

Ak je to praktické, PO dokončení masteru vytvorte aj zámerne prekomponovaný
vertikálny/sociálny variant.

Neorezávajte iba kompozíciu na pracovnej ploche.

Ale hlavný počítač je prioritou.

─────────────────────────────────────────────
PRÍBEH / EMOCIONÁLNY OBLÚK
─────────────────────────────────────────────

Nerobte z toho zoznam piatich funkcií.

Malo by to pôsobiť ako jedna súvislá myšlienka:

CHAOS → KONTROLA → JASNOSŤ → TAXTELLO

Prvých 1,5 sekundy už musí vyzerať prémiovo.

Prvý zmysluplný produktový moment by sa mal objaviť približne do 2 sekúnd.

Žiadne päťsekundové úvodné logo.

Možný smer rozprávania:

„Všetko o vašom podnikaní, konečne na jednom mieste.“

Ale UKÁŽTE to namiesto vysvetľovania.

Chcem približne štyri vizuálne nápady v celom filme.

Použite najsilnejšie REÁLNE povrchy Taxtello, aké nájdete v repozitári.

Medzi silných kandidátov patria:

• Finančný kokpit / Dashboard
• Účty
• Belége
• Banka / párovanie
• Steuergesundheit / daňový prehľad

NEMUSÍŠ ich všetky ukázať.

Vyberte si vizuálne najsilnejšiu kombináciu.

─────────────────────────────────────────────
ODPORÚČANÝ 15-SEKUNDOVÝ STORYBOARD
─────────────────────────────────────────────

Berte to ako silný východiskový bod, nie ako nehybnú šablónu.

0,00 – 1,20

ČIERNA / NÁMORNÍCKA.

Objaví sa malý teplozlatý lesk.

Záblesk elegantne odhaľuje buď značku Taxtello, alebo jej fragment.
slovná ochranná známka.

Žiadne vyblednutie generického loga.

Predstavte si obrábanú presnosť.

Kamera sa pohybuje cez značku alebo za ňu a z nej sa začína vynárať používateľské rozhranie.

Veľmi málo alebo žiadne kópie.

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

1,20 – 4,40

FINANČNÁ KONTROLA.

Odhaľte skutočný kokpit Taxtello ako rozmerný povrch produktu.

Nie len snímka obrazovky umiestnená na obrazovke.

Rekonštruujte/orežte/vrstvite to tak, aby sa jednotlivé oblasti rozhrania mohli animovať.

Finančné číslo hrdinu sa vyrieši jasne.
Graf sa vykresľuje.
Podporné metriky sa ustália o niečo neskôr.

Použite jemné rozloženie.

Môže sa zobraziť jeden riadok textu, napríklad:

„Všetko v poriadku.“

alebo inú rovnako krátku nemeckú frázu, ak vám niečo viac vyhovuje.

Maximálne ~3–4 slová.

Rozhranie musí zostať rozpoznateľné ako skutočný produkt.

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

4,40 – 7,50

TRANSFORMÁCIA DOKUMENTOV / ÚČTOVNÍCTVA.

Ako prechod použite vizuálny objekt z predchádzajúcej scény.

Príklad:

Zlatý bod grafu sa rozširuje do rohu účtenky/karty.
Kamera ho sleduje.
Vstúpi potvrdenie/dokument.
Taxtello to identifikuje alebo organizuje.
Dokument sa elegantne zacvakne do príslušného rezervačného/finančného záznamu.

Použite magnetické zarovnanie a presnosť.

Žiadny lacný laserový skener.

Žiadne plávajúce papierové tornádo.

Možná mikrokópia:

„Belege. Erledigt.“

Iba ak to vylepší scénu.

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

7,50 – 10,70

PENIAZE / FAKTÚRY.

Prirodzene prechádzajte alebo transformujte do skutočného rozhrania Rechnungen.

Použite jeden silný moment:

zmena stavu faktúry,
platba sa vyrieši,
množstvo sa presunie na svoje miesto,
alebo sa prehľad zostaví sám.

Čísla by mali byť hmatateľné a presné.

Použite JetBrains Mono tam, kde to zodpovedá skutočnému produktu.

Zlatá farba zvýrazňuje aktívny stav.

Zelená sa používa iba pre skutočne pozitívny sémantický stav.

Potenciálna kópia:

„Peniaze. Som Griff.“

Opäť: voliteľné a extrémne krátke.

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

10,70 – 12,80

DAŇ / ZRETEĽNOSŤ.

Prechod na skutočné poradenstvo v oblasti daní, zdravia a financií od Taxtello.

Netvrdte, že Taxtello magicky zaručuje správne dane.

Komunikujte viditeľnosť a kontrolu.

Príklad:

Viaceré zašumené signály sa zhlukujú do jedného pokojného, štruktúrovaného daňového prehľadu.

Potenciálna kópia:

„Stavky na pohľad.“

Táto scéna by mala pôsobiť pokojnejšie ako predchádzajúca scéna.

Rytmus sa na chvíľu spomalí.

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

12,80 – 15,00

VÝHODA ZNAČKY.

Vytiahnite fotoaparát smerom von.

Používateľské rozhranie sa komprimuje alebo skladá do jedného krásneho objektu/povrchu produktu Taxtello.

Okolo neho sa vracia tma.

Zlatý nápis Taxtello rozhoduje.

Jedna krátka čiara značky pod ňou.

Preskúmajte silné záverečné riadky, ako napríklad:

„Vaše podnikanie. Klar.“

"Buchhaltung. Unter Kontrolle."

"Einfach mehr Überblick."

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

Vyberte si na základe skutočného umiestnenia produktu, ktoré nájdete v repozitári.

Nepoužívajte riadok len preto, že som vám ho navrhol.

Posledný záber musí byť dostatočne nehybný, aby sa zaregistroval.

Skončite sebavedomo.

Žiadne obrovské poskakujúce výzvy na akciu.

─────────────────────────────────────────────
PRECHODY
─────────────────────────────────────────────

Toto je jedna z najdôležitejších častí.

Chcem prechody, ktoré prinútia diváka premýšľať:

„Samozrejme, že z toho vznikla ďalšia scéna.“

Dobré:

čiara grafu → okraj dokumentu
zlatá pilulka → tlačidlo faktúry
finančné číslo → suma na faktúre
hrana karty → ďalší povrch
prvok rozhrania presúvania kamery
zdieľaná geometria
odhalenie masky pomocou skutočných tvarov produktu

Zlé:

prelínanie
náhodné vymazanie
spinový prechod
chyba
šľahanie panvice každé dve sekundy
generický SaaS slide-left
spam s rozmazaním priblíženia

Priame strihy sú povolené iba vtedy, keď zámerný rytmický dopad prospieva filmu.

─────────────────────────────────────────────
POHYB
─────────────────────────────────────────────

Pohyb potrebuje váhu.

Použite krivky porovnateľné s:

kubický-bezierov(0,16, 1, 0,3, 1)

kde je to vhodné.

Rôzne prvky by mali mať jemne odlišné časy príchodu.

Uprednostňujem:

očakávanie
prekročenie pod ~2 %
usadzovanie
pokračovanie pohybu
zdieľaná rýchlosť medzi scénami

Vyhnite sa kreslenej jari.

Pohyb fotoaparátu by mal pripomínať špičkové makroproduktové fotenie.

Predstavte si, že natáčame fyzický prémiový objekt, aj keď ide o softvér.

─────────────────────────────────────────────
OSVETLENIE / MATERIÁL
─────────────────────────────────────────────

Používajte extrémne jemné osvetlenie prostredia.

Možné liečebné postupy:

• jemné zlaté osvetlenie okraja
• tmavo modrý odlesk
• slabý ambientný kvet
• mäkké zrkadlové svetlo prechádzajúce cez povrch
• zdržanlivá vineta
• jemná zrnitosť, ak to podstatne pomáha

Udržujte rozhranie prehľadné.

Nerozmazávajte produkt len preto, aby vyzeral ako film.

Žiadne falošné lesklé odlesky, ktoré ničia čitateľnosť.

─────────────────────────────────────────────
TYPOGRAFIA
─────────────────────────────────────────────

Používajte veľmi málo textu.

Žiadna veta by nemala konkurovať produktu.

Nadpisy by sa vo všeobecnosti mali zmestiť do jedného riadku.

Použite Plus Jakarta Sans.

Silná typografia sa môže občas veľmi rozrásť a stať sa prechodom.
samotné zariadenie.

Vyhnite sa generickému správaniu pohyblivej grafiky, kde sa každé slovo animuje nezávisle.

Typografia by sa mala pohybovať rovnako ako navrhnuté objekty.

─────────────────────────────────────────────
ZVUK / RYTMUS
─────────────────────────────────────────────

Navrhnite pohyb, ako keby bol skrátený na približne 115 – 120 BPM:
prémiový, kinetický, sofistikovaný, nie zbesilý.

Dôležité momenty by mali dopadnúť hudobne.

Navrhovaný zvukový jazyk:

• nízky mäkký náraz pre výrazné odhalenie
• obmedzené hmatové kliknutia v používateľskom rozhraní
• jemný metalický/sklenený tónový tick
• jemný nízkofrekvenčný pohyb počas prechodov medzi kamerami
• elegantný, vyrovnaný tón v oblasti loga

Vyhnite sa:

• obrovský boom filmových upútavok
• EDM stúpačky
• hlasné svišťanie všade
• zvuky „technologického rozhrania“ v štandardnom formáte
• rapový rytmus
• agresívne basy

Ak v projekte nie sú žiadne právne bezpečné hudobné/zvukové aktíva, NEODSTRAŇUJTE
zvuk chránený autorskými právami z internetu.

Odovzdajte vizuálnu predlohu bez hudby chránenej autorskými právami a vytvorte stručnú nápovedu
hárok popisujúci, kde by mala hudba/zvukové efekty dopadnúť.

Ak existuje vhodný bezpečný/lokálny zvuk, použite ho.

─────────────────────────────────────────────
IBA SKUTOČNÝ PRODUKT
─────────────────────────────────────────────

Toto je kritické.

Skontrolujte hlavné potrubie.

Nevymýšľajte si obrazovky.

Nevymýšľajte si metriky, ktoré naznačujú skutočné údaje o zákazníkoch.

V prípade potreby použite jasne syntetické/demo-bezpečné hodnoty.

Neúmyselne nezverejňujte žiadne osobné informácie, informácie o testovacích používateľoch ani informácie o produkcii.

Znovu použite vizuálnu štruktúru skutočného používateľského rozhrania Taxtello.

Ak je potrebné oddeliť pohybom obrazovku, verne ju vytvorte v React z
skutočný dizajnový systém namiesto jednoduchého zmenšovania obrovskej snímky obrazovky.

Výsledok by mal stále vyzerať nepochybne ako Taxtello.

─────────────────────────────────────────────
OČAKÁVANIA IMPLEMENTÁCIE
─────────────────────────────────────────────

Pracujte priamo v:

/taxtello/beta-motion

Vytvorte novú kompozíciu popri existujúcej.

Zachovať funkčnosť existujúcich kompozícií.

Novú prácu štruktúrujte prehľadne.

Uprednostňujte opakovane použiteľné primitívy pre:

• povrch kamery
• rám produktu
• maskované prechody
• text odhaľuje
• Odhalenia regiónu používateľského rozhrania
• ambientné osvetlenie
• prechody zdieľaných prvkov

Vyhnite sa jednej 1 500-riadkovej zložke.

Použite deterministickú animáciu Remotion riadenú snímkou/časom.

Žiadny nastavený časový limit.
Žiadne nedeterministické animácie.

Dodržujte 60 fps počas celého filmu.

Zámerne používajte interpoláciu/pružinu/povoľovanie.

─────────────────────────────────────────────
NEPRESTAŇTE PO PRVEJ IMPLEMENTÁCII
─────────────────────────────────────────────

Toto je vizuálna úloha.

MUSÍTE skontrolovať skutočný vykreslený výstup.

Požadovaný pracovný postup:

1. Skontrolujte úložisko a skutočnú značku/produkt.

2. Napíšte stručný storyboard s:
- presné časové pečiatky
- kľúčový vizuál
- logika prechodu
- kópia
- zamýšľaný emocionálny rytmus

3. Implementujte to.

4. Spustite kontrolu typu / relevantné kontroly.

5. Vykreslite reprezentatívne snímky približne v:
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. VIZUÁLNE SKONTROLUJTE TIETO SNÍMKY.

Nepotvrdzujte len to, že vykreslenie bolo úspešné.

Opýtajte sa:

Vyzerá to ako film o produktoch na úrovni Apple?

Vyzerá niečo ako šablóna?

Je toho na obrazovke priveľa?

Je produkt čitateľný?

Sú prechody logicky prepojené?

Pôsobí Taxtello gold ako prémiový produkt?

Vyzerá každý záber zladený?

7. Opravte vizuálne nedostatky.

8. Vyrenderujte celý film.

9. Skontrolujte viacero presne dekódovaných snímok z finálneho MP4, nielen prehliadač
snímky obrazovky.

10. V prípade potreby zopakujte postup.

Nedeklarujte úspech, pretože kód sa kompiluje.

Výsledkom je FILM.

─────────────────────────────────────────────
KVALITNÝ TYČ
─────────────────────────────────────────────

Zamietnite svoj vlastný výsledok, ak máte pocit, že:

• šablóna SaaS
• animácia v PowerPointe
• nahrávka obrazovky webovej stránky
• všeobecné demo Remotion
• reklama na kryptomeny
• propagačná šablóna vygenerovaná umelou inteligenciou
• päť snímok obrazovky, ktoré sa posúvajú okolo
• nadmerné množstvo marketingového textu

Každý dôležitý záber by mal byť dostatočne dobrý na to, aby sa dal použiť ako statická reklama.

Radšej by som mal:

3 mimoriadne vizuálne momenty

než

10 priemerných celovečerných animácií.

─────────────────────────────────────────────
KONEČNÉ VÝSLEDKY
─────────────────────────────────────────────

Poskytnite:

1. Záverečný storyboard
2. Nový zdroj zloženia Remotion
3. 1920 × 1080 / 60 snímok za sekundu, finálne MP4
4. Plagát/záverečný záber
5. Kontaktný list s reprezentatívnymi snímkami z filmu
6. Presný čas behu
7. Zoznam použitých skutočných aktív/obrazoviek Taxtello
8. Stručné vysvetlenie jazyka pohybu
9. Akékoľvek zostávajúce vizuálne kompromisy
10. Príkazy na reprodukciu vykreslenia

Výstupy uložte do jasne pomenovaného adresára, napríklad:

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

Nič nenasadzujte.
Neupravujte výrobné údaje.
Nič nezlučujte.

Buďte kreatívni naplno, ale zachovajte bezohľadnú zdržanlivosť.

Nech Taxtello vyzerá draho.

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.

Výzva prevzatá z príspevok @daniel_haida.