Filim app-ka xisaabinta ee Taxtello

Waxaad tahay naqshadeeyaha sare ee dhaqdhaqaaqa, naqshadeeyaha badeecadaha iyo injineerka Remotion ee Taxtello.

Hawshaadu waa inaad abuurto filim tayo sare leh oo heer Apple ah oo loogu talagalay Taxtello.

Kani MAAHA sharraxaad SaaS guud ahaan.
Kani MAAHA hab-raac sifadeed.
Kani MAAHA qaab-dhismeedka moodeelka bilowga ah.

Waxaan rabaa bandhig summadeed/badeecad ugu badnaan 15 ilbiriqsi ah oo ka dhigaya Taxtello mid u eg badeeco dhaqaale oo bisil, qaali ah, oo si qurux badan loo nashqadeeyay.

Ka fikir:

Filim lagu soo bandhigayo wax soo saarka Apple
× fintech tayo sare leh
× Naqshadeynta mooshinka tifaftirka
× Bandhigga badeecada u eg Stripe ee la xakameeyey
× Aqoonsiga muuqaalka ee Taxtello

Falcelinta la rabo waa:

"Sug, kani waa abka xisaabinta Jarmalka?"

Filimku waa inuu dareemaa mid qaali ah.

─...
REPO / ILAHA RUNTA
─...

Marka hore hubi kaydka dhabta ah ka hor intaadan wax naqshadayn.

Badeecada ugu weyn:
/taxtello/ugu weyn

Mashruuca Remotion ee Jira:
/taxtello/beta-motion

Ilo muhiim ah oo summad dhab ah:

/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

Shaashadaha hadda jira ee badeecadaha hadda jira waxaa laga heli karaa hoos:

/taxtello/ugu muhiimsan/artifacts/qiiq-ui-smoke/

Dooro shaashadaha/isha hadda ee ugu cusub ee ansax ah halkii aad ka doorbidi lahayd farshaxan duugoobay.

Waxaa horey u jiray Remotion gacmeed geesiga 24-ilbiriqsi ah oo ku jira
/taxtello/beta-motion.

HA BEDDELIN.
HA dib u celin.
HA ku qasbin sheekada xiriirka AI-ga ee hadda jirta filimkan cusub.

Samee hal-abuur madax-bannaan oo cusub oo loogu talagalay hawshan, tusaale ahaan

TaxtelloShowreel15

Waxaad dib u isticmaali kartaa kaabayaasha wanaagsan, farta qoraalka, adeegyada muujinta, dhaqdhaqaaqa aasaasiga ah,
fududeynta qaloocyada, rarista hantida iyo kaabayaasha QA laga bilaabo beta-motion halka ay waxtar leedahay.

Laakiin hal-abuur ahaan tani waa inay noqotaa filim cusub.

Kahor hirgelinta, hubi Taxtello UI-ga dhabta ah oo faham badeecada.

Ha abuurin shaqeyn aan jirin.

─...
LUQADDA MUUQAALKA EE TAXTELLO EE DHABTA AH
─...

Isticmaal nidaamka naqshadeynta dhabta ah.

Palette-ka asaasiga ah:

Taariikhda:
#0c0f1a

Dusha sare:
#111525
#131722
#1a2032

Dahabka summada koowaad:
#e8b84b

Dahabka ugu muhiimsan:
#f5d07a

Qoto dheer oo dahab ah:
#9b6d18

Qoraalka aasaasiga ah:
#e8eaf2

Cad diiran oo xooggan:
#f6f4eb

Qoraal labaad:
#8b93b5

Togan:
#34d399

Negative/qalad kaliya marka macno ahaan loo baahdo:
#f87171

Nooca qoraalka:
Iyo sidoo kale Jakarta Sans

Tirooyinka / qiimayaasha maaliyadeed marka ay habboon tahay:
JetBrains Mono

Isticmaal calaamadda dhabta ah ee Taxtello iyo/ama calaamadda Taxtello.
Ha dib u sawirin ama ha qiyaasin astaanta.

Dahabka Taxtello waa inuu u ekaadaa lahjad qaali ah, ee ma aha daad UI ah oo jaalle ah.

Ka fikir:
bir madow
dahab diirran
galaas
khad
saxnaan
kalsooni deggan

