Filmato dell'app di contabilità Taxtello

Sei il senior motion designer, product designer e ingegnere Remotion per Taxtello.

Il tuo compito è creare un video di presentazione del prodotto Taxtello di altissima qualità, paragonabile a quello di Apple.

Questa NON è una spiegazione generica di un servizio SaaS.
Questa NON è una guida dettagliata alle funzionalità.
Questa NON è un'animazione di avvio predefinita.

Desidero un video dimostrativo del marchio/prodotto della durata massima di 15 secondi che mostri Taxtello come un prodotto finanziario maturo, costoso e dal design accattivante.

Pensare:

Video di lancio dei prodotti Apple
× fintech premium
× motion design editoriale
× presentazione del prodotto sobria in stile Stripe
× L'identità visiva di Taxtello

La reazione desiderata è:

"Aspetta, questa è un'app di contabilità tedesca?"

Il film dovrebbe dare l'impressione di essere costoso.

────────────────────────────────────
REPO / FONTE DI VERITÀ
────────────────────────────────────

Prima di progettare qualsiasi cosa, esaminate i repository reali.

Prodotto principale:
/taxtello/principale

Progetto Remotion esistente:
/taxtello/beta-motion

Importanti fonti di marchi autentici:

/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

Le schermate del prodotto attualmente disponibili si trovano al seguente indirizzo:

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

Preferisci gli screenshot validi più recenti/la fonte attuale rispetto a materiale obsoleto.

Esiste già un'animazione eroica Remotion di 24 secondi in
/taxtello/beta-motion.

NON sostituirlo.
NON fate regredire la situazione.
NON forzate l'attuale trama incentrata sulle connessioni con l'intelligenza artificiale in questo nuovo film.

Crea una nuova composizione indipendente per questo compito, ad esempio

TaxtelloShowreel15

È possibile riutilizzare infrastrutture, font, utilità di rendering, primitive di movimento,
Curve di smussatura, caricamento delle risorse e infrastruttura di controllo qualità da beta-motion, ove utile.

Ma dal punto di vista creativo, questo dovrebbe essere un film nuovo.

Prima dell'implementazione, esaminate l'interfaccia utente di Taxtello e familiarizzate con il prodotto.

Non inventare funzionalità che non esistono.

────────────────────────────────────
LINGUAGGIO VISIVO REAL TAXTELLO
────────────────────────────────────

Utilizza il vero sistema di progettazione.

Tavolozza principale:

Sfondo:
#0c0f1a

Superfici sopraelevate:
#111525
#131722
#1a2032

Oro del marchio principale:
#e8b84b

In evidenza: Oro
#f5d07a

Profondità dell'oro:
#9b6d18

Testo principale:
#e8eaf2

Bianco caldo intenso:
#f6f4eb

Testo secondario:
#8b93b5

Positivo:
#34d399

Negativo/errore solo dove semanticamente necessario:
#f87171

Tipografia:
Più Jakarta Sans

Cifre/valori finanziari, ove applicabile:
JetBrains Mono

Utilizzare il marchio denominativo e/o il marchio commerciale Taxtello effettivi.
Non ridisegnare o riprodurre il logo in modo approssimativo.

L'oro di Taxtello dovrebbe apparire come un prezioso accento, non come un'ondata gialla nell'interfaccia utente.

Pensare:
metal oscuro
oro caldo
bicchiere
inchiostro
precisione
tranquilla sicurezza

NON:
cyberpunk
criptovaluta
neon
giochi
IA generica viola
sfumature arcobaleno

────────────────────────────────────
REGOLE CREATIVE FONDAMENTALI
────────────────────────────────────

Segui queste regole senza compromessi:

1. UN COLPO = UN'IDEA.

2. Ogni scena ha bisogno di spazio per respirare.

3. L'interfaccia utente del prodotto è l'elemento chiave.

4. Non tappezzare ogni spazio con testi esplicativi.

5. Non eseguire tagli netti a meno che non vi sia una ragione specifica.

6. Preferisci le transizioni basate sugli oggetti:
una carta diventa la carta successiva,
una linea del grafico diventa un connettore,
una ricevuta diventa una prenotazione,
un numero diventa un altro elemento dell'interfaccia,
La telecamera si muove attraverso il prodotto.

7. Utilizzare il premium easing.
Nessun movimento lineare.

8. Il movimento dovrebbe sovrapporsi in modo naturale.
Non tutti gli elementi devono iniziare e terminare esattamente nello stesso fotogramma.

9. Usate la profondità con parsimonia:
prospettiva,
parallasse morbida,
scala,
separazione tra primo piano e sfondo,
se possibile, controllare la profondità di campo.

10. Nessun effetto esiste semplicemente perché ha un aspetto accattivante.

11. Niente spam di particelle.

12. Niente finto vetromorfismo ovunque.

13. Evitare una sfocatura eccessiva.

14. Niente inutili carte girevoli 3D.

15. Niente zoom continuo.

16. No 20 stili di animazione diversi.

17. Interfaccia utente senza rimbalzi.

18. Nessun paragrafo di marketing lunghissimo.

19. Non imitare inquadratura per inquadratura una particolare pubblicità Apple.
Catturate piuttosto la filosofia e la qualità della produzione.

La sicurezza visiva dovrebbe derivare dalla moderazione.

────────────────────────────────────
FORMATO
────────────────────────────────────

Maestro principale:

1920 × 1080
60 fps
16:9
H.264
durata massima: 15,0 secondi

Tempo di esecuzione previsto:
circa 14,0–15,0 secondi.

Deve funzionare come prodotto da presentare sui social media anche senza audio.

Se possibile DOPO che il master è terminato, crea anche un'opera deliberatamente ricomposta
variante verticale/sociale.

Non limitarti a ritagliare la composizione del desktop.

Ma il master del desktop è la priorità.

────────────────────────────────────
TRAMA / ARCO EMOTIVO
────────────────────────────────────

Non elencare solo cinque caratteristiche.

Dovrebbe sembrare un pensiero continuo:

CAOS → CONTROLLO → CHIAREZZA → TAXTELLO

Già nei primi 1,5 secondi deve apparire di alta qualità.

Il primo momento significativo relativo al prodotto dovrebbe verificarsi entro circa 2 secondi.

Niente introduzione con logo di cinque secondi.

Possibile direzione narrativa:

"Tutto ciò che riguarda la tua attività, finalmente in un unico posto."

Ma mostralo invece di spiegarlo.

Vorrei che il film avesse all'incirca quattro idee visive.

Utilizza le superfici in Taxtello REALE più resistenti che trovi nel repository.

Tra i candidati più promettenti figurano:

• Finanzcockpit / Dashboard
• Rechnungen
• Belége
• Banca / abbinamento
• Steuergesundheit / panoramica fiscale

Non è necessario mostrarli tutti.

Scegli la combinazione visivamente più efficace.

────────────────────────────────────
STORYBOARD DI 15 SECONDI SUGGERITO
────────────────────────────────────

Consideratelo un ottimo punto di partenza, non un modello rigido.

0,00 – 1,20

NERO / BLU SCURO.

Appare un minuscolo bagliore dorato e caldo.

Il luccichio rivela elegantemente il marchio Taxtello o un frammento del
marchio denominativo.

Nessuna dissolvenza del logo generico.

Pensate alla precisione meccanica.

La telecamera si muove attraverso o oltre il segno e l'interfaccia utente inizia a emergere da esso.

Pochissima o nessuna copia.

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

1,20 – 4,40

CONTROLLO FINANZIARIO.

Mostra la vera cabina di pilotaggio del Taxtello come superficie tridimensionale del prodotto.

Non si tratta semplicemente di una schermata visualizzata sullo schermo.

Ricostruiscilo/ritaglialo/sovrapponilo in modo che le singole regioni dell'interfaccia possano animarsi.

