Stijlreferentie voor alle Sempertex Europe video overlays. Bevat exacte kleuren, fonts, animaties, timing en code-patronen. Standaard bij elk nieuw overlay moment.
Referentiebestand voor de visuele stijl van Remotion video overlays bij Sempertex Europe.
Gebaseerd op de goedgekeurde stijl uit remotion-stx/src/overlays/denise-overlays.tsx.
Gebruik dit als standaard bij elk nieuw overlay moment, tenzij de gebruiker expliciet iets anders aangeeft.
| Context | Easing | Code |
|---|---|---|
| Panel slide in/uit | inOut cubic | Easing.inOut(Easing.cubic) |
| Video shift in/uit | inOut cubic | Easing.inOut(Easing.cubic) |
| Wipe reveal bar recede | inOut cubic | Easing.inOut(Easing.cubic) |
| Accent line expand | out cubic |
Easing.out(Easing.cubic)| Titel verschijning | spring | { damping: 14, mass: 0.5, stiffness: 120 } |
| Animatie | Frames | Seconden |
|---|---|---|
| Panel slide in/uit | 14 | ~0.47s |
| Video shift in/uit | 14 | ~0.47s |
| Wipe bar verschijning | 4 | ~0.13s |
| Wipe bar recede | 28 | ~0.93s |
| Accent line expand | 20 | ~0.67s |
| Titel spring settle | ~18 | ~0.6s |
| Element | Waarde |
|---|---|
| Panel rechterrand | linear-gradient(to right, rgba(0,0,0,0.12), transparent) op een 30px brede div rechts van het panel |
| Wipe bar glow (tijdens recede) | boxShadow: 0 0 16px ${barColor}80 |
| Wipe bar glow (statisch) | geen |
Twee overlappende sin/cos golven op de content container. Nauwelijks zichtbaar, geeft constant leven.
const shakeX = Math.sin(frame * 0.08) * 1 + Math.sin(frame * 0.13) * 0.5;
const shakeY = Math.cos(frame * 0.06) * 0.7 + Math.cos(frame * 0.11) * 0.3;
// Toegepast als: transform: translate(${shakeX}px, ${shakeY}px)
Amplitude: ~1.5px horizontaal, ~1px verticaal. Onzichtbaar bij stilstaand beeld, voelbaar bij afspelen.
| Element | Waarde |
|---|---|
| Panel content padding | 100px 50px 100px 60px (top right bottom left) |
| Tussen titel en lijst | marginTop: 40 op lijst container |
| Titel accent line | marginTop: 16 |
| Groot item (product code) | marginBottom: 8 (kort, want sub-item volgt) |
| Klein item (kleur detail) | marginBottom: 28 (meer ruimte voor scheiding) |
| Titel achtergrondblok | padding: 8px 28px |
Alle kleuren komen uit BRAND in remotion-stx/src/brand-config.ts.
| Element | Kleur | BRAND referentie | HEX |
|---|---|---|---|
| Titel tekst | Dark Purple | BRAND.colors.secondary.darkPurple | #1b073d |
| Titel achtergrondblok | Yellow | BRAND.colors.secondary.yellow | #ffdb5a |
| Accent line | Yellow | BRAND.colors.secondary.yellow | #ffdb5a |
| Wipe bar (even items: 0, 2) | Yellow | BRAND.colors.secondary.yellow | #ffdb5a |
| Wipe bar (oneven items: 1, 3) | Purple | BRAND.colors.primary.purple | #6b3fb9 |
| Groot item tekst (product code) | Black | BRAND.colors.neutral.black | #000000 |
| Klein item tekst (detail) | Purple | BRAND.colors.primary.purple | #6b3fb9 |
| Panel achtergrond basis | Lavender | BRAND.colors.primary.lavender | #f1d9ff |
| Particles | Purple | BRAND.colors.primary.purple | #6b3fb9 |
Het overlay is GEEN fullscreen. Het is een panel aan de linkerkant van het scherm.
Panel breedte: 680px (~35% van 1920px)
Video shift: 180px naar rechts
Video scale: 1.08x (voorkomt zwarte randen)
De video schuift naar rechts om ruimte te maken. De spreker (in het midden) blijft zichtbaar rechts.
Eerste laag op het panel. Blurt de verschoven video die achter het panel zichtbaar is.
backdropFilter: "blur(50px) brightness(1.1) saturate(1.2)",
WebkitBackdropFilter: "blur(50px) brightness(1.1) saturate(1.2)",
Constante waarden, geen animatie (panel is off-screen wanneer niet zichtbaar).
Drie lagen over de frosted glass: