motionhub-dev/motionhub

Einen Film in einem Motion erstellen

Ein Motion ist ein Look für erklärende und kommentierte Videos, der schriftlich festhält, wie ein Film aussieht (Hintergrund, Farbe, Schrift) und wie er sich bewegt (wie Dinge erscheinen, sich verändern und verschwinden). Er enthält keinen Film: keine Geschichte, kein Drehbuch, keine Szenen und kein Timing. Du bringst die Geschichte mit; der Motion entscheidet über das Aussehen und die Bewegung. Das Format ist SPEC.md (motion/0.5). Ein Motion wird durch seine ID, den GitHub-Namen seines Erstellers und seinen Slug identifiziert: @iamsuosi/lab-notebook. Auf motionhub hat jede ID beide.

Ein Motion ist ein Verzeichnis:

Datei	Was du daraus entnimmst
motion.json	Seinen Gültigkeitsbereich und Slug (gemeinsam seine ID), Version, Name, Kurzbeschreibung, Autoren und Lizenz; lang ist die Sprache der MOTION.md; fit gibt an, wofür er geeignet ist
MOTION.md	Die Beschreibung des Looks in Worten. Immer fünf Abschnitte: Essence, Colour, Type, Motion, Avoid. Die Definition des Formats: https://github.com/motionhub-dev/motions/blob/main/SPEC.md#5-motionmd
tokens.json	Die genauen Werte als W3C-Design-Tokens: color, font, und oft duration und cubicBezier
poster.jpg	Ein Einzelbild eines mit diesem Look erstellten Films
CREDITS.md	Jede benötigte Schriftart und jedes Asset mit Lizenz und Quelle
react/	Die Komponenten des Motions für jede React-Engine (Abschnitt 5): parts/, die von ihnen in assets/ importierten Dateien und ein Bild jeder Komponente in previews/
<tool>/	Vorgefertigte Teile für ein anderes Tool. Ignoriere die Verzeichnisse der Tools, die du nicht verwendest

Ein Motion kann auch aus einer einzigen Datei bestehen: einer MOTION.md, die mit einem Front Matter beginnt, das die Werte für spec, name und tokens in Kurzform enthält (floor: "#E8D5B7"). Es enthält dieselben Informationen wie tokens.json, hat aber keine Komponenten, kein Poster und keine Credits.

1. Den Motion auswählen

• Die Person hat einen benannt (einen Namen, eine ID oder einen motionhub.dev/m/<id>-Link): verwende diesen.
• Das Projekt hat einen: MOTION.md im Stammverzeichnis des Projekts, oder alternativ motion/MOTION.md: verwende diesen und fahre mit Abschnitt 3 fort. Ein Projekt kann mehrere Motions in motions/ enthalten: Kopien von motionhub unter motions/@<scope>/<slug>/ und eigene unter motions/<name>/. Verwende den Motion, der für jede Szene geplant ist; falls der Plan nichts dazu sagt, frage nach, welcher gemeint ist. Ein Projekt kann auch andere Designdateien enthalten, wie z. B. frame.md oder design.md. Der Motion entscheidet darüber, wie der Film aussieht und sich bewegt; folge den anderen Dateien für das, was er nicht vorgibt, und teile der Person mit, wo sie abweichen.
• Andernfalls suche: npx @motionhub/cli search <Wörter> (ohne Wörter werden alle aufgelistet), oder lies das Inhaltsverzeichnis unter https://motionhub.dev/api/motions.json, dessen Zeilen slug (die ID), name, line, fit, catalogs, tags, lang, poster und package enthalten, mit Pfaden relativ zu https://motionhub.dev. Beginne mit der Form des Films: catalogs nennt die Kataloge, in denen sich ein Motion befindet (explainers, data, stories, tutorials, breakdowns und footage für Look, der über ein von der Person bereitgestelltes Video gelegt wird – biete diesen also nur an, wenn sie ihn hat; https://motionhub.dev/api/catalogs.json listet sie auf). Stimme dann das Thema und das Medium mit fit ab, falls der Motion es hat: fit.for sagt, wofür er geeignet ist, und fit.not gibt an, womit er schlecht umgeht. Ein Motion, der für das Thema des Films erstellt wurde, ist besser geeignet als einer, der viele Themen abdeckt. Biete zwei oder drei mit ihren Postern an und lass die Person wählen. Wähle nur selbst aus, wenn du darum gebeten wurdest.

2. Herunterladen

Kopiere den gesamten Motion in das Projekt, damit der Film die Version behält, in der er erstellt wurde:

npx @motionhub/cli get <id>            # in ./motions/<id>/, auf SHA-256 des Index geprüft, in motions.lock.json aufgezeichnet
npx @motionhub/cli get                 # jeden Motion, den motions.lock.json aufzeichnet, wenn das Projekt einen hat und diese fehlen

Ein Film kann in mehreren Motions erstellt werden, einer für jeden Teil oder jede Art von Szene: lade jeden herunter, und sie liegen nebeneinander in ./motions/. Ändere niemals eine Kopie in ./motions/@<scope>/: um eine anzupassen, kopiere sie nach ./motions/<name>/ und ändere sie dort.

Ohne Node: Lade https://motionhub.dev/m/<id>/<version>.tgz herunter, prüfe sie gegen den package.sha256 der Tabellenzeile und entpacke sie. Ohne Shell: Rufe nacheinander https://motionhub.dev/m/<id>/MOTION.md, tokens.json, motion.json und CREDITS.md ab.

3. Vollständig lesen

Lies die gesamte MOTION.md bevor du etwas zeichnest, sowie tokens.json daneben oder die tokens im Front Matter. Wenn eine MOTION.<lang>.md vorhanden ist, die der von dir verwendeten Sprache entspricht, kannst du sie lesen; sie enthält nichts, was MOTION.md nicht enthält.

4. Den Film erstellen

• Werte sind exakt. Jede Farbe, Schriftart, Dauer und Bewegungslinie stammt aus den Tokens des Motions, mit Namen, in den Begriffen deiner Engine. Ein Schrift-Token ist ein Stack: verwende die Schriftarten in der angegebenen Reihenfolge. Nähere eine Farbe niemals nach Augenmaß an.
• Essence bestimmt jedes Bild. Jedes Bild muss die darin genannten Eigenschaften aufweisen und darf nicht in das abdriften, was der Motion seiner Aussage nach nicht ist.
• Colour und Type sind Rollen, keine Palette. Verwende jedes Token nur für das, wofür sein Abschnitt es vorsieht; was darin als ungefärbt bezeichnet wird, bleibt ungefärbt.
• Motion ist Timing. Dinge erscheinen, verändern sich und verschwinden so, wie es angegeben ist, synchron zum gesprochenen Text oder zur Musik, wie es angegeben ist. Was darin als unbeweglich bezeichnet wird, bleibt stehen.
• Avoid ist bindend. Bevor du fertig bist, prüfe den Film gegen jeden Punkt unter Avoid.
• Erfinde niemals eine Zahl. Jede Zahl, jedes Datum und jede Zählung im Film stammt aus der Geschichte der Person oder einer von ihr angegebenen Quelle. Fehlt eine, hinterlasse einen sichtbaren Platzhalter und informiere die Person.
• Die Geschichte ist deine. Gestalte jede Szene entsprechend der Aussage dieses Films. Kopiere nicht das Motiv, die Wörter oder das Layout des Posters oder eines Beispiels.
• Komponenten sind eine Abkürzung. Wenn der Motion react/ oder ein Verzeichnis für das von dir verwendete Tool enthält, verwende seine Teile (Abschnitt 5). Die Beschreibungen in Worten und Tokens haben trotzdem Vorrang.

5. In deiner Engine

Wenn der Motion react/ enthält, verwende seine Komponenten, anstatt den Look neu zu zeichnen. Dabei handelt es sich um React-Komponenten, die nur @motionhub/runtime importieren, und ein Binding versorgt sie mit ihrer Zeit und den Tokens in deiner Engine:

Engine	Binding	Beschreibung
Remotion	npm i @motionhub/remotion	Umschließe die Komposition mit <MotionProvider tokens={tokens}> (import tokens from '../motions/<id>/tokens.json'), füge <MotionFonts /> hinzu und importiere Komponenten aus ../motions/<id>/react/parts/<file>.tsx. Bei mehreren Motions umschließe jede Szene mit <MotionScope tokens> von @motionhub/runtime
HyperFrames	npm i @motionhub/hyperframes, dann npx motionhub-hyperframes --out assets/motion (für jeden Motion in ./motions/)	Lade assets/motion/motion.css und motion.js; Motion.mount(el, (t) => [...]) zeichnet Motion.components aus deiner GSAP-Timeline. Bei mehreren Motions ist jeweils Motions[<id>] verfügbar

Lies zuerst die README des Bindings. Das meta jeder Komponente gibt an, wofür sie gedacht ist (purpose, line, fits) und was jeder Parameter bedeutet, und react/previews/<file>.jpg zeigt sie an; lies den Code einer Komponente nur, wenn du sie verwendest. Ein Parameter vom Typ progress läuft von 0 bis 1: animiere ihn in deiner Engine, synchron zu den Wörtern, die ihn aufrufen. Eine Komponente, die in 3D zeichnet, importiert three, das du installieren musst. Caption (von @motionhub/runtime) zeichnet eine gesprochene Zeile im Caption-Skin des Motions. Lege jede Szene für deine Geschichte aus; die Komponenten sind der Look, nicht der Film.

