Taxtello buxgalteriya ilovasi filmi

Siz Taxtello kompaniyasining katta harakat dizayneri, mahsulot dizayneri va Remotion muhandisisiz.

Sizning vazifangiz Taxtello uchun chinakam premium, Apple darajasidagi mahsulot plyonkasini yaratishdir.

Bu SaaS uchun umumiy tushuntirish EMAS.
Bu funksiya bo'yicha qo'llanma EMAS.
Bu boshlang'ich shablon animatsiyasi EMAS.

Men Taxtello’ni yetuk, qimmat va chiroyli dizayndagi moliyaviy mahsulotga o‘xshatib ko‘rsatadigan maksimal 15 soniyali brend/mahsulot namoyishini xohlayman.

O'ylab ko'ring:

Apple mahsulotlarining taqdimot filmi
× premium fintech
× tahririyat harakati dizayni
× cheklangan Stripega o'xshash mahsulot taqdimoti
× Taxtelloning o'ziga xos vizual o'ziga xosligi

Istalgan reaksiya quyidagicha:

"Kuting, bu nemis buxgalteriya ilovasimi?"

Film qimmatga tushishi kerak.

─...
REPO / HAQIQAT MANBAI
─...

Biror narsani loyihalashdan oldin, avval haqiqiy omborlarni tekshiring.

Asosiy mahsulot:
/taxtello/main

Mavjud Remotion loyihasi:
/taxtello/beta-motion

Muhim haqiqiy brend manbalari:

/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

Mavjud mahsulot skrinshotlarini quyidagi manzilda topish mumkin:

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

Eskirgan artefaktlardan ko'ra eng yangi haqiqiy skrinshotlar/joriy manbani afzal ko'rish.

24 soniyali Remotion qahramon animatsiyasi allaqachon mavjud.
/taxtello/beta-motion.

Uni almashtirmang.
Uni qayta boshlamang.
Ushbu yangi filmga uning hozirgi sun'iy intellekt aloqalari syujetini majburan kiritmang.

Ushbu vazifa uchun yangi mustaqil kompozitsiya yarating, masalan

TaxtelloShowreel15

Siz yaxshi infratuzilmani, shriftlarni, renderlash yordamchi dasturlarini, harakat primitivlarini qayta ishlatishingiz mumkin,
foydali bo'lgan hollarda beta-harakatdan egri chiziqlarni, aktivlarni yuklashni va sifatni nazorat qilish infratuzilmasini yumshatish.

Lekin ijodiy jihatdan bu yangi film bo'lishi kerak.

Amalga oshirishdan oldin, Taxtello foydalanuvchi interfeysini tekshiring va mahsulotni tushunib oling.

Mavjud bo'lmagan funksiyani ixtiro qilmang.

─...
HAQIQIY TAXTELLO VIZUAL TILI
─...

Haqiqiy dizayn tizimidan foydalaning.

Asosiy palitra:

Fon:
#0c0f1a

Baland yuzalar:
#111525
#131722
#1a2032

Asosiy brend oltin:
#e8b84b

Oltin rangning yorqinligi:
#f5d07a

Oltin chuqurligi:
#9b6d18

Asosiy matn:
#e8eaf2

Kuchli issiq oq:
#f6f4eb

Ikkilamchi matn:
#8b93b5

Ijobiy:
#34d399

Faqat semantik jihatdan zarur bo'lgan hollarda salbiy/xato:
#f87171

Tipografiya:
Plus Jakarta Sans

Tegishli joylarda raqamlar / moliyaviy qiymatlar:
JetBrains Mono

Haqiqiy Taxtello so'z belgisidan va/yoki Taxtello belgisidan foydalaning.
Logotipni qayta chizmang yoki taxminiy chizmang.

Taxtelloning oltin rangi sariq UI toshqini emas, balki qimmatbaho aksent kabi tuyulishi kerak.

O'ylab ko'ring:
to'q metall
issiq oltin
shisha
siyoh
aniqlik
xotirjam ishonch

EMAS:
kiberpank
kripto
neon
o'yin o'ynash
umumiy AI binafsha rang
kamalak gradiyentlari

─...
ASOSIY IJODIY QOIDALAR
─...

Ushbu qoidalarga shafqatsizlarcha amal qiling:

1. BITTA QAROR = BITTA G'OYA.

2. Har bir sahna nafas olish uchun joy talab qiladi.

3. Mahsulot interfeysi qahramon.

4. Tushuntirish matnini hamma joyga yopishtirmang.

5. Agar ataylab sabab bo'lmasa, qattiq kesmalardan foydalanmang.

6. Ob'ektga asoslangan o'tishlarni afzal ko'ring:
karta keyingi kartaga aylanadi,
grafik chizig'i ulagichga aylanadi,
chek buyurtmaga aylanadi,
raqam yana bir interfeys elementiga aylanadi,
kamera mahsulot bo'ylab harakatlanadi.

7. Premium yumshatishdan foydalaning.
Chiziqli harakat yo'q.

8. Harakat tabiiy ravishda bir-birining ustiga chiqishi kerak.
Elementlarning barchasi bir xil kadrda boshlanib, to'xtamasligi kerak.

9. Chuqurlikdan tejamkorlik bilan foydalaning:
nuqtai nazar,
yumshoq parallaks,
miqyos,
oldingi/orqa fonni ajratish,
iloji bo'lsa, nazorat ostidagi maydon chuqurligi.

10. Hech qanday effekt shunchaki ajoyib ko'rinishi uchun mavjud emas.

11. Zarrachalar spami yo'q.

12. Hamma joyda soxta shisha morfizmi yo'q.

13. Haddan tashqari xiralashish yo'q.

14. Ma'nosiz 3D aylanuvchi kartalar yo'q.

15. Doimiy kattalashtirish yo'q.

16. 20 xil animatsiya uslubi yo'q.

17. Sakrash interfeysi yo'q.

18. Gigant marketing paragrafi yo'q.

19. Apple’ning ma’lum bir reklama roligini kadrma-kadr taqlid qilmang.
Buning o'rniga falsafa va ishlab chiqarish sifatini qo'lga oling.

Vizual ishonch o'zini tuta bilishdan kelib chiqishi kerak.

─...
FORMAT
─...

Boshlang'ich usta:

1920 × 1080
60 kadr/s
16:9
H.264
maksimal davomiylik: 15,0 soniya

Maqsadli ish vaqti:
taxminan 14.0–15.0 soniya.

Bu hatto ovozsiz ham ijtimoiy media mahsulotini namoyish qilish uchun ishlashi kerak.

Agar usta tugagandan KEYIN amaliy bo'lsa, ataylab qayta yozilgan matnni ham yarating
vertikal/ijtimoiy variant.

Ish stoli kompozitsiyasini shunchaki kesib tashlamang.

Lekin ish stoli ustasi ustuvor vazifadir.

─...
HIKOYA / HISSLIY YO'Q
─...

Buni beshta xususiyat ro'yxatiga kiritmang.

Bu bitta uzluksiz fikr kabi tuyulishi kerak:

XAOS → NAZORAT → ANIQLIK → TAXTELLO

Dastlabki 1,5 soniya allaqachon ajoyib ko'rinishi kerak.

Birinchi mazmunli mahsulot momenti taxminan 2 soniyada sodir bo'lishi kerak.

Besh soniyali logotipga kirish yo'q.

Mumkin bo'lgan hikoya yo'nalishi:

"Biznesingiz haqidagi hamma narsa, nihoyat bir joyda."

Lekin buni tushuntirish o'rniga KO'RSATING.

Men butun film bo'ylab taxminan to'rtta vizual g'oyani xohlayman.

Omborda topgan eng kuchli REAL Taxtello sirtlaridan foydalaning.

