ZXN Motion-dokumentation.
Animeret grafik som React-komponenter, renderet billede for billede. Åben kildekode under MIT-licensen.
zinxan/motion-graphics på GitHub Kom i gang →
Kom godt i gang
Byg biblioteket fra kildekoden, skriv din første film, se den i browserafspilleren, og render den til MP4 eller WebM fra kode eller kommandolinjen.
Læs vejledning ↗Tænk i billeder
Hvorfor en film skal være en ren funktion af sit billednummer, hvilke hooks og primitiver der gør det praktisk, og hvordan bevægelser bliver lette at aflæse.
Læs vejledning ↗Kontroller og egenskaber
Hvorfor filmens egenskaber (props) er JSON, hvordan defaultProps og controls lader en vært vise et egenskabspanel, og hvad element-id’er bruges til.
Læs vejledning ↗Tegn på canvas
Hvornår du skal tegne et billede på et canvas frem for i DOM’en, Canvas2D-API’et og tre gennemarbejdede eksempler på partikellignende grafik.
Læs vejledning ↗Brug af pakker
Hvilke biblioteker en film må importere, og hvordan du styrer d3, GSAP, simplex-noise og culori ud fra billednummeret i stedet for et ur.
Læs vejledning ↗Tempo og musik
Klip en film til et musiknummer: Angiv et tempo, placer sekvenser i takter og slag, og udled pulsslag og underdelinger af ét musikalsk ur.
Læs vejledning ↗Film om brugergrænseflader
Produkt- og funktionsgennemgange: en fast flade, en liste over kameraindstillinger, der navngiver motivet, og en markør, som en kontrol kan aflæse sin egen trykkede tilstand fra.
Læs vejledning ↗Ydeevne
Hvorfor en film koster det, den gør, den sande historie om Matrix-regn bygget af 1.800 div-elementer og et budget, du kan holde filmen op imod.
Læs vejledning ↗Opskrifter
Otte verificerede eksempelfilm, hvad hver lærer dig, linjen, der er værd at kopiere, og hvad du først bør ændre.
Læs vejledning ↗Skriv film med en AI-agent
MCP-serveren, der giver en kodeagent reglerne for at skrive film, dokumentationen, de verificerede opskrifter og et kontrolværktøj til det, den skriver.
Læs vejledning ↗Kompositions-API
Reference til film, tid, grundelementer til tidsstyring, animationsmatematik, scene og kamera, markør, tempo og videomateriale.
Læs vejledning ↗