Vídeo de la aplicación de contabilidad Taxtello
Inmediato
Eres el diseñador sénior de animación, diseñador de producto e ingeniero Remotion para Taxtello. Tu tarea consiste en crear un vídeo promocional de auténtica calidad superior, al nivel de Apple, para Taxtello. Esto NO es una explicación genérica de SaaS. Esto NO es un tutorial de funciones. Esta NO es una animación de plantilla de inicio. Quiero un vídeo promocional de marca/producto de un máximo de 15 segundos que haga que Taxtello parezca un producto financiero maduro, caro y con un diseño impecable. Pensar: Vídeo de lanzamiento de producto de Apple × fintech premium × diseño de movimiento editorial × Presentación de producto sobria al estilo Stripe × Identidad visual propia de Taxtello La reacción deseada es: “Un momento, ¿esta es una aplicación alemana de contabilidad?” La película debería dar la impresión de ser costosa. ─────────────────────────────────── REPOSITORIO / FUENTE DE VERDAD ─────────────────────────────────── Primero, inspeccione los repositorios reales antes de diseñar nada. Producto principal: /taxtello/principal Proyecto Remotion existente: /taxtello/beta-motion Fuentes importantes de marcas reales: /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 Las capturas de pantalla de los productos actuales se pueden encontrar en: /taxtello/main/artifacts/smoke-ui-smoke/ Prefiera las capturas de pantalla válidas más recientes/la fuente actual a los artefactos obsoletos. Ya existe una animación de héroe Remotion de 24 segundos en /taxtello/beta-motion. NO lo reemplace. NO lo hagas retroceder. NO fuerces la trama actual sobre las conexiones con la IA en esta nueva película. Crea una nueva composición independiente para esta tarea, por ejemplo: TaxtelloShowreel15 Puede reutilizar buena infraestructura, fuentes, utilidades de renderizado, primitivas de movimiento, Curvas de suavizado, carga de activos e infraestructura de control de calidad desde beta-motion cuando sea útil. Pero desde el punto de vista creativo, debería ser una película nueva. Antes de la implementación, examine la interfaz de usuario de Taxtello y familiarícese con el producto. No inventes funcionalidades que no existen. ─────────────────────────────────── LENGUAJE VISUAL REAL DE TAXTELLO ─────────────────────────────────── Utilice el sistema de diseño real. Paleta básica: Fondo: #0c0f1a Superficies elevadas: #111525 #131722 #1a2032 Oro de marca principal: #e8b84b Resaltado dorado: #f5d07a Profundidad del oro: #9b6d18 Texto principal: #e8eaf2 Blanco cálido intenso: #f6f4eb Texto secundario: #8b93b5 Positivo: #34d399 Negativo/error solo cuando sea semánticamente necesario: #f87171 Tipografía: Además, Yakarta Sans Incluir cifras o valores financieros cuando corresponda: Mono de JetBrains Utilice el logotipo denominativo de Taxtello y/o la marca Taxtello. No redibuje ni reproduzca el logotipo de forma aproximada. El color dorado de Taxtello debería sentirse como un detalle precioso, no como una inundación amarilla en la interfaz de usuario. Pensar: metal oscuro oro cálido vaso tinta precisión confianza tranquila NO: cyberpunk cripto neón juego de azar IA genérica púrpura degradados arcoíris ─────────────────────────────────── REGLAS CREATIVAS FUNDAMENTALES ─────────────────────────────────── Sigue estas reglas sin piedad: 1. UNA OPORTUNIDAD = UNA IDEA. 2. Cada escena necesita espacio para respirar. 3. La interfaz de usuario del producto es la protagonista. 4. No repletas de textos explicativos. 5. No utilice cortes bruscos a menos que haya una razón deliberada. 6. Prefiera las transiciones basadas en objetos: una carta se convierte en la siguiente carta, una línea de gráfico se convierte en un conector, un recibo se convierte en una reserva, un número se convierte en otro elemento de la interfaz, La cámara se mueve a través del producto. 7. Utilice la función de alivio premium. Sin movimiento lineal. 8. El movimiento debe superponerse de forma natural. Los elementos no deben comenzar y terminar exactamente en el mismo fotograma. 9. Utilice la profundidad con moderación: perspectiva, paralaje suave, escala, separación primer plano/fondo, Profundidad de campo controlada, si es posible. 10. Ningún efecto existe simplemente porque se vea bien. 11. No se permite el envío masivo de partículas. 12. No hay morfología de vidrio falsa por todas partes. 13. Sin desenfoque excesivo. 14. Nada de tarjetas giratorias 3D sin sentido. 15. No hacer zoom constantemente. 16. No hay 20 estilos de animación diferentes. 17. Sin rebotes en la interfaz de usuario. 18. Nada de párrafos publicitarios extensos. 19. No imites plano por plano un anuncio de Apple en particular. En cambio, captura la filosofía y la calidad de producción. La seguridad visual debe provenir de la moderación. ─────────────────────────────────── FORMATO ─────────────────────────────────── Maestro principal: 1920 × 1080 60 fps 16:9 H.264 duración máxima: 15,0 segundos Tiempo de ejecución objetivo: aproximadamente 14,0–15,0 segundos. Debe funcionar como presentación de producto en redes sociales incluso sin sonido. Si es posible DESPUÉS de que el maestro esté terminado, cree también una composición deliberadamente recompuesta. Variante vertical/social. No te limites a recortar la composición del escritorio. Pero el ordenador de sobremesa es la prioridad. ─────────────────────────────────── HISTORIA / ARCO EMOCIONAL ─────────────────────────────────── No hagas de esto una lista de cinco características. Debe sentirse como un pensamiento continuo: CAOS → CONTROL → CLARIDAD → TAXTELLO Los primeros 1,5 segundos ya deben tener un aspecto de alta calidad. El primer momento significativo del producto debería producirse aproximadamente a los 2 segundos. Sin introducción con el logo de cinco segundos. Posible dirección narrativa: “Todo lo relacionado con tu negocio, por fin en un solo lugar.” Pero MUESTRA esto en lugar de explicarlo. Quiero aproximadamente cuatro ideas visuales para toda la película. Utilice las superficies REALES de Taxtello más potentes que encuentre en el repositorio. Entre los candidatos más destacados se encuentran: • Finanzcockpit / Panel de control • Rechnungen • Bélgica • Banco / coincidencia • Steuergesundheit / descripción general de impuestos No es necesario que los muestres todos. Elige la combinación visualmente más impactante. ─────────────────────────────────── GUION GRÁFICO SUGERIDO DE 15 SEGUNDOS ─────────────────────────────────── Considere esto como un buen punto de partida, no como una plantilla rígida. 0,00 – 1,20 NEGRO / AZUL MARINO. Aparece un pequeño destello dorado cálido. El brillo revela elegantemente la marca Taxtello o un fragmento de la misma. logotipo. Sin desvanecimiento de logotipo genérico. Piensa en precisión mecanizada. La cámara atraviesa o sobrepasa la marca y la interfaz de usuario comienza a emerger de ella. Muy poca o ninguna copia. ───────────────── 1.20 – 4.40 CONTROL FINANCIERO. Revela el Taxtello Cockpit real como una superficie de producto tridimensional. No se trata simplemente de una captura de pantalla colocada en la pantalla. Reconstruye/recorta/superpón la imagen para que las regiones individuales de la interfaz puedan animarse. La cifra financiera principal se resuelve con precisión. El gráfico se va reduciendo. Las métricas de apoyo se estabilizan un poco más tarde. Utilice un escalonamiento sutil. Puede aparecer una sola línea de texto, por ejemplo: “Alles im Blick.” o cualquier otra frase alemana igualmente corta si encuentra algo más apropiado. Máximo ~3–4 palabras. La interfaz debe seguir siendo reconocible como el producto real. ───────────────── 4.40 – 7.50 TRANSFORMACIÓN DE DOCUMENTOS Y CONTABILIDAD. Utilice un objeto visual de la escena anterior como transición. Ejemplo: Un punto dorado en un gráfico se expande hacia la esquina de un recibo o tarjeta. La cámara lo sigue. Se introduce un recibo/documento. Taxtello lo identifica u organiza. El documento se inserta elegantemente en su registro contable/financiero correspondiente. Utilice alineación magnética y precisión. Nada de escáneres láser de mala calidad. No hay tornado de papel flotante. Posible microtexto: “Belege. Erledigt.” Solo si mejora la escena. ───────────────── 7.50 – 10.70 DINERO / FACTURAS. Transfórmate o haz la transición de forma natural a la interfaz de Rechnungen real. Aprovecha un momento impactante: un cambio de estado de factura, un pago se resuelve, una cantidad se coloca en su lugar, o la descripción general se genera automáticamente. Los números deben ser táctiles y precisos. Utilice JetBrains Mono donde coincida con el producto real. El color dorado resalta el estado activo. El color verde se utiliza únicamente para un estado semántico genuinamente positivo. Texto potencial: “Geld. Im Griff.” Repito: opcional y extremadamente breve. ───────────────── 10,70 – 12,80 IMPUESTOS / CLARIDAD. Acceda a la interfaz real de Taxtello sobre asesoramiento fiscal y financiero. No afirme que Taxtello garantiza mágicamente la correcta declaración de impuestos. Comunicar visibilidad y control. Ejemplo: Múltiples señales ruidosas se fusionan en una visión general de los impuestos, tranquila y estructurada. Texto potencial: “Gestionar a simple vista.” Esta escena debería transmitir una sensación de calma mayor que la anterior. El ritmo se ralentiza brevemente. ───────────────── 12.80 – 15.00 RENTABILIDAD DE LA MARCA. Tire de la cámara hacia afuera. La interfaz de usuario se comprime o pliega en un único y atractivo objeto/superficie del producto Taxtello. La oscuridad regresa a su alrededor. El logotipo dorado de Taxtello se resuelve. Una breve línea de marca debajo. Explora frases finales impactantes como: “Tu negocio. Claro.” "Buchhaltung. Unter Kontrolle". “Einfach mehr Überblick.” "Alles fürs Business. An einem Ort." Elige en función del posicionamiento real del producto que encuentres en el repositorio. No utilices una frase simplemente porque yo la haya sugerido. El fotograma final debe tener la suficiente quietud para que se pueda apreciar. Termina con seguridad. No hay llamadas a la acción gigantescas que reboten. ─────────────────────────────────── TRANSICIONES ─────────────────────────────────── Esta es una de las partes más importantes. Quiero transiciones que hagan pensar al espectador: “Por supuesto, la siguiente escena surgió de ahí.” Bien: Línea del gráfico → borde del documento Píldora de oro → botón de factura Número financiero → importe en la factura borde de la tarjeta → siguiente superficie elemento de interfaz de empuje de la cámara geometría compartida Presentación de la máscara utilizando formas reales del producto. Malo: fundido cruzado limpieza aleatoria transición de espín fallo paneo rápido cada dos segundos SaaS genérico diapositiva izquierda spam de zoom-blon Los cortes directos solo están permitidos cuando un impacto rítmico deliberado beneficia a la película. ─────────────────────────────────── MOVIMIENTO ─────────────────────────────────── El movimiento necesita peso. Utilice curvas comparables a: cúbica-bezier(0.16, 1, 0.3, 1) donde proceda. Los diferentes elementos deberían tener tiempos de llegada ligeramente diferentes. Preferir: anticipación sobrepaso por debajo de ~2% asentamiento continuación de la moción velocidad compartida entre escenas Evita la elasticidad caricaturesca. El movimiento de la cámara debe dar la sensación de ser una sesión fotográfica macro de alta gama. Imagina que estamos filmando un objeto físico de alta gama, aunque se trate de software. ─────────────────────────────────── ILUMINACIÓN / MATERIALES ─────────────────────────────────── Utilice una iluminación ambiental extremadamente sutil. Posibles tratamientos: • Iluminación con borde dorado suave • degradado azul marino oscuro • tenue resplandor ambiental • Un suave reflejo especular que atraviesa una superficie • viñeta sobria • Grano sutil si ayuda materialmente Mantén la interfaz nítida. NO difumines el producto solo para darle un aspecto cinematográfico. Sin reflejos brillantes artificiales que destruyan la legibilidad. ─────────────────────────────────── TIPOGRAFÍA ─────────────────────────────────── Utilice muy poco texto. Ninguna frase debería competir con el producto. Los titulares generalmente deben caber en una sola línea. Use Plus Jakarta Sans. La tipografía fuerte puede ocasionalmente escalarse a gran escala y convertirse en una transición. el dispositivo en sí. Evite los comportamientos genéricos de gráficos en movimiento donde cada palabra se anima de forma independiente. La tipografía debe moverse como los objetos diseñados. ─────────────────────────────────── SONIDO / RITMO ─────────────────────────────────── Diseña el movimiento como si se cortara a aproximadamente 115–120 BPM: Premium, dinámico, sofisticado, no frenético. Los momentos importantes deben ir acompañados de música. Idioma de sonido sugerido: • Bajo impacto suave para grandes revelaciones • Clics táctiles de interfaz de usuario limitados • Sutil toque tonal metálico/cristalino • Movimiento suave de baja frecuencia durante las transiciones de cámara • Tono elegante y resuelto en el desenlace del logotipo Evitar: • enorme auge de los tráileres cinematográficos • Elevadores EDM • Fuertes silbidos por todas partes • Sonidos de “interfaz técnica” predefinidos • ritmo de rap • bajos agresivos Si no hay ningún recurso musical/de audio legalmente seguro en el proyecto, NO lo retire. Audio protegido por derechos de autor procedente de Internet. Entregue el máster visual sin música protegida por derechos de autor y cree una señal concisa. Hoja que describe dónde debe sonar la música/efectos de sonido. Si existe una opción de audio segura y local adecuada, utilícela. ─────────────────────────────────── SOLO PRODUCTOS ORIGINALES ─────────────────────────────────── Esto es fundamental. Inspeccione la corriente principal. No inventes pantallas. No inventes métricas que impliquen datos reales de clientes. Utilice valores claramente sintéticos/seguros para demostraciones si es necesario. No exponga accidentalmente ninguna información personal, de usuario de prueba o de producción. Reutiliza la estructura visual de la interfaz de usuario actual de Taxtello. Si una pantalla necesita separarse por movimiento, recréela fielmente en React desde El sistema de diseño real en lugar de simplemente escalar una captura de pantalla gigante. El resultado debe seguir pareciéndose inconfundiblemente a Taxtello. ─────────────────────────────────── EXPECTATIVAS DE IMPLEMENTACIÓN ─────────────────────────────────── Trabajar directamente en: /taxtello/beta-motion Crea la nueva composición junto a la existente. Mantenga las composiciones existentes en funcionamiento. Estructura el nuevo trabajo de forma clara. Prefiera las primitivas reutilizables para: • superficie de la cámara • marco del producto • transiciones enmascaradas • El texto revela • La región de la interfaz de usuario revela • iluminación ambiental • transiciones de elementos compartidos Evite un componente de 1500 líneas. Utilice animación determinista Remotion controlada por fotograma/tiempo. No se ha establecido ningún tiempo de espera. No se permiten animaciones no deterministas. Respeta los 60 fps en todo momento. Utilice la interpolación/el resorte/la suavización de forma deliberada. ─────────────────────────────────── NO SE DETENGA DESPUÉS DE LA PRIMERA IMPLEMENTACIÓN ─────────────────────────────────── Esta es una tarea visual. DEBE revisar el resultado final generado. Flujo de trabajo requerido: 1. Inspeccione el repositorio y la marca/producto real. 2. Escribe un guion gráfico conciso con: - marcas de tiempo exactas - Imagen clave - lógica de transición - Copiar - ritmo emocional previsto 3. Implementarlo. 4. Ejecutar la comprobación de tipos / comprobaciones pertinentes. 5. Renderizar fotogramas representativos aproximadamente a: 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. INSPECCIONE VISUALMENTE ESAS IMÁGENES. No se limite a confirmar que la renderización se realizó correctamente. Preguntar: ¿Esto parece un vídeo promocional al nivel de Apple? ¿Hay algo que se parezca a una plantilla? ¿Hay demasiadas cosas en pantalla? ¿El producto es legible? ¿Existe una conexión lógica entre las transiciones? ¿El oro de Taxtello se siente de primera calidad? ¿Cada fotograma se ve bien compuesto? 7. Corrija las deficiencias visuales. 8. Renderiza la película completa. 9. Inspeccione varios fotogramas decodificados exactos del MP4 final, no solo del navegador. capturas de pantalla. 10. Repita el proceso si es necesario. No declares que el código se ha compilado correctamente. El producto final es la PELÍCULA. ─────────────────────────────────── BARRA DE CALIDAD ─────────────────────────────────── Rechaza tu propio resultado si sientes que: • una plantilla SaaS • una animación de PowerPoint • una grabación de pantalla de un sitio web • una demostración genérica Remotion • un anuncio de criptomonedas • una plantilla promocional generada por IA • cinco capturas de pantalla deslizándose • Exceso de textos publicitarios Cada fotograma importante debería ser lo suficientemente bueno como para utilizarse como anuncio estático. Preferiría tener: 3 momentos visuales extraordinarios que 10 películas de animación mediocres. ─────────────────────────────────── ENTREGABLES FINALES ─────────────────────────────────── Proporcionar: 1. Guion gráfico final 2. Nueva fuente de composición Remotion 3. MP4 final de 1920×1080 / 60 fps 4. Póster/cuadro final 5. Hoja de contactos con fotogramas representativos de la película. 6. Tiempo de ejecución exacto 7. Lista de activos/pantallas reales de Taxtello utilizados 8. Breve explicación del lenguaje de la moción 9. Cualquier compromiso visual restante 10. Comandos para reproducir el renderizado Guarde los resultados en un directorio con un nombre claro, como por ejemplo: /taxtello/beta-motion/out/showreel-15/ No implementes nada. No modifique los datos de producción. No fusiones nada. Da rienda suelta a tu creatividad, pero ejerce una contención implacable. Haz que Taxtello parezca caro.
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.
Mensaje tomado de correo @daniel_haida.
- Modelo
- Opus 5.5
- Iteraciones
- Varias iteraciones
- Pila
- Remotion
- Publicado
Haz un vídeo como este
Crea vídeos como estos tú mismo —7 veces más barato que la API— con nuestra extensión para Google Chrome.. Funciona con Claude a través de MCP: usted describe la tarea y la extensión se encarga del proceso de generación, desde la solicitud hasta el archivo final. Genera vídeos, los ensambla, les añade voces y los traduce.
Automation — MCP for Google FlowAutopiloto de vídeo con IA: Veo 3 y avatares Google Vids vía Claude
TikTok Symphony Creative StudioVídeos con IA, avatares parlantes y doblaje TikTok por Claude Code
SeedFlow — Seedance 2.5Generación de vídeo por lotes en Dreamina: el mensaje Seedance especifica una extensión