Kuchli nomzodlar quyidagilarni o'z ichiga oladi:

• Finanzcockpit / Boshqaruv paneli
• Rechnungen
• Belege
• Bank / moslashtirish
• Steuergesundheit / soliq haqida umumiy ma'lumot

Ularning barchasini ko'rsatishingiz shart emas.

Vizual jihatdan eng kuchli kombinatsiyani tanlang.

─...
TAVSIYA ETILGAN 15 SONIYALIK RAVISHKA
─...

Bunga qat'iy shablon emas, balki kuchli boshlang'ich nuqta sifatida qarang.

0.00 – 1.20

QORA / TO'Q KO'K RANG.

Kichkina iliq oltin rang porlashi paydo bo'ladi.

Yaltiroqlik Taxtello belgisini yoki uning bir qismini nafis tarzda ochib beradi
so'z belgisi.

Umumiy logotipning yo'qolishi yo'q.

Mashina aniqligini o'ylab ko'ring.

Kamera belgidan o'tib ketadi yoki o'tib ketadi va foydalanuvchi interfeysi undan chiqa boshlaydi.

Nusxasi juda kam yoki umuman yo'q.

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

1.20 – 4.40

MOLIYAVIY NAZORAT.

Haqiqiy Taxtello kokpitini o'lchovli mahsulot yuzasi sifatida ko'rsating.

Ekranda joylashtirilgan shunchaki skrinshot emas.

Alohida interfeys mintaqalari jonlanishi uchun uni qayta yarating/kesib oling/qatlamlang.

Qahramonning moliyaviy raqami aniq hal qilinadi.
Grafik chizilgan.
Qo'llab-quvvatlovchi ko'rsatkichlar biroz keyinroq o'rnatiladi.

Yumshoq qoqilishdan foydalaning.

Nusxaning bitta qatori paydo bo'lishi mumkin, masalan:

“Alles im Blick.”

yoki agar sizga mosroq narsa topilsa, yana bir xil darajada qisqa nemischa ibora.

Maksimal ~3–4 so'z.

Interfeys haqiqiy mahsulot sifatida tanib olinadigan bo'lib qolishi kerak.

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

4.40 – 7.50

HUJJATLAR / BUXGALTERIYA HISOBINI O'ZGARTIRISH.

O'tish sifatida oldingi sahnadagi vizual obyektdan foydalaning.

Misol:

Oltin grafik nuqtasi chek/kartaning burchagiga kengayadi.
Kamera uning ortidan ergashadi.
Chek/hujjat kiritiladi.
Taxtello uni aniqlaydi yoki tashkil qiladi.
Hujjat mos keladigan buyurtma/moliyaviy yozuvga nafis tarzda o'rnatiladi.

Magnit hizalanish va aniqlikdan foydalaning.

Pishloqli skaner lazeri yo'q.

Suzuvchi qog'oz tornado yo'q.

Mumkin bo'lgan mikronusxa:

"Belege. Erledigt."

Faqat sahnani yaxshilasagina.

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

7.50 – 10.70

PUL / SCHOT-FAKTURALAR.

Morf yoki o'tish tabiiy ravishda haqiqiy Rechnungen interfeysiga.

Bir kuchli lahzadan foydalaning:

hisob-faktura holatining o'zgarishi,
to'lov hal qilinadi,
miqdor joyiga siljiydi,
yoki umumiy ko'rinish o'z-o'zidan yig'iladi.

Raqamlar aniq va sezgir bo'lishi kerak.

Haqiqiy mahsulotga mos keladigan joyda JetBrains Mono dan foydalaning.

Oltin faol holatni ta'kidlaydi.

Yashil rang faqat chinakam ijobiy semantik holat uchun ishlatiladi.

Potentsial nusxasi:

"Geld. Men Griffman."

Yana: ixtiyoriy va juda qisqa.

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

10.70 – 12.80

SOLIQ / ANIQLIK.

