Kev teeb tsa: Taxtello bookkeeping app zaj duab xis

Koj yog tus tsim qauv kev txav chaw laus, tus tsim khoom lag luam thiab tus kws ua haujlwm Remotion rau Taxtello.

Koj txoj haujlwm yog tsim ib daim zaj duab xis khoom zoo tiag tiag, qib Apple rau Taxtello.

Qhov no TSIS YOG ib qho kev piav qhia SaaS dav dav.
Qhov no TSIS yog ib qho kev qhia txog qhov feature.
Qhov no TSIS YOG ib qho animation template pib.

Kuv xav tau ib daim yeeb yaj kiab qhia txog hom/khoom uas ntev tshaj plaws 15 vib nas this uas ua rau Taxtello zoo li ib yam khoom lag luam nyiaj txiag uas laus lawm, kim heev, thiab tsim tau zoo nkauj.

Xav txog:

Zaj yeeb yaj kiab tso tawm khoom Apple
× kev lag luam fintech zoo tshaj plaws
× Kev tsim qauv kev txav chaw ntawm tsab xov xwm
× Kev nthuav qhia khoom zoo li Stripe uas raug txwv
× Taxtello tus kheej lub cim qhia txog nws tus kheej

Qhov kev xav tau yog:

"Tos, qhov no yog German bookkeeping app?"

Zaj yeeb yaj kiab yuav tsum xav tias kim heev.

────────────────────────────────────────────
REPO / QHOV TSEEB
────────────────────────────────────────────

Ua ntej tshaj, tshawb xyuas cov chaw khaws khoom tiag tiag ua ntej tsim ib yam dab tsi.

Cov khoom tseem ceeb:
/taxtello/lub ntsiab

Qhov project Remotion uas twb muaj lawm:
/taxtello/beta-motion

Cov chaw tseem ceeb ntawm cov hom lag luam tiag tiag:

/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

Cov duab ntawm cov khoom lag luam uas twb muaj lawm tuaj yeem pom hauv qab no:

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

Nyiam cov duab thaij tshiab/qhov chaw tam sim no dua li cov khoom qub.

Twb muaj ib qho kev ua yeeb yam hero Remotion 24-feeb lawm hauv
/taxtello/beta-motion.

TSIS TXHOB hloov nws.
TXHOB TXWM rov qab ua dua.
TSIS TXHOB yuam nws zaj dab neeg AI-connections tam sim no rau hauv zaj yeeb yaj kiab tshiab no.

Tsim ib qho kev sib xyaw ua ke tshiab rau txoj haujlwm no, piv txwv li

TaxtelloShowreel15

Koj siv tau cov khoom siv zoo xws li cov fonts, rendering utilities, motion primitives,
kev txo cov kab nkhaus, kev thauj khoom ntawm cov khoom muaj nqis thiab QA cov khoom siv los ntawm beta-motion qhov twg muaj txiaj ntsig.

Tiam sis qhov no yuav tsum yog ib zaj yeeb yaj kiab tshiab uas muaj tswv yim.

Ua ntej siv, tshuaj xyuas Taxtello UI tiag tiag thiab nkag siab txog cov khoom.

Tsis txhob tsim cov haujlwm uas tsis muaj.

────────────────────────────────────────────
TAXTELLO TXOJ LUS QHIA TXOG KEV SIB THOV
────────────────────────────────────────────

Siv lub tshuab tsim qauv tiag tiag.

Cov xim tseem ceeb:

Keeb Kwm:
#0c0f1a

Cov nto siab:
#111525
#131722
#1a2032

Hom kub tseem ceeb:
#e8b84b

Qhov tseem ceeb kub:
#f5d07a

Kub tob:
#9b6d18

Cov ntawv tseem ceeb:
#e8eaf2

Dawb sov so:
#f6f4eb

Cov ntawv nyeem thib ob:
#8b93b5

Zoo:
#34d399

Tsis zoo/yuam kev tsuas yog thaum lub ntsiab lus tsim nyog xwb:
#f87171

Kev sau ntawv:
Ntxiv rau Jakarta Sans

Cov lej / tus nqi nyiaj txiag yog tias tsim nyog:
JetBrains Mono

Siv lub cim Taxtello tiag tiag thiab/lossis lub cim Taxtello.
Tsis txhob kos dua lossis kwv yees lub logo.

Taxtello cov kub yuav tsum zoo li lub suab muaj nqis, tsis yog dej nyab UI daj.

Xav txog:
hlau tsaus nti
kub sov
iav
kua mem
kev ua kom raug
kev ntseeg siab ntsiag to

TSIS YOG:
cyberpunk
cryptocurrencies
neon
kev ua si
generic AI xim av
cov xim av daj

────────────────────────────────────────────
COV CAI TSEEM CEEB NTAWM KEV MUAJ TSWV YIM
────────────────────────────────────────────

Ua raws li cov cai no yam tsis muaj kev khuv leej:

1. IB LUB TSWV YIM = IB LUB TSWV YIM.

2. Txhua qhov xwm txheej xav tau chaw ua pa.

3. Tus UI ntawm cov khoom yog tus phab ej.

4. Tsis txhob muab cov lus piav qhia lo rau txhua qhov chaw.

5. Tsis txhob siv cov khoom txiav tawv tshwj tsis yog tias muaj laj thawj txhob txwm ua.

6. Nyiam kev hloov pauv uas tsav los ntawm cov khoom:
ib daim npav dhau los ua daim npav tom ntej,
ib txoj kab kos duab dhau los ua ib qho txuas,
daim ntawv txais nyiaj dhau los ua daim ntawv teem caij,
ib tus lej dhau los ua lwm qhov interface,
lub koob yees duab txav mus los ntawm cov khoom.

7. Siv cov kev pab cuam them nqi siab tshaj.
Tsis muaj kev txav mus los linear.

8. Kev txav mus los yuav tsum sib tshooj raws li ntuj tsim.
Cov ntsiab lus yuav tsum tsis txhob pib thiab nres ntawm tib lub thav duab.

9. Siv qhov tob me ntsis:
kev xav,
parallax mos mos,
nplai,
kev sib cais ntawm pem hauv ntej/tom qab,
tswj qhov tob ntawm daim teb yog tias ua tau.

10. TSIS muaj qhov cuam tshuam tsuas yog vim nws zoo nkauj xwb.

11. Tsis muaj cov khoom me me spam.

12. Tsis muaj qhov ua kom zoo li iav cuav nyob txhua qhov chaw.

13. Tsis muaj qhov tsis meej pem ntau dhau.

14. Tsis muaj daim npav 3D uas tsis muaj qab hau.

15. Tsis tas li ntawd, tsis...

16. Tsis muaj 20 hom kev ua yeeb yam sib txawv.

17. Tsis muaj UI bouncing.

18. Tsis muaj kab lus lag luam loj heev.

19. Tsis txhob ua raws li kev tshaj tawm tshwj xeeb ntawm Apple.
Txais lub tswv yim thiab qhov zoo ntawm kev tsim khoom xwb.

Kev ntseeg siab ntawm qhov muag yuav tsum yog los ntawm kev txwv tsis pub.

────────────────────────────────────────────
HOM NTAWV
────────────────────────────────────────────

Tus thawj coj tseem ceeb:

1920 × 1080
60 fps
16:9
H.264
lub sijhawm ntev tshaj plaws: 15.0 vib nas this

Lub sijhawm khiav lag luam:
kwv yees li 14.0–15.0 vib nas this.

Nws yuav tsum ua haujlwm ua ib yam khoom lag luam hauv social media txawm tias tsis muaj suab los xij.

Yog tias ua tau TOM QAB tus tswv ua tiav lawm, kuj tsim ib qho kev hloov kho dua tshiab.
kev hloov pauv ntsug / kev sib raug zoo.

Tsis txhob tsuas yog txiav cov duab ntawm lub desktop xwb.

Tab sis lub desktop master yog qhov tseem ceeb.

────────────────────────────────────────────
ZAJ DAB NEEG / KEV XAV TXOG KEV XAV
────────────────────────────────────────────

Tsis txhob ua qhov no ua ib daim ntawv teev tsib yam ntxwv.

Nws yuav tsum zoo li ib lub tswv yim tas mus li:

Kev ntxhov siab → Kev tswj hwm → Kev pom tseeb → Taxtello

Thawj 1.5 vib nas this yuav tsum zoo li kim heev lawm.

Lub sijhawm tseem ceeb thawj zaug ntawm cov khoom yuav tsum tshwm sim li ~ 2 vib nas this.

Tsis muaj lub logo qhia txog tsib vib nas this.

Tej zaum yuav muaj kev taw qhia txog zaj dab neeg:

Txhua yam hais txog koj txoj kev lag luam, thaum kawg nyob rau hauv ib qho chaw.

Tiamsis QHIA qhov no es tsis txhob piav qhia.

