claude code (opus 5.5) made the product film for taxtello, my bookkeeping app
every frame is code: react + remotion, 0 after effects
the soundtrack is code too, synthesized in python from sine waves and noise
1 prompt and 2 rounds of feedback
full prompt below, steal it ↓
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.
한국어 번역
claude code (opus 5.5)가 내 가계부 앱 taxtello의 제품 필름을 만들었다
모든 프레임이 코드다: react + remotion, after effects 0
사운드트랙도 코드다, python에서 사인파와 노이즈로 합성했다
프롬프트 1개와 피드백 2라운드
전체 프롬프트는 아래에, 그대로 가져가 ↓
당신은 Taxtello의 시니어 모션 디자이너, 제품 디자이너, Remotion 엔지니어입니다.
당신의 과제는 Taxtello를 위한 진정으로 프리미엄한, Apple 수준의 제품 필름을 만드는 것입니다.
이것은 일반적인 SaaS 설명 영상이 아닙니다.
이것은 기능 둘러보기가 아닙니다.
이것은 스타트업 템플릿 애니메이션이 아닙니다.
Taxtello가 성숙하고 값비싸며 아름답게 디자인된 금융 제품처럼 보이게 만드는, 최대 15초의 브랜드/제품 쇼릴을 원합니다.
이렇게 생각하세요:
Apple 제품 런칭 필름
× 프리미엄 핀테크
× 에디토리얼 모션 디자인
× 절제된 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/
오래된 아티팩트보다 가장 최신의 유효한 스크린샷/현재 소스를 우선하세요.
/taxtello/beta-motion에는 이미 24초짜리 Remotion 히어로 애니메이션이
있습니다.
그것을 교체하지 마세요.
그것을 회귀시키지 마세요.
그것의 현재 AI-connections 스토리라인을 이 새 필름에 억지로 밀어넣지 마세요.
이 작업을 위한 새롭고 독립적인 컴포지션을 만드세요. 예:
TaxtelloShowreel15
유용하다면 beta-motion의 좋은 인프라, 폰트, 렌더링 유틸리티, 모션 프리미티브,
이징 커브, 에셋 로딩 및 QA 인프라를 재사용해도 됩니다.
하지만 창작 측면에서는 새로운 필름이어야 합니다.
구현 전에 실제 Taxtello UI를 살펴보고 제품을 이해하세요.
존재하지 않는 기능을 만들어내지 마세요.
────────────────────────────────────
실제 TAXTELLO의 시각 언어
────────────────────────────────────
실제 디자인 시스템을 사용하세요.
핵심 팔레트:
배경:
#0c0f1a
돌출된 표면:
#111525
#131722
#1a2032
기본 브랜드 골드:
#e8b84b
골드 하이라이트:
#f5d07a
골드 깊이:
#9b6d18
기본 텍스트:
#e8eaf2
강한 웜 화이트:
#f6f4eb
보조 텍스트:
#8b93b5
긍정:
#34d399
부정/오류는 의미상 꼭 필요한 곳에만:
#f87171
타이포그래피:
Plus Jakarta Sans
숫자 / 금융 수치는 적절한 곳에:
JetBrains Mono
실제 Taxtello 워드마크 및/또는 Taxtello 마크를 사용하세요.
로고를 다시 그리거나 근사치로 만들지 마세요.
Taxtello의 골드는 노란 UI 범람이 아니라 귀중한 액센트처럼 느껴져야 합니다.
이렇게 생각하세요:
어두운 금속
따뜻한 골드
유리
잉크
정밀함
조용한 자신감
다음은 아닙니다:
사이버펑크
크립토
네온
게이밍
흔한 AI 퍼플
무지개 그라디언트
────────────────────────────────────
핵심 창작 규칙
────────────────────────────────────
이 규칙들을 가차 없이 따르세요:
1. 한 샷 = 하나의 아이디어.
2. 모든 장면은 숨 쉴 공간이 필요합니다.
3. 제품 UI가 주인공입니다.
4. 설명 문구를 곳곳에 남발하지 마세요.
5. 의도적인 이유가 없는 한 하드 컷을 사용하지 마세요.
6. 오브젝트 기반 전환을 선호하세요:
카드가 다음 카드가 되고,
차트 선이 커넥터가 되고,
영수증이 기장 항목이 되고,
숫자가 다른 인터페이스 요소가 되고,
카메라가 제품을 통과해 움직입니다.
7. 프리미엄 이징을 사용하세요.
선형 움직임은 없습니다.
8. 모션은 자연스럽게 겹쳐야 합니다.
모든 요소가 정확히 같은 프레임에서 시작하고 멈추면 안 됩니다.
9. 깊이는 아껴서 사용하세요:
원근,
부드러운 시차,
스케일,
전경/배경 분리,
가능하다면 제어된 피사계 심도.
10. 그냥 멋있어 보인다는 이유만으로 존재하는 효과는 없습니다.
11. 파티클 남발 금지.
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초는 이미 프리미엄하게 보여야 합니다.
첫 번째 의미 있는 제품 순간은 약 2초까지 일어나야 합니다.
5초짜리 로고 인트로는 없습니다.
가능한 내러티브 방향:
“당신의 비즈니스에 관한 모든 것이, 마침내 한곳에.”
하지만 설명하지 말고 이것을 보여주세요.
필름 전체에 걸쳐 대략 네 개의 시각적 아이디어를 원합니다.
저장소에서 찾은 가장 강력한 실제 Taxtello 표면을 사용하세요.
유력한 후보:
• Finanzcockpit / Dashboard
• Rechnungen
• Belege
• Bank / matching
• Steuergesundheit / tax overview
모두 보여줄 필요는 없습니다.
시각적으로 가장 강력한 조합을 고르세요.
────────────────────────────────────
제안하는 15초 스토리보드
────────────────────────────────────
이것을 강력한 출발점으로 다루되, 고정된 템플릿으로 삼지 마세요.
0.00 – 1.20
블랙 / 네이비.
작고 따뜻한 골드 빛이 나타납니다.
그 빛이 Taxtello 마크 또는 워드마크의 한 조각을
우아하게 드러냅니다.
흔한 로고 페이드 없음.
기계 가공된 정밀함을 생각하세요.
카메라가 마크를 통과하거나 지나가고, UI가 그로부터 나타나기 시작합니다.
문구는 아주 적게, 또는 전혀 없이.
─────────────────
1.20 – 4.40
재무 통제.
실제 Taxtello Cockpit을 입체적인 제품 표면으로 드러내세요.
스크린에 스크린샷을 얹은 것이 아닙니다.
개별 인터페이스 영역이 애니메이션될 수 있도록 재구성/크롭/레이어링하세요.
히어로 금융 숫자가 선명하게 자리 잡습니다.
차트가 그려집니다.
보조 지표는 조금 늦게 안정됩니다.
미묘한 스태거를 사용하세요.
한 줄의 문구가 나타날 수 있습니다. 예:
“Alles im Blick.”
또는 더 잘 맞는 독일어 구절이 있다면 그에 못지않게 짧은 다른 독일어 표현.
최대 약 3–4단어.
인터페이스는 실제 제품으로 알아볼 수 있어야 합니다.
─────────────────
4.40 – 7.50
문서 / 기장 변환.
이전 장면의 시각적 오브젝트를 전환으로 사용하세요.
예:
골드 차트 포인트가 영수증/카드의 모서리로 확장됩니다.
카메라가 그것을 따라갑니다.
영수증/문서가 들어옵니다.
Taxtello가 그것을 식별하거나 정리합니다.
문서가 해당 기장 / 금융 기록으로 우아하게 스냅됩니다.
자석 같은 정렬과 정밀함을 사용하세요.
싸구려 스캐너 레이저 금지.
떠다니는 종이 토네이도 금지.
가능한 마이크로 카피:
“Belege. Erledigt.”
장면을 개선할 경우에만.
─────────────────
7.50 – 10.70
돈 / 인보이스.
실제 Rechnungen 인터페이스로 자연스럽게 모프하거나 전환하세요.
하나의 강력한 순간을 사용하세요:
인보이스 상태가 바뀌고,
결제가 완료되고,
금액이 제자리로 이동하고,
또는 개요가 스스로 조립됩니다.
숫자는 촉각적이고 정밀하게 느껴져야 합니다.
실제 제품과 맞는 곳에는 JetBrains Mono를 사용하세요.
골드는 활성 상태를 강조합니다.
초록은 진정으로 긍정적인 의미 상태에만 사용합니다.
잠재적 문구:
“Geld. Im Griff.”
다시 말하지만 선택 사항이며 아주 짧습니다.
─────────────────
10.70 – 12.80
세금 / 명료함.
실제 Taxtello 세무 건강도 / 재무 가이드 표면으로 전환하세요.
Taxtello가 세금을 마법처럼 정확하게 보장한다고 주장하지 마세요.
가시성과 통제를 전달하세요.
예:
여러 개의 시끄러운 신호가 하나의 차분하고 구조화된 세금 개요로 접힙니다.
잠재적 문구:
“Steuern im Blick.”
이 장면은 이전 장면보다 차분하게 느껴져야 합니다.
리듬이 잠시 느려집니다.
─────────────────
12.80 – 15.00
브랜드 페이오프.
카메라를 바깥으로 빼세요.
UI가 하나의 아름다운 Taxtello 제품 오브젝트 / 표면으로 압축되거나 접힙니다.
주위로 어둠이 돌아옵니다.
골드 Taxtello 워드마크가 나타납니다.
아래에 짧은 브랜드 문구 하나.
다음과 같은 강력한 마지막 문구를 탐색하세요:
“Dein Business. Klar.”
“Buchhaltung. Unter Kontrolle.”
“Einfach mehr Überblick.”
“Alles fürs Business. An einem Ort.”
저장소에서 찾은 실제 제품 포지셔닝에 기반해 선택하세요.
내가 제안했다는 이유만으로 문구를 쓰지 마세요.
마지막 프레임은 각인될 만큼 충분한 정적을 가져야 합니다.
자신 있게 끝내세요.
거대하게 튀는 CTA 금지.
────────────────────────────────────
전환
────────────────────────────────────
이것은 가장 중요한 부분 중 하나입니다.
관객이 이렇게 생각하게 만드는 전환을 원합니다:
“당연히 다음 장면은 저기서 나온 거구나.”
좋은 예:
차트 선 → 문서 모서리
골드 필 → 인보이스 버튼
금융 숫자 → 인보이스의 금액
카드 모서리 → 다음 표면
인터페이스 요소를 통과하는 카메라 푸시
공유 지오메트리
실제 제품 형태를 이용한 마스크 리빌
나쁜 예:
크로스페이드
무작위 와이프
스핀 전환
글리치
2초마다 휩 팬
흔한 SaaS 왼쪽 슬라이드
줌 블러 남발
직접 컷은 의도적인 리듬적 임팩트가 필름에 도움이 될 때만 허용됩니다.
────────────────────────────────────
모션
────────────────────────────────────
모션에는 무게가 필요합니다.
다음에 준하는 커브를 사용하세요:
cubic-bezier(0.16, 1, 0.3, 1)
적절한 곳에.
요소마다 미묘하게 다른 도착 시간을 가져야 합니다.
선호하세요:
예비 동작
약 2% 미만의 오버슈트
안정화
모션 연속성
장면 간 공유 속도
만화 같은 스프링감을 피하세요.
카메라 움직임은 하이엔드 매크로 제품 촬영처럼 느껴져야 합니다.
소프트웨어이지만 실제 프리미엄 오브젝트를 촬영한다고 상상하세요.
────────────────────────────────────
조명 / 재질
────────────────────────────────────
극도로 미묘한 환경 조명을 사용하세요.
가능한 처리:
• 부드러운 골드 림 라이팅
• 어두운 네이비 폴오프
• 희미한 앰비언트 블룸
• 표면을 가로지르는 부드러운 스페큘러 하이라이트
• 절제된 비네트
• 실질적으로 도움이 된다면 미묘한 그레인
인터페이스는 선명하게 유지하세요.
시네마틱해 보이려고 제품을 블러 처리하지 마세요.
가독성을 파괴하는 가짜 광택 반사 금지.
────────────────────────────────────
타이포그래피
────────────────────────────────────
문구는 아주 적게 사용하세요.
어떤 문장도 제품과 경쟁해서는 안 됩니다.
헤드라인은 대체로 한 줄에 맞아야 합니다.
Plus Jakarta Sans를 사용하세요.
강한 타이포그래피는 때때로 아주 크게 확장되어 전환 장치
그 자체가 될 수 있습니다.
모든 단어가 개별적으로 애니메이션되는 흔한 모션 그래픽스 동작을 피하세요.
타이포그래피는 디자인된 오브젝트처럼 움직여야 합니다.
────────────────────────────────────
사운드 / 리듬
────────────────────────────────────
모션을 대략 115–120 BPM에 맞춰 컷된 것처럼 디자인하세요:
프리미엄하고, 운동감 있고, 세련되며, 정신없지 않게.
중요한 순간은 음악적으로 착지해야 합니다.
제안하는 사운드 언어:
• 주요 리빌에는 낮고 부드러운 임팩트
• 절제된 촉각적 UI 클릭
• 미묘한 금속/유리 톤의 틱
• 카메라 전환 중 부드러운 저주파 움직임
• 로고 페이오프에서 우아하게 해결되는 톤
피하세요:
• 거대한 시네마틱 트레일러 붐
• EDM 라이저
• 도처에 깔린 시끄러운 휙 소리
• 흔한 “테크 인터페이스” 사운드
• 랩 비트
• 공격적인 베이스
프로젝트에 법적으로 안전한 음악/오디오 에셋이 없다면, 인터넷에서 저작권 있는
오디오를 가져오지 마세요.
저작권 있는 음악 없이 비주얼 마스터를 납품하고, 음악/SFX가 어디에 들어가야 하는지
설명하는 간결한 큐 시트를 만드세요.
적합하고 안전한 로컬 오디오가 있다면 사용하세요.
────────────────────────────────────
실제 제품만
────────────────────────────────────
이것은 매우 중요합니다.
현재 main을 살펴보세요.
화면을 만들어내지 마세요.
실제 고객 데이터를 암시하는 지표를 만들어내지 마세요.
필요하다면 명백히 합성된/데모에 안전한 값을 사용하세요.
개인 정보, 테스트 사용자 정보, 프로덕션 정보를 실수로도 노출하지 마세요.
실제 Taxtello UI의 시각 구조를 재사용하세요.
화면을 모션으로 분리해야 한다면, 거대한 스크린샷을 단순히 확대하는 대신 실제
디자인 시스템에서 React로 충실히 재현하세요.
결과물은 여전히 틀림없이 Taxtello처럼 보여야 합니다.
────────────────────────────────────
구현 기대 사항
────────────────────────────────────
다음에서 직접 작업하세요:
/taxtello/beta-motion
기존 컴포지션 옆에 새 컴포지션을 만드세요.
기존 컴포지션이 계속 작동하게 하세요.
새 작업을 깔끔하게 구조화하세요.
다음에는 재사용 가능한 프리미티브를 선호하세요:
• 카메라 표면
• 제품 프레임
• 마스크 전환
• 텍스트 리빌
• UI 영역 리빌
• 앰비언트 조명
• 공유 요소 전환
1,500줄짜리 단일 컴포넌트를 피하세요.
프레임/시간으로 구동되는 결정론적 Remotion 애니메이션을 사용하세요.
setTimeout 금지.
비결정론적 애니메이션 금지.
전체적으로 60 fps를 준수하세요.
보간/스프링/이징을 의도적으로 사용하세요.
────────────────────────────────────
첫 구현 후 멈추지 마세요
────────────────────────────────────
이것은 시각적 작업입니다.
반드시 실제 렌더된 결과물을 검토해야 합니다.
필수 워크플로:
1. 저장소와 실제 브랜드/제품을 살펴봅니다.
2. 다음을 포함한 간결한 스토리보드를 작성합니다:
- 정확한 타임스탬프
- 핵심 비주얼
- 전환 로직
- 문구
- 의도된 감정 리듬
3. 구현합니다.
4. 타입체크 / 관련 검사를 실행합니다.
5. 대략 다음 시점의 대표 프레임을 렌더합니다:
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. 그 이미지들을 시각적으로 검사합니다.
렌더링이 성공했다는 것만 확인하지 마세요.
질문하세요:
이것이 Apple 수준의 제품 필름처럼 보이는가?
템플릿처럼 보이는 것이 있는가?
화면에 너무 많은 것이 있는가?
제품이 읽히는가?
전환들이 논리적으로 연결되는가?
Taxtello 골드가 프리미엄하게 느껴지는가?
모든 프레임이 구성되어 보이는가?
7. 시각적 약점을 고칩니다.
8. 완성된 필름을 렌더합니다.
9. 브라우저 스크린샷만이 아니라 최종 MP4에서 디코드한 정확한 프레임 여러 개를
검사합니다.
10. 필요하면 다시 반복합니다.
코드가 컴파일된다는 이유로 성공을 선언하지 마세요.
납품물은 FILM입니다.
────────────────────────────────────
품질 기준
────────────────────────────────────
다음처럼 느껴진다면 자신의 결과를 거부하세요:
• SaaS 템플릿
• PowerPoint 애니메이션
• 웹사이트 화면 녹화
• 흔한 Remotion 데모
• 크립토 광고
• AI가 생성한 프로모 템플릿
• 스크린샷 다섯 장이 미끄러지는 것
• 과도한 마케팅 문구
모든 중요한 프레임은 정지 광고로 쓸 수 있을 만큼 좋아야 합니다.
저는 차라리:
3개의 비범한 시각적 순간을
10개의 평범한 기능 애니메이션보다
더 원합니다.
────────────────────────────────────
최종 납품물
────────────────────────────────────
제공하세요:
1. 최종 스토리보드
2. 새 Remotion 컴포지션 소스
3. 1920×1080 / 60fps 최종 MP4
4. 포스터/최종 프레임
5. 필름의 대표 프레임이 담긴 콘택트 시트
6. 정확한 러닝타임
7. 사용한 실제 Taxtello 에셋/화면 목록
8. 모션 언어에 대한 간단한 설명
9. 남아 있는 시각적 타협점
10. 렌더를 재현하는 명령
출력물은 다음과 같이 명확히 이름 붙인 디렉터리에 저장하세요:
/taxtello/beta-motion/out/showreel-15/
아무것도 배포하지 마세요.
프로덕션 데이터를 수정하지 마세요.
아무것도 병합하지 마세요.
창작적으로 전력을 다하되, 가차 없는 절제를 발휘하세요.
Taxtello를 값비싸게 보이게 하세요.
