Pag-set up: Pelikula ng app sa bookkeeping ng Taxtello

Ikaw ang senior motion designer, product designer, at Remotion engineer para sa Taxtello.

Ang iyong gawain ay lumikha ng isang tunay na premium, pang-Apple na pelikula ng produkto para sa Taxtello.

HINDI ito isang pangkalahatang paliwanag sa SaaS.
HINDI ito isang gabay sa tampok.
HINDI ito isang animation ng template ng startup.

Gusto ko ng maximum na 15 segundong showreel ng brand/produkto na magmumukhang isang may-gulang, mamahalin, at magandang dinisenyong produktong pinansyal ang Taxtello.

Isipin:

Pelikula ng paglulunsad ng produkto ng Apple
× premium na fintech
× disenyo ng galaw ng editoryal
× pinigilan na presentasyon ng produktong parang Stripe
× Ang sariling biswal na pagkakakilanlan ni Taxtello

Ang nais na reaksyon ay:

"Teka, ito ba ay isang German bookkeeping app?"

Dapat maramdaman na mahal ang pelikula.

──────────────────────────────────────────────
REPO / PINAGMUMULAN NG KATOTOHANAN
──────────────────────────────────────────────

Siyasatin muna ang mga totoong imbakan bago magdisenyo ng anuman.

Pangunahing produkto:
/taxtello/main

Umiiral na proyekto Remotion:
/taxtello/beta-motion

Mahahalagang mapagkukunan ng totoong tatak:

/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

Ang mga screenshot ng kasalukuyang produkto ay makikita sa ibaba:

/taxtello/main/artifacts/usok-usok-usok/

Mas gusto ang pinakabagong at wastong mga screenshot/kasalukuyang pinagmulan kaysa sa mga luma nang artifact.

Mayroon nang umiiral na 24-segundong animation Remotion hero sa
/taxtello/beta-motion.

HUWAG itong palitan.
HUWAG itong paurongin.
HUWAG ipilit ang kasalukuyang kwento ng AI-connections sa bagong pelikulang ito.

Gumawa ng isang bagong malayang komposisyon para sa gawaing ito, hal.

TaxtelloShowreel15

Maaari mong gamitin muli ang mahusay na imprastraktura, mga font, mga rendering utility, mga motion primitive,
pagpapagaan ng mga kurba, paglo-load ng asset, at imprastraktura ng QA mula sa beta-motion kung saan kapaki-pakinabang.

Pero sa pagiging malikhain, dapat itong maging isang bagong pelikula.

Bago ang implementasyon, siyasatin muna ang aktwal na Taxtello UI at unawain ang produkto.

Huwag mag-imbento ng mga gamit na hindi naman talaga umiiral.

──────────────────────────────────────────────
TUNAY NA WIKANG BISWAL NG TAXTELLO
──────────────────────────────────────────────

Gamitin ang tunay na sistema ng disenyo.

Pangunahing paleta:

Kaligiran:
#0c0f1a

Mga nakataas na ibabaw:
#111525
#131722
#1a2032

Pangunahing tatak ng ginto:
#e8b84b

Gintong highlight:
#f5d07a

Lalim ng ginto:
#9b6d18

Pangunahing teksto:
#e8eaf2

Matinding mainit na puti:
#f6f4eb

Pangalawang teksto:
#8b93b5

Positibo:
#34d399

Negatibo/error lamang kung kinakailangan sa semantika:
#f87171

Tipograpiya:
Dagdag pa ang Jakarta Sans

Mga numero / halagang pinansyal kung saan naaangkop:
JetBrains Mono

Gamitin ang aktwal na markang salita at/o markang Taxtello ng Taxtello.
Huwag muling iguhit o gayahin ang logo.

Ang ginto ng Taxtello ay dapat magmukhang isang mahalagang tuldik, hindi isang dilaw na baha ng UI.