Kuv xav tau kwv yees li plaub lub tswv yim pom thoob plaws hauv zaj yeeb yaj kiab.

Siv cov nplaim REAL Taxtello uas muaj zog tshaj plaws uas koj pom hauv lub chaw khaws ntaub ntawv.

Cov neeg sib tw muaj zog suav nrog:

• Finanzcockpit / Dashboard
• Rechnungen
• Belege
• Lub txhab nyiaj / kev sib phim
• Steuergesundheit / se saib xyuas

Koj TSIS tas yuav qhia lawv txhua tus.

Xaiv qhov sib xyaw ua ke uas pom tseeb tshaj plaws.

────────────────────────────────────────────
COV DAB NEEG 15-THIB OB UAS POM ZOO
────────────────────────────────────────────

Xav txog qhov no ua ib qho chaw pib zoo, tsis yog ib qho qauv ruaj khov.

0.00 – 1.20

DUB / XIM AV.

Ib lub teeb kub me me tshwm sim.

Lub teeb ci ntsa iab qhia txog lub cim Taxtello lossis ib daim ntawm
cim lus.

Tsis muaj lub logo generic ploj mus.

Xav txog qhov precision machined.

Lub koob yees duab txav mus los ntawm lossis dhau qhov cim thiab UI pib tawm ntawm nws.

Tsawg heev los yog tsis muaj daim qauv.

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

1.20 – 4.40

KEV TSWJ NYIAJ TXIM.

Qhia qhov tseeb ntawm Taxtello Cockpit ua qhov chaw khoom loj.

Tsis yog tsuas yog ib qho screenshot tso rau ntawm qhov screen xwb.

Rov tsim kho dua/qoob loo/txheej nws kom cov cheeb tsam interface ib leeg tuaj yeem txav tau.

Tus lej nyiaj txiag ntawm tus phab ej daws tau zoo heev.
Daim ntawv qhia kos rau hauv.
Cov kev ntsuas txhawb nqa yuav daws teeb meem me ntsis tom qab.

Siv cov tshuaj zawv zawg me ntsis.

Ib kab ntawv theej yuav tshwm sim, piv txwv li:

“Alles im Blick.”

lossis lwm kab lus German luv luv yog tias koj pom qee yam haum dua.

Tsis pub tshaj ~3–4 lo lus.

Lub interface yuav tsum tseem pom tau tias yog cov khoom tiag.

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

4.40 – 7.50

KEV HLOOV PAUB TXOG DAIM NTAWV / KEV KAWM NTAWV.

Siv ib yam khoom pom los ntawm qhov xwm txheej dhau los ua qhov kev hloov pauv.

Piv txwv li:

Ib daim duab kub nthuav dav mus rau hauv ces kaum ntawm daim ntawv txais nyiaj/daim npav.
Lub koob yees duab ua raws li nws.
Ib daim ntawv txais nyiaj/daim ntawv nkag mus.
Taxtello txheeb xyuas lossis teeb tsa nws.
Daim ntawv no zoo nkauj heev rau hauv nws cov ntaub ntawv teev npe / cov ntaub ntawv nyiaj txiag.

Siv cov hlau nplaum sib dhos thiab kev ua kom raug.

Tsis muaj lub tshuab luam theej laser cheesy.

Tsis muaj cua daj cua dub uas ntab.

Tej zaum yuav muaj daim ntawv theej me me:

“Belege. Erledigt.”

Tsuas yog tias nws txhim kho qhov xwm txheej.

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

7.50 – 10.70

NYIAJ/DAIM NTAWV THEM NYIAJ.

Hloov pauv lossis hloov pauv mus rau hauv qhov sib txuas Rechnungen tiag tiag.

Siv ib lub sijhawm muaj zog:

qhov xwm txheej ntawm daim ntawv them nqi hloov pauv,
kev them nyiaj daws teeb meem,
ib qho nyiaj txav mus rau hauv qhov chaw,
los yog tus txheej txheem cej luam sib sau ua ke nws tus kheej.

Cov lej yuav tsum zoo li kov tau thiab meej.

Siv JetBrains Mono qhov twg qhov no phim cov khoom tiag tiag.

Kub qhia txog lub xeev nquag.

Ntsuab tsuas yog siv rau lub xeev semantic zoo tiag tiag.

Tej zaum yuav muaj daim qauv theej:

"Geld. Kuv yog Griff."

Dua ib zaug ntxiv: xaiv tau thiab luv heev.

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

10.70 – 12.80

SE / KEV PAUB MEEJ.

Hloov mus rau qhov chaw qhia txog kev noj qab haus huv se / nyiaj txiag tiag tiag ntawm Taxtello.

Tsis txhob hais tias Taxtello ua khawv koob lav cov se kom raug.

Sib txuas lus pom kev thiab kev tswj hwm.

Piv txwv li:

ntau lub teeb liab nrov nrov ua rau ib qho kev saib xyuas se uas nyob ntsiag to, muaj qauv.

Tej zaum yuav muaj daim qauv theej:

“Steuern im Blick.”

Zaj xwm txheej no yuav tsum zoo li nyob twj ywm dua li zaj xwm txheej dhau los.

Lub suab qeeb qeeb ib pliag.

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

12.80 – 15.00

HOM KEV THEM NYIAJ.

Rub lub koob yees duab tawm sab nraud.

Lub UI nias lossis quav ua ib yam khoom / nto zoo nkauj ntawm Taxtello.

Qhov tsaus ntuj rov qab los ncig nws.

Lub cim lo lus kub Taxtello daws teeb meem.

Muaj ib kab luv luv ntawm hom lag luam hauv qab.

Tshawb nrhiav cov kab kawg zoo li:

“Dein Business. Klar.”

"Buchhaltung. Unter Kontrolle."

"Einfach mehr Überblick."

"Alles fürs Lag Luam. Ib qho einem Ort."

Xaiv raws li qhov chaw khoom tiag tiag uas koj pom hauv repo.

Tsis txhob siv ib kab vim kuv tsuas yog hais kom siv xwb.

Lub thav duab kawg yuav tsum muaj qhov ntsiag to txaus los sau npe.

Xaus kev ntseeg siab.

Tsis muaj CTA loj heev uas dhia tau.

────────────────────────────────────────────
KEV HLOOV PAUV
────────────────────────────────────────────

Qhov no yog ib qho ntawm cov tseem ceeb tshaj plaws.

Kuv xav tau kev hloov pauv uas ua rau tus saib xav tias:

"Tau kawg qhov xwm txheej tom ntej no los ntawm qhov ntawd."

Zoo:

kab kos duab → ntug ntawv
tshuaj kub → khawm them nqi
Tus lej nyiaj txiag → tus nqi hauv daim ntawv qhia nqi
ntug daim npav → nto tom ntej
lub koob yees duab thawb los ntawm qhov interface element
geometry sib koom ua ke
qhia daim npog ntsej muag siv cov duab khoom tiag tiag

Phem:

hla ploj mus
so tsis raws cai
kev hloov pauv tig
qhov yuam kev
lub lauj kaub nplawm txhua ob vib nas this
SaaS dav dav slide-left
zoom-blur spam

Tsuas yog tso cai txiav ncaj qha thaum muaj kev cuam tshuam zoo rau zaj yeeb yaj kiab.

────────────────────────────────────────────
TXAV
────────────────────────────────────────────

Kev txav mus los xav tau qhov hnyav.

Siv cov kab nkhaus sib piv rau:

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

qhov twg tsim nyog.

Cov khoom sib txawv yuav tsum muaj lub sijhawm tuaj txog sib txawv me ntsis.

Nyiam:

kev cia siab
overload hauv qab ~ 2%
kev daws teeb meem
kev txav mus los txuas ntxiv
kev sib koom ceev ntawm cov xwm txheej

Tsis txhob ua kom cov duab kos zoo li lub caij nplooj ntoos hlav.

Kev txav ntawm lub koob yees duab yuav tsum zoo li kev thaij duab macro zoo heev.

Xav txog tias peb tab tom ua yeeb yaj kiab ib yam khoom zoo txawm tias nws yog software.

────────────────────────────────────────────
TEJ TSUAB / KHOOM SIV
────────────────────────────────────────────

Siv cov teeb pom kev zoo ib puag ncig uas tsis pom kev zoo heev.

Tej kev kho mob uas siv tau:

• teeb pom kev zoo kub mos mos
• xim av tsaus nti poob
• paj tawg me ntsis
• qhov muag pom kev zoo nkauj hla dhau ib qho chaw
• vignette uas tsis pub hloov pauv
• cov noob me me yog tias nws pab tau zoo heev

Ua kom lub interface meej.

TSIS TXHOB ua kom cov khoom tsis meej tsuas yog kom zoo li cinematic xwb.

Tsis muaj cov duab ci ntsa iab cuav uas ua rau nyeem tsis meej.

────────────────────────────────────────────
TSIM NTAWV
────────────────────────────────────────────

