01 / 03

03

// SELECTED WORKS

CASE
STUDIES

Scroll

01

01 — Portfolio · Monteur video

BASTIEN BRUNIER

« Le montage qui fait rester » — portfolio cinematique d'un monteur freelance

HTMLCSSJavaScriptGSAP

Apercu desktop du portfolio Bastien Brunier

Apercu mobile du portfolio Bastien Brunier

Voir le portfolio

// Chiffres du projet

200+Videos montees

10M+Vues cumulees

YouTubeCreateurs & marques

Contexte

Portfolio pour un monteur video freelance. Le showreel est roi : lecture automatique, son coupe par defaut, captions facon table de montage (« SRC_01 — SHOWREEL ») et typographie mono pour un rendu editorial.

Role

Web Design
Developpement Front-End
Direction Artistique

Annee

2026

Lien

Voir le portfolio →

Direction artistique

Fond#0C0C0C

Surface#141414

Accent#4A6AFF

Texte#EDEBE3

Gris#8A8A8A

Bordure#1E1E1E

Noir profond pour laisser le contenu video occuper l'espace. Le bleu electrique apporte une signature creative sans jamais concurrencer les images. Typographie mono en legende, grotesk en titre : un langage de banc de montage.

Composition pleine page du portfolio Bastien Brunier — Bastien Brunier — page complete

Fonctionnalites Cles

01

Showreel immersif

Hero video plein ecran, lecture automatique, son coupe par defaut.

02

Captions editoriales

Labels mono « SRC_01 — SHOWREEL », esthetique table de montage.

03

Galerie sequences

Chaque projet avec sa video, son contexte et la plateforme cible.

04

Performance

HTML/CSS/JS pur, animations GSAP, chargement rapide sur mobile.

Stack Technique

Frontend

HTML5 semantique
CSS3 custom properties
JavaScript vanilla
GSAP + ScrollTrigger

Design

Layout editorial cinematique
Type mono + grotesk
Accent bleu electrique
Micro-interactions hover

Deploiement

Netlify (hosting)
Video embed optimise
Images compressees
SEO monteur freelance

↓ Continuez pour le projet suivant

02

02 — AI Infrastructure · Site produit

VOXEN

« One AI runs the entire agency » — site d'une infrastructure IA self-hosted pour agences de createurs

LandingCanvasGSAPNetlify

Apercu desktop du site Voxen

Apercu mobile du site Voxen

Visiter le site

// Ce que le site met en avant

Self-hosted 8 modules Creator agencies Data in-house End to end

Contexte

Site produit pour Voxen, une infrastructure IA auto-hebergee qui orchestre une agence de createurs de bout en bout. Direction techno : fond noir absolu, reseau de noeuds anime en canvas, accent citron vert et typographie mono facon terminal.

Role

Direction Artistique
Developpement Front-End
Motion & animation

Annee

2026

Lien

Voir le site →

Univers visuel

Composition pleine page du site Voxen — Voxen — page complete

Fond#000000

Surface#0A0F04

Neon#C6F24E

Glow#E9FFA8

Texte#FFFFFF

Bordure#1A1A1A

Le noir absolu et le citron vert neon evoquent l'energie brute d'une infrastructure qui tourne en continu. Le reseau de noeuds anime materialise l'idee d'un cerveau unique qui orchestre plusieurs modules. Typographie mono partout : on est dans la machine.

Fonctionnalites Cles

01

Hero reseau anime

Constellation de noeuds en canvas, glow neon qui reagit au curseur.

02

Les 8 modules

Grille detaillee de l'infrastructure, presentee module par module.

03

Parcours produit

Probleme → modules → process → pricing, sur une seule page.

04

Direction mono

Typographie terminal, accent citron vert, fond noir absolu.

Stack Technique

Frontend

HTML5 / CSS3
JavaScript vanilla
Canvas (reseau anime)
GSAP

Design

Palette neon citron
Type mono terminal
Fond noir absolu
Motion reactif

Deploiement

Netlify (hosting)
Assets optimises
SEO produit
Analytics

↓ Continuez pour le projet d'étude

03

Projet d'étude · R&D maison 03 — mabstudio.fr/bourg · site-jeu pixel

LE BOURG

« Notre propre site transformé en village explorable » — moteur canvas écrit à la main, 60 fps, mobile façon console de poche

Canvas 2DJS vanillaCaddyVPS

Apercu desktop du Bourg : la place du marche et sa fontaine

Apercu mobile du Bourg : la coque console de poche en bois

Visiter le bourg

// Ce que le projet met en jeu

Moteur tile 16px maison 7 boutiques = 7 sections Formulaire d'audit jouable Musique CC0 Zéro framework

Contexte

Projet d'étude : notre propre site transformé en village explorable. Moteur canvas écrit à la main, 60 fps, mobile façon console de poche — un terrain de jeu pour explorer ce qu'un site peut oser. Chaque échoppe du bourg ouvre une section du vrai site.

Role

Direction Artistique
Moteur & développement
Pixel art & level design

Annee

2026

Lien

Visiter le bourg →

Palette du jeu

Herbe#35A641

Ciel#6FC0FF

Eau#46A0E0

Bois#8A5A38

Navy#2E3A72

Chemin#E8D7AB

Une palette de village : verts d'herbe et ciel clair, l'eau et le bois pour la matière, un navy profond pour ancrer les toits et l'interface. Des couleurs franches, dessinées pixel par pixel — assez pour qu'un site devienne un lieu.

Le Bourg : le pont de pierre sur la riviere — Le Bourg — le pont sur la rivière

Fonctionnalites Cles

01

Moteur canvas maison

Rendu tuile 16 px, caméra, collisions et animations : tout écrit à la main, sans moteur de jeu.

02

7 boutiques = 7 sections

Chaque échoppe du bourg ouvre une partie du site : audit, tarifs, réalisations, contact…

03

Formulaire jouable

L'audit gratuit se demande depuis le Comptoir — un vrai formulaire, soumis comme sur le site.

04

Console de poche

Sur mobile, une coque bois avec croix directionnelle et bouton A. Le bourg se joue au doigt.

Stack Technique

Rendu

Canvas 2D
JavaScript vanilla
Boucle rAF 60 fps
Sprites pixel art

Contenu

7 maps intérieures
Dialogues & PNJ
Mini-carte du bourg
Musique CC0 en boucle

Infrastructure

Export statique
Caddy (reverse proxy)
VPS
Zéro dépendance