Taxtello soliq-salomatlik/moliyaviy ko'rsatmalarining haqiqiy yuzasiga o'tish.

Taxtello sehrli ravishda soliqlarning to'g'riligini kafolatlaydi, deb da'vo qilmang.

Ko'rinish va nazoratni muloqot qiling.

Misol:

bir nechta shovqinli signallar bitta tinch, tuzilgan soliq sharhiga birlashadi.

Potentsial nusxasi:

"Steuern im Blick."

Bu sahna avvalgisiga qaraganda xotirjamroq tuyulishi kerak.

Ritm qisqa vaqtga sekinlashadi.

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

12.80 – 15.00

BRENDNING TO'LOVI.

Kamerani tashqariga torting.

Foydalanuvchi interfeysi bitta chiroyli Taxtello mahsulot obyekti/sirtiga siqiladi yoki buklanadi.

Atrofga qorong'ulik qaytadi.

Oltin Taxtello so'z belgisi hal qiladi.

Pastda bitta qisqa brend liniyasi.

Quyidagi kabi kuchli yakuniy chiziqlarni o'rganing:

"Dein Business. Klar."

"Buchhaltung. Unter Controlle."

"Einfach mehr Überblick."

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

Repozitoriyada topilgan mahsulotning haqiqiy joylashuviga asoslanib tanlang.

Men taklif qilganim uchun shunchaki satr ishlatmang.

Yakuniy kadr ro'yxatdan o'tish uchun yetarlicha harakatsiz bo'lishi kerak.

Ishonch bilan yakunlang.

Gigant sakrab tushayotgan CTA yo'q.

─...
O'TISHLAR
─...

Bu eng muhim qismlardan biridir.

Men tomoshabinni o'ylantiradigan o'tishlarni xohlayman:

"Albatta, keyingi sahna shundan kelib chiqdi."

Yaxshi:

grafik chizig'i → hujjat chekkasi
oltin tabletka → faktura tugmasi
moliyaviy raqam → fakturadagi summa
karta cheti → keyingi sirt
kamera interfeysi elementini bosish orqali
umumiy geometriya
niqobni haqiqiy mahsulot shakllaridan foydalangan holda ochish

Yomon:

o'zaro ta'sir
tasodifiy artib tashlash
spin o'tish
nosozlik
har ikki soniyada qamchilash
umumiy SaaS slayd-chap
zoom-blirlash spam

To'g'ridan-to'g'ri kesishlarga faqat qasddan ritmik ta'sir filmga foyda keltirganda ruxsat beriladi.

─...
HARAKAT
─...

Harakat og'irlikni talab qiladi.

Quyidagiga o'xshash egri chiziqlardan foydalaning:

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

tegishli joyda.

Turli elementlarning kelish vaqtlari biroz farq qilishi kerak.

Afzal ko'ring:

oldindan sezish
~2% dan pastroqda oshib ketish
joylashish
harakatning davomi
sahnalar orasidagi umumiy tezlik

Multfilmga xos bahorgilikdan saqlaning.

Kamera harakati yuqori darajadagi makro mahsulotni suratga olish kabi his qilinishi kerak.

Tasavvur qiling-a, biz dasturiy ta'minot bo'lsa ham, jismoniy premium obyektni suratga olyapmiz.

─...
YORITISH / MATERIALLAR
─...

Juda nozik atrof-muhit yoritgichidan foydalaning.

Mumkin bo'lgan davolash usullari:

• yumshoq oltin rangli halqali yoritish
• to'q ko'k rangli fall
• xira muhit gullashi
• sirt bo'ylab o'tadigan yumshoq oyna yoritgichi
• cheklangan vinyetka
• agar u moddiy jihatdan yordam bersa, nozik don

Interfeysni aniq saqlang.

Mahsulotni shunchaki kinematik ko'rinish uchun xiralashtirmang.

O'qishni buzadigan soxta yaltiroq akslar yo'q.

─...
TIPOGRAFIYA
─...

Juda oz nusxadan foydalaning.

