Instellen: Taxtello boekhoudapp film

Je bent de senior motion designer, product designer en Remotion engineer voor Taxtello.

Jouw taak is om een echt hoogwaardige productfilm van Apple-niveau te maken voor Taxtello.

Dit is GEEN algemene uitleg over SaaS.
Dit is GEEN functiebeschrijving.
Dit is GEEN animatie voor een opstartsjabloon.

Ik wil een product-/merkshowreel van maximaal 15 seconden die Taxtello presenteert als een volwaardig, duur en prachtig vormgegeven financieel product.

Denken:

Apple productlanceringsfilm
× premium fintech
× redactioneel bewegingsontwerp
× ingetogen, op Stripe lijkende productpresentatie
× Taxtello's eigen visuele identiteit

De gewenste reactie is:

"Wacht even, is dit een Duitse boekhoudapp?"

De film moet een luxe uitstraling hebben.

────────────────────────────────────
REPO / BRON VAN WAARHEID
────────────────────────────────────

Bekijk eerst de daadwerkelijke repositories voordat je iets ontwerpt.

Hoofdproduct:
/taxtello/main

Bestaand Remotion:
/taxtello/beta-motion

Belangrijke, authentieke merkbronnen:

/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

Bestaande schermafbeeldingen van het huidige product zijn te vinden onder:

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

Geef de voorkeur aan de meest recente, geldige schermafbeeldingen/actuele bron boven verouderde bestanden.

Er bestaat al een 24 seconden durende Remotion heldenanimatie in
/taxtello/beta-motion.

Vervang het niet.
NIET terugdraaien.
Forceer de huidige verhaallijn over AI-verbindingen NIET in deze nieuwe film.

Maak een nieuwe, onafhankelijke compositie voor deze taak, bijvoorbeeld:

TaxtelloShowreel15

Je kunt bestaande infrastructuur, lettertypen, renderingtools en bewegingsprimitieven hergebruiken.
Het afvlakken van curves, het laden van assets en de QA-infrastructuur van beta-motion waar nodig.

Maar creatief gezien zou dit een nieuwe film moeten zijn.

Bekijk vóór de implementatie de daadwerkelijke gebruikersinterface van Taxtello en zorg dat u het product begrijpt.

Verzin geen functionaliteit die niet bestaat.

────────────────────────────────────
ECHTE TAXTELLO VISUELE TAAL
────────────────────────────────────

Gebruik het echte ontwerpsysteem.

Kernpalet:

Achtergrond:
#0c0f1a

Verhoogde oppervlakken:
#111525
#131722
#1a2032

Primair merkgoud:
#e8b84b

Gouden accent:
#f5d07a

Gouddiepte:
#9b6d18

Primaire tekst:
#e8eaf2

Sterk warm wit:
#f6f4eb

Secundaire tekst:
#8b93b5

Positief:
#34d399

Negatieve/foutmeldingen alleen waar semantisch noodzakelijk:
#f87171

Typografie:
Plus Jakarta Sans

Cijfers / financiële waarden waar van toepassing:
JetBrains Mono

Gebruik het officiële Taxtello-woordmerk en/of Taxtello-logo.
Het logo mag niet worden nagetekend of benaderd.

Het goud in Taxtello moet aanvoelen als een kostbaar accent, niet als een gele UI-overvloed.

Denken:
donker metaal
warm goud
glas
inkt
precisie
stille zelfverzekerdheid

NIET:
cyberpunk
crypto
neon
gamen
generieke AI paars
regenbooggradienten

────────────────────────────────────
KERNREGELS VOOR CREATIEVE ZAKEN
────────────────────────────────────

Volg deze regels meedogenloos op:

1. ÉÉN OPNAME = ÉÉN IDEE.

2. Elke scène heeft ruimte nodig om te ademen.

3. De gebruikersinterface van het product is het belangrijkste element.

4. Plak niet overal verklarende teksten op.

5. Gebruik geen abrupte bezuinigingen, tenzij daar een bewuste reden voor is.

