01 · Engineering practice · Lyon · 2026
AutomatX — one engineer, X labs.
The site for AutomatX Labs, my independent engineering practice. Four labs split by what they improve (a process, a body, a physical thing, a computation), eight capabilities running through them, and a 3D star map that puts the whole model on one screen.
// The brief
Many fields, one method, one site.
Lab automation, motion analysis, 3D printing, AI. On a CV that reads as scattered. The site had to show it's one method applied everywhere: measure it, automate it, make it reproducible.
The answer was the X Labs model. Labs are split by the system they improve, and capabilities are the tools they share. A project belongs to the lab whose system it improves, not to the tools it uses.
[ x_labs ]
Four labs, eight capabilitiesProcess · Pharma, Body · Sports, Matter · Robotics and Compute · AI share sensors, electronics, mechanics, software, data, AI/ML, validation and industrialisation.
[ zero_requests ]
Nothing loads from elsewhereFonts, scripts and three.js are all self-hosted. No CDN, no Google Fonts, no analytics, so there's nothing to raise a GDPR question.
[ progressive ]
Works without JavaScriptPlain HTML and CSS first. Scripts only add to it: the 3D map, live sports figures and scroll reveals.
[ i18n ]
EN · FRTen URLs, each paired with its French mirror through hreflang, plus a sitemap and JSON-LD.
// Signature build
The labs, as a constellation
The hub map from the home page, running here as on the live site. The four labs sit on two diagonals, so their links draw the logo's X. Capabilities orbit on an outer sphere near the labs they serve. Drag to orbit, throw a star, hover to light its links.
web3d.jsdrag · hover · ctrl + scroll to zoom
Automat Labs
AutomatX Labs is the independent engineering practice of Yolan Weiler, a biomedical & electrical engineer (KU Leuven) based in Lyon. One method applied everywhere: measure it, automate it, make it reproducible.
Drag to rotate · ⌘/Ctrl + scroll or pinch to zoom · tap a star to read →// How it's built
The SVG stays the source of truth
The map starts as an accessible SVG: real links, focusable nodes, readable labels. three.js is a layer behind it, and the SVG keeps working when that layer doesn't load.
01 / read the markup
Nodes & edges from the DOM
web3d.js builds the graph from the SVG circles and <line data-a data-b> edges, so changing the map is a markup edit.
02 / glue every frame
Projected back to the screen
Each frame, every star is projected to the screen and its SVG node moved there, keeping labels, focus rings and hit areas on the stars.
03 / spend nothing idle
Lazy, paused, optional
The script only loads as the map nears the viewport and pauses off-screen. With reduced motion or no WebGL, the flat map stays.
0
external requests
4 × 8
labs × capabilities
10
URLs · EN + FR
1
third-party library
// Gallery
Through the site