Hech bir jumla mahsulot bilan raqobatlashmasligi kerak.

Sarlavhalar odatda bitta qatorga sig'ishi kerak.

Plus Jakarta Sansdan foydalaning.

Kuchli tipografiya ba'zan juda katta miqyosda kengayishi va o'tish davriga aylanishi mumkin
qurilmaning o'zi.

Har bir so'z mustaqil ravishda jonlanadigan umumiy harakatli grafika xatti-harakatlaridan saqlaning.

Tipografiya mo'ljallangan obyektlar kabi harakatlanishi kerak.

─...
OVOZ / RITM
─...

Harakatni taxminan 115–120 BPM ga qisqartirilgandek loyihalashtiring:
premium, kinetik, murakkab, shoshilinch emas.

Muhim lahzalar musiqiy tarzda o'tishi kerak.

Tavsiya etilgan tovush tili:

• yirik ochib berish uchun past yumshoq ta'sir
• cheklangan taktil interfeys bosishlari
• nozik metall/shisha ohangli tikan
• kamera o'tishlari paytida yumshoq past chastotali harakat
• logotipning nafis va aniq ohangi

Qoching:

• ulkan kinematografik treyler bumi
• EDM ko'targichlari
• hamma joyda baland ovozda hushtak chalish
• standart "texnologik interfeys" tovushlari
• rep ritmi
• tajovuzkor bas

Agar loyihada qonuniy jihatdan xavfsiz musiqa/audio aktivi bo'lmasa, OLMANG
internetdan olingan mualliflik huquqi bilan himoyalangan audio.

Mualliflik huquqi bilan himoyalangan musiqasiz vizual masterni taqdim eting va ixcham ishora yarating
musiqa/SFX qayerga urilishi kerakligini tasvirlovchi varaq.

Agar mos keladigan xavfsiz/mahalliy audio mavjud bo'lsa, undan foydalaning.

─...
FAQAT HAQIQIY MAHSULOT
─...

Bu juda muhim.

Joriy asosiyni tekshiring.

Ekranlarni ixtiro qilmang.

Haqiqiy mijozlar ma'lumotlarini nazarda tutadigan ko'rsatkichlarni ixtiro qilmang.

Agar kerak bo'lsa, aniq sintetik/demo-xavfsiz qiymatlardan foydalaning.

Shaxsiy, sinov foydalanuvchisi yoki ishlab chiqarish ma'lumotlarini tasodifan oshkor qilmang.

Haqiqiy Taxtello foydalanuvchi interfeysining vizual tuzilishidan qayta foydalaning.

Agar ekranni harakatdan ajratish kerak bo'lsa, uni React dasturida quyidagidan boshlab ishonchli tarzda qayta yarating:
shunchaki ulkan skrinshotni masshtablash o'rniga haqiqiy dizayn tizimi.

Natija hali ham Taxtelloga o'xshash bo'lishi kerak.

─...
AMALIYOTGA OLISHDAN KUTILADIGAN KUTISHLAR
─...

To'g'ridan-to'g'ri ish joyida:

/taxtello/beta-motion

Mavjud kompozitsiya bilan birga yangi kompozitsiya yarating.

Mavjud kompozitsiyalarni ish holatida saqlang.

Yangi ishni toza tuzing.

Qayta ishlatiladigan ibtidoiylarni quyidagilar uchun afzal ko'ring:

• kamera yuzasi
• mahsulot ramkasi
• niqoblangan o'tishlar
• matn ochib beradi
• UI mintaqasi ochib beradi
• atrof-muhit yoritgichi
• umumiy elementli o'tishlar

1500 qatorli bitta komponentdan saqlaning.

Kadr/vaqtga asoslangan deterministik Remotion animatsiyasidan foydalaning.

Vaqt tugashi yo'q.
Aniq bo'lmagan animatsiyalar yo'q.

Hammasi bo'lib 60 kadr/s tezlikka rioya qiling.