Isipin:
maitim na metal
mainit na ginto
salamin
tinta
katumpakan
tahimik na kumpiyansa

HINDI:
cyberpunk
crypto
neon
paglalaro
generic na AI lila
mga gradient ng bahaghari

──────────────────────────────────────────────
MGA PANGUNAHING PATAKARAN SA PAGLIKHA
──────────────────────────────────────────────

Sundin ang mga patakarang ito nang walang awang-awang:

1. ISANG BINTANG = ISANG IDEYA.

2. Kailangan ng bawat eksena ng espasyo para makahinga.

3. Ang UI ng produkto ang bida.

4. Huwag magkalat ng mga paliwanag na kopya kahit saan.

5. Huwag gumamit ng matitigas na hiwa maliban kung may sinasadyang dahilan.

6. Mas gusto ang mga transition na pinapagana ng object:
ang isang kard ay nagiging susunod na kard,
ang linya ng tsart ay nagiging isang pangkonekta,
ang resibo ay nagiging booking,
ang isang numero ay nagiging isa pang elemento ng interface,
gumagalaw ang kamera sa produkto.

7. Gumamit ng premium easing.
Walang linyar na paggalaw.

8. Dapat natural na mag-overlap ang galaw.
Hindi dapat magsimula at huminto ang lahat ng elemento sa eksaktong parehong frame.

9. Gumamit ng lalim nang matipid:
perspektibo,
malambot na paralaks,
iskala,
paghihiwalay ng harapan/likod,
kontroladong lalim ng larangan kung makakamit.

10. WALANG epekto dahil lang sa maganda itong tingnan.

11. Walang particle spam.

12. Walang pekeng glassmorphism kahit saan.

13. Walang labis na paglabo.

14. Walang walang kabuluhang 3D spinning cards.

15. Walang patuloy na pag-zoom.

16. Walang 20 iba't ibang istilo ng animation.

17. Walang tumatalbog na UI.

18. Walang malaking talata sa marketing.

19. Huwag gayahin ang isang partikular na patalastas ng Apple na kuha-por-kuha lamang.
Sa halip, kunin ang pilosopiya at kalidad ng produksyon.

Ang kumpiyansa sa paningin ay dapat magmula sa pagpipigil.

──────────────────────────────────────────────
PORMA
──────────────────────────────────────────────

Pangunahing guro:

1920 × 1080
60 fps
16:9
H.264
pinakamataas na tagal: 15.0 segundo

Target na oras ng pagpapatakbo:
humigit-kumulang 14.0–15.0 segundo.

Dapat itong gumana bilang isang produkto sa social media kahit walang tunog.

Kung praktikal PAGKATAPOS matapos ang master, gumawa rin ng sadyang muling binubuo
bertikal/sosyal na baryante.

Huwag basta-basta i-crop ang komposisyon sa desktop.

Pero ang desktop master ang prayoridad.

──────────────────────────────────────────────
KWENTO / EMOSYONAL NA ARKO
──────────────────────────────────────────────

Huwag itong gawing listahan ng limang katangian.

Dapat itong parang isang patuloy na pag-iisip:

KAGULO → KONTROL → KALIWANASAN → TAXTELLO

Dapat ay mukhang premium na ang unang 1.5 segundo.

Ang unang makabuluhang sandali ng produkto ay dapat mangyari pagkalipas ng ~2 segundo.

Walang limang segundong intro ng logo.

Posibleng direksyon ng pagsasalaysay:

"Lahat ng tungkol sa iyong negosyo, sa wakas ay nasa iisang lugar."

Pero IPAKITA mo ito sa halip na ipaliwanag.

Gusto ko ng humigit-kumulang apat na biswal na ideya sa buong pelikula.

Gamitin ang pinakamalakas na TUNAY na mga ibabaw ng Taxtello na makikita mo sa repositoryo.

Kabilang sa mga matibay na kandidato ang:

• Finanzcockpit / Dashboard
• Rechnungen
• Belege
• Bangko / pagtutugma
• Steuergesundheit / pangkalahatang-ideya ng buwis

HINDI mo kailangang ipakita lahat.

Piliin ang kombinasyon na pinakamalakas sa paningin.

──────────────────────────────────────────────
MUNGKAHING 15-SEGUNDONG STORYBOARD
──────────────────────────────────────────────

Ituring ito bilang isang matibay na panimulang punto, hindi isang mahigpit na template.

0.00 – 1.20

Itim / Asul na Asul.

Lumilitaw ang isang maliit na mainit-init na ginintuang kislap.

Maganda ang pagpapakita ng kislap ng alinman sa marka ng Taxtello o isang piraso ng
pananda ng salita.

Walang pangkaraniwang pagkupas ng logo.

Isipin ang katumpakan na ginawa gamit ang makina.

Gumagalaw ang kamera sa o lagpas sa marka at nagsisimulang lumitaw ang UI mula rito.

Napakakaunti o walang kopya.

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

1.20 – 4.40

KONTROL SA PINANSYAL.

Ipakita ang aktwal na Taxtello Cockpit bilang isang dimensional na ibabaw ng produkto.

Hindi lang basta screenshot na nilalagay sa screen.

Muling buuin/i-crop/i-layer ito upang makapag-animate ang mga indibidwal na rehiyon ng interface.

Malinaw na natutukoy ang numerong pinansyal ng bayani.
Gumuguhit ang tsart.
Ang mga sumusuportang sukatan ay maaayos nang bahagya mamaya.

Gumamit ng banayad na pag-ugoy-ugoy.

Maaaring lumitaw ang isang linya ng kopya, halimbawa:

"Alles im Blick." (Ang lahat ay nasa Blick.)

o isa pang kasing-ikling pariralang Aleman kung may mas akma sa iyo.

Pinakamataas na ~3–4 na salita.

Dapat manatiling makikilala ang interface bilang ang tunay na produkto.

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

4.40 – 7.50

PAGBABAGO SA DOKUMENTO / PAG-AARAL NG LIBRO.

Gumamit ng biswal na bagay mula sa nakaraang eksena bilang transisyon.

Halimbawa:

Lumalawak ang isang punto ng gintong tsart sa sulok ng isang resibo/card.
Sinusundan ito ng kamera.
May papasok na resibo/dokumento.
Kinikilala o inoorganisa ito ng Taxtello.
Ang dokumento ay eleganteng nakalagay sa kaukulang talaan ng booking/pinansiyal nito.

Gumamit ng magnetic alignment at precision.

Walang cheesy scanner laser.

Walang lumulutang na buhawi na papel.

Posibleng microcopy:

"Belege. Erledigt."

Mabuti na lang kung mapapaganda nito ang eksena.

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

7.50 – 10.70

PERA / MGA INVOICE.

Natural na magbago o mag-transisyon patungo sa totoong interface ng Rechnungen.

Gumamit ng isang malakas na sandali:

nagbabago ang katayuan ng isang invoice,
nalutas ang isang pagbabayad,
isang halaga ang gumagalaw sa tamang lugar,
o ang pangkalahatang-ideya ay nabubuo nang mag-isa.

Dapat na maramdaman at tumpak ang mga numero.

Gamitin ang JetBrains Mono kung saan ito tumutugma sa aktwal na produkto.

Itinatampok ng ginto ang aktibong estado.

Ang berde ay ginagamit lamang para sa isang tunay na positibong semantikong estado.

Potensyal na kopya:

"Geld. Ako si Griff."

Muli: opsyonal at napakaikli.

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

10.70 – 12.80

BUWIS / KALIWANASAN.

Paglipat tungo sa tunay na gabay sa kalusugan ng buwis / pananalapi ng Taxtello.

Huwag sabihing mahiwagang ginagarantiyahan ng Taxtello ang tamang mga buwis.

Ipabatid ang kakayahang makita at kontrol.

Halimbawa:

Maraming maingay na signal ang nagsasama-sama sa isang kalmado at nakabalangkas na pangkalahatang-ideya ng buwis.

Potensyal na kopya:

"Steuern im Blick."

Dapat mas kalmado ang eksenang ito kaysa sa nakaraang eksena.

Sandaling bumagal ang ritmo.

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

12.80 – 15.00

BAYAD NG TATAK.

Hilahin palabas ang kamera.

Ang UI ay napi-compress o natitiklop sa isang magandang bagay/ibabaw ng produktong Taxtello.

Bumalik ang dilim sa paligid nito.

Ang gintong marka ng salita ng Taxtello ay nagresolba.

Isang maikling linya ng tatak sa ilalim.

Galugarin ang mga matitingkad na huling linya tulad ng:

"Ang Iyong Negosyo. Malinaw."

"Buchhaltung. Unter Kontrolle."

“Einfach mehr Überblick.”

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

Pumili batay sa aktwal na pagpoposisyon ng produkto na makikita mo sa repo.

Huwag gumamit ng linya dahil lang sa ako ang nagmungkahi.

Ang huling frame ay dapat may sapat na katahimikan upang mapansin.

Magtapos nang may kumpiyansa.

Walang higanteng tumatalbog na CTA.

──────────────────────────────────────────────
MGA TRANSISYON
──────────────────────────────────────────────

Isa ito sa pinakamahalagang bahagi.

Gusto ko ng mga transisyon na magpapaisip sa manonood:

"Siyempre ang susunod na eksena ay nagmula roon."

Mabuti:

linya ng tsart → gilid ng dokumento
gintong tableta → buton ng invoice
numerong pinansyal → halaga sa invoice
gilid ng baraha → susunod na ibabaw
elemento ng interface ng push through ng camera
ibinahaging heometriya
pagbubunyag ng maskara gamit ang mga aktwal na hugis ng produkto

Masama:

crossfade
punasan nang walang katiyakan
paglipat ng ikot
aberya
latigoin ang kawali kada dalawang segundo
pangkalahatang SaaS slide-left
spam sa pag-zoom at pag-blur

Pinapayagan lamang ang mga direktang pagputol kapag ang isang sinasadyang ritmikong epekto ay nakikinabang sa pelikula.

──────────────────────────────────────────────
PAGGAlaw
──────────────────────────────────────────────

Ang paggalaw ay nangangailangan ng bigat.

Gumamit ng mga kurba na maihahambing sa:

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

kung saan naaangkop.

Ang iba't ibang elemento ay dapat magkaroon ng bahagyang magkakaibang oras ng pagdating.

Mas gusto:

pag-asam
overshoot sa ibaba ng ~2%
pag-aayos
pagpapatuloy ng galaw
ibinahaging bilis sa pagitan ng mga eksena

Iwasan ang pagiging masigla ng kartun.

Ang galaw ng kamera ay dapat magmukhang isang high-end na macro product shoot.

Isipin mong kinukunan natin ng pelikula ang isang pisikal at premium na bagay kahit na ito ay software.

──────────────────────────────────────────────
ILAW / MATERYAL
──────────────────────────────────────────────

Gumamit ng napakabanayad na ilaw sa kapaligiran.

Mga posibleng paggamot:

• malambot na gintong ilaw sa gilid
• maitim na asul na pagbagsak
• mahinang pamumulaklak sa paligid
• malambot na specular highlight na dumadaan sa isang ibabaw
• pinigilan na vignette
• banayad na hilatsa kung malaki ang maitutulong nito

Panatilihing malinaw ang interface.

HUWAG i-blur ang produkto para lang magmukhang sinematiko.

Walang pekeng makintab na repleksyon na sumisira sa pagiging madaling mabasa.