MAYA:
cyberpunk
crypto
neon
ciyaaraha
guud ahaan AI guduudan
Jaranjarooyinka qaanso roobaadka

─...
XEERARKA HAL-ABUURKA EE ASAASIGA AH
─...

Si naxariis darro ah u raac xeerarkan:

1. HAL XABAD = HAL FIKIR.

2. Muuqaal kasta wuxuu u baahan yahay meel uu ku neefsado.

3. UI-ga badeecadu waa geesiga.

4. Ha ku dhejin nuqul sharraxaad ah meel kasta.

5. Ha isticmaalin jarista adag haddii aysan jirin sabab ula kac ah.

6. Dooro kala-guurka walax-ku-saleysan:
kaar ayaa noqonaya kaarka xiga,
Khad jaantus ah ayaa noqda isku xire,
rasiidhku wuxuu noqdaa ballan,
lambarku wuxuu noqonayaa qayb kale oo is-dhexgal ah,
kamaradu waxay dhex martaa badeecada.

7. Isticmaal fududaynta heerka sare.
Dhaqdhaqaaq toosan ma jiro.

8. Dhaqdhaqaaqu waa inuu si dabiici ah isu dul maraa.
Walxaha dhammaantood waa inaysan ku bilaaban oo ku joogsan qaab isku mid ah.

9. Si yar u isticmaal qoto dheer:
aragti,
parallax jilicsan,
miisaan,
kala soocidda hore/asalka,
Qoto dheer oo la xakameeyey oo duurka ah haddii la gaari karo.

10. Wax saameyn ah ma jirto sababtoo ah waxay u egtahay mid qabow.

11. Ma jiraan wax spam ah oo aan jirin.

12. Meel kasta ma jirto muuqaal been abuur ah oo muraayad ah.

13. Ma jiro wax aan caddayn oo xad dhaaf ah.

14. Kaararka wareega 3D ee aan micno lahayn ma jiraan.

15. Ma jiro zoom joogto ah.

16. Maya 20 qaab oo kala duwan oo sawir-gacmeed ah.

17. Ma jiro UI boodboodaya.

18. Ma jiro cutub suuqgeyn oo weyn.

19. Ha ku dayan sawir gaar ah oo Apple ah oo ganacsi ah.
Qabso falsafadda iyo tayada wax soo saarka beddelkeeda.

Kalsoonida muuqaalku waa inay ka timaadaa xakamaynta.

─...
QAABKA
─...

Macallinka koowaad:

1920 × 1080
60 fps
16:9
H.264
Muddada ugu badan: 15.0 ilbiriqsi

Waqtiga hawlgalka bartilmaameedka:
qiyaastii 14.0–15.0 ilbiriqsi.

Waa inay u shaqeysaa sidii badeeco baraha bulshada ah xitaa iyada oo aan lahayn cod.

Haddii ay wax ku ool tahay KA DIB marka sayidku dhammeeyo, sidoo kale samee dib-u-habayn ula kac ah
Kala duwanaansho toosan/bulsho.

Ha jarin oo keliya qaabka desktop-ka.

Laakiin sayidka desktop-ka ayaa mudnaanta leh.

─...
SHEEKADA / QAYBTA DAREENKA
─...

Ha ka dhigin liiskan shan astaamood.

Waa inay u ekaataa hal fikir oo joogto ah:

FOWDO → XAKAMEYN → CADDAYN → TAXTELLO

1.5 ilbiriqsi ee ugu horreeya waa inay horey u muuqdaan kuwo heer sare ah.

Daqiiqadda ugu horreysa ee wax soo saarka ee macnaha leh waa inay dhacdaa ~ 2 ilbiriqsi.

Ma jiro hordhac astaan shan ilbiriqsi ah.

Jihada sheekada ee suurtogalka ah:

"Wax walba oo ku saabsan ganacsigaaga, ugu dambeyntii hal meel."

Laakiin TUSO tan halkii aad ka sharxi lahayd.

Waxaan rabaa qiyaastii afar fikradood oo muuqaal ah oo ku saabsan filimka oo dhan.

Adeegso dusha sare ee ugu xooggan REAL Taxtello ee aad ka hesho kaydka.