Siv daim ntawv theej me me xwb.

Tsis muaj kab lus twg yuav tsum sib tw nrog cov khoom.

Feem ntau cov npe xov xwm yuav tsum haum rau ib kab.

Siv Plus Jakarta Sans.

Cov ntawv sau zoo qee zaum yuav loj heev thiab dhau los ua kev hloov pauv
ntaus ntawv nws tus kheej.

Tsis txhob siv cov duab txav chaw dav dav uas txhua lo lus txav tau ywj pheej.

Typography yuav tsum txav mus raws li cov khoom tsim.

────────────────────────────────────────────
SUAB / RHYTHM
────────────────────────────────────────────

Tsim cov lus tsa suab zoo li nws raug txiav mus txog kwv yees li 115–120 BPM:
zoo tshaj plaws, kinetic, sophisticated, tsis yog frenetic.

Cov sijhawm tseem ceeb yuav tsum mus txog suab paj nruag.

Cov lus suab uas pom zoo:

• kev cuam tshuam mos mos tsawg rau kev tshwm sim loj
• kev nias UI uas raug txwv tsis pub kov
• lub suab me me ntawm cov xim hlau/iav
• kev txav mus los qeeb qeeb thaum lub sijhawm hloov pauv ntawm lub koob yees duab
• lub suab zoo nkauj thaum lub logo them rov qab

Tsis txhob ua li no:

• zaj yeeb yaj kiab loj heev uas muaj cov yeeb yaj kiab luv luv
• Cov khoom siv EDM nce
• muaj suab nrov nrov txhua qhov chaw
• cov suab "tech interface" qub
• rap ntaus
• bass nruj heev

Yog tias tsis muaj suab paj nruag/suab paj nruag uas raug cai nyob hauv qhov project, TSIS TXHOB rub tawm
suab muaj cai los ntawm hauv internet.

Xa cov visual master yam tsis muaj copyrighted music thiab tsim ib qho cue luv luv
daim ntawv piav qhia txog qhov chaw uas suab paj nruag / SFX yuav tsum ntaus.

Yog tias muaj lub suab zoo/hauv zos uas tsim nyog, siv nws.

────────────────────────────────────────────
KHOOM TIB NEEG XWB
────────────────────────────────────────────

Qhov no tseem ceeb heev.

Tshawb xyuas qhov tseem ceeb tam sim no.

Tsis txhob tsim cov ntxaij vab tshaus.

Tsis txhob tsim cov ntsuas uas qhia txog cov ntaub ntawv tiag tiag ntawm cov neeg siv khoom.

Yog tias xav tau, siv cov nqi uas pom tseeb tias yog cov nqi hluavtaws/kev nyab xeeb rau kev ua qauv qhia.

Tsis txhob cia li muab cov ntaub ntawv tus kheej, cov ntaub ntawv sim, lossis cov ntaub ntawv tsim tawm tso tawm yam tsis tau npaj tseg.

Siv cov qauv pom ntawm Taxtello UI tiag tiag.

Yog tias ib qho screen xav tau kev sib cais los ntawm kev txav mus los, rov tsim nws dua hauv React los ntawm
lub kaw lus tsim qauv tiag tiag es tsis txhob tsuas yog scaling ib daim duab loj loj.

Qhov tshwm sim yuav tsum tseem zoo li Taxtello.

────────────────────────────────────────────
KEV CIA SIAB TXOG KEV SIV
────────────────────────────────────────────

Ua haujlwm ncaj qha rau hauv:

/taxtello/beta-motion

Tsim cov khoom tshiab nrog rau qhov uas twb muaj lawm.

Khaws cov khoom uas twb muaj lawm kom ua haujlwm.

Ua kom txoj haujlwm tshiab huv si.

Nyiam siv cov khoom siv rov qab tau rau:

• nto ntawm lub koob yees duab
• cov khoom thav duab
• kev hloov pauv uas npog ntsej muag
• cov ntawv qhia txog
• Thaj chaw UI qhia tau
• teeb pom kev zoo ib puag ncig
• kev hloov pauv ntawm cov khoom sib koom

Tsis txhob siv ib qho khoom siv uas muaj 1,500 kab.

Siv cov yeeb yaj kiab deterministic Remotion uas tsav los ntawm thav duab/lub sijhawm.

Tsis muaj setTimeout.
Tsis muaj cov animations uas tsis paub meej.

Hwm 60 fps thoob plaws.

Siv kev sib txuas/caij nplooj ntoos hlav/easing kom zoo.