──────────────────────────────────────────────
TIPOGRAPIYA
──────────────────────────────────────────────

Gumamit ng napakakaunting kopya.

Walang pangungusap ang dapat makipagkumpitensya sa produkto.

Ang mga headline ay karaniwang dapat magkasya sa isang linya.

Gamitin ang Plus Jakarta Sans.

Ang malakas na tipograpiya ay maaaring paminsan-minsang lumaki nang napakalaki at maging isang transisyon
mismong aparato.

Iwasan ang pangkaraniwang pag-uugali ng motion-graphics kung saan ang bawat salita ay umaanimate nang hiwalay.

Dapat gumalaw ang tipograpiya bilang mga dinisenyong bagay.

──────────────────────────────────────────────
TUNOG / RITMO
──────────────────────────────────────────────

Idisenyo ang galaw na parang pinutol ito sa humigit-kumulang 115–120 BPM:
premium, kinetic, sopistikado, hindi mabilis magalit.

Ang mahahalagang sandali ay dapat mapunta sa musika.

Iminumungkahing tunog ng wika:

• mababang malambot na epekto para sa malaking pagbubunyag
• mga pinigilan na pag-click sa UI na may pandamdam
• banayad na metaliko/salamin na tonong tik
• mahinang paggalaw na mababa ang frequency habang lumilipat ang kamera
• eleganteng malinaw na tono sa pagtatapos ng logo

Iwasan:

• malaking boom ng mga trailer ng pelikula
• Mga EDM riser
• malakas na huni kahit saan
• mga karaniwang tunog na "tech interface"
• rap beat
• agresibong bass

Kung walang legal na ligtas na musika/audio asset sa proyekto, HUWAG hilahin
audio na may karapatang-ari mula sa internet.

Ihatid ang visual master nang walang naka-copyright na musika at lumikha ng isang maigsi na pahiwatig
papel na naglalarawan kung saan dapat tumugtog ang musika/SFX.

Kung mayroong angkop na ligtas/lokal na audio, gamitin ito.

──────────────────────────────────────────────
TUNAY NA PRODUKTO LAMANG
──────────────────────────────────────────────

Kritikal ito.

Siyasatin ang kasalukuyang pangunahing kuryente.

Huwag mag-imbento ng mga screen.

Huwag mag-imbento ng mga sukatan na nagpapahiwatig ng totoong datos ng customer.

Gumamit ng mga malinaw na sintetiko/demo-safe na halaga kung kinakailangan.

Huwag aksidenteng ilantad ang anumang personal na impormasyon, impormasyon ng test user, o impormasyon ng produksyon.

Gamitin muli ang biswal na istruktura ng aktwal na Taxtello UI.

Kung kailangang ihiwalay ang isang screen mula sa paggalaw, gawin itong muli nang may katapatan sa React mula sa
ang tunay na sistema ng disenyo sa halip na basta pag-scale lang ng isang malaking screenshot.

Ang resulta ay dapat pa ring magmukhang katulad ng Taxtello.

──────────────────────────────────────────────
MGA INAASAHAN SA IMPLEMENTASYON
──────────────────────────────────────────────

Direktang magtrabaho sa:

/taxtello/beta-motion

Gumawa ng bagong komposisyon kasabay ng dati.

Panatilihing gumagana ang mga umiiral na komposisyon.

Ayusin nang malinis ang bagong gawain.

Mas gusto ang mga magagamit muli na primitive para sa:

• ibabaw ng kamera
• balangkas ng produkto
• mga nakamaskarang transisyon
• ipinapakita ng teksto
• Ipinapakita ng rehiyon ng UI
• ilaw sa paligid
• mga transisyon na pinagsasaluhang elemento

Iwasan ang isang bahagi na may 1,500 linya.

Gumamit ng deterministic na Remotion animation na pinapagana ng frame/time.

Walang nakatakdang Timeout.
Walang mga nondeterministic na animation.