Musharixiinta xooggan waxaa ka mid ah:

• Finanzcockpit / Dashboard
• Dib u habeyn
• Belege
• Bangiga / isku-darka
• dulmar guud ee canshuurta Steuergesundheit

Uma baahnid inaad dhammaantood muujiso.

Dooro isku-darka ugu xooggan ee muuqaal ahaan.

─...
SUUQA SHEEKOOYINKA 15-ILAAB EE LA SOO JEEDIYAY
─...

Tan ula dhaqan sidii meel bilow ah oo xooggan, ee maaha qaab adag.

0.00 – 1.20

MADOW / CIIDAMO badeed.

Dhalaal yar oo dahab diirran ayaa soo muuqda.

Dhalaalku si qurux badan ayuu u muujinayaa calaamadda Taxtello ama qayb ka mid ah
calaamadda ereyada.

Calaamadda guud ma libdho.

Ka fikir saxnaanta mashiinka.

Kamaradu waxay dhex martaa ama dhaaftaa calaamadda, UI-guna wuxuu bilaabaa inuu ka soo baxo.

Nuqul aad u yar ama ma jiro.

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

1.20 – 4.40

XAKAMEYNTA MAALIYADDA.

Sharax Taxtello Cockpit-ga dhabta ah oo ah dusha badeecad cabbir leh.

Ma aha oo kaliya shaashad shaashad ah oo la dhigay shaashadda.

Dib u dhis/jar/lakab si gobollada is-dhexgalka shaqsiga ah ay u firfircoonaadaan.

Tirada dhaqaale ee geesiga ayaa si cad u xallisa.
Jaantusku wuxuu soo jiitaa.
Heerarka taageerada ayaa wax yar ka dib degi doona.

Isticmaal shaandhooyin gaar ah.

Hal sadar oo nuqul ah ayaa soo muuqan kara, tusaale ahaan:

"Alle waan Blick."

ama weedh kale oo Jarmal ah oo gaaban haddii aad hesho wax ku habboon.

Ugu badnaan ~3–4 eray.

Interface-ku waa inuu ahaadaa mid la aqoonsan karo sida badeecada dhabta ah.

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

4.40 – 7.50

DUKUMINTIGA / BUUG-HAYSIGA.

U isticmaal shay muuqaal ah oo laga soo qaaday muuqaalkii hore sidii kala-guur.

Tusaale:

Barta jaantuska dahabka ah waxay ku fidaysaa geeska rasiidhka/kaarka.
Kamaradu way raacdaa.
Rasiid/dukumeenti ayaa soo galaya.
Taxtello ayaa aqoonsata ama abaabusha.
Dukumeentigu si qurux badan ayuu ugu jiraa diiwaanka ballansashada/dhaqaalaha ee u dhigma.

Adeegso isku-xidhka magnetic-ga iyo saxnaanta.

Ma jiro laser scanner farmaajo leh.

Duufaan warqad ah oo sabeynaysa ma jirto.

Nuqul yar oo suurtagal ah:

"Beege. Erledigt."

Kaliya haddii ay hagaajinayso muuqaalka.

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

7.50 – 10.70

LACAG / QAANSHEEG.

Morph ama u gudub si dabiici ah oo loo galo is-dhexgalka dhabta ah ee Rechnungen.

Isticmaal hal daqiiqo oo xoog leh:

Isbeddelka xaaladda qaansheegta,
lacag bixin ayaa go'aamisa,
lacag ayaa meel u guurta,
ama dulmar guud ayaa isku soo ururaya.

Tiradu waa inay dareemaan taabasho iyo saxnaan.

Adeegso JetBrains Mono halkaas oo ay tani la jaanqaadayso badeecada dhabta ah.

Dahabku wuxuu iftiiminayaa xaaladda firfircoon.

Cagaarka waxaa loo isticmaalaa oo keliya xaalad macno dhab ah oo togan.

Nuqul suurtagal ah:

"Geel. Waxaan ahay Griff."

Mar labaad: ikhtiyaari ah oo aad u gaaban.

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

10.70 – 12.80

CASHUURTA / CADDEYNTA.

U gudubka dusha sare ee hagidda canshuurta/caafimaadka maaliyadeed ee Taxtello.

