01 / 03

03

// SELECTED WORKS

CASE
STUDIES

Scroll

01

01 — Portfolio · Video editor

BASTIEN BRUNIER

“Editing that makes people stay” — cinematic portfolio for a freelance video editor

HTMLCSSJavaScriptGSAP

Desktop preview of the Bastien Brunier portfolio

Mobile preview of the Bastien Brunier portfolio

View the portfolio

// Project figures

200+Videos edited

10M+Total views

YouTubeCreators & brands

Context

Portfolio for a freelance video editor. The showreel is king: autoplay, sound off by default, captions styled like an editing desk (“SRC_01 — SHOWREEL”) and mono type for an editorial look.

Role

Web Design
Front-End Development
Art Direction

Year

2026

Link

View the portfolio →

Art direction

Background#0C0C0C

Surface#141414

Accent#4A6AFF

Text#EDEBE3

Gray#8A8A8A

Border#1E1E1E

Deep black gives the video content room to breathe. The electric blue adds a creative signature without ever competing with the images. Mono type for captions, grotesque for titles: the visual language of an editing desk.

Full-page composition of the Bastien Brunier portfolio — Bastien Brunier — full page

Key features

01

Immersive showreel

Full-screen video hero, autoplay, sound off by default.

02

Editorial captions

Mono labels “SRC_01 — SHOWREEL”, editing-desk look.

03

Sequence gallery

Each project with its video, its context and its target platform.

04

Performance

Plain HTML/CSS/JS, GSAP animations, fast loading on mobile.

Tech stack

Frontend

Semantic HTML5
CSS3 custom properties
Vanilla JavaScript
GSAP + ScrollTrigger

Design

Cinematic editorial layout
Mono + grotesque type
Electric blue accent
Hover micro-interactions

Deployment

Netlify (hosting)
Optimized video embed
Compressed images
SEO for a freelance editor

↓ Keep going for the next project

02

02 — AI Infrastructure · Product site

VOXEN

“One AI runs the entire agency” — website for a self-hosted AI infrastructure for creator agencies

LandingCanvasGSAPNetlify

Desktop preview of the Voxen site

Mobile preview of the Voxen site

Visit the site

// What the site highlights

Self-hosted 8 modules Creator agencies In-house data End to end

Context

Product site for Voxen, a self-hosted AI infrastructure that runs a creator agency end to end. Design direction: pure black background, canvas-animated node network, lime green accent and terminal-style mono type.

Role

Art Direction
Front-End Development
Motion & animation

Year

2026

Link

View the site →

Visual universe

Full-page composition of the Voxen site — Voxen — full page

Background#000000

Surface#0A0F04

Neon#C6F24E

Glow#E9FFA8

Text#FFFFFF

Border#1A1A1A

Pure black and neon lime evoke the raw energy of an infrastructure that never stops running. The animated node network embodies the idea of a single brain orchestrating several modules. Mono type everywhere: you are inside the machine.

Key features

01

Animated network hero

Canvas node constellation, neon glow that reacts to the cursor.

02

The 8 modules

Detailed grid of the infrastructure, presented module by module.

03

Product journey

Problem → modules → process → pricing, on a single page.

04

Mono art direction

Terminal typography, lime green accent, pure black background.

Tech stack

Frontend

HTML5 / CSS3
Vanilla JavaScript
Canvas (animated network)
GSAP

Design

Neon lime palette
Terminal mono type
Pure black background
Reactive motion

Deployment

Netlify (hosting)
Optimized assets
Product SEO
Analytics

↓ Keep going for the study project

03

Study project · in-house R&D 03 — mabstudio.fr/bourg · pixel game site

LE BOURG

“Our own website turned into an explorable village” — hand-written canvas engine, 60 fps, mobile styled like a handheld console

Canvas 2DVanilla JSCaddyVPS

Desktop preview of Le Bourg: the market square and its fountain

Mobile preview of Le Bourg: the wooden handheld console shell

Visit the village

// What the project explores

In-house 16px tile engine 7 shops = 7 sections Playable audit form CC0 music Zero framework

Context

Study project: our own website turned into an explorable village. Hand-written canvas engine, 60 fps, mobile styled like a handheld console — a playground to explore what a site can dare to do. Every stall in the village opens a section of the real site.

Role

Art Direction
Engine & development
Pixel art & level design

Year

2026

Link

Visit the village →

Game palette

Grass#35A641

Sky#6FC0FF

Water#46A0E0

Wood#8A5A38

Navy#2E3A72

Path#E8D7AB

A village palette: grass greens and a clear sky, water and wood for texture, a deep navy to anchor the roofs and the interface. Bold colors, drawn pixel by pixel — enough for a site to become a place.

Le Bourg: the stone bridge over the river — Le Bourg — the bridge over the river

Key features

01

In-house canvas engine

16 px tile rendering, camera, collisions and animations: all hand-written, no game engine.

02

7 shops = 7 sections

Every stall in the village opens a part of the site: audit, pricing, work, contact…

03

Playable form

The free audit is requested from the Counter — a real form, submitted just like on the site.

04

Handheld console

On mobile, a wooden shell with a D-pad and an A button. You play the village with your finger.

Tech stack

Rendering

Canvas 2D
Vanilla JavaScript
60 fps rAF loop
Pixel art sprites

Content

7 interior maps
Dialogue & NPCs
Village mini-map
Looping CC0 music

Infrastructure

Static export
Caddy (reverse proxy)
VPS
Zero dependencies