تنظیم کول: د ټیکسټیلو د کتاب ساتنې اپلیکیشن فلم

تاسو د ټیکسټیلو لپاره لوړ پوړی موشن ډیزاینر، د محصول ډیزاینر او Remotion انجینر یاست.

ستاسو دنده دا ده چې د ټیکسټیلو لپاره په ریښتیا سره یو پریمیم، د ایپل په کچه محصول فلم جوړ کړئ.

دا د SaaS عمومي تشریح کونکی نه دی.
دا د ځانګړتیاوو لارښود نه دی.
دا د سټارټ اپ ټیمپلیټ انیمیشن نه دی.

زه د برانډ/محصول اعظمي ۱۵ ثانیو نندارتون غواړم چې ټیکسټیلو د یو بالغ، ګران، ښکلي ډیزاین شوي مالي محصول په څیر ښکاره کړي.

فکر وکړئ:

د ایپل محصول د پیل فلم
× پریمیم فنټیک
× د اداری حرکت ډیزاین
× محدود پټې ته ورته محصول وړاندې کول
× د ټیکسټیلو خپل بصري هویت

مطلوب غبرګون دا دی:

"انتظار وکړئ، دا د جرمني د حساب ساتنې اپلیکیشن دی؟"

فلم باید ګران احساس شي.

─
د حقیقت سرچینه / REPO
─

لومړی د هر څه ډیزاین کولو دمخه اصلي زیرمې معاینه کړئ.

اصلي محصول:
/ټیکسټیلو/اصلي

Remotion موجوده پروژه:
/ ټیکسټیلو / بیټا-موشن

د اصلي برانډ مهمې سرچینې:

/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

د موجوده محصول سکرین شاټونه لاندې موندل کیدی شي:

/ ټیکسټیلو / اصلي / هنري توکي / لوګی-یو-لوګی /

د زړو اثارو په پرتله نوي معتبر سکرین شاټونه/اوسني سرچینې ته ترجیح ورکړئ.

په کې لا دمخه د ۲۴ ثانیو Remotion هیرو انیمیشن شتون لري
/ټیکسټیلو/بیټا-حرکت.

مه یې بدلوه.
بیرته یې مه راګرځوه.
د دې نوي فلم لپاره د مصنوعي ذهانت سره د اړیکو اوسنۍ کیسه مه مجبوروئ.

د دې دندې لپاره یو نوی خپلواک ترکیب جوړ کړئ، د مثال په توګه

د ټکس ټیلو شو رییل ۱۵

تاسو کولی شئ ښه زیربنا، فونټونه، د رینډینګ اسانتیاوې، د حرکت لومړني توکي بیا وکاروئ،
د بیټا-موشن څخه د منحني، شتمنیو بارولو او د QA زیربنا اسانه کول چیرې چې ګټور وي.

خو په تخلیقي توګه دا باید یو نوی فلم وي.

د پلي کولو دمخه، د ټیکسټیلو اصلي UI معاینه کړئ او محصول درک کړئ.

هغه فعالیت مه اختراع کوئ چې شتون نلري.

─
د ټکسټیلو اصلي لید ژبه
─

د اصلي ډیزاین سیسټم وکاروئ.

اصلي رنګ:

شاليد:
#0c0f1a

لوړ شوي سطحې:
#۱۱۱۵۲۵
#۱۳۱۷۲۲
#۱ا۲۰۳۲

د سرو زرو اصلي برانډ:
#e8b84b

د سرو زرو ځانګړتیا:
#f5d07a

د سرو زرو ژوروالی:
#۹بي۶ډي۱۸

اصلي متن:
#e8eaf2

قوي ګرم سپین:
#f6f4eb

دوهم متن:
#۸بي۹۳بي۵

مثبت:
#۳۴ډي۳۹۹

منفي/غلطي یوازې هغه ځای کې چې په معنی ډول اړین وي:
#f87171

ټایپوګرافي:
پلس جاکارتا سنز

شمېرې / مالي ارزښتونه چېرته چې مناسب وي:
جیټ برینز مونو

د ټیکسټیلو اصلي کلمه نښه او/یا د ټیکسټیلو نښه وکاروئ.
لوګو بیا مه رسموئ یا نږدې مه کوئ.

