Film o aplikacji księgowej Taxtello

Jesteś starszym projektantem ruchu, projektantem produktu i inżynierem Remotion w Taxtello.

Twoim zadaniem jest stworzenie dla Taxtello filmu promującego produkt premium na poziomie Apple.

To NIE jest ogólny poradnik wyjaśniający zasady działania oprogramowania SaaS.
To NIE jest przewodnik po funkcjach.
To NIE jest szablonowa animacja startowa.

Chcę maksymalnie 15-sekundowego pokazu marki/produktu, który sprawi, że Taxtello będzie wyglądać jak dojrzały, drogi i pięknie zaprojektowany produkt finansowy.

Myśleć:

Film promujący produkt Apple
× premium fintech
× projekt ruchu redakcyjnego
× powściągliwa prezentacja produktu w stylu pasków
× Własna identyfikacja wizualna Taxtello

Pożądana reakcja to:

„Czekaj, to niemiecka aplikacja do księgowości?”

Film powinien sprawiać wrażenie drogiego.

────────────────────────────────────
REPO / ŹRÓDŁO PRAWDY
────────────────────────────────────

Zanim zaczniesz cokolwiek projektować, najpierw sprawdź rzeczywiste repozytoria.

Główny produkt:
/taxtello/main

Istniejący projekt Remotion:
/taxtello/beta-motion

Ważne źródła prawdziwych marek:

/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

Aktualne zrzuty ekranu produktów można znaleźć w:

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

Preferuj najnowsze, poprawne zrzuty ekranu/aktualne źródła zamiast nieaktualnych artefaktów.

Istnieje już 24-sekundowa animacja bohatera Remotion
/taxtello/beta-motion.

NIE wymieniaj go.
NIE regresuj tego.
NIE wciskajcie na siłę wątku powiązań ze sztuczną inteligencją do nowego filmu.

Utwórz nową niezależną kompozycję dla tego zadania, np.

TaxtelloShowreel15

Możesz ponownie wykorzystać dobrą infrastrukturę, czcionki, narzędzia renderujące, prymitywy ruchu,
łagodzenie krzywych, ładowanie zasobów i infrastruktura QA z beta-motion, tam gdzie jest to przydatne.

Ale pod względem kreatywnym powinien to być nowy film.

Przed wdrożeniem sprawdź rzeczywisty interfejs użytkownika Taxtello i poznaj produkt.

Nie wymyślaj funkcjonalności, która nie istnieje.

────────────────────────────────────
RZECZYWISTY JĘZYK WIZUALNY TAXTELLO
────────────────────────────────────

Użyj prawdziwego systemu projektowania.

Paleta podstawowa:

Tło:
#0c0f1a

Podwyższone powierzchnie:
#111525
#131722
#1a2032

Główna marka złota:
#e8b84b

Złoty akcent:
#f5d07a

Głębia złota:
#9b6d18

Tekst podstawowy:
#e8eaf2

Mocna ciepła biel:
#f6f4eb

Tekst dodatkowy:
#8b93b5

Pozytywny:
#34d399

Negatyw/błąd tylko tam, gdzie jest to semantycznie konieczne:
#f87171

Typografia:
Plus Jakarta Sans

Liczby/wartości finansowe, tam gdzie to stosowne:
JetBrains Mono

Użyj rzeczywistego znaku słownego Taxtello i/lub znaku towarowego Taxtello.
Nie przerysowuj ani nie przybliżaj logo.

Złoto Taxtello powinno być cennym akcentem, a nie żółtą warstwą interfejsu użytkownika.

Myśleć:
ciemny metal
ciepłe złoto
szkło
atrament
precyzja
cicha pewność siebie

NIE:
cyberpunk
krypto
neon
hazard
ogólny fioletowy AI
gradienty tęczy

────────────────────────────────────
PODSTAWOWE ZASADY KREATYWNE
────────────────────────────────────

Postępuj bezwzględnie zgodnie z tymi zasadami:

1. JEDEN SZTUK = JEDEN POMYSŁ.

2. Każda scena musi mieć przestrzeń do rozwoju.

3. Interfejs użytkownika produktu jest najważniejszy.

4. Nie umieszczaj wszędzie tekstu wyjaśniającego.

5. Nie stosuj ostrych cięć, chyba że istnieje ku temu konkretny powód.

