Κατάρτιση: Ταινία εφαρμογής λογιστικής Taxtello

Είστε ο/η ανώτερος/η σχεδιαστής/τρια κίνησης, ο/η σχεδιαστής προϊόντων και ο/η μηχανικός Remotion στην Taxtello.

Η αποστολή σας είναι να δημιουργήσετε μια πραγματικά premium ταινία προϊόντων επιπέδου Apple για την Taxtello.

Αυτή ΔΕΝ είναι μια γενική εξήγηση SaaS.
Αυτό ΔΕΝ είναι μια αναλυτική παρουσίαση χαρακτηριστικών.
Αυτό ΔΕΝ είναι ένα animation προτύπου εκκίνησης.

Θέλω ένα showreel μάρκας/προϊόντος το πολύ 15 δευτερολέπτων που να κάνει το Taxtello να μοιάζει με ένα ώριμο, ακριβό, όμορφα σχεδιασμένο χρηματοοικονομικό προϊόν.

Νομίζω:

Ταινία παρουσίασης προϊόντων της Apple
× premium fintech
× σχεδιασμός κίνησης σύνταξης
× Παρουσίαση προϊόντος τύπου Stripe με περιορισμένη ρίγα
× Η οπτική ταυτότητα της Taxtello

Η επιθυμητή αντίδραση είναι:

«Περιμένετε, αυτή είναι μια γερμανική εφαρμογή λογιστικής;»

Η ταινία θα πρέπει να φαίνεται ακριβή.

───────────────────────────────────────────────
ΑΠΟΘΕΤΗΡΙΟ / ΠΗΓΗ ΑΛΗΘΕΙΑΣ
───────────────────────────────────────────────

Πρώτα ελέγξτε τα πραγματικά αποθετήρια πριν σχεδιάσετε οτιδήποτε.

Κύριο προϊόν:
/taxtello/main

Υφιστάμενο έργο Remotion:
/taxtello/beta-motion

Σημαντικές πηγές πραγματικών επωνυμιών:

/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

Τα υπάρχοντα στιγμιότυπα οθόνης του τρέχοντος προϊόντος βρίσκονται στην ενότητα:

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

Προτιμήστε τα νεότερα έγκυρα στιγμιότυπα οθόνης/τρέχουσα πηγή αντί για παλιά αντικείμενα.

Υπάρχει ήδη μια υπάρχουσα κινούμενη εικόνα ήρωα Remotion 24 δευτερολέπτων στο
/taxtello/beta-κίνηση.

ΜΗΝ το αντικαταστήσετε.
ΜΗΝ το επαναφέρετε.
ΜΗΝ επιβάλλετε την τρέχουσα ιστορία με τις συνδέσεις τεχνητής νοημοσύνης σε αυτή τη νέα ταινία.

Δημιουργήστε μια νέα ανεξάρτητη σύνθεση για αυτήν την εργασία, π.χ.

TaxtelloShowreel15

Μπορείτε να επαναχρησιμοποιήσετε καλή υποδομή, γραμματοσειρές, βοηθητικά προγράμματα απόδοσης, πρωτόγονα στοιχεία κίνησης,
καμπύλες χαλάρωσης, φόρτωση περιουσιακών στοιχείων και υποδομή διασφάλισης ποιότητας από την beta-motion όπου ήταν χρήσιμο.

Αλλά δημιουργικά, αυτή θα πρέπει να είναι μια νέα ταινία.

Πριν από την εφαρμογή, ελέγξτε το πραγματικό περιβάλλον χρήστη του Taxtello και κατανοήστε το προϊόν.

Μην εφευρίσκετε λειτουργικότητα που δεν υπάρχει.

───────────────────────────────────────────────
ΠΡΑΓΜΑΤΙΚΗ ΟΠΤΙΚΗ ΓΛΩΣΣΑ TAXTELLO
───────────────────────────────────────────────

Χρησιμοποιήστε το πραγματικό σύστημα σχεδιασμού.

Παλέτα πυρήνα:

Φόντο:
#0c0f1a

Υπερυψωμένες επιφάνειες:
#111525
#131722
#1a2032

Κύρια μάρκα χρυσού:
#e8b84b

Χρυσή επισήμανση:
#f5d07a

Βάθος χρυσού:
#9b6d18

Κύριο κείμενο:
#e8eaf2

Δυνατό ζεστό λευκό:
#f6f4eb

Δευτερεύον κείμενο:
#8b93b5

Θετικός:
#34d399

Αρνητικό/σφάλμα μόνο όπου είναι σημασιολογικά απαραίτητο:
#f87171

Τυπογραφία:
Συν Τζακάρτα Σανς

Αριθμοί / οικονομικές αξίες όπου χρειάζεται:
JetBrains Mono

Χρησιμοποιήστε το πραγματικό λεκτικό σήμα Taxtello ή/και το σήμα Taxtello.
Μην επανασχεδιάζετε ή προσεγγίζετε το λογότυπο.

Το χρυσό του Taxtello θα πρέπει να μοιάζει με μια πολύτιμη πινελιά, όχι με μια κίτρινη πλημμύρα στο UI.

Νομίζω:
σκοτεινό μέταλλο
ζεστό χρυσό
ποτήρι
μελάνι
ακρίβεια
ήσυχη αυτοπεποίθηση

ΔΕΝ:
κυβερνοπάνκ
κρυπτογράφηση
νέο
παιχνίδια
γενική τεχνητή νοημοσύνη μωβ
διαβαθμίσεις ουράνιου τόξου

───────────────────────────────────────────────
ΒΑΣΙΚΟΙ ΔΗΜΙΟΥΡΓΙΚΟΙ ΚΑΝΟΝΕΣ
───────────────────────────────────────────────