د ټیکسټیلو سره زر باید د قیمتي تلفظ په څیر احساس شي، نه د ژیړ UI سیلاب.

فکر وکړئ:
تیاره فلز
ګرم سره زر
شیشه
رنګ
دقت
ارام باور

نه:
سایبرپنک
کرېپټو
نیون
لوبې کول
عمومي AI ارغواني
د رینبو ګریډینټونه

─
اصلي تخلیقي قواعد
─

دا قوانین په بې رحمۍ سره تعقیب کړئ:

۱. یوه نښه = یوه مفکوره.

۲. هره صحنه د ساه اخیستلو لپاره ځای ته اړتیا لري.

۳. د محصول UI اتل دی.

۴. په هر ځای کې د توضیحاتو کاپي مه پلستر کوئ.

۵. پرته له دې چې قصدي دلیل شتون ولري، سخت پرې کول مه کاروئ.

۶. د شیانو پر بنسټ لیږدونو ته ترجیح ورکړئ:
یو کارت بل کارت کیږي،
د چارټ کرښه په نښلونکي بدلیږي،
رسید په بکینګ بدلیږي،
یو شمېره د انٹرفیس بل عنصر کیږي،
کیمره د محصول له لارې حرکت کوي.

۷. د پریمیم اسانتیا څخه کار واخلئ.
هیڅ خطي حرکت نشته.

۸. حرکت باید په طبیعي ډول سره یو ځای شي.
ټول عناصر باید په عین چوکاټ کې پیل او ودریږي نه.

۹. ژوروالی په احتیاط سره وکاروئ:
لیدلوری،
نرم پارلاکس،
پیمانه،
مخکینۍ/شالیدنۍ جلا کول،
که امکان ولري، د ساحې کنټرول شوی ژوروالی.

۱۰. هیڅ اغیزه شتون نلري ځکه چې دا ښکلی ښکاري.

۱۱. هیڅ ذره سپیم نشته.

۱۲. په هر ځای کې جعلي شیشه يي بڼه نشته.

۱۳. ډېر تیاره نه وي.

۱۴. بې ګټې درې بعدي کارتونه نشته.

۱۵. دوامداره زوم نه کول.

۱۶. د انیمیشن ۲۰ مختلف سټایلونه نشته.

۱۷. د باونسنګ UI نشته.

۱۸. د بازار موندنې لویه برخه نشته.

۱۹. د اپل د یو ځانګړي سوداګریز اعلان د شاټ په بدل کې تقلید مه کوئ.
پرځای یې فلسفه او د تولید کیفیت ونیسئ.

بصري باور باید له زغم څخه راشي.

─
بڼه
─

اصلي استاد:

۱۹۲۰ × ۱۰۸۰
۶۰ فریم فی ثانیه
16:9
ایچ.۲۶۴
اعظمي موده: ۱۵.۰ ثانیې

د هدف چلولو وخت:
نږدې ۱۴.۰–۱۵.۰ ثانیې.

دا باید د ټولنیزو رسنیو د محصول په توګه کار وکړي چې حتی پرته له غږ څخه څرګند شي.

که چیرې د ماسټر له بشپړیدو وروسته عملي وي، نو په قصدي ډول بیا جوړ شوی
عمودی/ټولنیز ډول.

یوازې د ډیسټاپ ترکیب مه پرې کوئ.

خو د ډیسټاپ ماسټر لومړیتوب دی.

─
کیسه / احساساتي آرک
─

دا د پنځو ځانګړتیاوو لیست مه جوړوئ.

دا باید د یو دوامداره فکر په څیر احساس شي:

ګډوډي → کنټرول → وضاحت → ټیکسټیلو

لومړۍ ۱.۵ ثانیې باید لا دمخه غوره ښکاري.

د محصول لومړۍ معنی لرونکې شیبه باید په ~2 ثانیو کې ترسره شي.

د پنځه ثانیو لوګو سریزه نشته.

د کیسې ممکنه لار:

"ستاسو د سوداګرۍ په اړه هرڅه، بالاخره په یوه ځای کې."

خو دا د تشریح کولو پر ځای وښایاست.

زه په ټول فلم کې شاوخوا څلور بصري نظرونه غواړم.