Interpolatsiya/prujina/yumshatishni ataylab qo'llang.

─...
BIRINCHI TADBIRDAN KEYIN TO'XTAMANG
─...

Bu vizual vazifa.

Siz haqiqiy ko'rsatilgan natijani ko'rib chiqishingiz SHART.

Kerakli ish jarayoni:

1. Omborxona va haqiqiy brend/mahsulotni tekshiring.

2. Quyidagilar bilan qisqacha hikoya taxtasini yozing:
- aniq vaqt belgilari
- asosiy vizual
- o'tish mantig'i
- nusxa
- mo'ljallangan hissiy ritm

3. Uni amalga oshiring.

4. Tip tekshiruvini/tegishli tekshiruvlarni ishga tushiring.

5. Taxminan quyidagi qiymatda vakillik kadrlarini renderlash:
0.0 s
1.0 s
2,5 soniya
4,5 soniya
6,5 soniya
8,5 soniya
10,5 soniya
12,5 soniya
14.0 s
14,8 soniya

6. USHBU RASMLARNI VIZUAL RAVISHDA TEKSHIRING.

Shunchaki renderlash muvaffaqiyatli bo'lganini tasdiqlamang.

So'rang:

Bu Apple darajasidagi mahsulot plyonkasiga o'xshaydimi?

Biror narsa shablonga o'xshaydimi?

Ekranda juda ko'p narsa bormi?

Mahsulot tushunarlimi?

O'tishlar mantiqiy bog'liqmi?

Taxtello gold yuqori sifatli deb o'ylaysizmi?

Har bir kadr kompozitsion ko'rinadimi?

7. Vizual kamchiliklarni tuzating.

8. To'liq filmni namoyish eting.

9. Faqat brauzerdan emas, balki yakuniy MP4 dan bir nechta aniq dekodlangan kadrlarni tekshiring
ekran tasvirlari.

10. Agar kerak bo'lsa, yana takrorlang.

Kod kompilyatsiya qilingani uchun muvaffaqiyatni e'lon qilmang.

Yetkazib beriladigan narsa - bu FILM.

─...
SIFAT BAR
─...

Agar shunday tuyulsa, o'zingizning natijangizni rad eting:

• SaaS shabloni
• PowerPoint animatsiyasi
• veb-sayt ekran yozuvi
• umumiy Remotion demosi
• kripto reklama
• sun'iy intellekt tomonidan yaratilgan reklama shabloni
• beshta skrinshot surilib ketmoqda
• haddan tashqari marketing nusxasi

Har bir muhim kadr harakatsiz reklama sifatida foydalanish uchun yetarlicha yaxshi bo'lishi kerak.

Men quyidagilarni afzal ko'raman:

3 ta ajoyib vizual lahzalar

nisbatan

10 ta o'rtacha darajadagi animatsiya.

─...
YAKUNIY YETKAZIB BERISHLAR
─...

Taqdim eting:

1. Yakuniy hikoya taxtasi
2. Yangi Remotion kompozitsiyasi manbai
3. Yakuniy MP4 1920×1080 / 60 kadr/s
4. Poster/yakuniy ramka
5. Filmdan olingan vakillik kadrlari ko'rsatilgan kontakt varag'i
6. Aniq ish vaqti
7. Ishlatilgan haqiqiy Taxtello aktivlari/ekranlari ro'yxati
8. Harakat tilining qisqacha tavsifi
9. Qolgan vizual kamchiliklar
10. Renderni qayta yaratish buyruqlari

Chiqishlarni aniq nomlangan katalogda saqlang, masalan:

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

Hech narsa joylashtirmang.
Ishlab chiqarish ma'lumotlarini o'zgartirmang.
Hech narsani birlashtirmang.

Ijodkorona harakat qiling, ammo shafqatsiz vazminlikni namoyon eting.

Taxtelloni qimmatga aylantiring.

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.

So'rov olingan joy post @daniel_haida.