Ακολουθήστε αυτούς τους κανόνες σχολαστικά:

1. ΜΙΑ ΕΥΚΑΙΡΙΑ = ΜΙΑ ΙΔΕΑ.

2. Κάθε σκηνή χρειάζεται χώρο για να αναπνεύσει.

3. Το UI του προϊόντος είναι ο ήρωας.

4. Μην κολλάτε επεξηγηματικό κείμενο παντού.

5. Μην χρησιμοποιείτε σκληρές τομές εκτός αν υπάρχει σκόπιμος λόγος.

6. Προτιμήστε μεταβάσεις που βασίζονται σε αντικείμενα:
μια κάρτα γίνεται η επόμενη κάρτα,
μια γραμμή γραφήματος γίνεται σύνδεσμος,
μια απόδειξη γίνεται κράτηση,
ένας αριθμός γίνεται ένα άλλο στοιχείο διεπαφής,
η κάμερα κινείται μέσα στο προϊόν.

7. Χρησιμοποιήστε χαλάρωση των ασφαλίστρων.
Καμία γραμμική κίνηση.

8. Η κίνηση πρέπει να επικαλύπτεται φυσικά.
Τα στοιχεία δεν πρέπει να ξεκινούν και να σταματούν όλα ακριβώς στο ίδιο πλαίσιο.

9. Χρησιμοποιήστε το βάθος με φειδώ:
προοπτική,
μαλακή παράλλαξη,
κλίμακα,
διαχωρισμός προσκηνίου/φόντου,
ελεγχόμενο βάθος πεδίου, εάν είναι εφικτό.

10. ΚΑΝΕΝΑ εφέ δεν υπάρχει απλώς επειδή φαίνεται ωραίο.

11. Κανένα spam σωματιδίων.

12. Κανένας ψεύτικος υαλομορφισμός παντού.

13. Χωρίς υπερβολικό θάμπωμα.

14. Καμία άσκοπη περιστρεφόμενη κάρτα 3D.

15. Δεν υπάρχει συνεχές ζουμ.

16. Δεν υπάρχουν 20 διαφορετικά στυλ κινουμένων σχεδίων.

17. Δεν υπάρχει αναπήδηση στο UI.

18. Καμία γιγαντιαία παράγραφος μάρκετινγκ.

19. Μην μιμηθείτε μια συγκεκριμένη διαφήμιση της Apple πλάνα προς πλάνα.
Αποτυπώστε αντ' αυτού τη φιλοσοφία και την ποιότητα παραγωγής.

Η οπτική αυτοπεποίθηση θα πρέπει να προέρχεται από την αυτοσυγκράτηση.

───────────────────────────────────────────────
ΣΧΗΜΑ ΚΑΙ ΔΙΑΤΑΞΙΣ ΒΙΒΛΙΟΥ
───────────────────────────────────────────────

Κύριος κύριος:

1920 × 1080
60 fps
16:9
H.264
μέγιστη διάρκεια: 15,0 δευτερόλεπτα

Χρόνος εκτέλεσης-στόχος:
περίπου 14,0–15,0 δευτερόλεπτα.

Πρέπει να λειτουργεί ως προϊόν κοινωνικής δικτύωσης ακόμη και χωρίς ήχο.

Εάν είναι πρακτικό ΑΦΟΥ ολοκληρωθεί το κύριο κείμενο, δημιουργήστε επίσης ένα σκόπιμα ανασυντεθειμένο
κάθετη/κοινωνική παραλλαγή.

Μην απλώς περικόπτετε τη σύνθεση της επιφάνειας εργασίας.

Αλλά η κύρια έκδοση της επιφάνειας εργασίας είναι η προτεραιότητα.

───────────────────────────────────────────────
ΙΣΤΟΡΙΑ / ΣΥΝΑΙΣΘΗΜΑΤΙΚΟ ΤΟΚ
───────────────────────────────────────────────

Μην κάνετε αυτή τη λίστα με πέντε χαρακτηριστικά.

Θα πρέπει να μοιάζει με μια συνεχή σκέψη:

ΧΑΟΣ → ΕΛΕΓΧΟΣ → ΣΑΦΗΝΕΙΑ → TAXTELLO

Τα πρώτα 1,5 δευτερόλεπτα πρέπει ήδη να φαίνονται premium.

Η πρώτη σημαντική στιγμή προϊόντος θα πρέπει να συμβεί περίπου σε 2 δευτερόλεπτα.

Δεν υπάρχει εισαγωγή λογότυπου πέντε δευτερολέπτων.

Πιθανή κατεύθυνση αφήγησης:

«Όλα όσα αφορούν την επιχείρησή σας, επιτέλους σε ένα μέρος.»

Αλλά ΔΕΙΞΤΕ το αυτό αντί να το εξηγήσετε.

Θέλω περίπου τέσσερις οπτικές ιδέες για ολόκληρη την ταινία.

Χρησιμοποιήστε τις ισχυρότερες ΠΡΑΓΜΑΤΙΚΕΣ επιφάνειες Taxtello που θα βρείτε στο αποθετήριο.

Ισχυροί υποψήφιοι περιλαμβάνουν:

• Finanzcockpit / Πίνακας ελέγχου
• Αναζητήσεις
• Μπελέγκε
• Τράπεζα / αντιστοίχιση
• Steuergesundheit / επισκόπηση φόρου

ΔΕΝ χρειάζεται να τα δείξεις όλα.

Επιλέξτε τον οπτικά ισχυρότερο συνδυασμό.

───────────────────────────────────────────────
ΠΡΟΤΕΙΝΟΜΕΝΟ STORYBOARD 15 ΔΕΥΤΕΡΟΛΕΠΤΩΝ
───────────────────────────────────────────────