────────────────────────────────────────────
TSIS TXHOB TXWM TOM QAB UA HAUJ LWM ZAUM IB
────────────────────────────────────────────

Qhov no yog ib txoj haujlwm pom kev.

Koj YUAV TSUM saib xyuas cov zis uas tau muab tso tawm tiag tiag.

Cov txheej txheem ua haujlwm xav tau:

1. Tshawb xyuas qhov chaw khaws khoom thiab hom / khoom tiag tiag.

2. Sau ib zaj dab neeg luv luv nrog:
- cov cim sijhawm tseeb
- qhov tseem ceeb pom
- kev hloov pauv logic
- daim qauv
- lub suab ntawm kev xav uas xav tau

3. Siv nws.

4. Khiav kev kuaj xyuas hom / cov kev kuaj xyuas cuam tshuam.

5. Tsim cov duab sawv cev ntawm kwv yees li:
0.0 vib nas this
1.0 vib nas this
2.5 vib nas this
4.5 vib nas this
6.5 vib nas this
8.5 vib nas this
10.5 vib nas this
12.5 vib nas this
14.0 vib nas this
14.8 vib nas this

6. SAIB XYUAS COV DUAB NO.

Tsis txhob tsuas yog lees paub tias kev ua tiav.

Nug:

Qhov no puas zoo li zaj yeeb yaj kiab khoom lag luam Apple-tier?

Puas muaj dab tsi zoo li ib daim qauv?

Puas muaj ntau dhau ntawm qhov screen?

Cov khoom puas nyeem tau yooj yim?

Cov kev hloov pauv puas txuas nrog kev xav?

Puas yog Taxtello kub zoo li kim dua?

Puas txhua lub thav duab zoo li muaj kev sib sau ua ke?

7. Kho cov teeb meem pom kev tsis zoo.

8. Ua kom tiav zaj yeeb yaj kiab.

9. Tshawb xyuas ntau lub thav duab decoded tseeb los ntawm qhov kawg MP4, tsis yog tsuas yog browser xwb
cov duab thaij.

10. Rov ua dua yog tias tsim nyog.

Tsis txhob tshaj tawm tias muaj kev vam meej vim tias cov lej tau muab sib sau ua ke.

Qhov khoom xa tuaj yog FILM.

────────────────────────────────────────────
QHIA TXOG KEV ZOO
────────────────────────────────────────────

Tsis txhob lees txais koj qhov tshwm sim yog tias nws zoo li:

• ib daim qauv SaaS
• ib daim duab kos PowerPoint
• ib qho kev kaw cov ntaub ntawv ntawm lub vev xaib
• ib qho kev qhia txog Remotion dav dav
• ib qho kev tshaj tawm crypto
• ib daim qauv tshaj tawm uas tsim los ntawm AI
• tsib daim duab thaij uas txav mus los
• daim ntawv tshaj tawm ntau dhau

Txhua lub thav duab tseem ceeb yuav tsum zoo txaus siv ua kev tshaj tawm tseem ceeb.

Kuv xav kom muaj:

3 lub sijhawm pom kev zoo kawg nkaus

tshaj li

10 cov yeeb yaj kiab tsis zoo.

────────────────────────────────────────────
COV XAIV TSAUM KAWG
────────────────────────────────────────────

Muab:

1. Zaj dab neeg kawg
2. Qhov chaw tsim khoom tshiab Remotion
3. 1920 × 1080 / 60fps kawg MP4
4. Daim ntawv tshaj tawm/daim duab kawg
5. Daim ntawv tiv tauj nrog cov thav duab sawv cev los ntawm zaj duab xis
6. Lub sijhawm khiav raws nraim
7. Daim ntawv teev cov khoom muaj nqis/cov ntxaij vab tshaus Taxtello tiag tiag siv
8. Piav qhia luv luv txog cov lus txav mus los
9. Tej yam uas tseem tshuav uas ua rau pom tsis meej
10. Cov lus txib kom rov ua dua qhov render

Txuag cov zis tawm hauv ib daim nplaub tshev uas muaj npe meej xws li:

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

Tsis txhob tso dab tsi tawm.
Tsis txhob hloov kho cov ntaub ntawv tsim khoom.
Tsis txhob sib xyaw ua ke.

Ua txhua yam kom muaj tswv yim, tab sis siv kev tswj hwm tsis muaj zog.

Ua kom Taxtello zoo li kim heev.

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.

Cov lus qhia tau los ntawm tus ncej @daniel_haida.