6. Preferuj przejścia sterowane obiektowo:
karta staje się kolejną kartą,
linia wykresu staje się łącznikiem,
paragon staje się rezerwacją,
liczba staje się kolejnym elementem interfejsu,
kamera porusza się przez produkt.

7. Użyj łagodzenia premium.
Brak ruchu liniowego.

8. Ruchy powinny na siebie nachodzić w sposób naturalny.
Elementy nie powinny zaczynać się i kończyć dokładnie w tej samej klatce.

9. Oszczędnie stosuj głębokość:
perspektywiczny,
miękka paralaksa,
skala,
oddzielenie pierwszego planu od tła,
kontrolowana głębia ostrości, jeśli to możliwe.

10. Żaden efekt nie istnieje tylko dlatego, że wygląda fajnie.

11. Żadnego spamu cząsteczkowego.

12. Żadnego fałszywego szklomorfizmu wszędzie.

13. Brak nadmiernego rozmycia.

14. Żadnych bezsensownych, wirujących kart 3D.

15. Brak ciągłego powiększania obrazu.

16. Brak 20 różnych stylów animacji.

17. Brak odskakującego interfejsu użytkownika.

18. Brak wielkiego akapitu marketingowego.

19. Nie naśladuj konkretnej reklamy Apple ujęcie po ujęciu.
Zamiast tego uchwyć filozofię i jakość produkcji.

Pewność siebie w odbiorze powinna wynikać z powściągliwości.

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

Główny mistrz:

1920 × 1080
60 klatek na sekundę
16:9
H.264
maksymalny czas trwania: 15,0 sekund

Docelowy czas wykonania:
około 14,0–15,0 sekund.

Musi działać jak produkt w mediach społecznościowych, nawet bez dźwięku.

Jeżeli jest to praktyczne PO zakończeniu pracy nad masterem, stwórz także celowo przekomponowaną wersję
wariant pionowy/społeczny.

Nie przycinaj po prostu kompozycji pulpitu.

Ale priorytetem jest pulpit.

────────────────────────────────────
HISTORIA / ŁUK EMOCJONALNY
────────────────────────────────────

Nie rób z tego listy pięciu cech.

Powinno to sprawiać wrażenie jednej, ciągłej myśli:

CHAOS → KONTROLA → JASNOŚĆ → TAXTELLO

Już pierwsze 1,5 sekundy musi sprawiać wrażenie czegoś ekskluzywnego.

Pierwszy znaczący moment pojawienia się produktu powinien nastąpić po około 2 sekundach.

Brak pięciosekundowego wstępu do logo.

Możliwy kierunek narracji:

„Wszystko, co dotyczy Twojej firmy, wreszcie w jednym miejscu”.

Ale POKAŻ to zamiast wyjaśniać.

Chcę, żeby w całym filmie znalazły się około cztery pomysły wizualne.

Użyj najmocniejszych PRAWDZIWYCH powierzchni Taxtello, jakie znajdziesz w repozytorium.

Do mocnych kandydatów zaliczają się:

• Kokpit finansowy / Panel sterowania
• Rechnungen
• Belege
• Bank / dopasowanie
• Steuergesundheit / przegląd podatkowy

Nie musisz ich wszystkich pokazywać.

Wybierz połączenie, które jest najsilniejsze wizualnie.

────────────────────────────────────
SUGEROWANY 15-SEKUNDOWY STORYBOARD
────────────────────────────────────

Potraktuj to jako solidny punkt wyjścia, a nie sztywny szablon.

0,00 – 1,20

CZARNY / GRANATOWY.

Pojawia się maleńki, ciepłozłoty błysk.

Błysk elegancko ujawnia znak Taxtello lub jego fragment
znak słowny.

Brak efektu wyblaknięcia logo.

Pomyśl o precyzyjnej obróbce mechanicznej.

Kamera przesuwa się przez znak lub obok niego, a z niego zaczyna wyłaniać się interfejs użytkownika.

Bardzo mało kopii, albo wcale ich nie ma.

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

1,20 – 4,40

KONTROLA FINANSOWA.

Ujawnij rzeczywisty kokpit Taxtello jako powierzchnię produktu trójwymiarowego.

Nie jest to po prostu zrzut ekranu umieszczony na ekranie.

Zrekonstruuj/przytnij/ułóż warstwy tak, aby poszczególne obszary interfejsu mogły się animować.

Bohaterska liczba finansowa rozwiązuje się precyzyjnie.
Wykres się rysuje.
Pozostałe wskaźniki stabilizują się nieco później.