Αντιμετωπίστε αυτό ως ένα ισχυρό σημείο εκκίνησης, όχι ως ένα άκαμπτο πρότυπο.

0,00 – 1,20

ΜΑΥΡΟ / ΜΠΛΕ ΝΑΥΤΙΚΟ.

Εμφανίζεται μια μικροσκοπική ζεστή χρυσή λάμψη.

Η λάμψη αποκαλύπτει κομψά είτε το σήμα του Ταξτέλο είτε ένα θραύσμα του
λεκτικό σήμα.

Δεν υπάρχει ξεθώριασμα γενικού λογότυπου.

Σκεφτείτε την μηχανικά κατεργασμένη ακρίβεια.

Η κάμερα κινείται μέσα ή πέρα από το σημάδι και το περιβάλλον χρήστη αρχίζει να αναδύεται από αυτό.

Πολύ λίγο ή καθόλου αντίγραφο.

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

1,20 – 4,40

ΟΙΚΟΝΟΜΙΚΟΣ ΕΛΕΓΧΟΣ.

Αποκαλύψτε το πραγματικό Taxtello Cockpit ως μια διαστατική επιφάνεια προϊόντος.

Όχι απλώς ένα στιγμιότυπο οθόνης τοποθετημένο στην οθόνη.

Ανακατασκευάστε/περικόψτε/τοποθετήστε σε επίπεδα έτσι ώστε οι μεμονωμένες περιοχές της διεπαφής να μπορούν να ζωντανέψουν.

Ο οικονομικός αριθμός του ήρωα επιλύεται με σαφήνεια.
Το διάγραμμα τραβάει την προσοχή.
Οι υποστηρικτικές μετρήσεις σταθεροποιούνται λίγο αργότερα.

Χρησιμοποιήστε διακριτική κλιμάκωση.

Μπορεί να εμφανιστεί μία μόνο γραμμή αντιγράφου, για παράδειγμα:

«Όλα στο φως.»

ή μια άλλη εξίσου σύντομη γερμανική φράση αν βρείτε κάτι πιο ταιριαστό.

Μέγιστο ~3–4 λέξεις.

Η διεπαφή πρέπει να παραμένει αναγνωρίσιμη ως το πραγματικό προϊόν.

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

4.40 – 7.50

ΜΕΤΑΤΡΑΠΙΣΗ ΕΓΓΡΑΦΩΝ / ΛΟΓΙΣΤΙΚΗΣ.

Χρησιμοποιήστε ένα οπτικό αντικείμενο από την προηγούμενη σκηνή ως μετάβαση.

Παράδειγμα:

Ένα χρυσό σημείο στο γράφημα επεκτείνεται στη γωνία μιας απόδειξης/κάρτας.
Η κάμερα το ακολουθεί.
Εισάγεται μια απόδειξη/έγγραφο.
Το Taxtello το προσδιορίζει ή το οργανώνει.
Το έγγραφο ενσωματώνεται κομψά στο αντίστοιχο αρχείο κρατήσεων / οικονομικών στοιχείων.

Χρησιμοποιήστε μαγνητική ευθυγράμμιση και ακρίβεια.

Χωρίς τυρώδες λέιζερ σαρωτή.

Κανένας πλωτός χάρτινος ανεμοστρόβιλος.

Πιθανό μικροαντίγραφο:

«Μπελέγκε. Έρλεντιγκτ.»

Μόνο αν αυτό βελτιώσει τη σκηνή.

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

7.50 – 10.70

ΧΡΗΜΑΤΑ / ΤΙΜΟΛΟΓΙΑ.

Μεταμορφώστε ή μεταβείτε φυσικά στην πραγματική διεπαφή Rechnungen.

Χρησιμοποιήστε μια δυνατή στιγμή:

αλλάζει η κατάσταση ενός τιμολογίου,
μια πληρωμή επιλύεται,
ένα ποσό μετακινείται στη θέση του,
ή η επισκόπηση συναρμολογείται από μόνη της.

Οι αριθμοί πρέπει να είναι απτικοί και ακριβείς.

Χρησιμοποιήστε το JetBrains Mono όπου αυτό ταιριάζει με το πραγματικό προϊόν.

Ο χρυσός τονίζει την ενεργό κατάσταση.

Το πράσινο χρησιμοποιείται μόνο για μια γνήσια θετική σημασιολογική κατάσταση.

Πιθανό αντίγραφο:

«Γκελντ. Είμαι ο Γκριφ.»

Και πάλι: προαιρετικό και εξαιρετικά σύντομο.

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

10.70 – 12.80

ΦΟΡΟΣ / ΣΑΦΗΝΕΙΑ.

Μετάβαση στην πραγματική πλατφόρμα φορολογικής καθοδήγησης/οικονομικής καθοδήγησης του Taxtello.

Μην ισχυρίζεστε ότι το Taxtello εγγυάται μαγικά τη σωστή φορολογία.

Επικοινωνήστε την ορατότητα και τον έλεγχο.

Παράδειγμα:

Πολλαπλά θορυβώδη σήματα καταρρέουν σε μια ήρεμη, δομημένη φορολογική επισκόπηση.

Πιθανό αντίγραφο:

«Στούντερ ιμ Μπλικ.»

Αυτή η σκηνή θα πρέπει να είναι πιο ήρεμη από την προηγούμενη.

Ο ρυθμός επιβραδύνεται για λίγο.

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

12.80 – 15.00

ΑΠΟΔΟΣΗ ΜΑΡΚΑ.

Τραβήξτε την κάμερα προς τα έξω.

Το περιβάλλον χρήστη συμπιέζεται ή διπλώνεται σε ένα όμορφο αντικείμενο/επιφάνεια προϊόντος Taxtello.

Το σκοτάδι επιστρέφει γύρω του.

