Meshmallow: Animerad gradientgenerator

Resultat

Ett verktyg för att skapa, styra och återanvända animerade gradients utan shaderkod. Tre lägen (Mesh, Warp, Particles) delar ett gränssnitt för färg, rörelse och export. Meshmallow driver bakgrunden på den här sajten och växlar mellan en kuraterad lista av gradients vid varje besök. Byggt med React och three.js.

Interactive demo

• Project site: https://meshmallow.com

Bakgrund

Startpunkten var Stripes animerade gradient. Den satte ribban för hur en bakgrund kan kännas levande utan att störa. Jag la mycket tid på att reverse-engineera den med AI innan jag hittade Kevin Hufnagls genomgång av hur effekten faktiskt fungerar (kevinhufnagl.com). Hans implementation gav en fungerande mesh-grund att bygga vidare på.

För warp tittade jag på Paper (shaders.paper.design), en shader-playground med många visuella lägen. Paper är byggt för öppen utforskning. Att börja från noll, eller anpassa deras output till något konkret, betydde att sortera bland för många alternativ.

Jag tog mesh-tekniken från Hufnagl, lånade warp från Paper och anpassade particles.js (vincentgarreau.com/particles.js) till ett tredje läge. Sedan byggde jag om alla tre till ett mindre, mer bestämt verktyg där en designer kan komma fram till något återanvändbart utan att förstå shaders.

Utmaning

Tre problem. Gradientgeneratorer optimerar för variation: fler lägen, fler sliders, mer slump. Jag behövde motsatsen. Färre kontroller som ger pålitliga, återanvändbara resultat. Färgval för rörliga visuals är svårt att göra för hand. Fyra färger som fungerar i motion är inte samma sak som en stilla palett. Och det fanns inget sätt att spara ett resultat och använda det senare. Varje session började om från noll.

Befintliga verktyg bekräftade gapet. Mesh (meshgradient.com) och MSHR (mshr.app) ger bara stilla gradients. ShaderGradient och Paper animerar, men har ingen sparad samling. Ingen plockar färg från bilder automatiskt. Paper har eyedropper, en färg i taget. Inget verktyg kombinerade animation, ett bibliotek över tid och bildbaserad färg i samma flöde.

Så här

Tre vägar in i färg. Ladda upp en referensbild, så plockar verktyget en fyrfärgs-palett. En meny med 14 paletter, grupperade efter färgteori (Analogous, Triadic, Split-Comp, Mono) och stämning (Sunset, Ocean, Northern Lights, Velvet Night med flera). Varje schema varierar hue, saturation och lightness inom satta spann, ungefär 1,75 miljoner unika paletter totalt. Random går igenom alla. Hex-input finns om man redan vet vad man vill. Målet: färg ska vara det enkla, inte flaskhalsen.

Kontroller efter avsikt, inte efter parameter. Gränssnittet kretsar kring tre frågor: vilka färger (Color), vilken form (Pattern), hur fort (Speed). Distortion, swirl och scale ligger inne i grupperna, inte som en platt lista. Man kan utforska utan att veta vad varje slider gör tekniskt.

Ett tyst UI. Färg hör till canvasen, inte till kontroller. Paneler fälls ihop när de inte behövs. Export ligger längst ner. Verktyget ska inte stå i vägen för resultatet.

Tangentbord och mobil fullscreen. På desktop: R för randomize, pilar för hue, S för spara, Tab för panel, F för fullscreen. På mobil går gradienten fullscreen och skärmen blir kontrollen. Landskap går in i fullscreen automatiskt. Där är allt gester: svep för hue på en av fyra färger, dubbeltryck för randomize, tre fingrar för mesh/warp, nyp för zoom, två fingrar för att avsluta. Inga knappar. En hint-strip visar mappningarna en gång, sedan försvinner den.

Spara, samla, rotera. Variationer sparas i ett bibliotek. En playlist låter dig välja flera gradients och hur de växlar, i ordning eller slumpmässigt vid varje laddning. En session kan bli ett pågående visuellt system. Sajten du tittar på nu kör en Meshmallow-playlist.

Effekt

Meshmallow är live på meshmallow.com. Install-flödet ger ett kodsnippet redo att klistra in i Cursor, Lovable eller v0. Från genererad gradient till inbäddning på en live-sajt tar det under en minut.

Jag designade, byggde och släppte det själv med React och three.js, och satte det sedan i bruk här: både som bakgrund och som portfoliostycke.

Reflektioner

Den större idén är att en gradient kan göra nytta, inte bara dekorera. En riktning jag testar är att styra flödet så att det leder blicken neråt under folden, eller mot en viss del av sidan.

Jag bygger också ut med egna shaders för fler mönster än de tre lägena. Interaktionsmodellen (färg från bild, kontroller efter avsikt, playlist) ska hålla även när den visuella motorn under blir mer komplex.