Meshmallow: Animerad gradientgenerator

Resultat

Ett verktyg för att generera, styra och återanvända animerade gradients utan att skriva shaderkod. Tre lägen (Mesh, Warp, Particles) delar ett gränssnitt för färg, motion och export. Meshmallow driver bakgrunden på den här portfoliosajten och cyklar genom en kuraterad playlist 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 bakgrundsyta kan kännas levande utan att störa. Jag la mycket tid på att reverse-engineera den med AI-verktyg innan jag hittade Kevin Hufnagls genomgång av hur effekten faktiskt fungerar (kevinhufnagl.com). Hans implementation gav mig en fungerande mesh gradient-grund att bygga vidare på.

För warp-effekten tittade jag på Paper (shaders.paper.design), en shader-playground med ett brett spann av visuella effekter. Paper är byggt för öppen utforskning över ett stort parameterrum. Att börja från noll eller försöka anpassa dess output till ett specifikt sammanhang betydde att sortera bland för många alternativ för att komma fram till något användbart.

Jag tog mesh gradient-tekniken från Hufnagls arbete, lånade warp-effekten 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 opinionerat verktyg där en designer kan komma fram till ett kontrollerat, återanvändbart resultat utan att förstå shaders.

Utmaning

Tre problem att lösa. Gradientgeneratorer optimerar för variation: fler lägen, fler sliders, mer slump. Jag behövde motsatsen, färre controls som ger pålitliga, återanvändbara resultat. Färgval för generativa visuals är svårt att göra manuellt. Att välja fyra färger som ser bra ut i motion är inte samma sak som att välja en statisk palett. Och det fanns inget flöde för att spara ett resultat och använda det senare. Varje session började från noll.

Att titta på befintliga verktyg bekräftade gapet. Mesh (meshgradient.com) och MSHR (mshr.app) producerar bara statiska gradients. ShaderGradient och Paper hanterar animation men har inget sätt att spara eller samla resultat. Ingen av dem extraherar färg från bilder automatiskt. Paper har en eyedropper, men den samplar en färg i taget. Inget kombinerade animation, ett persistent bibliotek och bildbaserad färginmatning i ett verktyg.

Angreppssätt

Tre vägar in i färg. Användare kan ladda upp en referensbild och verktyget extraherar en fyrfärgs-palett automatiskt. En schemes-meny erbjuder 14 paletter grupperade efter färgteori (Analogous, Triadic, Split-Comp, Mono) och mood (Sunset, Ocean, Northern Lights, Velvet Night med flera). Varje scheme varierar hue, saturation och lightness inom satta spann och ger ungefär 1,75M unika paletter över alla schemes. Random cyklar genom alla. Manuell hex-input finns om någon redan vet vad de vill ha. Målet var att göra färg till den enklaste delen av processen, inte flaskhalsen.

Controls grupperade efter intent, inte efter parameter. Gränssnittet organiseras kring tre frågor: vilka färger (Color), vilken form (Pattern) och hur fort (Speed). Tekniska parametrar som distortion, swirl och scale ligger inne i de grupperna i stället för som en platt lista. Man kan utforska utan att veta vad varje slider gör tekniskt.

Ett tyst gränssnitt. Färg är reserverad för output-canvasen, inte för UI:t. Controls fälls ihop när de inte används. Export-actions sitter i en utility-sektion längst ner. Verktyget håller sig ur vägen för det visuella resultatet.

Tangentbordsgenvägar och mobil fullscreen. På desktop täcker ett tangentbordslager kärnactionerna: R för randomize, piltangenter för att skifta hue, S för spara, Tab för att växla panelen, F för fullscreen. På mobil går gradienten fullscreen och skärmen blir controllern. Rotation till landskap går in i fullscreen automatiskt. Inuti den är varje action en gest: svep i en riktning för att skifta hue på en av fyra färger, dubbeltryck för randomize, tre-finger-tryck för att växla mellan mesh och warp, nyp för zoom, två-finger-tryck för att avsluta. Inga knappar på skärmen. En avfärdbar hint-strip visar mappningarna en gång, sedan går den ur vägen.

Spara, samla, rotera. Genererade variationer sparas till ett persistent bibliotek. En playlist-funktion låter dig välja flera gradients och ställa in hur de roterar, sekventiellt eller slumpmässigt vid varje sidladdning. En enda session kan bli ett pågående visuellt system. Portfoliosajten du tittar på just nu körs på en Meshmallow-playlist.

Effekt

Meshmallow är en fungerande produkt på meshmallow.com. Install-flödet genererar ett paste-klart kodsnippet för Cursor, Lovable eller v0. Du kan gå från att generera en gradient till att bädda in den på en live-sajt på under en minut.

Jag designade, byggde och shippade det end-to-end med React och three.js, och satte det sedan i bruk på min egen sajt både som bakgrundssystem och som portfoliostycke.

Reflektioner

Den större idén är att en gradient kan vara funktionell, inte bara dekorativ. En riktning jag utforskar är att använda gradientflöde som riktningssignal, forma animationen så att den leder blicken neråt under folden eller mot en specifik del av sidan.

Jag utökar också systemet med custom shaders för att stödja ett bredare spann av mönster bortom de tre nuvarande lägena. Interaktionsmodellen (bildhärledd färg, intent-grupperade controls, playlist-rotation) bör hålla även när den visuella motorn under blir mer komplex.