Το χρυσό λεκτικό σήμα Taxtello επιλύεται.

Μία σύντομη γραμμή μάρκας από κάτω.

Εξερευνήστε δυνατές τελικές γραμμές όπως:

«Η δουλειά σου. Κλαρ.»

"Buchhaltung. Unter Kontrolle."

“Einfach mehr Überblick.”

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

Επιλέξτε με βάση την πραγματική τοποθέτηση προϊόντος που βρίσκετε στο αποθετήριο.

Μην χρησιμοποιείς μια ατάκα απλώς επειδή την πρότεινα εγώ.

Το τελικό καρέ πρέπει να έχει αρκετή ακινησία για να γίνει αντιληπτό.

Τερματίστε με αυτοπεποίθηση.

Δεν υπάρχει γιγαντιαίο bouncing CTA.

───────────────────────────────────────────────
ΜΕΤΑΒΑΣΕΙΣ
───────────────────────────────────────────────

Αυτό είναι ένα από τα πιο σημαντικά μέρη.

Θέλω μεταβάσεις που κάνουν τον θεατή να σκεφτεί:

«Φυσικά και η επόμενη σκηνή προήλθε από αυτό.»

Καλός:

γραμμή γραφήματος → άκρη εγγράφου
χρυσό χάπι → κουμπί τιμολογίου
οικονομικός αριθμός → ποσό στο τιμολόγιο
άκρη κάρτας → επόμενη επιφάνεια
στοιχείο διεπαφής ώθησης κάμερας
κοινή γεωμετρία
αποκάλυψη μάσκας χρησιμοποιώντας πραγματικά σχήματα προϊόντων

Κακός:

σταδιακή σταδιακή αλλαγή
τυχαίο σβήσιμο
μετάβαση περιστροφής
μικροβλάβη
τηγάνι κάθε δύο δευτερόλεπτα
γενικό SaaS διαφάνεια αριστερά
ανεπιθύμητο περιεχόμενο με θόλωση ζουμ

Οι άμεσες κοπές επιτρέπονται μόνο όταν μια σκόπιμη ρυθμική επίδραση ωφελεί την ταινία.

───────────────────────────────────────────────
ΚΙΝΗΣΗ
───────────────────────────────────────────────

Η κίνηση χρειάζεται βάρος.

Χρησιμοποιήστε καμπύλες συγκρίσιμες με:

κυβικό-μπεζιέ(0,16, 1, 0,3, 1)

όπου είναι σκόπιμο.

Διαφορετικά στοιχεία θα πρέπει να έχουν ελαφρώς διαφορετικούς χρόνους άφιξης.

Προτιμώ:

πρόβλεψη
υπέρβαση κάτω από ~2%
τακτοποίηση
συνέχεια κίνησης
κοινή ταχύτητα μεταξύ σκηνών

Αποφύγετε την ελαστικότητα των καρτούν.

Η κίνηση της κάμερας θα πρέπει να μοιάζει με λήψη μακροεντολών υψηλής ποιότητας.

Φανταστείτε ότι βιντεοσκοπούμε ένα φυσικό αντικείμενο υψηλής ποιότητας, παρόλο που είναι λογισμικό.

───────────────────────────────────────────────
ΦΩΤΙΣΜΟΣ / ΥΛΙΚΟ
───────────────────────────────────────────────

Χρησιμοποιήστε εξαιρετικά διακριτικό φωτισμό περιβάλλοντος.

Πιθανές θεραπείες:

• απαλό χρυσό φωτισμό χείλους
• σκούρο μπλε-μπλε χρώμα
• αχνή άνθιση περιβάλλοντος
• απαλό κατοπτρικό φως που διέρχεται από μια επιφάνεια
• συγκρατημένη βινιέτα
• διακριτικό κόκκο εάν βοηθάει ουσιαστικά

Διατηρήστε την διεπαφή καθαρή.

ΜΗΝ θολώνετε το προϊόν απλώς για να φαίνεται κινηματογραφικό.

Δεν υπάρχουν ψεύτικες γυαλιστερές αντανακλάσεις που καταστρέφουν την αναγνωσιμότητα.

───────────────────────────────────────────────
ΤΥΠΟΓΡΑΦΙΑ
───────────────────────────────────────────────

Χρησιμοποιήστε πολύ λίγα αντίγραφα.

Καμία πρόταση δεν πρέπει να ανταγωνίζεται το προϊόν.

Οι τίτλοι θα πρέπει γενικά να χωράνε σε μία γραμμή.

Χρησιμοποιήστε το Plus Jakarta Sans.

Η έντονη τυπογραφία μπορεί περιστασιακά να κλιμακωθεί πολύ και να γίνει μια μετάβαση
την ίδια τη συσκευή.

Αποφύγετε τη γενική συμπεριφορά γραφικών κίνησης όπου κάθε λέξη κινείται ανεξάρτητα.

Η τυπογραφία θα πρέπει να κινείται όπως τα σχεδιασμένα αντικείμενα.

───────────────────────────────────────────────
ΗΧΟΣ / ΡΥΘΜΟΣ
───────────────────────────────────────────────

Σχεδιάστε την κίνηση σαν να ήταν κομμένη σε περίπου 115–120 BPM:
premium, κινητικό, εκλεπτυσμένο, όχι ξέφρενο.

Οι σημαντικές στιγμές πρέπει να αποτυπώνονται μουσικά.

Προτεινόμενη γλώσσα ήχου:

• χαμηλή μαλακή κρούση για σημαντική αποκάλυψη
• περιορισμένα κλικ αφής στο UI
• διακριτικό μεταλλικό/γυάλινο τόνο
• απαλή κίνηση χαμηλής συχνότητας κατά τη διάρκεια των μεταβάσεων της κάμερας
• κομψός, ρεαλιστικός τόνος στην εμφάνιση του λογότυπου

