SVGLoop får en stillestående tegning til å bevege seg: lim inn en SVG, stable versjoner av den som keyframes på en tidslinje, og la formene morfe fra én til neste.
Hva det er
Animasjon rett i nettleseren
Et animasjonsverktøy for tegninger: du drar keyframene i den rekkefølgen du vil, og ser løkken spille mens du jobber.
Hvorfor
Kode ut, ikke video
Ut kommer keyframene som data og en ferdig React-komponent som spiller dem i løkke. Animasjonen forblir din. Du kan åpne og endre den etterpå. Ingen eksportert blindvei.
Jeg tegner. En vår ble jeg utålmodig på at strekene mine lå helt stille, så jeg brukte fire uker på å bygge verktøyet som beveger dem.
Så stoppet det, i juni 2024, midt i poleringen. Det er den kjedeligste og mest ærlige måten å slutte på. Ingen katastrofe, bare oppmerksomhet som flyttet seg.
Bildet over er to stillbilder, ikke en løkke som spiller. Verktøyet eksporterte en React-komponent i den samme kjøringen, men den er ikke montert på denne siden ennå. Det står på lista, uten dato. Å love en dato ville vært å gjenta feilen.
Slektskap
Samme instinkt, to år fra hverandre
SVGLoop var første gang jeg tok det på alvor: en jobb du gjentar for hånd, skal du ikke bli flinkere til. Du skal bygge et verktøy for den.
- 2024SVGLoopJeg ville animere egne tegninger, og gadd ikke gjøre den samme fikleøvelsen om igjen for hver strek. Verktøyet spytter ut den ferdige artefakten: keyframes som data og en komponent som spiller dem.
- 2026Samme instinkt i ScaffyTo år senere er formen den samme, bare rettet mot en annen gjentakelse: fang håndarbeidet én gang, og la maskinen levere resultatet ferdig i stedet for oppskriften på det.
Hele historien i tall
Fire uker, og ingenting siden
Kildecommit:e414f58
Videre
Vanen som ble et verktøy
SVGLoop lærte meg å fange den gjentatte jobben som et verktøy og la det levere den ferdige tingen. Det er hele premisset for det jeg bygger nå.