Il dato finanziario principale si risolve in modo chiaro e preciso.
Il grafico si restringe.
I parametri di supporto si stabilizzano leggermente più tardi.

Utilizzare un leggero sfalsamento.

Può apparire una singola riga di testo, ad esempio:

“Tutto in un attimo.”

oppure un'altra frase tedesca altrettanto breve, se la trovate più appropriata.

Massimo ~3–4 parole.

L'interfaccia deve rimanere riconoscibile come quella del prodotto reale.

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

4,40 – 7,50

TRASFORMAZIONE DELLA GESTIONE DOCUMENTALE E CONTABILE.

Utilizza un oggetto visivo della scena precedente come elemento di transizione.

Esempio:

Un punto dorato sul grafico si espande nell'angolo di una ricevuta/carta.
La telecamera lo segue.
Viene inserita una ricevuta/un documento.
Taxtello lo identifica o lo organizza.
Il documento si inserisce elegantemente nel relativo record di prenotazione/finanziario.

Utilizzare l'allineamento magnetico e la precisione.

Niente scanner laser scadenti.

Niente tornado di carta fluttuante.

Possibile microcopia:

“Belege. Erledigt.”

Solo se migliora la scena.

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

7,50 – 10,70

DENARO / FATTURE.

Trasformati o passa in modo naturale all'interfaccia reale di Rechnungen.

Sfrutta un momento di grande impatto:

lo stato di una fattura cambia,
un pagamento risolve,
una somma si sposta al suo posto,
oppure la panoramica si compone da sola.

I numeri dovrebbero risultare tangibili e precisi.

Utilizzare JetBrains Mono laddove questo corrisponda al prodotto effettivo.

L'oro evidenzia lo stato attivo.

Il verde viene utilizzato esclusivamente per uno stato semantico genuinamente positivo.

Possibile copia:

“Geld. Sono Griff.”

Ripeto: facoltativo ed estremamente breve.

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

10,70 – 12,80

FISCALITÀ / CHIAREZZA.

Transizione alla vera superficie di consulenza fiscale/finanziaria di Taxtello.

Non affermate che Taxtello garantisca magicamente il corretto versamento delle imposte.

Comunicare visibilità e controllo.

Esempio:

Molteplici segnali rumorosi confluiscono in un'unica panoramica fiscale chiara e strutturata.

Possibile copia:

“Steuern im Blick.”

Questa scena dovrebbe risultare più tranquilla rispetto alla precedente.

Il ritmo rallenta brevemente.

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

12.80 – 15.00

VALORE DEL MARCHIO.

Tirare la telecamera verso l'esterno.

L'interfaccia utente si comprime o si ripiega in un unico, splendido oggetto/superficie del prodotto Taxtello.

L'oscurità ritorna tutt'intorno.

Il marchio denominativo Taxtello in oro viene visualizzato correttamente.

Una breve scritta del marchio in basso.

Esplora finali incisivi come:

“Dein Business. Klar.”

"Buchhaltung. Unter Kontrolle."

“Einfach mehr Überblick.”

"Tutti gli affari. An einem Ort."

La scelta si basa sul posizionamento effettivo del prodotto che si trova nel repository.

Non utilizzare una frase solo perché te l'ho suggerita io.

L'ultima inquadratura deve essere sufficientemente statica da risultare nitida.

Concludi con sicurezza.

Niente call to action gigante e rimbalzante.

────────────────────────────────────
TRANSIZIONI
────────────────────────────────────

Questa è una delle parti più importanti.

Voglio transizioni che facciano pensare lo spettatore:

“Naturalmente, la scena successiva è nata da lì.”

Bene:

linea del grafico → bordo del documento
pillola d'oro → pulsante fattura
Codice finanziario → importo in fattura
bordo della carta → superficie successiva
elemento di interfaccia passante della fotocamera
geometria condivisa
Rivelazione della maschera utilizzando le forme reali del prodotto

Cattivo:

dissolvenza incrociata
pulizia casuale
transizione di spin
problema tecnico
panoramica veloce ogni due secondi
SaaS generico slide-left
spam di zoom-blur