Αποφεύγω:

• τεράστια κινηματογραφική έκρηξη τρέιλερ
• Ανυψωτικά EDM
• δυνατά βουητά παντού
• ήχοι "τεχνικής διεπαφής" σε εργοστασιακό επίπεδο
• ρυθμός ραπ
• επιθετικά μπάσα

Εάν δεν υπάρχει νομικά ασφαλές μουσικό/ηχητικό στοιχείο στο έργο, ΜΗΝ το τραβάτε.
ήχος από το διαδίκτυο με πνευματικά δικαιώματα.

Παραδώστε το οπτικό master χωρίς μουσική που προστατεύεται από πνευματικά δικαιώματα και δημιουργήστε ένα συνοπτικό σύνθημα
παρτιτούρα που περιγράφει πού πρέπει να χτυπήσει η μουσική/τα εφέ ήχου.

Εάν υπάρχει κατάλληλος ασφαλής/τοπικός ήχος, χρησιμοποιήστε τον.

───────────────────────────────────────────────
ΜΟΝΟ ΠΡΑΓΜΑΤΙΚΟ ΠΡΟΪΟΝ
───────────────────────────────────────────────

Αυτό είναι κρίσιμο.

Επιθεωρήστε την τρέχουσα κύρια παροχή.

Μην εφευρίσκετε οθόνες.

Μην επινοείτε μετρήσεις που υπονοούν πραγματικά δεδομένα πελατών.

Χρησιμοποιήστε σαφώς συνθετικές/ασφαλείς για επίδειξη τιμές, εάν απαιτείται.

Μην αποκαλύπτετε κατά λάθος προσωπικές πληροφορίες, πληροφορίες χρήστη δοκιμών ή πληροφορίες παραγωγής.

Επαναχρησιμοποιήστε την οπτική δομή του πραγματικού UI του Taxtello.

Εάν μια οθόνη χρειάζεται να διαχωριστεί από κίνηση, αναδημιουργήστε την πιστά στο React από
το πραγματικό σύστημα σχεδιασμού αντί για την απλή κλιμάκωση ενός γιγάντιου στιγμιότυπου οθόνης.

Το αποτέλεσμα θα πρέπει να μοιάζει ξεκάθαρα με το Taxtello.

───────────────────────────────────────────────
ΠΡΟΣΔΟΚΙΕΣ ΥΛΟΠΟΙΗΣΗΣ
───────────────────────────────────────────────

Εργαστείτε απευθείας σε:

/taxtello/beta-motion

Δημιουργήστε τη νέα σύνθεση παράλληλα με την υπάρχουσα.

Διατηρήστε τις υπάρχουσες συνθέσεις σε λειτουργία.

Δομήστε τη νέα εργασία με σαφήνεια.

Προτιμήστε επαναχρησιμοποιήσιμα πρωτόγονα για:

• επιφάνεια κάμερας
• πλαίσιο προϊόντος
• μεταβάσεις με μάσκα
• το κείμενο αποκαλύπτει
• Αποκαλύπτει την περιοχή UI
• ατμοσφαιρικός φωτισμός
• μεταβάσεις κοινόχρηστων στοιχείων

Αποφύγετε ένα εξάρτημα 1.500 γραμμών.

Χρησιμοποιήστε ντετερμινιστική κίνηση Remotion που καθοδηγείται από το καρέ/χρόνο.

Δεν υπάρχει ορισμός χρόνου λήξης.
Χωρίς μη ντετερμινιστικές κινούμενες εικόνες.

Σεβαστείτε τα 60 fps σε όλη τη διάρκεια.

Χρησιμοποιήστε σκόπιμα την παρεμβολή/ελατήριο/χαλάρωση.

───────────────────────────────────────────────
ΜΗΝ ΣΤΑΜΑΤΑΤΕ ΜΕΤΑ ΤΗΝ ΠΡΩΤΗ ΕΦΑΡΜΟΓΗ
───────────────────────────────────────────────

Αυτή είναι μια οπτική εργασία.

ΠΡΕΠΕΙ να ελέγξετε την πραγματική απόδοση.

Απαιτούμενη ροή εργασίας:

1. Επιθεωρήστε το αποθετήριο και την πραγματική μάρκα/προϊόν.

2. Γράψτε ένα συνοπτικό σενάριο με:
- ακριβείς χρονικές σημάνσεις
- βασικό οπτικό στοιχείο
- λογική μετάβασης
- αντίγραφο
- επιδιωκόμενος συναισθηματικός ρυθμός

3. Εφαρμόστε το.

4. Εκτελέστε έλεγχο τύπου / σχετικούς ελέγχους.

5. Αποδώστε αντιπροσωπευτικά πλαίσια περίπου σε:
0,0 δευτ.
1,0 δευτ.
2,5 δευτ.
4,5 δευτερόλεπτα
6,5 δευτ.
8,5 δευτ.
10,5 δευτ.
12,5 δευτ.
14,0 δευτ.
14,8 δευτ.

6. ΕΠΙΘΕΩΡΗΣΤΕ ΟΠΤΙΚΑ ΑΥΤΕΣ ΤΙΣ ΕΙΚΟΝΕΣ.

Μην επιβεβαιώνετε απλώς ότι η απόδοση ήταν επιτυχής.

Παρακαλώ:

Μήπως αυτό μοιάζει με ταινία προϊόντος επιπέδου Apple;

Μοιάζει κάτι με πρότυπο;

Μήπως υπάρχει υπερβολική ποσότητα στην οθόνη;

Είναι το προϊόν ευανάγνωστο;

Είναι οι μεταβάσεις λογικά συνδεδεμένες;

Σου φαίνεται το χρυσό Taxtello premium;

