Design system
Twee lagen, zoals Material: Stijlen zijn de fundamenten (kleur, type, vorm, elevatie, spacing, iconen, motion), Componenten zijn de bouwstenen. Elk voorbeeld gebruikt exact dezelfde klassen als de app — een tweak in app/globals.css werkt hier én in de player meteen door.
Stijlen
Kleur
Wit podium, bijna-zwarte inkt, één geel accent — spaarzaam ingezet. Donker blijft alléén op de video zelf.
#FFFFFF
podium (wit)
#F4F4F6
kaarten, gates: licht vlak
#E4E4E7
randen op panelen
#FFFFFF
invoervelden (wit + rand)
#FFD900
hét accent (geel) — spaarzaam
#121212
primaire tekst (bijna zwart)
rgba(0,0,0,.5)
datums, hints
#FF5C39
waarschuwingen, verwijderen
Typografie
Eén familie: Stack Sans Text, in twee gewichten — Regular 400 en Bold 700. Het verschil zit verder in grootte: de app-schaal voor tekst in de app, plus één display-stijl voor de brutale koppen op de landing.
Vorm
Vier radii-tokens; nooit losse pixelwaardes verzinnen.
20px
video, kaarten, edit-panel
30px
dock en gates
10px
invoervelden
999px
knoppen, chips, rails
Elevatie
Het light theme is grotendeels vlak — diepte komt van 1px randen, niet van schaduw. Schaduw is voorbehouden aan wat echt optilt: de video, post-its en hover.
Spacing
Geen strikte 8pt-grid, maar een vaste ritmiek van een handvol waarden voor gaps en padding. Hoekafrondingen: zie Vorm.
Iconen
Dunne-lijn iconen uit /public/brand. Control-iconen zijn wit (over de donkere video), nav-iconen zijn inkt (op licht).
Motion
Drie easings dragen alles. Beweeg over een baan om 'm te voelen; de stip loopt continu met de bijbehorende curve.
cubic-bezier(0.34, 1.56, 0.64, 1)cubic-bezier(0.22, 1, 0.36, 1)cubic-bezier(0.36, 0.07, 0.19, 0.97)Componenten
Knoppen
Regels: lime = primaire actie, maximaal één zwaartepunt per view. Secundair = transparant met rand. Hover: lift (−2 à −4px) met spring-easing.
Reactie-dock
De echte reactieknoppen (.emoji-row): hover = bounce omhoog + fors groter + slinger ±15° (even/oneven de andere kant op). Klik = pop + zwevende emoji. Het spraakballon-icoon klapt de comment-box uit (naam + tekst + tijdstip).
Video-reacties
Kijkers reageren in de browser met camera, camera + scherm of alleen audio. De strip (.vr-chip) toont wie er reageerde en waar; de grote record-knop (.rr-rec-btn) is dezelfde taal als de pill in de Mac-app: cirkel = opnemen, vierkant = stop.
Player-controls
De balk onder in de video. Links play/pauze (klik om te wisselen) en de tijd; rechts snelheid, geluid en fullscreen. De afspeelkop is een klein wit rond stipje op de rail — klik de rail om 'm te verzetten. In de app schuift deze balk pas omhoog bij hover of pauze; hier staat 'ie altijd open.
Vraag-post-its
Eind- en tussenvragen als post-its op de video. Hover = optillen + willekeurige kantel + zware schaduw; kiezen = hand-getekende omcirkeling die zich tekent + gele volgende-knop.
Meerkeuze
Hover = optillen + kantelen + zware schaduw. Klik = omcirkeling + volgende-knop. Post-its plakken gestaggerd op.
Open vraag
Typ iets → de volgende-knop popt op. De post-it plakt op met dezelfde veer-easing.
Vraag-editor
De vragen in edit-mode (Figma 38-331). Standaard alleen Toevoegen; klik → één kaart die meegroeit met wat je invult: meerkeuze voegt opties met afbeelding toe, kies tijdstip voegt tijdstip + gedrag toe. Meerdere vragen stapelen als losse kaarten. Sectie-ritmiek 26px, labels 12px bold.
Ondertiteling
Uit het transcript. De CC-knop staat alleen in de balk als er een transcript is; aan → de actieve regel staat gecentreerd onderin en tilt op zodra de knoppenbalk verschijnt. Klik CC om te wisselen.
Knippen & zoom
Niet-destructief, als metadata. Een knip is een rode gearceerde band op de rail (de player springt eroverheen); een zoom een geel ruitje. Het brandpunt kies je met een 3×3-raster — klik een cel.
Tijdlijn met knip + zoom
Zoom-brandpunt
Antwoorden-dashboard
Groepeert de antwoorden per vraag: meerkeuze als staafverdeling, open als lijst. Eronder de AI-samenvatting van de reacties (.reacsum).
- DirkDe uitleg mag iets langzamer.
- EvaMeer voorbeelden van zoomen.
Er is waardering voor de opbouw en de auto-edit. Verbeterpunten: meer zoom-voorbeelden en een rustiger uitleg. Niet iedereen vond de demo even nuttig.
Afhaakgrafiek
Retentie per tijdstip uit maxPositionSec van de kijkers. Hover = tijd + percentage; in de app is klikken = spring naar dat moment. Onder de grafiek een hint bij het grootste afhaakmoment.
Grootste afhaakmoment rond 0:42 — daar valt 17% van de kijkers af.
Klap & high five
Verstuurd → een high five direct over de video + een korte, subtiele klap-shake van het beeld. Het logo is dezelfde hand: hover beweegt, klik klapt.
High five + klap-shake
High five (los)
Logo-klap (hover + klik)
Laadskeleton
Contour + shimmer + loader op de juiste hoogte; daarna fadet de content erin terwijl het skeleton zacht wegzakt. Skeletons blijven op dezelfde plek staan zodat er niets verspringt.
Contour + shimmer + loadertje op de juiste hoogte; daarna fadet de content in terwijl de skeleton zacht wegvalt.
Edit-paneel
De bouwstenen van het beheer-paneel: velden en knoppen op --r-input, de ja/nee als schuivende slider, rijen met omkaderde verwijderknop, gele toevoeg-knop.