Ha sheegan in Taxtello si sixir ah u damaanad qaadayso canshuuraha saxda ah.

Isgaarsii aragtida iyo xakamaynta.

Tusaale:

calaamado badan oo buuq badan ayaa isu beddelaya hal dulmar canshuur oo deggan oo qaabaysan.

Nuqul suurtagal ah:

"Steuern waan Blick."

Muuqaalkan waa inuu dareemaa mid deggan marka loo eego muuqaalkii hore.

Laxanku si kooban ayuu u gaabiyaa.

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

12.80 – 15.00

BIXINTA SUMMADA.

Kaamirada dibadda u soo jiid.

UI-gu wuxuu isku dhejiyaa ama ku laabmaa hal shay/dusha sare ee badeecada Taxtello oo qurux badan.

Mugdigu wuu ku soo laabanayaa hareerihiisa.

Calaamadda dahabka ah ee Taxtello ayaa xallisa.

Hal xariiq oo summadeed oo gaaban oo hoos ku qoran.

Sahaminta khadadka kama dambaysta ah ee xooggan sida:

"Dein Business. Klar."

"Buchhaltung. Unter Kontrolle."

"Einfach mehr Überblick."

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

Dooro iyadoo lagu saleynayo booska dhabta ah ee badeecada aad ka hesho kaydka.

Ha isticmaalin xariiq sababtoo ah waan soo jeediyay.

Qaab-dhismeedka kama dambaysta ah waa inuu lahaadaa xasillooni ku filan oo lagu diiwaan geliyo.

Si kalsooni leh u dhammee.

Ma jiro CTA boodbood weyn.

─...
KALA-GUURKA
─...

Tani waa mid ka mid ah qaybaha ugu muhiimsan.

Waxaan rabaa isbeddello ka dhigaya daawadaha inay ka fikiraan:

"Dabcan muuqaalka xiga wuxuu ka yimid taas."

Wanaagsan:

khadka jaantuska → geeska dukumeentiga
kiniin dahab ah → badhanka qaansheegta
lambarka maaliyadeed → qaddarka ku jira biilka
geeska kaarka → dusha sare ee xiga
qaybta is-dhexgalka ee kamarada oo la riixo
joomatari la wadaago
maaskaro muuji iyadoo la adeegsanayo qaababka badeecada dhabta ah

Xun:

isdhaafsiga
tirtir aan kala sooc lahayn
kala-guurka wareegga
cillad
garaac digsi labadii ilbiriqsiba mar
SaaS-ga guud ee bidix-bidix
spam-ka zoom-blue

Jarista tooska ah waxaa la oggol yahay oo keliya marka saameyn laxan leh oo ula kac ah ay faa'iido u leedahay filimka.

─...
DHAQDHAQAAQ
─...

Dhaqdhaqaaqu wuxuu u baahan yahay miisaan.

Isticmaal qaloocyada la mid ah:

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

halka ay ku habboon tahay.

Qaybaha kala duwan waa inay lahaadaan waqtiyo imaatin oo aad u kala duwan.

Doorbid:

filashada
hoos u dhac ku yimid ~ 2%
degitaan
sii socoshada mooshinka
Xawaaraha la wadaago ee u dhexeeya muuqaallada

Ka fogow sawir-gacmeedka.

Dhaqdhaqaaqa kamaradu waa inuu u ekaadaa sawir alaab heer sare ah oo macro ah.

Bal qiyaas inaan duubeyno shay tayo sare leh xitaa haddii uu yahay software.

─...
NALKA / MAADDADA
─...

Isticmaal nalalka deegaanka ee aadka u khafiifsan.

Daawaynta suurtagalka ah:

• Nalalka dahabka jilicsan ee geeska
• burburka badda ee madow
• ubax jilicsan oo jawi deggan
• iftiin jilicsan oo spectular ah oo dul maraya dusha sare
• muunad xaddidan
• hadhuudh khafiif ah haddii ay si waxtar leh u caawiso

Isku-xirka ha ahaado mid nadiif ah.

HA kharijin sheyga si aad u ekaato filimaan.

Ma jiraan wax dhaldhalaal ah oo been abuur ah oo baabi'iya akhrinta.

─...
TUUFIYADA
─...