6. Geef de voorkeur aan objectgestuurde overgangen:
een kaart wordt de volgende kaart,
een grafieklijn wordt een verbindingslijn,
een ontvangstbewijs wordt een boeking,
een getal wordt een ander interface-element,
De camera beweegt door het product heen.

7. Gebruik premium easing.
Geen lineaire beweging.

8. De bewegingen moeten op natuurlijke wijze in elkaar overlopen.
De elementen hoeven niet allemaal precies op hetzelfde frame te beginnen en te eindigen.

9. Gebruik diepte spaarzaam:
perspectief,
zachte parallax,
schaal,
scheiding van voorgrond en achtergrond,
Een gecontroleerde scherptediepte, indien mogelijk.

10. Geen enkel effect bestaat simpelweg omdat het er cool uitziet.

11. Geen spam met deeltjes.

12. Geen nep-glassmorphism overal.

13. Geen overmatige onscherpte.

14. Geen nutteloze 3D-draaikaarten.

15. Niet constant in- en uitzoomen.

16. Nee, 20 verschillende animatiestijlen.

17. Geen stuiterende gebruikersinterface.

18. Geen gigantische marketingalinea.

19. Imiteer niet één specifieke Apple-reclame shot voor shot.
Leg in plaats daarvan de filosofie en de productiekwaliteit vast.

Het visuele zelfvertrouwen moet voortkomen uit terughoudendheid.

────────────────────────────────────
FORMAAT
────────────────────────────────────

Primaire master:

1920 × 1080
60 fps
16:9
H.264
maximale duur: 15,0 seconden

Doeluitvoeringstijd:
ongeveer 14,0–15,0 seconden.

Het moet ook zonder geluid functioneren als een productpresentatie op sociale media.

Maak, indien mogelijk, NADAT de master klaar is, ook een bewust opnieuw samengestelde versie.
verticale/sociale variant.

Snijd de bureaubladcompositie niet zomaar bij.

Maar de desktopmaster heeft prioriteit.

────────────────────────────────────
VERHAAL / EMOTIONELE ONTWIKKELING
────────────────────────────────────

Maak hier geen lijst van vijf kenmerken van.

Het moet aanvoelen als één doorlopende gedachte:

CHAOS → CONTROLE → DUIDELIJKHEID → TAXTELLO

De eerste anderhalve seconde moet er al top uitzien.

Het eerste betekenisvolle productmoment zou binnen ongeveer 2 seconden moeten plaatsvinden.

Geen logo-intro van vijf seconden.

Mogelijke verhaallijn:

“Alles over uw bedrijf, eindelijk op één plek.”

Maar LAAT het ZIEN in plaats van het uit te leggen.

Ik wil in de hele film ongeveer vier visuele ideeën terugzien.

Gebruik de sterkste ECHTE Taxtello-oppervlakken die je in de repository vindt.

Sterke kandidaten zijn onder andere:

• Finanzcockpit / Dashboard
• Rechnungen
• Belege
• Bank / matching
• Steuergesundheit / belastingoverzicht

Je hoeft ze NIET allemaal te laten zien.

Kies de visueel meest aantrekkelijke combinatie.

────────────────────────────────────
VOORGESTELD STORYBOARD VAN 15 SECONDEN
────────────────────────────────────

Beschouw dit als een sterk uitgangspunt, niet als een star sjabloon.

0,00 – 1,20

ZWART / MARINEBLAUW.

Er verschijnt een klein, warmgoudkleurig glansje.

De glans onthult op elegante wijze het Taxtello-merk of een fragment daarvan.
woordmerk.

Geen standaard logo dat vervaagt.

Denk aan machinale precisie.

De camera beweegt door of langs de markering en de gebruikersinterface begint eruit tevoorschijn te komen.

Zeer weinig of geen kopie.

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

1.20 – 4.40

FINANCIËLE CONTROLE.

Onthul de daadwerkelijke Taxtello-cockpit als een driedimensionaal productoppervlak.

Niet zomaar een screenshot op het scherm.

Herstructureer/snijd bij/laag het zodat afzonderlijke interfacegebieden kunnen animeren.

