Il progetto

Un tool interno nato da un'esigenza precisa: restaurare digitalmente le grafiche tipografiche delle maglie da calcio vintage. Nameset, sponsor, dettagli gara — ogni elemento catalogato, ogni carattere caricato come SVG, ogni composizione anteprima sul canvas.

Il mio ruolo

Ho progettato e sviluppato l'intero strumento: architettura dell'interfaccia, editor del character map, canvas con Fabric.js, algoritmo per l'arco tipografico e integrazione con Supabase per lo storage.

Come ci siamo arrivati

  1. 01 Definizione del flusso: dalla catalogazione degli asset alla composizione sul canvas
  2. 02 Progettazione dell'archivio con filtri per tipo, stagione e competizione
  3. 03 Sviluppo del Character Map Editor per il caricamento degli SVG
  4. 04 Implementazione della Sandbox con Fabric.js — zoom, pan, arco tipografico
  5. 05 Integrazione con Supabase per storage e salvataggio preset

Cosa fa

Archivio centralizzato

nameset, sponsor e dettagli gara in un unico posto consultabile

Composizione in tempo reale

nome e numero composti sul canvas mentre si regolano i parametri

Type on a path

algoritmo arco personalizzato per riprodurre la curvatura originale dei nameplate

Export PDF 1:1

in sviluppo — per la stampa fedele in dimensioni reali

Il Problema

Ricostruire la grafica originale di una maglia vintage significa partire da zero, ogni volta, senza riferimenti digitali.

Ogni maglia ha il suo nameset, la sua spaziatura, la sua curvatura. I font non esistono come file — vanno ricostruiti carattere per carattere da scansioni o fotografie. Senza uno strumento dedicato, il processo era lento, dispersivo e impossibile da ripetere in modo coerente.

Come l'abbiamo risolto

L'archivio

Una libreria di asset tipografici filtrabili per tipo, stagione e competizione. Ogni nameset ha la sua mappa di caratteri SVG, caricabili uno per uno o incollando direttamente da Illustrator.

La Sandbox

Un canvas con zoom, pan e anteprima in tempo reale. Si regolano scala, spaziatura e arco — e il nome si compone istantaneamente. I preset tipografici si salvano per riutilizzarli.

L'arco

Un algoritmo custom per posizionare ogni carattere lungo un percorso circolare, replicando la curvatura dei nameplate originali con precisione millimetrica.

Il Progetto