Isticmaal nuqul aad u yar.

Weedhna waa inaysan la tartamin badeecada.

Cinwaanadu guud ahaan waa inay ku habboonaadaan hal sadar.

Isticmaal Plus Jakarta Sans.

Naqshadaynta xooggan mararka qaarkood waxay si aad ah u weynaan kartaa oo ay noqon kartaa kala-guur
qalab laftiisa.

Ka fogow dhaqanka guud ee sawirrada dhaqdhaqaaqa halkaas oo eray kastaa si madax-bannaan u dhaqdhaqaaqo.

Naqshadeyntu waa inay u dhaqaaqdaa sidii walxaha loogu talagalay.

─...
COD / LAXAN
─...

U samee dhaqdhaqaaqa sidii iyadoo loo jaray qiyaastii 115-120 BPM:
heer sare ah, firfircoon, casri ah, oo aan degdeg ahayn.

Daqiiqadaha muhiimka ah waa inay ku soo dhacaan muusikada.

Luqadda codka ee la soo jeediyay:

• saameyn jilicsan oo hooseeya oo loogu talagalay muujinta weyn
• gujinta taabashada UI ee xaddidan
• calaamad bir ah/galaas ah oo khafiif ah
• dhaqdhaqaaq jilicsan oo hooseeya inta lagu jiro kala-guurka kamarada
• cod qurux badan oo xalliyay sumcadda

Ka fogow:

• kor u kac weyn oo filimaan ah
• Qalabka kor u qaada EDM
• qaylo badan meel kasta
• codadka "is-dhexgalka farsamada" ee kaydka ah
• garaaca rap-ka
• bass gardarro leh

Haddii aysan jirin hanti muusig/maqal oo sharci ahaan ammaan ah oo mashruuca ku jirta, HA jiidin
Codka xuquuqda daabacaadda leh ee laga helo internetka.

Keen sayidka muuqaalka iyada oo aan lahayn muusig xuquuqdiisa la ilaaliyo oo samee tilmaan kooban
warqad sharraxaysa meesha ay tahay in muusigga/SFX uu gaaro.

Haddii cod ammaan ah/maxalli ah oo ku habboon uu jiro, isticmaal.

─...
ALAAB DHAB AH OO KALIYA
─...

Tani waa muhiim.

Kormeer qaybta ugu muhiimsan ee hadda jirta.

Ha ikhtiraacin shaashadaha.

Ha abuurin halbeeg tilmaamaya xogta dhabta ah ee macaamiisha.

Isticmaal qiimayaal si cad u ah oo macmal ah/si demo ah haddii loo baahdo.

Si kama' ah ha u soo bandhigin macluumaad shaqsiyeed, mid tijaabo ah ama mid wax soo saar ah.

Dib u isticmaal qaab-dhismeedka muuqaalka ee Taxtello UI-ga dhabta ah.

Haddii shaashadu u baahan tahay in dhaqdhaqaaq laga sooco, si daacad ah ugu soo celi React from
nidaamka naqshadeynta dhabta ah halkii si fudud loo cabbiri lahaa shaashadda weyn.

Natiijadu waa inay weli u ekaataa si aan la garan karin sida Taxtello.

─...
FILOOYINKA FULINTA
─...

Si toos ah uga shaqee:

/taxtello/beta-motion

Samee halabuurka cusub oo ay weheliso kan jira.

Ha shaqeeyaan halabuurka jira.

Si nadiif ah u qaabee shaqada cusub.

Dooro waxyaabaha aasaasiga ah ee dib loo isticmaali karo ee loogu talagalay:

• dusha sare ee kamarada
• qaab-dhismeedka badeecada
• kala-guurka qarsoon
• qoraalku wuxuu muujinayaa
• Gobolka UI ayaa shaaca ka qaaday
• Nalalka deegaanka
• kala-guurka walxaha la wadaago

Iska ilaali hal qayb oo ka kooban 1,500-sadar.

Adeegso Remotion dhaqdhaqaaqa go'an oo ay wadaan qaab-dhismeedka/waqtiga.

Ma jiro setTimeout.
Ma jiraan wax dhaqdhaqaaqyo aan go'aan lahayn.

Xushmee 60 fps inta lagu jiro.