Het financiële kerncijfer wordt helder en duidelijk weergegeven.
De grafiek wordt ingetekend.
Ondersteunende meetwaarden stabiliseren zich iets later.

Gebruik een subtiele verspringing.

Er kan bijvoorbeeld één regel tekst verschijnen:

“Alles im Blick.”

Of een andere, even korte Duitse zin, als je iets geschikters vindt.

Maximaal 3-4 woorden.

De interface moet herkenbaar blijven als het daadwerkelijke product.

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

4.40 – 7.50

DOCUMENT-/BOEKHOUDTRANSFORMATIE.

Gebruik een visueel object uit de vorige scène als overgang.

Voorbeeld:

Een gouden punt op de kaart wordt vergroot tot in de hoek van een bonnetje/kaart.
De camera volgt het.
Een ontvangstbewijs/document wordt ingevoerd.
Taxtello identificeert of organiseert het.
Het document wordt naadloos gekoppeld aan het bijbehorende boekings-/financiële dossier.

Gebruik magnetische uitlijning en precisie.

Geen goedkope laserscanner.

Geen zwevende papieren tornado.

Mogelijke microkopie:

“Belege. Erledigt.”

Alleen als het de situatie verbetert.

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

7,50 – 10,70

GELD / FACTUREN.

Transformeer of ga op natuurlijke wijze over naar de echte Rechnungen-interface.

Gebruik één krachtig moment:

de status van een factuur verandert,
een betaling wordt afgehandeld,
een bedrag neemt zijn plaats in,
of het overzicht stelt zich vanzelf samen.

Cijfers moeten tastbaar en precies aanvoelen.

Gebruik JetBrains Mono waar dit overeenkomt met het daadwerkelijke product.

Goud markeert de actieve toestand.

Groen wordt alleen gebruikt voor een daadwerkelijk positieve semantische toestand.

Mogelijke tekst:

“Geld. Im Griff.”

Nogmaals: optioneel en extreem kort.

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

10,70 – 12,80

BELASTING / DUIDELIJKHEID.

Ga nu naar het echte Taxtello-platform voor belastingadvies en financiële begeleiding.

Beweer niet dat Taxtello op magische wijze correcte belastingaangiften garandeert.

Communiceer inzicht en controle.

Voorbeeld:

Meerdere ruisende signalen vallen samen in één rustig, gestructureerd belastingoverzicht.

Mogelijke tekst:

“Steuern im Blick.”

Deze scène moet rustiger aanvoelen dan de vorige scène.

Het ritme vertraagt even.

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

12.80 – 15.00

MERKRESULTAAT.

Trek de camera naar buiten.

De gebruikersinterface wordt samengevouwen tot één prachtig Taxtello-productobject/oppervlak.

De duisternis keert terug.

Het gouden Taxtello-woordmerk is nu zichtbaar.

Een korte merkvermelding eronder.

Verken krachtige slotzinnen zoals:

“Dein Business. Klar.”

"Buchhaltung. Unter Kontrolle."

“Einfach mehr Überblick.”

"Alles voor het bedrijfsleven. Een einem Ort."

Maak je keuze op basis van de daadwerkelijke productpositionering die je in de repository aantreft.

Gebruik een lijn niet zomaar omdat ik dat heb voorgesteld.

Het laatste beeld moet voldoende stilte bevatten om geregistreerd te kunnen worden.

Sluit vol vertrouwen af.

Geen gigantische, stuiterende CTA.

────────────────────────────────────
OVERGANGEN
────────────────────────────────────

Dit is een van de belangrijkste onderdelen.

Ik wil overgangen die de kijker aan het denken zetten:

“Uiteraard vloeide de volgende scène daaruit voort.”

Goed:

grafieklijn → documentrand
gouden pil → factuurknop
financieel nummer → bedrag op de factuur
kaartrand → volgende oppervlak
camera push through interface element
gedeelde geometrie
Maskeronthulling met behulp van daadwerkelijke productvormen

Slecht:

crossfade
willekeurige wissen
spinovergang
hapering
elke twee seconden een snelle camerabeweging
generieke SaaS-slide-left
zoom-blur spam

Directe montage is alleen toegestaan wanneer een bewust ritmisch effect de film ten goede komt.

────────────────────────────────────
BEWEGING
────────────────────────────────────

Beweging vereist gewicht.

Gebruik krommen die vergelijkbaar zijn met:

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

waar van toepassing.

De verschillende elementen zouden subtiel verschillende aankomsttijden moeten hebben.

De voorkeur geven aan:

verwachting
overschrijding onder de ~2%
zich vestigen
voortzetting van de beweging
gedeelde snelheid tussen scènes

Vermijd cartoonachtige veerkracht.

De camerabewegingen moeten de indruk wekken van een hoogwaardige macro-productfotografie.

Stel je voor dat we een fysiek, hoogwaardig object filmen, ook al is het software.

────────────────────────────────────
VERLICHTING / MATERIAAL
────────────────────────────────────

Gebruik zeer subtiele omgevingsverlichting.

Mogelijke behandelingen:

• zachte gouden randverlichting
• donkerblauw verval
• zwakke omgevingsbloei
• zachte, spiegelende reflectie die over een oppervlak beweegt
• ingetogen vignet
• een subtiele korrelstructuur, indien dit materieel bijdraagt

Houd de interface overzichtelijk.

Vervag het product NIET om het er filmisch uit te laten zien.

Geen valse, glanzende reflecties die de leesbaarheid belemmeren.

────────────────────────────────────
TYPOGRAFIE
────────────────────────────────────

Gebruik zo min mogelijk tekst.

Geen enkele zin mag concurreren met het product.

Kopregels moeten over het algemeen op één regel passen.

Gebruik Plus Jakarta Sans.

Krachtige typografie kan soms zeer groot worden en een overgangseffect creëren.
het apparaat zelf.

Vermijd generieke animaties waarbij elk woord afzonderlijk beweegt.

Typografie moet meebewegen met ontworpen objecten.

────────────────────────────────────
GELUID / RITME
────────────────────────────────────

Ontwerp de beweging alsof deze is afgesteld op ongeveer 115-120 BPM:
Hoogwaardig, dynamisch, verfijnd, maar niet hectisch.

Belangrijke momenten moeten muzikaal goed overkomen.

Voorgestelde klanktaal:

• Lage impact op de achtergrond bij een belangrijke onthulling
• Beperkte tactiele UI-klikken
• subtiele metallic/glanzende tint
• Zachte, laagfrequente beweging tijdens camerabewegingen
• elegante, afgeronde toon in het logo

Voorkomen:

• enorme opleving van filmtrailers
• EDM-verhogers
• Overal luide suizende geluiden
• standaard “technische interface”-geluiden
• rap beat
• agressieve bas

Als er geen legaal veilig muziek-/audiomateriaal in het project aanwezig is, verwijder het dan NIET.
Auteursrechtelijk beschermde audio van internet.

Lever de visuele master aan zonder auteursrechtelijk beschermde muziek en maak een beknopte cue.
Een blad waarop staat waar de muziek/geluidseffecten moeten worden afgespeeld.

Als er geschikte, veilige/lokale audio beschikbaar is, gebruik die dan.

────────────────────────────────────
ALLEEN ECHTE PRODUCTEN
────────────────────────────────────

Dit is cruciaal.

Controleer de huidige hoofdaansluiting.

Verzin geen schermen.

Verzin geen meetmethoden die echte klantgegevens suggereren.

Gebruik indien nodig duidelijk synthetische/demonstratieveilige waarden.

Zorg ervoor dat u geen persoonlijke gegevens, testgebruikersgegevens of productie-informatie per ongeluk openbaar maakt.

Hergebruik de visuele structuur van de bestaande Taxtello-gebruikersinterface.

Als een scherm bewegingsgescheiden moet worden, creëer het dan nauwkeurig in React.
Het echte ontwerpsysteem in plaats van simpelweg een gigantische screenshot te schalen.