Zastosuj subtelne zataczanie.

Może pojawić się na przykład pojedyncza linijka tekstu:

„Wszystko w zasięgu wzroku.”

lub inną, równie krótką frazę niemiecką, jeśli uznasz, że pasuje bardziej.

Maksymalnie ~3–4 słowa.

Interfejs musi być rozpoznawalny jako rzeczywisty produkt.

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

4,40 – 7,50

TRANSFORMACJA DOKUMENTACJI/KSIĘGOWOŚCI.

Jako przejścia użyj obiektu wizualnego z poprzedniej sceny.

Przykład:

Złoty punkt wykresu rozszerza się w narożniku paragonu/karty.
Kamera podąża za nim.
Wprowadzono paragon/dokument.
Taxtello identyfikuje i porządkuje te informacje.
Dokument płynnie wpasowuje się do odpowiedniego rejestru księgowego/finansowego.

Użyj magnetycznego wyrównania i precyzji.

Żadnego tandetnego skanera laserowego.

Żadnego unoszącego się papierowego tornada.

Możliwa mikrokopia:

„Belege. Erledigt.”

Tylko jeśli poprawi to scenę.

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

7,50 – 10,70

PIENIĄDZE / FAKTURY.

Przekształć lub przekształć naturalnie w prawdziwy interfejs Rechnungen.

Wykorzystaj jeden mocny moment:

zmiana statusu faktury,
płatność zostaje rozwiązana,
kwota przesuwa się na swoje miejsce,
lub przegląd składa się sam.

Liczby powinny być namacalne i precyzyjne.

Użyj JetBrains Mono, jeśli pasuje do rzeczywistego produktu.

Kolor złoty oznacza stan aktywny.

Kolor zielony używany jest wyłącznie w przypadku prawdziwie pozytywnego stanu semantycznego.

Potencjalna kopia:

„Geld. Im Griff.”

Ponownie: opcjonalne i niezwykle krótkie.

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

10,70 – 12,80

PODATEK / JASNOŚĆ.

Przejście do rzeczywistej powierzchni doradztwa podatkowego/finansowego Taxtello.

Nie twierdź, że Taxtello magicznie zagwarantuje poprawność rozliczeń podatkowych.

Zapewnij przejrzystość i kontrolę.

Przykład:

wiele zakłóconych sygnałów łączy się w jeden spokojny, ustrukturyzowany przegląd podatkowy.

Potencjalna kopia:

„Steuern im Blick.”

Ta scena powinna wydawać się spokojniejsza niż poprzednia.

Rytm na chwilę zwalnia.

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

12,80 – 15,00

KORZYŚCI DLA MARKI.

Wyciągnij kamerę na zewnątrz.

Interfejs użytkownika kompresuje się lub składa w jeden piękny obiekt/powierzchnię produktu Taxtello.

Wokół niego znów zapada ciemność.

Złoty znak słowny Taxtello znika.

Jedna krótka linia marki pod spodem.

Poznaj mocne końcowe wersy, takie jak:

„Twój biznes. Klar.”

„Buchhaltung. Unter Kontrolle.”

„Einfach mehr Überblick”.

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

Dokonaj wyboru na podstawie faktycznego pozycjonowania produktu, które znajdziesz w repozytorium.

Nie używaj tekstu tylko dlatego, że ja go zasugerowałem.

Ostatnia klatka musi być na tyle spokojna, aby można ją było zarejestrować.

Zakończ pewnie.

Brak ogromnego, odbijającego się wezwania do działania.

────────────────────────────────────
PRZEJŚCIA
────────────────────────────────────

To jest jedna z najważniejszych części.

Chcę przejść, które zmuszą widza do myślenia:

„Oczywiście kolejna scena powstała na tej podstawie.”

Dobry:

linia wykresu → krawędź dokumentu
złota pigułka → przycisk faktury
numer finansowy → kwota na fakturze
krawędź karty → następna powierzchnia
element interfejsu typu push through kamery
wspólna geometria
odsłonięcie maski przy użyciu rzeczywistych kształtów produktu

Zły:

płynne przejście
losowe czyszczenie
przejście spinowe
usterka
patelnia co dwie sekundy
ogólny SaaS przesuń w lewo
spam powiększający i rozmywający

Cięcia bezpośrednie są dopuszczalne wyłącznie wtedy, gdy celowe zastosowanie efektu rytmicznego jest korzystne dla filmu.