Φαίνεται κάθε καρέ συγκροτημένο;

7. Διορθώστε τις οπτικές αδυναμίες.

8. Αποδώστε ολόκληρη την ταινία.

9. Επιθεωρήστε πολλά ακριβή αποκωδικοποιημένα καρέ από το τελικό MP4, όχι μόνο από το πρόγραμμα περιήγησης
στιγμιότυπα οθόνης.

10. Επαναλάβετε ξανά εάν είναι απαραίτητο.

Μην δηλώσετε επιτυχία επειδή ο κώδικας μεταγλωττίζεται.

Το παραδοτέο είναι η ΤΑΙΝΙΑ.

───────────────────────────────────────────────
ΠΟΙΟΤΙΚΟ ΜΠΑΡ
───────────────────────────────────────────────

Απορρίψτε το δικό σας αποτέλεσμα εάν σας φαίνεται σαν:

• ένα πρότυπο SaaS
• μια κινούμενη εικόνα PowerPoint
• μια εγγραφή οθόνης ιστότοπου
• μια γενική επίδειξη Remotion
• μια διαφήμιση κρυπτονομισμάτων
• ένα πρότυπο προώθησης που δημιουργείται από τεχνητή νοημοσύνη
• πέντε στιγμιότυπα οθόνης που σύρονται τριγύρω
• υπερβολικό διαφημιστικό κείμενο

Κάθε σημαντικό καρέ θα πρέπει να είναι αρκετά καλό για να χρησιμοποιηθεί ως στατική διαφήμιση.

Θα προτιμούσα:

3 εξαιρετικές οπτικές στιγμές

από

10 μέτρια κινούμενα σχέδια μεγάλου μήκους.

───────────────────────────────────────────────
ΤΕΛΙΚΑ ΠΑΡΑΔΟΤΕΑ
───────────────────────────────────────────────

Προμηθεύω:

1. Τελικό σενάριο
2. Νέα πηγή σύνθεσης Remotion
3. Τελικό MP4 1920×1080 / 60fps
4. Αφίσα/τελικό πλαίσιο
5. Φύλλο επικοινωνίας με αντιπροσωπευτικά καρέ από την ταινία
6. Ακριβής χρόνος εκτέλεσης
7. Λίστα πραγματικών περιουσιακών στοιχείων/οθονών Taxtello που χρησιμοποιήθηκαν
8. Σύντομη εξήγηση της γλώσσας κίνησης
9. Οποιεσδήποτε εναπομένουσες οπτικές ελλείψεις
10. Εντολές για την αναπαραγωγή της απόδοσης

Αποθηκεύστε τα αποτελέσματα σε έναν σαφώς ονομασμένο κατάλογο, όπως:

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

Μην αναπτύξετε τίποτα.
Μην τροποποιείτε τα δεδομένα παραγωγής.
Μην συγχωνεύσετε τίποτα.

Κάνε τα πάντα δημιουργικά, αλλά επέβαλλε αδίστακτη αυτοσυγκράτηση.

Κάντε το Taxtello να φαίνεται ακριβό.

You are the senior motion designer, product designer and Remotion engineer for Taxtello.

Your task is to create a genuinely premium, Apple-level product film for Taxtello.

This is NOT a generic SaaS explainer.
This is NOT a feature walkthrough.
This is NOT a startup template animation.

I want a maximum 15-second brand/product showreel that makes Taxtello look like a mature, expensive, beautifully designed financial product.

Think:

Apple product launch film
× premium fintech
× editorial motion design
× restrained Stripe-like product presentation
× Taxtello's own visual identity

The desired reaction is:

“Wait, this is a German bookkeeping app?”

The film should feel expensive.

────────────────────────────────────
REPO / SOURCE OF TRUTH
────────────────────────────────────

First inspect the real repositories before designing anything.

Main product:
  /taxtello/main

Existing Remotion project:
  /taxtello/beta-motion

Important real brand sources:

  /taxtello/main/public/css/app/_00-tokens.css
  /taxtello/main/docs/design/TOKENS.md
  /taxtello/main/public/taxtello-wordmark.png
  /taxtello/main/public/icons.svg

Existing current product screenshots can be found under:

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

Prefer the newest valid screenshots/current source over stale artifacts.

There is already an existing 24-second Remotion hero animation in
/taxtello/beta-motion.

DO NOT replace it.
DO NOT regress it.
DO NOT force its current AI-connections storyline into this new film.

Create a new independent composition for this task, e.g.

  TaxtelloShowreel15

You may reuse good infrastructure, fonts, rendering utilities, motion primitives,
easing curves, asset loading and QA infrastructure from beta-motion where useful.

But creatively this should be a new film.

Before implementation, inspect the actual Taxtello UI and understand the product.

Do not invent functionality that does not exist.

────────────────────────────────────
REAL TAXTELLO VISUAL LANGUAGE
────────────────────────────────────

Use the real design system.

Core palette:

Background:
  #0c0f1a

Elevated surfaces:
  #111525
  #131722
  #1a2032

Primary brand gold:
  #e8b84b

Gold highlight:
  #f5d07a

Gold depth:
  #9b6d18

Primary text:
  #e8eaf2

Strong warm white:
  #f6f4eb

Secondary text:
  #8b93b5

Positive:
  #34d399

Negative/error only where semantically necessary:
  #f87171

Typography:
  Plus Jakarta Sans

Numbers / financial values where appropriate:
  JetBrains Mono

Use the actual Taxtello wordmark and/or Taxtello mark.
Do not redraw or approximate the logo.

Taxtello's gold should feel like a precious accent, not a yellow UI flood.

Think:
dark metal
warm gold
glass
ink
precision
quiet confidence

NOT:
cyberpunk
crypto
neon
gaming
generic AI purple
rainbow gradients

