Een eigen webshop voor één product. Je scrolt, de dop draait los, de pipet druppelt en het water kleurt blauw. Met kennisbank, Stripe en een eigen beheeromgeving.
BlauweDruppels.nl is onze eigen webshop voor één product: een flesje in bruin glas met een glazen pipet. De productpagina is één doorlopende scène. Terwijl je scrolt, draait de dop los, komt de pipet uit het flesje, schuift hij naar een glas water en vallen er druppels in, tot het hele glas diepblauw is. Het ontwerp van die beweging stond al als getekende animatie. Wij hielden de beweging precies zoals hij was en vervingen de getekende vormen door fotorealistische lagen uit dGEN Visual Studio: het flesje, de dop, de pipet, het glas en de inkt. Daaronder loopt een achtergrondvideo mee met de scroll, en wie wil zet het geluid aan: klikjes, glas, een plink per druppel. Achter de etalage staat een complete winkel. Afrekenen via Stripe, voorraad per productiepartij, verzenden met track-and-trace, terugbetalen en omzet in een eigen beheeromgeving, plus een kennisbank die de shop vindbaar maakt in Google en in AI-antwoorden.
50 fps Op mobiel, met vier keer tragere processor
Het ontwerp van de scène was af: een getekend flesje dat opengaat en druppelt in een glas water. Die beweging was precies goed, dus die bleef tot op het frame gelijk. We vervingen alleen wat getekend was door foto's: het flesje, de dop met de zwarte knijper, de glazen pipet, het glas en de inktwolk die per druppel door het water trekt.
De beelden maakten we in onze eigen studio, dGEN Visual Studio, en we sneden ze vrij tegen de achtergrondkleur van de site. Zo vallen de randen weg in de scène. Komen de eigen productfoto's, dan wisselen die in dezelfde bestanden om, zonder de code aan te raken.
Achter de scène loopt een video van inkt in water. Die speelt niet af, maar volgt de scroll: bovenaan zie je alleen lichtstralen, tijdens het druppelen bloeit de inkt open. Wie het geluid aanzet, hoort de dop, het glas en bij elke druppel een plink. Alles hangt aan dezelfde scrollpositie, dus terugscrollen draait alles netjes terug.
Na een betaling via Stripe staat de bestelling direct in de beheeromgeving, is de voorraad afgeboekt op de oudste partij en hebben klant en winkel een mail. Wordt de voorraad laag, dan komt er een melding, en bij nul staat de site vanzelf op uitverkocht.
Inpakken, een track-and-tracecode invullen en terugbetalen gaat vanuit dezelfde omgeving. Elke ochtend volgt een dagrapport met wat er weg moet en wat er verkocht is.
Elke pagina staat als volledige HTML klaar, met gestructureerde gegevens voor product, artikelen en veelgestelde vragen, een sitemap en een llms.txt. De kennisbank telt 12 artikelen van minimaal 1200 woorden, elk met bronnen die we één voor één hebben nagelopen. Een controle in de build houdt de teksten feitelijk.
Eén product dat je in beweging laat zien, in plaats van op een witte achtergrond.
Een kennisbank die de vragen van kopers beantwoordt en de shop vindbaar maakt.
Bestellingen, voorraad, verzending en omzet op één plek, zonder los webshopplatform.
Ja. We beginnen bij de beweging die je wilt laten zien en bouwen die op met foto's van jouw product. Heb je nog geen goede foto's, dan maken we eerst beelden in dGEN Visual Studio en wisselen die later om.
Nee. Elke pagina staat als kant-en-klare HTML klaar, de animatie gebruikt ongeveer 10 KB JavaScript, en het geluid laadt pas als je het aanzet. Gemeten: 50 beelden per seconde op mobiel, ook met een vier keer tragere processor.
Vite, React, Stripe, Supabase, dGEN Visual Studio, ElevenLabs
Alle cases of plan een gesprek.
dGEN Productions, AI-bureau in Veldhoven, regio Eindhoven (Brainport), onderdeel van dGEN Labs. De Run 1141 (1e verdieping, nr. 12), 5503 LB Veldhoven · info@dgenproductions.nl · 06-87413056 · KvK 97916137 (eenmanszaak) · btw NL005295840B15