په ذخیره کې د موندلو لپاره ترټولو قوي ریښتیني ټیکسټیلو سطحې وکاروئ.

قوي نوماندان عبارت دي له:

• د فاینانزکاکپیټ / ډشبورډ
• بیاکتنه
• بیلج
• بانک / سمون
• Steuergesundheit / د مالیاتو عمومي کتنه

تاسو اړتیا نلرئ چې ټول یې وښایئ.

په لید کې تر ټولو قوي ترکیب غوره کړئ.

─
وړاندیز شوی ۱۵ ثانیې کیسه بورډ
─

دا د یوې قوي پیل ټکي په توګه وګڼئ، نه د یوې سختې نمونې په توګه.

۰.۰۰ – ۱.۲۰

تور / سمندري.

د ګرمو سرو زرو کوچنۍ ځلا ښکاري.

چمک په ښکلي ډول یا د ټیکسټیلو نښه یا د هغې یوه ټوټه څرګندوي
د کلمې نښه.

د لوګو عمومي تیاره نه ده.

د ماشین شوي دقت په اړه فکر وکړئ.

کیمره د نښه څخه تیریږي یا تیریږي او UI له هغې څخه راڅرګندیدل پیل کوي.

ډېر لږ یا هیڅ کاپي نشته.

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

۱.۲۰ – ۴.۴۰

مالي کنټرول.

د ټیکسټیلو اصلي کاکپیټ د ابعادي محصول سطحې په توګه ښکاره کړئ.

نه یوازې په سکرین شاټ کې ایښودل شوی سکرین شاټ.

بیا یې جوړ کړئ/کراپ کړئ/پرت یې کړئ ترڅو د انفرادي انٹرفیس سیمې متحرک شي.

د اتل مالي شمېره په چټکۍ سره حل کیږي.
چارټ دننه راښکاره کوي.
د ملاتړ معیارونه یو څه وروسته حل کیږي.

د نرم ټکان څخه کار واخلئ.

د کاپي یوه کرښه ممکن ښکاره شي، د مثال په توګه:

"هرڅه زه بلیک یم."

یا بل لنډ جرمني عبارت، که تاسو یو څه ډیر مناسب ومومئ.

اعظمي حد ~۳-۴ کلمې.

انٹرفیس باید د اصلي محصول په توګه د پیژندلو وړ پاتې شي.

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

۴.۴۰ – ۷.۵۰

د اسنادو / د کتاب ساتلو بدلون.

د تېرې صحنې څخه یو بصري شی د لیږد په توګه وکاروئ.

بېلګه:

د سرو زرو چارټ نقطه د رسید/کارت په کونج کې پراخیږي.
کیمره یې تعقیبوي.
یوه رسید/سند راځي.
ټیکسټیلو یې پیژني یا یې تنظیموي.
دا سند په ښکلي ډول د هغې اړوند بکینګ / مالي ریکارډ ته ننوځي.

مقناطیسي سمون او دقت وکاروئ.

د شیزي سکینر لیزر نشته.

د کاغذونو نه تیرېدونکې توپان.

ممکنه مایکرو کاپي:

"بیلیګ. ایرلیډیګټ."

یوازې که چیرې دا صحنه ښه کړي.

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

۷.۵۰ – ۱۰.۷۰

پیسې / بلونه.

په طبیعي ډول د ریښتیني Rechnungen انٹرفیس ته شکل یا لیږد.

یوه قوي شیبه وکاروئ:

د رسید حالت بدلیږي،
د پیسو حل،
یو مقدار ځای ته ځي،
یا عمومي کتنه پخپله راټولیږي.

شمېرې باید لمس او دقیق احساس شي.

د جیټ برینز مونو وکاروئ چیرې چې دا د اصلي محصول سره سمون خوري.

سره زر فعال حالت روښانه کوي.

شنه یوازې د یوې ریښتینې مثبتې معنوي حالت لپاره کارول کیږي.

احتمالي کاپي:

"ګیلډ. زه ګریف یم."

بیا: اختیاري او خورا لنډ.

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

۱۰.۷۰ – ۱۲.۸۰

مالیه / وضاحت.

د ټیکسټیلو د مالیې-روغتیا / مالي لارښوونې اصلي سطحې ته لیږد.

دا ادعا مه کوئ چې ټیکسټیلو په جادويي ډول سم مالیات تضمینوي.