Sundin ang 60 fps sa kabuuan.

Sadyang gamitin ang interpolation/spring/easing.

──────────────────────────────────────────────
HUWAG TUMIGIL PAGKATAPOS NG UNANG PAGPAPATUPAD
──────────────────────────────────────────────

Ito ay isang biswal na gawain.

DAPAT mong suriin ang aktwal na na-render na output.

Kinakailangang daloy ng trabaho:

1. Siyasatin ang imbakan at ang tunay na tatak/produkto.

2. Sumulat ng isang maigsi at maikling storyboard na may:
- eksaktong mga timestamp
- pangunahing biswal
- lohika ng transisyon
- kopya
- nilalayong emosyonal na ritmo

3. Ipatupad ito.

4. Patakbuhin ang typecheck / mga kaugnay na pagsusuri.

5. I-render ang mga representatibong frame sa humigit-kumulang:
0.0 segundo
1.0 segundo
2.5 segundo
4.5 segundo
6.5 segundo
8.5 segundo
10.5 segundo
12.5 segundo
14.0 segundo
14.8 segundo

6. SURIIN ANG MGA LARAWANG ITO SA PANANAW NA BISWAL.

Huwag lang basta kumpirmahin na matagumpay ang pag-render.

Magtanong:

Mukha ba itong pelikula ng produktong Apple-tier?

Mayroon bang mukhang template?

Masyado ba ang dami sa screen?

Mababasa ba ang produkto?

Lohikal ba ang koneksyon ng mga transisyon?

Parang premium ba ang Taxtello gold?

Mukhang kalmado ba ang bawat frame?

7. Ayusin ang mga kahinaan sa paningin.

8. I-render ang buong pelikula.

9. Suriin ang maraming eksaktong na-decode na frame mula sa huling MP4, hindi lamang ang browser
mga screenshot.

10. Ulitin muli kung kinakailangan.

Huwag ideklarang matagumpay dahil ang code ay nagko-compile.

Ang maihahatid ay ang PELIKULA.

──────────────────────────────────────────────
KALIDAD NA BAR
──────────────────────────────────────────────

Tanggihan ang sarili mong resulta kung ganito ang pakiramdam:

• isang template ng SaaS
• isang PowerPoint animation
• isang pag-record ng screen ng website
• isang pangkalahatang demo Remotion
• isang patalastas ng crypto
• isang template ng promo na binuo ng AI
• limang screenshot na nagpapalipat-lipat
• labis na kopya ng marketing

Dapat sapat ang bawat mahalagang frame para magamit bilang isang hindi gumagalaw na patalastas.

Mas gugustuhin ko sanang:

3 pambihirang biswal na sandali

kaysa

10 pangkaraniwang feature animation.

──────────────────────────────────────────────
MGA HULING PAGTUTUPAD
──────────────────────────────────────────────

Magbigay ng:

1. Pangwakas na storyboard
2. Pinagmulan ng Bagong Komposisyon ng Remotion
3. 1920×1080 / 60fps panghuling MP4
4. Poster/pangwakas na balangkas
5. Contact sheet na may mga representatibong frame mula sa pelikula
6. Eksaktong oras ng pagpapatakbo
7. Listahan ng mga totoong asset/screen ng Taxtello na ginamit
8. Maikling paliwanag tungkol sa wikang ginagamit sa paggalaw
9. Anumang natitirang mga kompromiso sa paningin
10. Mga utos na kopyahin ang render

I-save ang mga output sa isang direktoryo na may malinaw na pangalan tulad ng:

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

Huwag mag-deploy ng kahit ano.
Huwag baguhin ang datos ng produksyon.
Huwag pagsamahin ang kahit ano.

Maging malikhain nang todo, ngunit magpakita ng walang awang pagpipigil.

Gawing mukhang mamahalin ang Taxtello.

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.

Kinuha ang prompt mula sa poste @daniel_haida.