Mursee Films
Een portfolio-site waar de films de hoofdrol spelen: beeldvullend vanaf de eerste seconde, met WebGL-overgangen tussen projecten en alles zelf te beheren in Sanity.
- Webdesign
- Websites
- Animaties
- shader-overgangen tussen films
- WebGL
- streams via Mux, ook op mobiel
- HLS
- films en teksten zelf te beheren
- 100%
De vraag
Mursee Films is een creatieve filmstudio uit Hoorn. Ze maken commercials, bedrijfsfilms en social video's voor onder meer Heineken, Vattenfall, Ahold Delhaize, Provincie Noord-Holland en de Rechtspraak. Hun werk is beeld; hun site moest dat ook zijn. De vraag: een portfolio-site waar de films zelf de hoofdrol spelen. Geen tekstpagina's met een videootje erbij, maar film op volledig scherm, vanaf de eerste seconde. Projecten, showreel en teksten moeten door Mursee zelf te beheren zijn, en een aanvraag moet in één dialoog te doen zijn.
Film op volledig scherm
De homepage is één beeldvullende speler met de uitgelichte films. Scrollen of klikken wisselt van film via een WebGL-overgang met curtains.js: een eigen shader met displacement, noise en een lichte kleurscheiding aan de rand. De showreel drijft als klein venster over het beeld en is overal te openen. Bij binnenkomst een korte intro-animatie, daarna nooit meer in dezelfde sessie.
Projecten die je meteen ziet
Het projectenoverzicht wisselt tussen lijst en grid, gefilterd op commercial, bedrijfsfilm of social. Bij hover over een titel start de preview van die film op de achtergrond; op de detailpagina speelt de volledige film met eigen bediening. Alles via Mux als HLS-stream, dus snel op mobiel en scherp op desktop.
Studio die op je af komt
De studiopagina vertelt wat Mursee doet: drie kaarten die tijdens het scrollen boven de kop schuiven en stapelen, een strip met klantlogo's, de aanpak in pre-, productie en post-productie. Typografie is groot en hard, zwart-wit, met korrel over het hele beeld.
Zelf te beheren
Films, categorieën, previews en site-instellingen staan in Sanity. Video's gaan via de Mux-plugin direct naar de stream. Een aanvraag loopt via een dialoog met projecttype en budget, met bevestiging naar Mursee en de aanvrager via Resend.
Stack
Next.js 15 · React 19 · Tailwind · GSAP (ScrollTrigger, SplitText, Flip) · curtains.js · Lenis · Sanity · Mux (HLS) · Resend · Swiper