د لید او کنټرول اړیکه ونیسئ.

بېلګه:

ګڼ شورماشور لرونکي سیګنالونه په یوه ارامه، منظم مالیاتي کتنه کې سره نښلي.

احتمالي کاپي:

"سټیورن ام بلیک."

دا صحنه باید د پخوانۍ صحنې په پرتله ارامه احساس وکړي.

تال په لنډه توګه ورو کېږي.

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

۱۲.۸۰ – ۱۵.۰۰

د برانډ پیسې.

کیمره بهر ته کش کړئ.

UI د ټیکسټیلو محصول په یوه ښکلي څیز / سطح کې فشار یا تاو کوي.

تیاره بیرته شاوخوا راګرځي.

د سرو زرو ټیکسټیلو کلمه حل کیږي.

لاندې د برانډ یوه لنډه کرښه.

قوي وروستۍ کرښې وپلټئ لکه:

"ډین بزنس. کلار."

"بوچالټنګ. د کنټرول لاندې."

"Einfach mehr Überblick."

"د سوداګرۍ ټولې چارې. یو اینیم اورټ."

د هغه محصول د اصلي موقعیت پراساس غوره کړئ چې تاسو یې په ریپو کې ومومئ.

یوازې د دې لپاره چې ما وړاندیز کړی، یوه کرښه مه کاروئ.

وروستی چوکاټ باید دومره ارامتیا ولري چې ثبت شي.

په ډاډ سره پای ته ورسوئ.

هیڅ لوی باونسنګ CTA نشته.

─
لیږدونه
─

دا یو له خورا مهمو برخو څخه دی.

زه داسې بدلونونه غواړم چې لیدونکي فکر کولو ته اړ باسي:

"البته چې راتلونکې صحنه له همدې ځایه راغلې وه."

ښه:

د چارټ کرښه → د سند څنډه
د سرو زرو ګولۍ → د رسید تڼۍ
مالي شمېره → په بل کې اندازه
د کارت څنډه → راتلونکې سطحه
د کیمرې د انٹرفیس عنصر له لارې فشار ورکړئ
شریک شوی جیومیټری
د اصلي محصول شکلونو په کارولو سره ماسک ښکاره کول

بد:

کراس فیډ
ناڅاپه پاکول
د سپن لیږد
خرابي
په هرو دوو ثانیو کې د څپې وهلو پین
عمومي SaaS سلایډ-کیڼ اړخ
د زوم بلر سپیم

مستقیم پرې کول یوازې هغه وخت اجازه لري کله چې قصدي تالیفاتي اغیزه فلم ته ګټه ورسوي.

─
حرکت
─

حرکت وزن ته اړتیا لري.

د پرتلې وړ منحني وکاروئ:

مکعبي بېزیر (0.16، 1، 0.3، 1)

چیرته چې مناسب وي.

مختلف عناصر باید د رسیدو وختونه په لنډه توګه مختلف وي.

غوره ګڼي:

تمه
د ~2٪ څخه ښکته
آبادول
د حرکت دوام
د صحنو ترمنځ شریک سرعت

د کارټون پسرلي څخه ډډه وکړئ.

د کیمرې حرکت باید د لوړ کیفیت لرونکي میکرو محصول شوټ په څیر احساس شي.

تصور وکړئ چې موږ یو فزیکي پریمیم شی فلم کوو که څه هم دا سافټویر دی.

─
رڼا / مواد
─

د چاپیریال لپاره خورا نرم رڼا وکاروئ.

ممکنه درملنې:

• د نرم سرو زرو څراغونه
• تیاره سمندري سقوط
• د چاپېریال کم غوړېدل
• نرم سپیکولر روښانه کول د سطحې څخه تیریږي
• محدود انځور
• که چیرې دا په مادي توګه مرسته وکړي نو نازک غله

انٹرفیس روښانه وساتئ.

یوازې د سینمايي ښکاریدو لپاره محصول مه توروئ.

هیڅ جعلي ځلیدونکي انعکاسونه نشته چې د لوستلو وړتیا له منځه یوسي.

─
ټایپوګرافي
─

ډېر لږ کاپي وکاروئ.

هیڅ جمله باید د محصول سره سیالي ونکړي.

