Visual Lab
Een eigen tool om bewegende visuals voor websites te maken: gradients, fractals, patronen, lijnkunst en 3D-vormen. Gemaakt om te experimenteren met Claude Code, en voor iedereen te gebruiken.
De vraag
Voor toekomstige projecten wilde ik een manier om snel vette visuals te maken, zoals een achtergrond voor een hero of een beeld voor social. Stockbeelden zien er vaak overal hetzelfde uit. De vraag: hoe maak je een tool waarmee je in een paar minuten een eigen visual hebt, klaar om op een site te zetten?
Het idee: wiskunde als gereedschap
Alle visuals komen uit wiskunde: een formule voor een fractal, de gulden hoek van een zonnebloem, tegels die samen buizen vormen. Elke generator heeft sliders en een palet, en met één druk op randomize krijg je iets nieuws. Wat je mooi vindt zet je op slot, de rest gooi je opnieuw. En elke visual loopt naadloos rond, zodat hij als bewegende achtergrond kan dienen.
Aanpak
Ik bouwde de tool met Claude Code, aan de hand van mijn eigen keuzes en wensen. Ik bepaalde wat erin moest, hoe je ermee werkt en hoe hij eruitziet: in dezelfde stijl als dit portfolio. Links kies je een generator, in het midden zie je het resultaat en rechts stel je alles bij. Een seed zorgt dat je een visual altijd terugvindt, presets bewaren je favorieten en je kunt alles ongedaan maken. Daarnaast maakte ik een voorbeeldsite die laat zien hoe de visuals werken op een echte pagina.
Resultaat
Eenendertig generators, te exporteren als PNG tot 4K, als video of als live embed-code die je zo op een website plakt. Negen generators kun je ook als SVG downloaden, zodat je ze in Figma of Illustrator verder bewerkt. De embed is een paar KB groot en heeft geen extra libraries nodig. De tool staat online en iedereen kan hem gebruiken. In een project heb ik hem nog niet ingezet, maar hij ligt klaar voor de volgende.