────────────────────────────────────
CORE CREATIVE RULES
────────────────────────────────────

Follow these rules ruthlessly:

1. ONE SHOT = ONE IDEA.

2. Every scene needs room to breathe.

3. The product UI is the hero.

4. Do not plaster explanatory copy everywhere.

5. Do not use hard cuts unless there is a deliberate reason.

6. Prefer object-driven transitions:
   a card becomes the next card,
   a chart line becomes a connector,
   a receipt becomes a booking,
   a number becomes another interface element,
   the camera moves through the product.

7. Use premium easing.
   No linear movement.

8. Motion should overlap naturally.
   Elements should not all start and stop at exactly the same frame.

9. Use depth sparingly:
   perspective,
   soft parallax,
   scale,
   foreground/background separation,
   controlled depth of field if achievable.

10. NO effect exists simply because it looks cool.

11. No particle spam.

12. No fake glassmorphism everywhere.

13. No excessive blur.

14. No pointless 3D spinning cards.

15. No constant zooming.

16. No 20 different animation styles.

17. No bouncing UI.

18. No giant marketing paragraph.

19. Do not imitate a particular Apple commercial shot-for-shot.
    Capture the philosophy and production quality instead.

The visual confidence should come from restraint.

────────────────────────────────────
FORMAT
────────────────────────────────────

Primary master:

1920 × 1080
60 fps
16:9
H.264
maximum duration: 15.0 seconds

Target runtime:
approximately 14.0–15.0 seconds.

It must work as a social-media product reveal even without sound.

If practical AFTER the master is finished, also create a deliberately recomposed
vertical/social variant.

Do not merely crop the desktop composition.

But the desktop master is the priority.

────────────────────────────────────
STORY / EMOTIONAL ARC
────────────────────────────────────

Do not make this a list of five features.

It should feel like one continuous thought:

CHAOS → CONTROL → CLARITY → TAXTELLO

The first 1.5 seconds must already look premium.

The first meaningful product moment should happen by ~2 seconds.

No five-second logo intro.

Possible narrative direction:

“Everything about your business, finally in one place.”

But SHOW this instead of explaining it.

I want approximately four visual ideas across the whole film.

Use the strongest REAL Taxtello surfaces you find in the repository.

Strong candidates include:

• Finanzcockpit / Dashboard
• Rechnungen
• Belege
• Bank / matching
• Steuergesundheit / tax overview

You do NOT need to show all of them.

Choose the visually strongest combination.

────────────────────────────────────
SUGGESTED 15-SECOND STORYBOARD
────────────────────────────────────

Treat this as a strong starting point, not a rigid template.

0.00 – 1.20

BLACK / NAVY.

A tiny warm-gold glint appears.

The glint elegantly reveals either the Taxtello mark or a fragment of the
wordmark.

No generic logo fade.

Think machined precision.

The camera moves through or past the mark and the UI begins to emerge from it.

Very little or no copy.

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

1.20 – 4.40

FINANCIAL CONTROL.

Reveal the actual Taxtello Cockpit as a dimensional product surface.

Not just a screenshot placed on screen.

Reconstruct/crop/layer it so individual interface regions can animate.

The hero financial number resolves crisply.
The chart draws in.
Supporting metrics settle slightly later.

Use subtle stagger.

A single line of copy may appear, for example:

  “Alles im Blick.”

or another equally short German phrase if you find something more fitting.

Maximum ~3–4 words.

The interface must remain recognizable as the real product.

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

4.40 – 7.50

DOCUMENT / BOOKKEEPING TRANSFORMATION.

Use a visual object from the previous scene as the transition.

Example:

A gold chart point expands into the corner of a receipt/card.
The camera follows it.
A receipt/document enters.
Taxtello identifies or organizes it.
The document snaps elegantly into its corresponding booking / financial record.

Use magnetic alignment and precision.

No cheesy scanner laser.

No floating paper tornado.

Possible micro-copy:

  “Belege. Erledigt.”

Only if it improves the scene.

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

7.50 – 10.70

MONEY / INVOICES.

Morph or transition naturally into the real Rechnungen interface.

Use one strong moment:

an invoice status changes,
a payment resolves,
an amount moves into place,
or the overview assembles itself.

Numbers should feel tactile and precise.

Use JetBrains Mono where this matches the actual product.

Gold highlights the active state.

Green is used only for a genuinely positive semantic state.

Potential copy:

  “Geld. Im Griff.”

Again: optional and extremely short.

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

10.70 – 12.80

TAX / CLARITY.

Transition into the real Taxtello tax-health / financial guidance surface.

Do not claim that Taxtello magically guarantees correct taxes.

Communicate visibility and control.

Example:

multiple noisy signals collapse into one calm, structured tax overview.

Potential copy:

  “Steuern im Blick.”

This scene should feel calmer than the previous scene.

The rhythm briefly slows.

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

12.80 – 15.00

BRAND PAYOFF.

Pull the camera outward.

The UI compresses or folds into one beautiful Taxtello product object / surface.

Darkness returns around it.

The gold Taxtello wordmark resolves.

One short brand line underneath.

Explore strong final lines such as:

  “Dein Business. Klar.”

  “Buchhaltung. Unter Kontrolle.”

  “Einfach mehr Überblick.”

  “Alles fürs Business. An einem Ort.”

Choose based on the actual product positioning you find in the repo.

Do not use a line simply because I suggested it.

The final frame must have enough stillness to register.

End confidently.

No giant bouncing CTA.

────────────────────────────────────
TRANSITIONS
────────────────────────────────────

This is one of the most important parts.

I want transitions that make the viewer think:

“Of course the next scene came from that.”

Good:

chart line → document edge
gold pill → invoice button
financial number → amount in invoice
card edge → next surface
camera push through interface element
shared geometry
mask reveal using actual product shapes

