NailArt Studio · Architecture
Comment est construit NailArt Studio — choix techniques, défis graphiques, ce que ça démontre.
Voir l'application →Architecture
Couches applicatives
Défis techniques
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.
Ce que ça démontre
Éditeur graphique · Interface tactile · Dans un navigateur