/minara-usecase-video — Minara Anwendungsfall- und Tutorial-Videos
Abgeleitet aus der Erstellung von Fall 1 (Mobile App: eine Frage stellen → BTC-Strategie → mit einem Klick ausführen) und Fall 3 (Desktop Strategy Studio: ein Satz → Choice Boxes → Backtest → Optimieren → Live schalten) im Jahr 2026-10.
Desktop-Referenz: assets/pc-monitor-frame.html und assets/helpers-reference.js (Helfer können direkt kopiert werden).
Wie sich dies von minara-video unterscheidet (zuerst lesen)
| minara-video (Marketing-Demo) | minara-usecase-video (diese Fähigkeit) | |
|---|---|---|
| UI | Kopiert das Produkt nicht; minimales Redesign mit großer Schrift | Originalgetreu: Befolge die Komponenten, Größen, Farben und Texte des Frontend-Codes |
| Text | Schreibe eigenen Marketing-Text | Schaltflächen/Titel/Eingabeaufforderungen verwenden den Originaltext des Produkts wortwörtlich (Gebietsschemata); kopiere Grammatikfehler wie sie sind |
| Interaktionspfad | Kann gekürzt oder zusammengefasst werden | Vollständiger realer Pfad: Jeder Klick, jedes Modal und jede Checkbox muss vorhanden sein, in derselben Reihenfolge wie im Code |
| Kamera | Reichhaltige Kamerabewegungen | Nur bei Klicks/Eingaben merklich hereinzoomen und dem Cursor folgen; ansonsten still; Klarheit geht vor |
| Bildschirmtext | Keine Anmerkungstexte | Keine Untertitel im Bild; die 3-Sekunden-Titelkarte am Anfang ist die einzige Ausnahme; Texteinblendungen sind eine separate Version (in einem anderen Projektordner) |
| Struktur | Mehrere Szenen werden separat gerendert | Eine einzige durchgehende Komposition (wie eine Bildschirmaufnahme) |
Harte Regeln, die von minara-video übernommen wurden: Geist-Schriftart, Signatur-Easing minaraSnap = cubic-bezier(0.95,0.03,0,0.98), Übergänge ≤0,5s, kein Math.random() / repeat:-1, Timeline paused:true und registriert unter window.__timelines. Frage zuerst den Operator bei einer Strategie mit maximalem Drawdown >20%. Die Testseite muss eine ziehbare Timeline haben. Beim Start zuerst Skill(hyperframes) ausführen, um die Kompositionsregeln zu laden.
Themen und Demo-Assets (vom Operator festgelegt, 2026-10-15)
- Aktienstrategien zuerst: Standardmäßig werden Aktien-/TradFi-Instrumente für die Demo verwendet (z.B. TradFi 30, einzelne US-Aktien, Indizes). Strategienamen, Asset-Pools, Bestände und die Tickerleiste sollten Aktien bevorzugen.
- Krypto ist sekundär: Große Coins wie BTC und ETH können vorkommen, aber nicht als Hauptthema. Wenn ein Video sowohl Aktien als auch Krypto enthält, setze Aktien an den Anfang und gib ihnen mehr Zeit.
- Keine Meme-Coins: Es sei denn, der Operator bittet explizit darum. Keine Meme-Coins (DOGE, PEPE, WIF, BONK usw.) im Bild, in Asset-Pools, der Tickerleiste, KI-Antworten oder Beispiel-Eingabeaufforderungen. Wenn die Standarddaten des Produkts sie enthalten, ersetze sie.
- Wähle Assets nach dieser Regel beim Schreiben des Drehbuchs und Storyboards. Wenn Beispiele im Produktmaterial nicht passen, tausche Aktieninstrumente ein, bevor neu gebaut wird, und notiere den Tausch im Drehbuch.
Wahrheitsquellen (nach Priorität)
- Frontend-Code (zuerst den neuesten Stand ziehen; das Commit-Datum im Abschnitt "Basis" des Drehbuchs notieren)
- Web: Das Web-Frontend-Repo des Produkts (
git pullausführen) - Mobile: Der Quellcode der mobilen App des Produkts (
apps/mobile/src)- Texte:
locales/en.json(die chinesische Version befindet sich in der entsprechenden zh-Datei) - Farben/Abstände:
theme/colors.light.ts,theme/tokens.ts - Komponenten:
ui/,features/<module>/(z.B.features/strategy/strategy-card,run-strategy,running-detail,features/agent/composer)
- Texte:
- Web: Das Web-Frontend-Repo des Produkts (
- Bildschirmaufnahmen/Screenshots vom Operator (im
use case/-Asset-Ordner): Verwende sie für Layout, Hierarchie und die echten visuellen Details. ⚠️ Diese Assets dienen als UI-Referenz, nicht als Inhaltsreferenz – "ignoriere, was ein Agent sagt"; wir gestalten den Antwortinhalt selbst. - Drehbuch-Markdown: Aufteilung der Einstellungen, Dialogzeilen, Texteinblendungen.
Interaktionen, die das Video zeigen muss, die der Code aber nicht unterstützt (z.B. die klickbare Strategiekarte im Chat von Fall 1), können gebaut werden, aber teile dem Operator klar mit, dass dies eine geplante Interaktion ist, die der aktuelle Code noch nicht hat, und baue sie aus der nächstgelegenen vorhandenen Komponente nach (Fall 1 folgt MarketplaceStrategyCard; nach dem Tippen auf "Ausführen" durchläuft es denselben Ausführungspfad wie der Marktplatz).
Arbeitsablauf
1. Drehbuch prüfen
- Überprüfe jede Einstellung anhand des neuesten Codes: Schaltflächennamen, Seitenreihenfolge, erforderliche Schritte (z.B. das Risikohinweis-Kontrollkästchen, der Backtest muss bestehen, bevor bereitgestellt wird), Schwellenwerte.
- Wenn das Drehbuch bearbeitet wird, sagt der Operator normalerweise "überschreibe einfach die Originaldatei"; wenn er nur einen Vorschlag möchte, sagt er "gib mir zuerst einen Vorschlag, bearbeite das Drehbuch nicht" – unterscheide diese Fälle.
- Wenn ein Markdown mehrere Fälle enthält, teile es bei Bedarf in Einzelfall-Dateien auf.
2. Rückwärts vom Interaktionspfad zum Storyboard arbeiten
- Liste den realen Pfad aus dem Code als Tabelle auf: Titel jedes Bildschirms, Komponenten, Klickziel und nächster Bildschirm. Beispiel (mobile, Ausführen einer Strategie):
Ausführen → Wallet auswählen → Weiter → Konfiguration (Drawdown-Obergrenze Risikokontrolle / Auto-Update / Risikohinweis prüfen) → Ausführen → Erfolgsseite Wird ausgeführt (Details anzeigen / Benachrichtige mich) → Details zur ausgeführten Strategie → zurück → Reiter Strategie Wird ausgeführt - Wenn es eine Timeline gibt, gehe direkt zu
storyboard.html(Vorlageassets/storyboard-template.html), dann zu einem Sekunden-für-Sekunden-Plan; schreibe Code erst, nachdem der Operator bestätigt hat.
3. Spezifikationen
| Element | Mobile App | Desktop |
|---|---|---|
| Leinwand | Komposition 1080×1920, Export 1440×2560 / 60fps | Komposition 1920×1080, Export 2560×1440 / 60fps |
| UI | 390pt breiter App-Bildschirm, skaliert auf 90% des Rahmens, Abstand auf allen Seiten, abgerundete Ecken + 1px Rand | 1440×810 Webseite platziert in einem Computermonitor (dunkle Lünette + Standfuß, Skalierung 1.15), Schriftgrößen 10–15% größer als die Originalgrößen des Produkts |
| Thema / Sprache | Vom Operator festgelegt; Standard Englisch + das helle Standardthema der App | Gleiches wie links |
| Demo-Daten | 3–4-stelliger PnL, Drawdown <20%, als Demo markiert | Gleiches wie links |
| Öffnung | 0–3s Titelbild, dann der Walkthrough | Gleiches wie links |
Mobiles Koordinatensystem: K = 1080*0.9/390, #app platziert bei left:54px; top:96px, transform: scale(K). Schreibe alle Element-CSS in App-internen pt-Koordinaten, neu erstellt aus den Größen im Code.
Desktop-Koordinatensystem: K = 1.15, OX = 132, OY = 38 (px-Position der oberen linken Ecke des Bildschirms im Rahmen), 1440×810 pt. Layout: linke Seitenleiste 264 / mittlere Spalte 766 / rechter Assistent 410, untere Tickerleiste 26.
Desktop muss einen Computermonitor verwenden (vom Operator festgelegt, 2026-10-15): Die Produkt-UI füllt nicht mehr den gesamten Rahmen aus; sie sitzt im Bildschirm eines Computermonitors, mit Monitorlünette und -standfuß dahinter. Verwende assets/pc-monitor-frame.html direkt:
- Struktur:
#cam>#stand-neck+#stand-base+#monitor>#screen>#app. Monitor-Außenrahmen 1684×959.5 bei links 118 / oben 24, 14px Lünette, 26 Eckenradius; Bildschirm 1656×931.5, 12 Eckenradius; Standfuß zentriert unter dem Monitor. Der Hintergrund behält den dunklen radialen Verlauf. - Monitor und Standfuß befinden sich beide innerhalb von
#cam, sodass sie beim Hineinzoomen mit der UI skalieren; der Cursor und die Klickwelle sind ebenfalls innerhalb von#cam, positioniert mitOX + x*K,OY + y*K. DiecamTo-Formel ändert sich nicht; tausche nur die drei WerteK / OX / OYaus. - Die UI ist etwa 14% kleiner als wenn sie den Rahmen ausgefüllt hat (1.333 → 1.15), sodass der Text in Totale etwas kleiner ist; die Hineinzooms bei Klicks und Eingaben gleichen das aus. Wenn der Operator den Text in der Totale zu klein findet, erhöhe alles eine Stufe gemäß der Schriftgrößenspezifikation; entferne den Monitor nicht.
- Nachdem die Titelkarte ausgeblendet ist, blendet sich der gesamte Monitor (einschließlich Standfuß) von 1.04× aus wieder ein.
- Mobile erhält keinen Monitor; behalte den aktuellen 90%-Bildschirm mit abgerundeten Ecken und Rand.
Schriftgrößenspezifikation (Desktop; der Operator, 2026-10-15: "die Schrift in der gesamten UI etwas größer machen, damit Benutzer sie auf ihren Handys lesen können") – Das endgültige Video wird auf Handys angeschaut, daher sind dies die Mindestgrößen:
| Element | pt |
|---|---|
| Seitentitel (Strategiename) | 21 |
| Seitenleisten-Navigation / Tabs / Symbolleiste / Schaltflächen / Untertabs | 16–16.5 |
| Assistententext / Benutzer-Blase / Choice Box-Optionsbeschreibung | 15 / 15 / 14 |
| Choice Box-Frage / Optionsname | 17.5 / 16 |
| Metrikkarten-Label / Wert | 14 / 22 |
| Tabelle / Code | 15 / 14.5 (Zeilenhöhe 24) |
| Modal-Titel / Feldlabel / Eingabe, Chip, Schaltfläche | 20 / 14.5 / 15.5–16 |
Wenn größerer Text nicht mehr passt, entferne unwichtigen kleinen Text (z.B. "1.264 Trades" und "684W 580L" in den Metrikkarten); verkleinere keine Schriftgrößen. Wenn der mobile Bildschirm in einem Desktop-Video platziert wird, verwende Skalierung 1.2, zentriert.
Titelkarte (Spezifikation vom 2026-10-15): 0–3s dunkler Hintergrund, eine große zentrierte Überschrift (Geist 76px / 650, text-wrap: balance), Wörter erscheinen nacheinander (0.09s Abstand); bei 2.55s skaliert die Überschrift hoch und wird ausgeblendet; bei 2.75s blendet sich die Produkt-UI von 1.04× auf 1× aus ein. Der Überschriftstext kommt vom Operator, z.B. Fall 3 "Verwandle deine Trading-Idee in eine Live-Strategie.". Implementierung: Schreibe den Walkthrough in tl (nicht pausiert), verwende eine äußere master = gsap.timeline({paused:true}) für den Titel, master.add(tl, 3), und registriere master; addiere 3 zu sowohl data-duration als auch DUR auf der Testseite.
4. Komposition schreiben
Lege das Projekt in $VIDEO_WORKSPACE/hyperframes/<slug>/:
index.html einzelne Komposition (data-composition-id="main")
_test.html Testseite (kopiere assets/test-wrapper.html, ändere DUR und Timeline-ID)
assets/ lokales gsap, CustomEase, Geist woff2, minara-avatar.png (keine CDN-Abhängigkeit)
references/ Kopien der Quell-Assets
audio/ lines.tsv (Voiceover-Text), vo-placement.tsv (Timing)
storyboard.html / _backups/ / output/
Kernhelfer befinden sich in assets/helpers-reference.js (echter Code aus Fall 1):
R(el): Miss die App-internen pt-Koordinaten des Elements vor jeglicher Bewegungsanimation und speichere sie inMAP. Alle späteren Klicks verwenden diese vorhergesagten Koordinaten – Messen, nachdem der Bildschirm aus dem Rahmen geschoben wurde, liegt um 390pt daneben, und der Cursor verfehlt sein Ziel.camTo(t, px, py, s, d)/camReset: Kamerazooms. Wenns>1, ziehe den Fokuspunkt etwas zur Mitte hin (Desktop:720+(px-720)*0.75, gleiches für y), sodass ganze Zeilen nicht abgeschnitten werden; beschränke die Position innerhalb des Rahmens, sodass nichts außerhalb sichtbar ist. Verwende die VariablecurS, um die aktuelle Skalierung zu verfolgen (camTosetzt sie,camResetsetzt sie auf 1 zurück).curShow / curMove / tap / moveTap: Mobile verwendet einen halbtransparenten weichen Touch-Punkt, Desktop einen weißen Pfeil-Cursor; Klicks drücken nach unten + Welle. WenncurS>1, führtmoveTapsynchroncamTozum Klickziel aus (Dauer = Bewegungsdauer + 0.15s), sodass der Rahmen dem Cursor beim Zoomen automatisch folgt.pushIn / pushBack: Horizontaler Seitenschub, 0.45s.splitWords + stream: KI-Antworten werden Wort für Wort eingeblendet.
5. Kamera und Tempo (Regeln aus den eigenen Worten des Operators)
- "Wenn die Maus klickt oder wenn getippt wird, zoome in den Bereich dieser spezifischen Aktion hinein, und der Rahmen kann der Maus folgen; wenn nicht geklickt wird, ist kein Hineinzoomen nötig."
- "Mache den Zoom, bei dem sich der Cursor bewegt, deutlicher" (2026-10-15, ersetzt die alte ≤1.25-Obergrenze). Desktop-Skalierungen:
Aktion Skalierung Tippen (Eingabefeld) 1.7 Klicken auf eine Schaltfläche / Tab / Seitenleiste 1.6 Lesen des Assistentenchats, Choice Box 1.5 Aufeinanderfolgende Aktionen innerhalb eines Modals 1.45, dem Cursor folgend Mobile Fall 1 verwendete 1.25; neue mobile Videos sollten ebenfalls "deutlich" sein – bestätige die Skalierung mit dem Operator. - Bei aufeinanderfolgenden Klicks (Choice Box-Optionen, die Bereitstellungs-Modals) bleibe in der Nahaufnahme und folge die ganze Zeit; ziehe nicht jedes Mal heraus und wieder hinein.
- Wenn ein Klick zu einem Ergebnis führt, das der Betrachter sehen muss (Tabs wechseln, By symbol / Fills, Backtest-Ergebnisse erscheinen, Metriken aktualisieren, Symbolleistenwerte nach KI-Generierung gefüllt), gehe 0.5–0.6s nach dem Klick zurück zur Totale.
- Beim Hineinzoomen ist es akzeptabel, wenn die oberen und unteren Kanten eines Modals kurzzeitig den Rahmen verlassen, aber der Cursor und das angeklickte Ziel müssen im Rahmen bleiben, und Text darf den Rahmenrand nicht berühren.
- "Keine ausgefallenen Kamerabewegungen nötig; das Hauptziel ist es, jeden Schritt klar zu zeigen"; wechsle in normalem Voiceover-Tempo, ohne Ruckeln.
- Keine Untertitel im Bild.
6. Checkliste für Genauigkeit (Fallstricke aus Fall 1)
- Tippeffekt: Ein
<span>pro Zeichen, nacheinander mittl.set(span,{display:'inline'})eingeblendet. Schreibe nicht das gesamtetextContentin jedem Frame neu – Rückwärtssuchen hinterlässt falsche Zwischenwerte (Version 2 hatte ein zusätzliches "C" im Platzhaltertext). - Zeilenumbruch im Eingabefeld: Während des Setups Zeichen nacheinander einblenden, um zu messen, welches Zeichen auf zwei Zeilen umbricht und wie stark die Höhe wächst; verschiebe in diesem Moment die darüber liegenden Quick-Question-Karten synchron nach oben.
- Schichtung: Die Quick-Question-Karten müssen über der weißen Hintergrundmaske des Eingabefelds liegen; die Detailseite muss die Tableiste überdecken (Detailseiten-z-index > tabbar).
- Klassenkonflikte vermeiden: Die Texteinblendungsebene verwendet das
hz--Präfix (hz-main / hz-note / hz-cta); es kollidierte einmal mit der.cta-Klasse des Ausführungsbereichs und erzeugte einen schwarzen Balken. - Inhalte nach einem Seitenwechsel dürfen nicht unter die Statusleiste / obere Leiste rutschen; Tabellen dürfen keinen grauen Hintergrund haben.
- Verwende immer
immediateRender:falsebeifromTo, sonst ist der erste Frame beim Suchen falsch. - Bildschirmaufnahmen müssen abdecken: vor und nach jedem Klick, mitten im Tippen, im Moment eines Zeilenumbruchs und nach jedem Seitenwechsel.
Desktop-Ergänzungen (Fallstricke aus Fall 3)
- Vermeide …
…