NailArt Studio · Architecture

Un éditeur graphique. Un moteur de rendu vectoriel/raster.
Une interface tactile. Dans un navigateur.

Comment est construit NailArt Studio — choix techniques, défis graphiques, ce que ça démontre.

Voir l'application →

NailArt Studio

React Vite Fabric.js Node.js Canvas API SVG
React
Fabric.js
Node.js

Ce qui est complexe

📐

Géométrie de la main

L'application simule une main cohérente : les ongles suivent l'orientation naturelle des doigts. Dégradés et placement de motifs restent alignés avec cette géométrie — les coordonnées sont converties entre la scène globale et le repère local de chaque ongle.

🎨

Dégradés vectoriels

Chaque dégradé est piloté par un vecteur manipulable directement sur l'ongle. L'utilisateur ajuste l'orientation, la position des couleurs et la zone intermédiaire. Le rendu reste stable quelle que soit l'inclinaison de l'ongle.

🖼

Import SVG / PNG et recolorisation

Les motifs s'importent en SVG ou PNG. Les SVG sont recolorisables quand leurs zones noires sont détectées comme modifiables. Les PNG sont convertis côté serveur en SVG — la qualité dépend du fichier source : certains produisent des chemins propres, d'autres des tracés monolithiques plus difficiles à transformer.

Effets visuels sur motifs

Quatre effets disponibles — rendu net, aérographe (halo diffus), relief (ombrage interne), épaississement de contour. Ce ne sont pas de simples filtres CSS : ils rasterisent temporairement le SVG, construisent un masque, puis génèrent plusieurs passes graphiques pour un rendu lisible tout en conservant la couleur choisie.

🧊

Fausse 3D pour les objets décoratifs

Plutôt qu'un moteur 3D complet, l'application applique des transformations de perspective, d'ombre et de couleur à des PNG détourés. La position de l'objet sur l'ongle influence son inclinaison et son écrasement horizontal, simulant la courbure de la surface.

📱

Ergonomie mobile

L'usage naturel se fait souvent sur téléphone. L'interface reste utilisable en tactile : zoom, déplacement de la zone de travail, sélection d'un ongle, menus compacts, actions accessibles sans clavier.

💾

Sauvegarde et export

Les créations peuvent être conservées, rechargées et exportées en image. Les motifs importés sont conservés côté navigateur — l'utilisateur retrouve sa bibliothèque personnalisée à chaque session.

Canvas masqué multi-couches
Fabric.js, clipping masks par ongle
Géométrie curviligne
Coordonnées locales par doigt
Rendu hybride vectoriel/raster
SVG + passes canvas
Import et conversion d'images
PNG→SVG côté serveur (Node.js)
Effets graphiques avancés
Rasterisation temporaire + multi-passes
Fausse 3D
Transformations perspective sur PNG détourés
Persistance navigateur
Bibliothèque de motifs localStorage

Essayer NailArt Studio

Éditeur graphique · Interface tactile · Dans un navigateur