Onze mascotte Sunny staat op de homepage te zwaaien, in 3 seconden van stilstand naar één vrolijk hupje. Geen Pixar-studio, geen animatiebureau, geen 5.000 euro factuur. Gewoon Higgsfield, een paar prompts, en wat hulp van Claude om het op de website te krijgen. Hier is het volledige stappenplan zodat jij hetzelfde voor je MKB-website kunt doen, in 90 minuten en voor minder dan €5 aan credits.
Dit is Sunny in actie, het eindresultaat van het stappenplan hieronder.
Begin 2026 stond Sunny er nog niet. Toen we onze nieuwe homepage bouwden, hadden we één probleem: een mascotte hoort persoonlijkheid uit te stralen, maar een statische PNG van een robotje… voelt als een logo dat ergens hangt. Bezoekers scrollen er overheen. Geen interactie, geen aandacht-magnet, geen reden om te blijven hangen.
De oplossing kostte ons één middag werk. En het verschil tussen voor en na: ongeveer 40% meer scroll-diepte op de homepage (gemeten over 14 dagen). Wat we deden: Sunny laten zwaaien en hupjes maken. Letterlijk een korte loop-animatie waar bezoekers naar blijven kijken.
Hieronder de hele werkwijze, copy-paste-baar voor jouw eigen MKB-mascotte, productdemo of hero-animatie.
Wat je nodig hebt
- Higgsfield-account (Starter-plan is genoeg, $15/maand voor 200 credits)
- Claude (of een vergelijkbare AI met code-skills) om de HTML/CSS-integratie te schrijven
- WordPress-toegang met FTP of de WP-admin om bestanden te uploaden
- ffmpeg op je computer om de video te optimaliseren (gratis, command-line)
- 90 minuten ononderbroken tijd
Dat is het. Geen Photoshop-licentie, geen After Effects, geen 3D-modeling skills. Het hele proces draait op AI die het ontwerpen voor je doet en code-tools die de integratie afhandelen.
Stap 1. Bouw je karakter als statische afbeelding (10 min, ±€0,03)
Begin bij het begin: een stevige, herkenbare karakter-afbeelding. Higgsfield heeft daarvoor het Soul 2.0 model, effectief gratis (0,12 credits, dus zo’n 2 cent per render). Geen tokens-bloedbad, gewoon snel itereren.
Open Higgsfield, kies Soul 2.0, en geef een duidelijke prompt:
“Friendly 3D cartoon yellow robot mascot, cute round face with big cyan glowing eyes, standing centered on plain cream off-white background (#FFFEF7), wearing simple metallic body, no logos, Pixar-quality lighting, soft front lighting, frontal pose with arms slightly raised, 3:4 aspect ratio.”
Genereer 4 varianten in één batch. Kies de versie die het meest aanvoelt als “dit is mijn merk”. Voor Sunny was dat de versie met de meest open, vrolijke uitdrukking, iemand die je vertrouwt.
Bewaar de gekozen PNG op je computer. Dit wordt je reference image voor de animatie-stap.
Tip voor MKB-mascottes
Kies een karakter dat past bij je doelgroep. Voor een serieus boekhoudkantoor werkt een knuffelig robotje niet, daar is een minimalist abstract figuur passender. Voor een kapsalon kan een vrolijk dier of een gestileerd persoon natuurlijker voelen. Lees onze mooie website versus converterende website voor een dieper gesprek over wat “merkconsistentie” eigenlijk betekent.
Stap 2. Animeer de stillstand naar leven (15 min, ±€0,80)
Hier wordt het magisch. Higgsfield biedt meerdere video-modellen aan; voor karakter-animatie werkt Kling 2.6 het beste (door de Higgsfield-interface, niet de API direct). Het model is getraind om karakter-identiteit te behouden tussen frames, cruciaal als je wilt dat je mascotte er steeds hetzelfde uitziet.
Upload je PNG uit Stap 1 als start image en end image tegelijk. Dat is de truc voor een naadloze loop: door dezelfde frame als begin én einde te geven, dwing je het model de animatie terug te brengen naar de standpose.
Prompt voor het Sunny-effect:
“The mascot does a quick anticipation crouch, springs straight upward about 25% body height, lands with soft squash, raises right arm and waves three big enthusiastic waves at camera with a wide cheerful smile, then settles back into the exact same neutral standing pose as the start frame. Static locked-off camera, no pan, no zoom. Pure flat cream background throughout. Smooth Pixar-quality bouncy motion with squash and stretch. Preserve the exact 3D mascot character design, colors and proportions from the reference image.”
Duration: 5 seconden. Aspect ratio: 3:4. Resolution: 720p (meer dan genoeg voor een hero die maximaal 400px breed wordt gerenderd).
Wacht 5-10 minuten op de render. Je krijgt een MP4-bestand terug.
Wat als het er gek uitziet?
Mogelijke problemen bij eerste render: het gezicht warpt, de armen krijgen 3 vingers extra, of de achtergrond verandert van kleur. Twee fixes:
- Re-render met dezelfde prompt. AI-video heeft inherent variatie. De 3e poging is vaak de juiste.
- Voeg achtergrond-instructie sterker toe, bv. “PURE FLAT SOLID off-white cream background #FFFEF7, completely uniform, no gradient, no glow, no atmosphere”. Hoe dwingender je de achtergrond beschrijft, hoe groter de kans dat het model ‘m respecteert.
Stap 3. Optimaliseer voor het web (15 min, gratis)
De Kling-render is groot, vaak 7-10 MB met audio-track. Dat is veel te zwaar voor een hero-animatie die op elke pageload moet inladen. We gaan het comprimeren naar twee formaten: WebM (voor moderne browsers, kleinste bestand) en MP4 (voor Safari en als fallback).
Open je terminal in de map waar de MP4 staat. Drie commando’s:
# 1. Slow-down naar 75% snelheid (animatie iets langer leesbaar) # en strip audio ffmpeg -i sunny-original.mp4 -filter:v "setpts=PTS/0.75" \ -an -c:v libx264 sunny-slow.mp4 # 2. WebM (VP9) voor moderne browsers, doel < 400 KB ffmpeg -i sunny-slow.mp4 -c:v libvpx-vp9 \ -crf 40 -row-mt 1 -tile-columns 2 -threads 4 \ -deadline good -cpu-used 2 -an mascot-hero-loop.webm # 3. MP4 (H.264 baseline) voor Safari, doel < 600 KB ffmpeg -i sunny-slow.mp4 -c:v libx264 -profile:v baseline \ -crf 28 -preset slow -tune animation \ -movflags +faststart -pix_fmt yuv420p -an mascot-hero-loop.mp4 # 4. Poster JPG voor pre-autoplay fallback ffmpeg -i sunny-slow.mp4 -vframes 1 -q:v 3 mascot-hero-poster.jpg
Het magische argument is -tune animation, specifiek voor cartoon-content, preserveert randen en vlakke kleuren beter dan default. En -pix_fmt yuv420p zorgt dat iOS Safari het ook accepteert.
Eindresultaat: drie kleine bestanden (totaal ±1 MB) die op elke browser werken.
Stap 4. Vraag Claude om de HTML/CSS te schrijven (10 min, gratis)
Open Claude (of een vergelijkbare AI), en geef deze prompt:
“Schrijf een HTML video-element dat een loop-animatie van een mascotte toont. Vereisten: autoplay, muted, looped, inline (geen fullscreen-takeover op iOS), poster-image als fallback, ondersteunt zowel WebM als MP4. Plus: graceful degradation naar een PNG-image voor reduced-motion gebruikers. Output: alleen de HTML-snippet, met inline opmerkingen die uitleggen wat elk attribuut doet.”
Claude geeft je iets terug zoals:
<video class="mascot mascot--video"
autoplay muted loop playsinline
webkit-playsinline="true"
poster="/path/to/mascot-hero-poster.jpg"
width="480" height="720"
preload="metadata"
aria-label="Onze mascotte zwaait">
<source src="/path/to/mascot-hero-loop.webm" type="video/webm">
<source src="/path/to/mascot-hero-loop.mp4" type="video/mp4">
</video>
<picture class="mascot-reduced-motion" hidden>
<img src="/path/to/mascot.png" alt="Mascotte" width="480" height="720">
</picture>
Plus de bijbehorende CSS om de video correct te schalen, en een klein JavaScript-snippet om mobile autoplay af te dwingen (iOS Safari blokkeert dat soms).
Het mooie aan het werken met Claude: je hoeft de code zelf niet te bedenken. Je beschrijft wat je wilt, hij schrijft het. Lees onze 10 ChatGPT-prompts voor MKB-ondernemers voor meer scenario’s waar AI-assistenten je code- en tekstwerk afhandelen.
Stap 5. Upload + integreer op je website (20 min)
Drie kleine stappen:
- Upload de bestanden naar je WordPress media-library:
mascot-hero-loop.webm,mascot-hero-loop.mp4,mascot-hero-poster.jpg. - Plak de HTML uit Stap 4 op de plek waar je mascotte moet komen. In WordPress: een Custom HTML-block in je page-editor.
- Test op mobiel, iOS Safari, Android Chrome, beide moeten autoplayen zonder klik.
Bij ons stond Sunny binnen 30 minuten na de Kling-render online. Eerste reactie van klanten: “Wat een mooie animatie, heb je dat zelf gemaakt?” Antwoord: nou, dat is een lang verhaal.
Wat dit kost, samenvatting
- Higgsfield Starter-plan: $15/maand voor 200 credits (genoeg voor ±25 video-animaties of 1600 stillstanden)
- Soul 2.0 image-generatie: 0,12 credits per stuk (±€0,02)
- Kling 2.6 video-animatie: 4-8 credits per render (±€0,60-1,20)
- Claude API of subscription: €0-20/maand afhankelijk van gebruik
- ffmpeg + WordPress: gratis
Eenmalige kosten om Sunny op je site te krijgen: tussen €1 en €5. Dat is goedkoper dan een uur freelance animator.
Veelgestelde vragen
Heb ik technische kennis nodig?
Voor stap 1-2 (image + animatie): nee, het is allemaal click-and-prompt in de Higgsfield-interface. Voor stap 3 (ffmpeg): basis terminal-gebruik. Voor stap 4-5 (HTML + WordPress): je hoeft niets te schrijven. Claude doet het voor je. Het enige wat je echt zelf moet doen is bestanden uploaden naar WordPress.
Werkt dit voor elk type bedrijf?
Een geanimeerde mascotte past niet bij elk merk. Voor een rouwbedrijf werkt dit niet. Voor een MKB-dienstverlener met persoonlijke uitstraling (kapsalon, fysio, gastouder, marketeer, fotograaf): bijna altijd ja. Lees onze 7 conversie-fouten op MKB-websites, punt 4 gaat over émotie versus afstand in je hero.
Hoe groot moet de animatie zijn op de pagina?
Niet groter dan 400-500px breed op desktop, 250-300px op mobiel. Te groot wordt opdringerig, te klein onopgemerkt. Onze Sunny is 360px breed.
Mag de animatie op elk moment loopen?
Ja, mits het naadloos is, de eerste en laatste frame moeten hetzelfde zijn. Anders zie je een “reset-flits” bij elke iteratie. Dat is precies waarom we in Stap 2 dezelfde reference-PNG als start én end gebruiken.
Wat doe ik met gebruikers die geen animaties willen?
Toegankelijkheid is belangrijk. Voeg een prefers-reduced-motion mediaquery toe die de video verbergt en de PNG-versie toont. Claude schrijft dat ook voor je. Onze hele Sunny-integratie respecteert deze setting.
Kan ik dit zonder Higgsfield doen?
Ja, alternatieven zijn Runway, Pika Labs, Luma Dream Machine. We gebruiken Higgsfield omdat het in onze workflow zit en de Starter-credits genereus zijn. Test welke past bij jouw budget en stijl.
Wat dit oplevert, niet alleen leuk maar meetbaar
De Sunny-animatie veranderde meer dan we verwachtten. Niet alleen de scroll-diepte (±40% hoger), maar ook:
- Tijd op homepage: van 45 seconden gemiddeld naar 1 minuut 12. Bezoekers blijven kijken.
- Conversie naar contactformulier: 2,3% → 3,1% (over 30 dagen). Niet enorm, maar consistent.
- Direct feedback: 4 van de 12 nieuwe klanten in de afgelopen maand noemden “de robot” bij ons spontaan op in het kennismakingsgesprek. Dat is herinneringswaarde.
Een animatie maakt geen slechte website goed. Maar bij een goede website kan een persoonlijke mascotte het verschil zijn tussen “ik onthoud dit bedrijf” en “next tab”. Voor €5 aan credits en 90 minuten werk is dat een sterke investering.
Volgende stap
Als je dit zelf wilt proberen: download je Higgsfield Starter-plan vandaag, maak een mascotte die past bij je merk, en gun jezelf de middag. Vastlopen? Stuur ons een berichtje, we kijken graag mee voor een gratis sparring-gesprek over hoe een mascotte voor jouw business werkt.
Lees ook: AI-content schrijven zonder dat het naar AI klinkt, over hoe je AI-tools inzet zonder dat je merk z’n persoonlijkheid verliest. En als je een complete MKB-website wilt waar zo’n animatie naadloos in past, bekijk onze werkwijze: van briefing naar live in 3 werkdagen.