I tagli diretti sono consentiti solo quando un impatto ritmico deliberato apporta un beneficio al film.

────────────────────────────────────
MOVIMENTO
────────────────────────────────────

Il movimento ha bisogno di peso.

Utilizzare curve comparabili a:

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

ove opportuno.

I diversi elementi dovrebbero avere tempi di arrivo leggermente diversi.

Preferisco:

anticipazione
superamento al di sotto del ~2%
insediamento
continuazione del movimento
velocità condivisa tra le scene

Evitate l'elasticità tipica dei cartoni animati.

I movimenti della fotocamera dovrebbero dare la sensazione di una ripresa macro di prodotto di alta gamma.

Immaginate di filmare un oggetto fisico di pregio, anche se in realtà si tratta di un software.

────────────────────────────────────
ILLUMINAZIONE / MATERIALI
────────────────────────────────────

Utilizzare un'illuminazione ambientale estremamente tenue.

Possibili trattamenti:

• illuminazione con bordo dorato tenue
• sfumatura blu scuro
• debole fioritura ambientale
• un morbido riflesso speculare che attraversa una superficie
• vignetta sobria
• grana sottile se contribuisce in modo significativo

Mantieni l'interfaccia chiara e intuitiva.

NON sfocare il prodotto solo per dargli un aspetto cinematografico.

Niente riflessi artificiali e lucidi che compromettono la leggibilità.

────────────────────────────────────
TIPOGRAFIA
────────────────────────────────────

Utilizza pochissimo testo.

Nessuna frase dovrebbe competere con il prodotto.

In genere, i titoli dovrebbero stare su una sola riga.

Usa Plus Jakarta Sans.

Una tipografia forte può occasionalmente assumere dimensioni molto grandi e diventare una transizione
il dispositivo stesso.

Evitate animazioni generiche in cui ogni parola si anima in modo indipendente.

La tipografia dovrebbe muoversi come gli oggetti progettati.

────────────────────────────────────
SUONO / RITMO
────────────────────────────────────

Progetta il movimento come se fosse ridotto a circa 115-120 BPM:
Premium, dinamico, sofisticato, non frenetico.

I momenti importanti dovrebbero essere accompagnati dalla musica.

Lingua audio consigliata:

• impatto ridotto e lieve per rivelazioni importanti
• clic dell'interfaccia utente tattile limitati
• sottile ticchettio tonale metallico/vetroso
• Movimenti morbidi a bassa frequenza durante le transizioni della telecamera
• tono elegante e definito nella parte finale del logo

Evitare:

• enorme boom dei trailer cinematografici
• Montanti EDM
• forti sibili ovunque
• suoni predefiniti dell'"interfaccia tecnologica"
• ritmo rap
• bassi aggressivi

Se nel progetto non è presente musica/audio legalmente sicura, NON rimuoverla
Audio protetto da copyright proveniente da internet.

Consegna il master visivo senza musica protetta da copyright e crea un cue conciso
Foglio descrittivo che indica dove dovrebbero essere riprodotti musica ed effetti sonori.

Se è disponibile una registrazione audio sicura e locale adatta, utilizzarla.

────────────────────────────────────
SOLO PRODOTTO ORIGINALE
────────────────────────────────────

Questo è fondamentale.

Ispezionare la conduttura principale.

Non inventate schermi.

Non inventate metriche che implichino dati reali dei clienti.

Se necessario, utilizzare valori chiaramente sintetici/sicuri per le dimostrazioni.

Non divulgare accidentalmente informazioni personali, relative a utenti di prova o informazioni di produzione.

Riutilizzare la struttura visiva dell'interfaccia utente di Taxtello esistente.

Se una schermata deve essere separata dal movimento, ricreala fedelmente in React da
il vero sistema di progettazione, invece di limitarsi a ingrandire una schermata gigante.

Il risultato dovrebbe comunque assomigliare in modo inconfondibile a Taxtello.

────────────────────────────────────
ASPETTATIVE DI IMPLEMENTAZIONE
────────────────────────────────────