Bad:

crossfade
random wipe
spin transition
glitch
whip-pan every two seconds
generic SaaS slide-left
zoom-blur spam

Direct cuts are allowed only when a deliberate rhythmic impact benefits the film.

────────────────────────────────────
MOTION
────────────────────────────────────

Motion needs weight.

Use curves comparable to:

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

where appropriate.

Different elements should have subtly different arrival times.

Prefer:

anticipation
overshoot below ~2%
settling
motion continuation
shared velocity between scenes

Avoid cartoon springiness.

Camera movement should feel like a high-end macro product shoot.

Imagine we are filming a physical premium object even though it is software.

────────────────────────────────────
LIGHTING / MATERIAL
────────────────────────────────────

Use extremely subtle environmental lighting.

Possible treatments:

• soft gold rim lighting
• dark navy falloff
• faint ambient bloom
• soft specular highlight passing across a surface
• restrained vignette
• subtle grain if it materially helps

Keep the interface crisp.

Do NOT blur the product just to look cinematic.

No fake glossy reflections that destroy legibility.

────────────────────────────────────
TYPOGRAPHY
────────────────────────────────────

Use very little copy.

No sentence should compete with the product.

Headlines should generally fit on one line.

Use Plus Jakarta Sans.

Strong typography may occasionally scale very large and become a transition
device itself.

Avoid generic motion-graphics behavior where every word animates independently.

Typography should move as designed objects.

────────────────────────────────────
SOUND / RHYTHM
────────────────────────────────────

Design the motion as if it were cut to approximately 115–120 BPM:
premium, kinetic, sophisticated, not frantic.

Important moments should land musically.

Suggested sound language:

• low soft impact for major reveal
• restrained tactile UI clicks
• subtle metallic/glass tonal tick
• soft low-frequency movement during camera transitions
• elegant resolved tone at the logo payoff

Avoid:

• huge cinematic trailer boom
• EDM risers
• loud whooshes everywhere
• stock “tech interface” sounds
• rap beat
• aggressive bass

If there is no legally safe music/audio asset in the project, DO NOT pull
copyrighted audio from the internet.

Deliver the visual master without copyrighted music and create a concise cue
sheet describing where music/SFX should hit.

If suitable safe/local audio exists, use it.

────────────────────────────────────
REAL PRODUCT ONLY
────────────────────────────────────

This is critical.

Inspect current main.

Do not invent screens.

Do not invent metrics that imply real customer data.

Use clearly synthetic/demo-safe values if required.

Do not accidentally expose any personal, test-user or production information.

Reuse the visual structure of the actual Taxtello UI.

If a screen needs to be motion-separated, recreate it faithfully in React from
the real design system instead of simply scaling a giant screenshot.

The result should still look unmistakably like Taxtello.

────────────────────────────────────
IMPLEMENTATION EXPECTATIONS
────────────────────────────────────

Work directly in:

  /taxtello/beta-motion

Create the new composition alongside the existing one.

Keep existing compositions working.

Structure the new work cleanly.

Prefer reusable primitives for:

• camera surface
• product frame
• masked transitions
• text reveals
• UI region reveals
• ambient lighting
• shared-element transitions

Avoid one 1,500-line component.

Use deterministic Remotion animation driven by frame/time.

No setTimeout.
No nondeterministic animations.

Respect 60 fps throughout.

Use interpolation/spring/easing deliberately.

────────────────────────────────────
DO NOT STOP AFTER FIRST IMPLEMENTATION
────────────────────────────────────

This is a visual task.

You MUST review the actual rendered output.

Required workflow:

1. Inspect repository and real brand/product.

2. Write a concise storyboard with:
   - exact timestamps
   - key visual
   - transition logic
   - copy
   - intended emotional rhythm

3. Implement it.

4. Run typecheck / relevant checks.

5. Render representative frames at roughly:
   0.0 s
   1.0 s
   2.5 s
   4.5 s
   6.5 s
   8.5 s
   10.5 s
   12.5 s
   14.0 s
   14.8 s

6. VISUALLY INSPECT THOSE IMAGES.

Do not merely confirm that rendering succeeded.

Ask:

Does this look like an Apple-tier product film?

Does anything look like a template?

Is there too much on screen?

Is the product legible?

Are transitions logically connected?

Does Taxtello gold feel premium?

Does every frame look composed?

7. Fix visual weaknesses.

8. Render the complete film.

9. Inspect multiple exact decoded frames from the final MP4, not only browser
   screenshots.

10. Iterate again if necessary.

Do not declare success because the code compiles.

The deliverable is the FILM.

────────────────────────────────────
QUALITY BAR
────────────────────────────────────

Reject your own result if it feels like:

• a SaaS template
• a PowerPoint animation
• a website screen recording
• a generic Remotion demo
• a crypto advertisement
• an AI-generated promo template
• five screenshots sliding around
• excessive marketing copy

Every important frame should be good enough to use as a still advertisement.

I would rather have:

3 extraordinary visual moments

than

10 mediocre feature animations.

────────────────────────────────────
FINAL DELIVERABLES
────────────────────────────────────

Provide:

1. Final storyboard
2. New Remotion composition source
3. 1920×1080 / 60fps final MP4
4. Poster/final frame
5. Contact sheet with representative frames from the film
6. Exact runtime
7. List of real Taxtello assets/screens used
8. Brief explanation of the motion language
9. Any remaining visual compromises
10. Commands to reproduce the render

Save outputs in a clearly named directory such as:

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

Do not deploy anything.
Do not modify production data.
Do not merge anything.

Go all out creatively, but exercise ruthless restraint.

Make Taxtello look expensive.

Η προτροπή λήφθηκε από θέση @daniel_haida.