Het resultaat moet er nog steeds onmiskenbaar uitzien als Taxtello.

────────────────────────────────────
VERWACHTINGEN TEN AANZIEN VAN DE IMPLEMENTATIE
────────────────────────────────────

Werk direct in:

/taxtello/beta-motion

Maak de nieuwe compositie naast de bestaande.

Zorg ervoor dat bestaande composities blijven werken.

Structureer het nieuwe werk overzichtelijk.

Geef de voorkeur aan herbruikbare basisgegevenstypen voor:

• camera-oppervlak
• productframe
• gemaskeerde overgangen
• tekst onthult
• UI-regio onthult
• sfeerverlichting
• overgangen met gedeelde elementen

Vermijd één component met 1500 regels.

Gebruik deterministische Remotion animatie op basis van frame/tijd.

Geen setTimeout.
Geen niet-deterministische animaties.

Houd de framerate constant op 60 fps.

Gebruik interpolatie/veerwerking/versoepeling bewust.

────────────────────────────────────
STOP NIET NA DE EERSTE IMPLEMENTATIE
────────────────────────────────────

Dit is een visuele opdracht.

U MOET het daadwerkelijk gegenereerde resultaat controleren.

Vereiste workflow:

1. Controleer de repository en het daadwerkelijke merk/product.

2. Schrijf een beknopt storyboard met:
- exacte tijdstempels
- belangrijkste visuele weergave
- overgangslogica
- kopiëren
- beoogd emotioneel ritme

3. Voer het uit.

4. Voer een typecontrole/relevante controles uit.

5. Render representatieve frames met ongeveer:
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. BEKIJK DEZE AFBEELDINGEN VISUEEL.

Bevestig niet alleen dat het renderen is gelukt.

Vragen:

Lijkt dit op een productfilm van Apple-niveau?

Lijkt er iets op een sjabloon?

Is er te veel op het scherm te zien?

Is het product leesbaar?

Zijn de overgangen logisch met elkaar verbonden?

Voelt Taxtello Gold ook zo aan?

Ziet elk beeld er zorgvuldig gecomponeerd uit?

7. Verbeter visuele zwakke punten.

8. Render de complete film.

9. Controleer meerdere exact gedecodeerde frames uit het uiteindelijke MP4, niet alleen de browser.
screenshots.

10. Herhaal indien nodig.

Verklaar de code niet als succesvol omdat deze compileert.

Het eindresultaat is de FILM.

────────────────────────────────────
KWALITEITSBALK
────────────────────────────────────

Verwerp je eigen resultaat als het aanvoelt alsof:

• een SaaS-sjabloon
• een PowerPoint-animatie
• een schermopname van een website
• een algemene Remotion demo
• een crypto-advertentie
• een door AI gegenereerd promotiesjabloon
• vijf screenshots die rondschuiven
• overmatige marketingteksten

Elk belangrijk beeld moet goed genoeg zijn om als stilstaand reclamebeeld te gebruiken.

Ik zou liever hebben:

3 buitengewone visuele momenten

dan

10 middelmatige animaties.

────────────────────────────────────
EINDRESULTATEN
────────────────────────────────────

Voorzien:

1. Definitief storyboard
2. Nieuwe bron voor het samenstellen van Remotion
3. 1920×1080 / 60fps definitieve MP4 resolutie
4. Poster/eindkader
5. Contactvel met representatieve beelden uit de film
6. Exacte looptijd
7. Lijst met daadwerkelijk gebruikte Taxtello-assets/schermen
8. Korte uitleg van de motietaal
9. Eventuele resterende visuele compromissen
10. Commando's om de weergave te reproduceren

Sla de uitvoer op in een map met een duidelijke naam, bijvoorbeeld:

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

Plaats niets online.
Wijzig de productiegegevens niet.
Voeg niets samen.

Leef je creatief helemaal uit, maar wees tegelijkertijd meedogenloos terughoudend.

Laat Taxtello er duur uitzien.

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.

Aanwijzing afkomstig van na @daniel_haida.