Lavora direttamente in:

/taxtello/beta-motion

Crea la nuova composizione accanto a quella esistente.

Mantieni attive le composizioni esistenti.

Struttura il nuovo lavoro in modo chiaro e ordinato.

Preferire primitive riutilizzabili per:

• superficie della fotocamera
• telaio del prodotto
• transizioni mascherate
• il testo rivela
• La regione dell'interfaccia utente rivela
• illuminazione ambientale
• transizioni di elementi condivisi

Evitare un componente da 1.500 linee.

Utilizzare un'animazione Remotion deterministica basata su fotogrammi/tempo.

Nessun setTimeout.
Nessuna animazione non deterministica.

Mantieni una frequenza di 60 fps per tutta la durata del gioco.

Utilizzare l'interpolazione/la molla/l'effetto di easing in modo mirato.

────────────────────────────────────
NON FERMATEVI DOPO LA PRIMA IMPLEMENTAZIONE
────────────────────────────────────

Si tratta di un compito visivo.

È ASSOLUTAMENTE NECESSARIO rivedere il risultato finale del rendering.

Flusso di lavoro richiesto:

1. Ispezionare il repository e il marchio/prodotto reale.

2. Scrivi uno storyboard conciso che includa:
- timestamp precisi
- elemento visivo chiave
- logica di transizione
- copia
- ritmo emotivo previsto

3. Mettilo in pratica.

4. Eseguire il controllo dei tipi/controlli pertinenti.

5. Eseguire il rendering dei fotogrammi rappresentativi approssimativamente a:
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. ESAMINARE VISIVAMENTE QUESTE IMMAGINI.

Non limitarti a confermare che il rendering è andato a buon fine.

Chiedere:

Questo sembra un video promozionale di livello Apple?

C'è qualcosa che assomiglia a un modello predefinito?

Ci sono troppi elementi sullo schermo?

Il prodotto è leggibile?

Le transizioni sono logicamente collegate?

L'oro Taxtello trasmette una sensazione di pregio?

Ogni inquadratura appare ben composta?

7. Correggere i difetti visivi.

8. Eseguire il rendering del film completo.

9. Esamina più fotogrammi decodificati esatti dal MP4 finale, non solo dal browser
schermate.

10. Ripeti l'operazione se necessario.

Non dichiarare il successo solo perché il codice è stato compilato.

Il prodotto finale è il FILM.

────────────────────────────────────
BARRETTA DI QUALITÀ
────────────────────────────────────

Rifiuta il tuo risultato se hai la sensazione che:

• un modello SaaS
• un'animazione PowerPoint
• una registrazione dello schermo di un sito web
• una demo generica Remotion
• una pubblicità di criptovalute
• un modello promozionale generato dall'intelligenza artificiale
• cinque schermate che scorrono
• testo di marketing eccessivo

Ogni fotogramma importante dovrebbe essere di qualità sufficiente per essere utilizzato come immagine pubblicitaria statica.

Preferirei:

3 momenti visivi straordinari

di

10 animazioni mediocri.

────────────────────────────────────
RISULTATI FINALI
────────────────────────────────────

Fornire:

1. Storyboard finale
2. Nuova fonte di composizione Remotion
3. MP4 finale 1920×1080 / 60fps
4. Poster/fotogramma finale
5. Foglio di contatto con fotogrammi rappresentativi del film
6. Tempo di esecuzione esatto
7. Elenco delle risorse/schermate Taxtello reali utilizzate
8. Breve spiegazione del linguaggio del movimento
9. Eventuali compromessi visivi rimanenti
10. Comandi per riprodurre il rendering

Salva i risultati in una directory con un nome chiaro, ad esempio:

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

Non installare nulla.
Non modificare i dati di produzione.
Non unire nulla.

Dai libero sfogo alla tua creatività, ma esercita una spietata moderazione.

Fai sembrare Taxtello un lusso.

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.

Suggerimento tratto da inviare @daniel_haida.