سرلیکونه باید عموما په یوه کرښه کې ځای شي.

د پلس جاکارتا سینز وکاروئ.

قوي ټایپوګرافي کله ناکله ډیره لویه کیدی شي او په یوه لیږد بدل شي.
وسیله پخپله.

د عمومي حرکت ګرافیک چلند څخه ډډه وکړئ چیرې چې هر کلمه په خپلواکه توګه متحرک کیږي.

ټایپوګرافي باید د ډیزاین شویو شیانو په څیر حرکت وکړي.

─
غږ / تال
─

حرکت داسې ډیزاین کړئ لکه څنګه چې دا تقریبا 115-120 BPM ته پرې شوی وي:
غوره، متحرک، پرمختللی، نه لیونی.

مهمې شېبې باید په موسیقۍ کې څرګندې شي.

وړاندیز شوې غږیزه ژبه:

• د لویو افشا کولو لپاره ټیټ نرم اغیز
• محدود شوي تکتیکي UI کلیکونه
• نازک فلزي/شیشه ټونال ټک
• د کیمرې د لیږد پرمهال نرم ټیټ فریکونسي حرکت
• د لوګو په تادیه کې ښکلی حل شوی ټون

ډډه وکړئ:

• د سینمايي ټریلرونو لویه وده
• د EDM رایزرز
• په هر ځای کې لوړ غږونه
• د "ټیک انٹرفیس" غږونه ذخیره کړئ
• رپ بیټ
• تیریدونکی باس

که چیرې په پروژه کې په قانوني ډول خوندي میوزیک/آډیو شتمني شتون ونلري، نو مه یې کشوئ
د انټرنیټ څخه د کاپي حق لرونکی غږ.

د کاپي حق لرونکي موسیقۍ پرته بصري ماسټر وړاندې کړئ او یو لنډ اشاره جوړه کړئ
پاڼه چې تشریح کوي چې میوزیک/SFX باید چیرته ووهي.

که مناسب خوندي/محلي غږ شتون ولري، نو وکاروئ یې.

─
یوازې اصلي محصول
─

دا ډېره مهمه ده.

د بریښنا موجوده برخه معاینه کړئ.

پردې مه اختراع کوئ.

داسې معیارونه مه ایجادوئ چې د پیرودونکو ریښتیني معلومات په ګوته کوي.

که اړتیا وي، په واضح ډول مصنوعي/ډیمو خوندي ارزښتونه وکاروئ.

په ناڅاپي ډول هیڅ شخصي، د ازموینې کارونکي یا تولید معلومات مه افشا کوئ.

د اصلي ټیکسټیلو UI بصري جوړښت بیا وکاروئ.

که چیرې سکرین د حرکت له لارې جلا کولو ته اړتیا ولري، نو دا په React کې په وفادارۍ سره بیا جوړ کړئ له
د لوی سکرین شاټ اندازه کولو پرځای د اصلي ډیزاین سیسټم.

پایله باید لاهم په څرګنده توګه د ټیکسټیلو په څیر ښکاري.

─
د پلي کولو تمې
─

په مستقیم ډول کار وکړئ:

/ ټیکسټیلو / بیټا-موشن

د موجوده ترکیب سره یوځای نوی ترکیب جوړ کړئ.

موجوده ترکیبونه کار ته وسپارئ.

نوی کار په پاکه توګه تنظیم کړئ.

د بیا کارونې وړ لومړني توکي غوره کړئ د دې لپاره:

• د کیمرې سطحه
• د محصول چوکاټ
• نقاب شوي لیږدونه
• متن ښکاره کوي
• د UI سیمه څرګندوي
• د چاپیریال رڼا
• د شریک شوي عنصر لیږدونه

د یو ۱۵۰۰ کرښې برخې څخه ډډه وکړئ.

د چوکاټ/وخت له مخې چلول شوي تعییناتي Remotion انیمیشن وکاروئ.

د ټاکل شوي وخت پای نشته.
هیڅ غیر ټاکلی انیمیشن نشته.

په ټوله کې ۶۰ fps ته درناوی وکړئ.

په قصدي ډول انټرپولیشن/سپرینګ/اییزینګ وکاروئ.

─
د لومړي تطبیق وروسته مه درېږئ
─