────────────────────────────────────
RUCH
────────────────────────────────────

Ruch potrzebuje ciężaru.

Użyj krzywych porównywalnych z:

sześcienny-Bezier(0,16, 1, 0,3, 1)

w stosownych przypadkach.

Różne elementy powinny mieć subtelnie różne czasy przybycia.

Woleć:

oczekiwanie
przekroczenie poniżej ~2%
utknięcie
kontynuacja ruchu
wspólna prędkość między scenami

Unikaj kreskówkowej sprężystości.

Ruch kamery powinien przypominać ruchy wykonywane podczas zdjęć makro wysokiej jakości.

Wyobraźmy sobie, że filmujemy fizyczny obiekt klasy premium, mimo że jest to oprogramowanie.

────────────────────────────────────
OŚWIETLENIE / MATERIAŁY
────────────────────────────────────

Stosuj niezwykle delikatne oświetlenie otoczenia.

Możliwe metody leczenia:

• delikatne złote oświetlenie krawędziowe
• ciemnogranatowy spadek
• słaby rozbłysk otoczenia
• miękkie odblaski przechodzące przez powierzchnię
• powściągliwa winietka
• subtelne ziarno, jeśli rzeczywiście pomaga

Zachowaj przejrzystość interfejsu.

NIE rozmywaj produktu tylko po to, aby uzyskać efekt kinowy.

Brak sztucznych błyszczących refleksów, które mogą utrudniać czytelność.

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

Używaj bardzo mało tekstu.

Żadne zdanie nie powinno konkurować z produktem.

Nagłówki powinny mieścić się w jednym wierszu.

Użyj Plus Jakarta Sans.

Wyrazista typografia może czasami być bardzo duża i stać się przejściowa
samo urządzenie.

Unikaj ogólnych zachowań grafiki ruchomej, w których każde słowo animuje się niezależnie.

Typografia powinna poruszać się jak zaprojektowane obiekty.

────────────────────────────────────
DŹWIĘK / RYTM
────────────────────────────────────

Zaprojektuj ruch tak, jakby był przycięty do tempa około 115–120 BPM:
ekskluzywny, dynamiczny, wyrafinowany, nie szalony.

Ważne momenty powinny być oddane muzyką.

Sugerowany język dźwiękowy:

• niski, miękki wpływ na główne odsłonięcie
• ograniczone kliknięcia dotykowe interfejsu użytkownika
• subtelny metaliczny/szklany odcień
• miękki ruch o niskiej częstotliwości podczas przejść kamery
• elegancki, zdecydowany ton w logo

Unikać:

• ogromny boom na zwiastuny filmowe
• Podesty EDM
• wszędzie słychać głośne syczenie
• standardowe dźwięki „interfejsu technicznego”
• rytm rapu
• agresywny bas

Jeżeli w projekcie nie ma prawnie bezpiecznego zasobu muzycznego/audio, NIE pobieraj
chronione prawami autorskimi pliki audio z Internetu.

Dostarcz wizualny majstersztyk bez muzyki chronionej prawami autorskimi i stwórz zwięzłą wskazówkę
arkusz opisujący, gdzie powinna być umieszczona muzyka/efekty dźwiękowe.

Jeśli istnieje odpowiedni, bezpieczny/lokalny plik audio, użyj go.

────────────────────────────────────
TYLKO PRAWDZIWY PRODUKT
────────────────────────────────────

To jest bardzo ważne.

Sprawdź obecną sieć główną.

Nie wymyślaj ekranów.

Nie wymyślaj wskaźników, które sugerują rzeczywiste dane klientów.

W razie potrzeby należy używać wartości wyraźnie syntetycznych/demonstracyjnych.

Nie ujawniaj przypadkowo żadnych danych osobowych, danych użytkowników testowych ani danych produkcyjnych.

Ponownie wykorzystaj strukturę wizualną rzeczywistego interfejsu użytkownika Taxtello.

Jeśli ekran musi być oddzielony ruchem, odtwórz go wiernie w React z
prawdziwy system projektowania zamiast po prostu skalowania gigantycznego zrzutu ekranu.

Wynik powinien nadal przypominać bezbłędnie Taxtello.

────────────────────────────────────
OCZEKIWANIA DOTYCZĄCE WDROŻENIA
────────────────────────────────────

Pracuj bezpośrednio w:

/taxtello/beta-motion

Utwórz nową kompozycję obok istniejącej.

Utrzymaj działanie istniejących kompozycji.

Ustrukturyzuj nową pracę w przejrzysty sposób.

Preferuj prymitywy wielokrotnego użytku w przypadku:

• powierzchnia kamery
• rama produktu
• przejścia maskowane
• tekst ujawnia
• Region interfejsu użytkownika ujawnia
• oświetlenie otoczenia
• przejścia elementów współdzielonych

Unikaj komponentów składających się z 1500 linii.

Użyj deterministycznej animacji Remotion sterowanej klatkami/czasem.

Brak setTimeout.
Żadnych animacji niedeterministycznych.

Szanuj 60 klatek na sekundę.

Używaj interpolacji/sprężystości/łagodzenia rozważnie.

────────────────────────────────────
NIE PRZESTAWAJ PO PIERWSZYM WDROŻENIU
────────────────────────────────────

Jest to zadanie wizualne.

MUSISZ sprawdzić rzeczywisty wynik renderowania.

Wymagany przepływ pracy:

1. Sprawdź repozytorium i rzeczywistą markę/produkt.

2. Napisz zwięzły storyboard zawierający:
- dokładne znaczniki czasu
- kluczowy obraz wizualny
- logika przejścia
- kopia
- zamierzony rytm emocjonalny

3. Wdrażaj.

4. Uruchom sprawdzanie typów / sprawdzanie odpowiednich elementów.

5. Wyrenderuj klatki reprezentatywne w przybliżeniu:
0,0 sek.
1,0 sekundy
2,5 sekundy
4,5 sekundy
6,5 sekundy
8,5 sekundy
10,5 sekundy
12,5 sekundy
14,0 sek.
14,8 sekundy

6. DOKOŃCZ WZROKOWĄ KONTROLĘ TYCH OBRAZÓW.

Nie potwierdzaj jedynie, że renderowanie się powiodło.

Zapytać:

Czy to wygląda na film promujący produkt Apple?

Czy cokolwiek wygląda jak szablon?

Czy na ekranie jest za dużo?

Czy produkt jest czytelny?

Czy przejścia są logicznie powiązane?

Czy złoto Taxtello jest postrzegane jako produkt premium?

Czy każda klatka wygląda na skomponowaną?

7. Wyeliminuj słabe punkty wizualne.

8. Wyrenderuj cały film.

9. Przeanalizuj wiele dokładnie zdekodowanych klatek z końcowego pliku MP4, nie tylko z przeglądarki
zrzuty ekranu.

10. W razie potrzeby powtórz czynność.

Nie ogłaszaj sukcesu, ponieważ kod się skompilował.

Rezultatem jest FILM.

────────────────────────────────────
BAR JAKOŚCI
────────────────────────────────────

Odrzuć swój wynik, jeśli wydaje Ci się, że:

• szablon SaaS
• animacja PowerPoint
• nagranie ekranu strony internetowej
• ogólna demonstracja Remotion
• reklama kryptowalut
• szablon promocyjny wygenerowany przez sztuczną inteligencję
• pięć przesuwających się zrzutów ekranu
• nadmierna ilość tekstu marketingowego

Każda ważna klatka powinna być na tyle dobra, aby można ją było wykorzystać jako statyczną reklamę.

Wolałbym:

3 niezwykłe momenty wizualne

niż

10 przeciętnych animacji pełnometrażowych.

────────────────────────────────────
KOŃCOWE REZULTATY
────────────────────────────────────

Dostarczać:

1. Ostateczny scenariusz
2. Nowe źródło kompozycji Remotion
3. 1920×1080 / 60 kl./s finalny MP4
4. Plakat/ramka końcowa
5. Arkusz kontaktowy z reprezentatywnymi klatkami z filmu
6. Dokładny czas wykonania
7. Lista prawdziwych aktywów/ekranów Taxtello używanych
8. Krótkie wyjaśnienie języka ruchu
9. Wszelkie pozostałe wady wizualne
10. Polecenia do odtworzenia renderu

Zapisz dane wyjściowe w katalogu o wyraźnej nazwie, takim jak:

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

Nie wdrażaj niczego.
Nie modyfikuj danych produkcyjnych.
Nie scalaj niczego.

Bądź kreatywny, ale zachowaj bezwzględną powściągliwość.

Spraw, by Taxtello wyglądało drogo.

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.

Podpowiedź pobrana z post @daniel_haida.