Andernfalls, oder für alles, was die Komponenten nicht zeichnen: Die Tokens sind DTCG-Werte, und npx @motionhub/cli tokens --out tokens.json schreibt sie aus einem Motion in einer Datei aus, für ein Binding oder ein Theme; wandle jedes Token einmal in die Begriffe deiner Engine um, an einer Stelle (ein Theme-Modul), und verwende es überall beim Namen:

• Farbe: $value.hex.
• Schriftart: $value ist ein Stack: die CSS font-family besteht aus den Namen in der angegebenen Reihenfolge, jeder in Anführungszeichen, der generische Name am Ende.
• Dauer: $value ist {value, unit} in s oder ms. Eine Engine, die in Bildern zählt, multipliziert Sekunden mit ihrer Bildrate und rundet.
• Bewegungslinie (cubicBezier): $value ist [x1, y1, x2, y2], dieselbe Kurve wie CSS cubic-bezier(x1, y1, x2, y2). Eine Engine ohne Unterstützung sampelt sie.

Engine	Theme	Timing
Remotion	useMotion() von @motionhub/remotion; andernfalls eine theme.ts, die die Farben und Schriftstapel exportiert. Lade die Schriftarten mit @remotion/google-fonts oder @remotion/fonts vor dem ersten Bild	const {fps} = useVideoConfig(); eine Dauer ist Math.round(seconds * fps) Bilder; interpolate(frame, [start, start + frames], [0, 1], {easing: Easing.bezier(x1, y1, x2, y2), extrapolateLeft: 'clamp', extrapolateRight: 'clamp'}). Bevorzuge interpolate mit der Kurve des Motions gegenüber spring(), dessen Überschwingen der Motion nicht vorgesehen hat
HTML und CSS	Benutzerdefinierte Eigenschaften auf :root (--color-ink: #1B2A47)	transition oder animation mit der Dauer und cubic-bezier(...); die Web Animations API akzeptiert denselben easing-String
GSAP	Dieselben benutzerdefinierten Eigenschaften	duration in Sekunden; die Kurve mittels CustomEase.create('arrive', 'M0,0 C x1,y1 x2,y2 1,1')

Wenn der Motion auch ein Verzeichnis für deine Engine (remotion/) enthält, ergänzen dessen Teile die Komponenten: lies zuerst dessen README.

6. Schriftarten und Credits

• Installiere die Schriftarten, die CREDITS.md nennt, von ihren Quellen und unter ihren Lizenzen. Ist eine nicht verfügbar, verwende die ähnlichste offene Schriftart in derselben Rolle und informiere die Person darüber.
• Die in CREDITS.md genannten Assets werden unter ihren Lizenzen mit den geforderten Credits verwendet.
• license.text deckt die Wörter, Tokens und Bilder des Motions ab; CC-BY-4.0 und CC-BY-SA-4.0 verlangen Nennung. Füge eine Zeile wie diese in die Beschreibung des Films oder die Abspann-Credits ein: Look: Ink Scroll von SuoSi, motionhub.dev/m/@iamsuosi/ink-scroll, CC BY 4.0. license.code deckt den Code in den Tool-Verzeichnissen ab.

7. Ändern und Teilen eines eigenen Looks

Passe einen Motion für einen einzelnen Film frei an, in einer eigenen Kopie (./motions/<name>/). Eine geänderte Kopie ist nicht mehr die ursprüngliche Version: veröffentliche sie nicht unter derselben ID und Version.

Um einen Look zu veröffentlichen, den die Person erstellt hat (nur auf ihren Wunsch hin):

1. npx @motionhub/cli init <slug> --github <ihr GitHub-Login> erstellt ./motions/<slug>/ mit allen auszufüllenden erforderlichen Dateien, als Motion @<ihr Login>/<slug> (frage sie nach ihrem Login; wenn gh angemeldet ist, kann --github weggelassen werden).
2. Übernimm den Look aus ihrem Projekt, niemals aus dem Film: die Farben und Schriftarten des Themes in tokens.json (mit den Dauern und Kurven, die das Projekt verwendet); MOTION.md in den fünf Abschnitten, die beschreiben, was alle Filme mit diesem Look gemeinsam haben, und nichts von der Geschichte dieses Films; CREDITS.md mit Nennung jeder Schriftart und jedes Assets samt Lizenz; fit in motion.json ehrlich: general nur, wenn er drei nicht verwandte Themen abdecken würde, andernfalls topic mit dem Thema, für das er erstellt wurde, oder overlay, wenn er über eigenes Filmmaterial gelegt wird.
3. poster.jpg: ein Einzelbild ihres Films, ein JPEG mit 960 bis 3840 Pixeln Breite und maximal 500 KB (Remotion: npx remotion still <composition> poster.jpg --frame=<n> --image-format=jpeg).
4. Optional die wiederverwendbaren Komponenten, in react/parts/ wie in CONTRIBUTING.md beschrieben: React-Komponenten, die nur react und @motionhub/runtime importieren (in Remotion useTime() und useVideoConfig() daraus anstelle der Remotion-Entsprechungen), das, was sich ändert, als Props entgegennehmen und nichts von der Geschichte dieses Films enthalten.
5. Mit ihrer Zustimmung führt npx @motionhub/cli share motions/<slug> --wait die Prüfungen aus, die auch der Pull-Request durchführen würde, und lädt den Motion auf motionhub.dev hoch. Es wird kein Git, gh oder GitHub-Token benötigt. Gib der Person den Link und den Code, den der Befehl ausgibt, genau so wie gedruckt. Sie öffnen den Link, melden sich mit GitHub an, überprüfen den Motion, geben den Code ein und bestätigen den DCO, und motionhub öffnet den Pull-Request unter ihrem Namen. Der Befehl gibt dann die Adresse des Pull-Requests aus: gib auch diese an die Person weiter. Gib niemals den Code ein und sende nichts in ihrem Namen ab. Wenn sie stattdessen ihren eigenen Fork mit gh verwenden möchten, erledigt npx @motionhub/cli share motions/<slug> --pr das.

Ein Motion in einer Datei wird auf dieselbe Weise veröffentlicht, ab Schritt 1. Dann schreibt npx @motionhub/cli tokens --out motions/<slug>/tokens.json seine Werte, name und lang gehen in motion.json, und der Haupttext kommt ohne Front Matter in motions/<slug>/MOTION.md. Der Rest von motion.json, CREDITS.md und poster.jpg werden wie unten beschrieben ausgefüllt.

Um eine neue Version eines Motions zu veröffentlichen, den die Person veröffentlicht hat (nur auf ihren Wunsch hin, etwa „veröffentliche eine neue Version von @/ aus diesem Projekt“):

1. Habe den Motion zur Hand: ihre eigene Kopie in ./motions/<name>/, oder npx @motionhub/cli get @<scope>/<slug> und kopiere ./motions/@<scope>/<slug>/ nach ./motions/<slug>/, um ihn dort zu ändern.
2. Nimm die gewünschte Änderung aus ihrem Projekt vor und halte dich an das, was MOTION.md als den Look definiert; ein neuer Look ist ein neuer Motion.
3. Erhöhe version in motion.json über die veröffentlichte Version: den Patch für eine Korrektur, den Minor für eine Erweiterung (eine Komponente, einen Abschnitt), den Major für eine Änderung, die bereits mit diesem Look erstellte Filme nicht überleben würden. Eine veröffentlichte Version wird niemals geändert.
4. npx @motionhub/cli share <dir> --wait, wie oben: die Person öffnet den Link und reicht ein; wenn ihr Pull-Request dafür bereits geöffnet ist, wird die neue Version hinzugefügt. Nur einer der Autoren des Motions kann ihn ändern; das Teilen durch einen anderen Autor öffnet einen eigenen Pull-Request. --wait wartet bis zu 30 Minuten.

Um einen Motion nach Überprüfungsnotizen in seinem Pull-Request zu ändern, lies die Notizen (https://api.github.com/repos/motionhub-dev/motions/issues/<n>/comments und .../pulls/<n>/comments, kein Token erforderlich), nimm die gewünschten Änderungen vor und teile erneut auf dieselbe Weise.

Um auf einem Motion einer anderen Person aufzubauen, veröffentliche deinen eigenen unter deinem eigenen Benutzernamen, nenne ihren in motion.json unter basedOn ([{"id": "@iamsuosi/lab-notebook", "version": "1.0.2"}]) und beschreibe in CREDITS.md, was du übernommen und geändert hast; nur die Autoren des Originals ändern dieses.

8. Prüfung vor der Übergabe

Setze ein Einzelbild deines Films neben poster.jpg, falls der Motion eines hat: denselben Hintergrund, dieselben Farben in denselben Rollen, dieselben Schriftarten. Lies dann Essence und Avoid erneut im Vergleich zum Film und behebe, was nicht zutrifft.