Si ula kac ah u isticmaal interpolation/guga/fududeynta.

─...
HA JOOGSAN KA DIB HOR INTA AAD GUDBISO
─...

Kani waa hawl muuqaal ah.

WAA INAAD dib u eegto natiijada dhabta ah ee la sameeyay.

Shaqada loo baahan yahay:

1. Baar bakhaarka iyo summada/badeecada dhabta ah.

2. Qor sheeko kooban oo leh:
- shaambadaha waqtiga saxda ah
- muuqaal muhiim ah
- macquulka kala-guurka
- nuqul
- laxanka shucuureed ee loogu talagalay

3. Hirgeli.

4. Samee hubinta nooca / hubinta khuseeya.

5. Samee sawirro matalaya qiyaastii:
0.0 ilbiriqsi
1.0 ilbiriqsi
2.5 ilbiriqsi
4.5 ilbiriqsi
6.5 ilbiriqsi
8.5 ilbiriqsi
10.5 ilbiriqsi
12.5 ilbiriqsi
14.0 ilbiriqsi
14.8 ilbiriqsi

6. SI MUUQAAL AH U EEG SAWIRRADAAS.

Ha kaliya xaqiijin in sawirku uu guuleystay.

Weydii:

Tani ma u egtahay filim wax soo saar oo heer sare ah oo Apple ah?

Ma jiraa wax u eg qaab-dhismeed?

Shaashada ma ku badan tahay?

Badeecaddu ma la akhrin karaa?

Ma isku xiran yihiin kala-guurka macquulka ah?

Dahabka Taxtello ma dareemayaa qiimo sare?

Qaab kasta ma u eg yahay mid la sameeyay?

7. Hagaaji daciifnimada aragga.

8. Soo bandhig filimka oo dhammaystiran.

9. Baadh qaybo badan oo sax ah oo laga soo qaatay MP4 kii ugu dambeeyay, ma aha oo kaliya biraawsarka
shaashadaha shaashadda.

10. Mar kale ku celi haddii loo baahdo.

Ha ku dhawaaqin guul sababtoo ah koodku wuu isku ururayaa.

Filimkan waa FILIM.

─...
BAARKA TAYADA
─...

Diid natiijadaada haddii ay dareento sida:

• qaab-dhismeedka SaaS
• sawir-gacmeed PowerPoint ah
• duubista shaashadda shabakadda
• Remotion Taabashada guud
• xayeysiis crypto ah
• qaab-dhismeed dallacaad ah oo ay AI soo saartay
• shan sawir-gacmeed oo simbiriirixanaya
• nuqul suuqgeyn xad dhaaf ah

Qaab kasta oo muhiim ah waa inuu ahaadaa mid ku filan oo loogu isticmaali karo xayeysiis aan buuq lahayn.

Waxaan doorbidi lahaa:

3 daqiiqo oo muuqaal ah oo aan caadi ahayn

ka badan

10 muuqaallo muuqaal ah oo dhexdhexaad ah.

─...
WAXYAABAHA LA SOO GUDBIN KARO EE UGU DAMBEEYA
─...

Bixi:

1. Sheekadii ugu dambeysay
2. Ilo Cusub oo ka kooban Remotion
3. 1920 × 1080 / MP4 kama dambays ah oo 60fps ah
4. Boodhadh/qaab-dhismeedka kama dambaysta ah
5. Warqadda xiriirka oo leh muuqaallo matalaya filimka
6. Waqtiga saxda ah ee socodsiinta
7. Liiska hantida/shaashaddaha dhabta ah ee Taxtello ee la isticmaalay
8. Sharaxaad kooban oo ku saabsan luqadda dhaqdhaqaaqa
9. Wax kasta oo khilaaf muuqaal ah oo harsan
10. Amarrada lagu soo saarayo sawirka

Kaydi wax soo saarka galka si cad loogu magacaabay sida:

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

Waxba ha ku darin.
Ha wax ka beddelin xogta wax soo saarka.
Waxba ha isku darin.

Si hal-abuur leh u bax, laakiin samee xakamayn arxan darro ah.

Ka dhig Taxtello mid qaali ah.

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.

Jawaab celin laga soo qaatay boostada @daniel_haida.