دا یو بصري دنده ده.

تاسو باید د اصلي وړاندې شوي محصول بیاکتنه وکړئ.

اړین کاري جریان:

۱. د ذخیره او اصلي برانډ/محصول معاینه کړئ.

۲. د لاندې ټکو سره یوه لنډه کیسه پاڼه ولیکئ:
- دقیق مهال ویشونه
- کلیدي لید
- د لیږد منطق
- کاپي
- ارادي احساساتي تال

۳. پلي یې کړئ.

۴. د ټایپ چیک / اړونده چیکونه چلول.

۵. د استازي چوکاټونه په نږدې ډول وړاندې کړئ:
۰.۰ ثانیې
۱.۰ ثانیې
۲.۵ ثانیې
۴.۵ ثانیې
۶.۵ ثانیې
۸.۵ ثانیې
۱۰.۵ ثانیې
۱۲.۵ ثانیې
۱۴.۰ ثانیې
۱۴.۸ ثانیې

۶. په بصري ډول دا انځورونه معاینه کړئ.

یوازې دا مه تاییدوئ چې رینډرینګ بریالی شو.

پوښتنه وکړئ:

ایا دا د ایپل درجې محصول فلم په څیر ښکاري؟

ایا کوم شی د نمونې په څیر ښکاري؟

ایا په سکرین کې ډیر څه شته؟

ایا محصول د لوستلو وړ دی؟

ایا لیږدونه په منطقي ډول سره تړلي دي؟

آیا د ټیکسټیلو سره زر پریمیم احساس کوي؟

آیا هر چوکاټ جوړ شوی ښکاري؟

۷. د بصري کمزورتیاوو حل کول.

۸. بشپړ فلم وړاندې کړئ.

۹. د وروستي MP4 څخه ډیری دقیق کوډ شوي چوکاټونه معاینه کړئ، نه یوازې د براوزر څخه.
سکرین شاټونه.

۱۰. که اړتیا وي بیا تکرار کړئ.

د بریالیتوب اعلان مه کوئ ځکه چې کوډ تالیف کوي.

د رسولو وړ فلم دی.

─
د کیفیت بار
─

که چیرې داسې احساس وشي چې: خپله پایله رد کړئ

• د SaaS ټیمپلیټ
• د پاورپواینټ انیمیشن
• د ویب پاڼې سکرین ثبت کول
• د Remotion عمومي ډیمو
• یو کریپټو اعلان
• د مصنوعي ذهانت له لارې تولید شوی د پرومو ټیمپلیټ
• پنځه سکرین شاټونه شاوخوا ګرځېدل
• د بازار موندنې ډیره کاپي

هر مهم چوکاټ باید دومره ښه وي چې د یو ثابت اعلان په توګه وکارول شي.

زه به غوره ګڼم چې:

۳ غیر معمولي بصري شیبې

په پرتله

۱۰ منځنۍ ځانګړتیاوې لرونکي انیمیشنونه.

─
وروستۍ تحویلي توکي
─

چمتو کول:

۱. وروستۍ کیسه تخته
۲. Remotion د ترکیب نوې سرچینه
۳. ۱۹۲۰×۱۰۸۰ / ۶۰fps وروستی MP4
۴. د پوسټر/فاینل چوکاټ
۵. د فلم څخه د نمایشي چوکاټونو سره د اړیکو پاڼه
۶. دقیق چلولو وخت
۷. د کارول شویو اصلي ټیکسټیلو شتمنیو / سکرینونو لیست
۸. د حرکت ژبې لنډ وضاحت
۹. هر ډول پاتې بصري جوړجاړی
۱۰. د رینډر د بیا تولید لپاره امرونه

محصولات په روښانه نومول شوي لارښود کې خوندي کړئ لکه:

/ ټیکسټیلو / بیټا-موشن / بهر / شو ریل - ۱۵ /

هیڅ شی مه ځای پر ځای کوئ.
د تولید معلومات مه بدلوئ.
هیڅ شی مه ګډوئ.

په تخلیقي ډول هرڅه وکړئ، مګر له بې رحمه زغم څخه کار واخلئ.

ټیکسټیلو ګران ښکاره کړئ.

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.

غوښتنه له دې څخه اخیستل شوې ده پوسټ @daniel_haida.