Nota de design · 01 / 03

INSTRUMENT

Prima din trei pagini construite pentru același produs. Aceasta tratează scannerul ca pe un instrument optic: fond aproape negru, un singur accent rece, date în monospațiat și o singură imagine — reconstrucția, în timp real, a lucrului pe care aparatul îl face de fapt.

Registru
Precizie tehnică, sobrietate clinică
Tehnică principală
WebGL2 scris de mână, fără biblioteci
Greutate JS
~24 KB, trei module ESM
Dependențe runtime
Niciuna, în afară de fonturi

01 — Ideea

Un scanner intraoral nu se vinde cu fotografia obiectului. Se vinde cu încrederea că fișierul care iese din el e corect.

De aici a pornit toată pagina: în loc să arate produsul din trei unghiuri, arată rezultatul — o arcadă maxilară reconstruită punct cu punct, exact în ordinea în care vârful ar parcurge-o în gură. Vizitatorul vede procesul înainte să citească un singur argument.

Restul paginii se subordonează acestei imagini. Fondul rămâne aproape negru ca norul de puncte să fie singura sursă de lumină. Accentul este un cian rece, culoarea LED-ului din vârful aparatului. Toate cifrele sunt monospațiate, ca pe un panou de aparat, nu ca într-o broșură.

Regula pe care am ținut-o: nicio decorațiune care nu descrie ceva real. Fiecare linie, fiecare punct și fiecare cifră de pe ecran corespunde unei proprietăți a produsului.

02 — Paletă

Nouă valori, dintre care șase sunt neutre. Un singur accent cromatic poartă toată atenția; chihlimbarul apare exclusiv în momentul de captură din shader, niciodată în interfață.

  • Ink 000#04060Afundal de pagină
  • Ink 100#070B11benzi, carduri
  • Ink 200#0B111Asuprafețe ridicate
  • Foreground#E9F2F8text principal
  • Dim#92A6B7text secundar
  • Mute#5D7183etichete, note
  • Cian#5BE1FFaccent unic, CTA
  • Cian adânc#1798BEhalouri, umbre colorate
  • Chihlimbar#FFC46Bdoar scânteia de captură

Contrastul textului principal pe fundal este ≈ 16:1, iar al textului secundar ≈ 7:1 — ambele peste pragul AA pentru corp de literă normal. Cianul se folosește pe fond întunecat pentru accent și, inversat, ca fundal de buton cu text aproape negru.

03 — Tipografie

Trei familii, fiecare cu o sarcină clară. Archivo este variabilă pe axa de lățime, ceea ce permite titluri late fără să apară la stiluri condensate false.

Archivo · wdth 112 · wght 620 — titluri

Arcada completă

Interliniere 0,90 · spațiere −0,038em. Lățimea extinsă îi dă titlului o prezență de panou de instrument, nu de revistă.

Inter Tight · wght 400 — corp

Senzorul citește tiparul de sute de ori pe secundă.

Măsura maximă 58 de caractere. Interliniere 1,62.

JetBrains Mono · wght 400–500 — date

264 × 37 × 46 mm · 19.500 lei

Toate cifrele, etichetele și codurile de secțiune. Cifre tabulare, ca valorile din fișa tehnică să se alinieze pe coloană.

Diacriticele românești au fost verificate în toate cele trei familii — inclusiv ș și ț cu virgulă dedesubt, nu cu sedilă.

04 — Sistemul de mișcare

O singură curbă de accelerare pentru tot ce intră în cadru (cubic-bezier(.16, 1, .3, 1)) și una mai scurtă pentru stările de hover. Nimic nu se mișcă mai mult de 20 px.

ElementDeclanșatorDurată
Titlu principalla încărcare, mască pe rând1,15 s
Blocuri de conținutIntersectionObserver, prag 8%0,80 s
Contoare numericeprag 50%1,20 s
Linii de indicațiedesen stroke-dashoffset0,90 s
Șina de fluxscalare verticală + noduri1,20 s
Scanarea din herobuclă continuă7,4 s + 5,9 s pauză

La prefers-reduced-motion: reduce scanarea se oprește pe modelul complet, granulația și liniile de scanare dispar, iar toate dezvăluirile devin instantanee. Pagina rămâne integral utilizabilă.

05 — Ce e sub capotă

Scena din hero nu folosește nicio bibliotecă 3D. Sunt trei module scrise de mână: geometria, randarea și comportamentul paginii.

  1. Arcada, generată procedural

    Curba arcadei este parametrizată după lungimea de arc, nu după unghi, ca dinții să cadă la distanțele lor reale. Lățimile meziodistale sunt cele standard (incisiv central 8,6 mm, molar prim 10,3 mm ș.a.m.d.). Fiecare coroană are un câmp de cuspizi propriu — creastă incizală la frontali, doi cuspizi la premolari, patru la molari — plus fisura centrală, linia coletului și bombeul ecuatorial. Gingia are festonul papilar între punctele de contact; bolta palatină are rugi transversale în treimea anterioară. Curba Spee ridică progresiv planul ocluzal spre posterior.

    ≈ 90.000 de puncte, generate în < 60 ms, deterministe.

  2. Dezvăluirea urmează traseul vârfului

    Fiecare punct primește un parametru de măturare — poziția lui unghiulară în jurul arcadei. Shaderul dezvăluie punctele în ordinea aceea, așa că reconstrucția se citește ca o mișcare de mână dinspre un molar, peste frontali, până la molarul opus. Înainte de captură punctul plutește ușor deasupra suprafeței reale; la trecerea frontului de captură primește o scânteie caldă și se așază.

    Un singur apel de desenare pentru tot norul.

  3. Lanț de post-procesare în patru treceri

    Scena se randează într-un framebuffer pe 16 biți, apoi: prag de luminozitate la un sfert de rezoluție, două perechi de blur gaussian separabil, și o trecere finală care adaugă aberație cromatică radială, bloom, vinietă, granulație și banda de captură. Tonul e comprimat cu o aproximare ACES, ca nucleele luminoase să nu se taie brutal.

    Cinci apeluri de desenare pe cadru, în total.

  4. Încadrare care se adaptează la ecran

    Distanța camerei se calculează din raportul de aspect, ca arcada să intre întotdeauna în cadru pe lățime. Decalajul de obiectiv (lens shift) mută subiectul în cadru fără să încline camera, ca modelul să stea deasupra titlului, nu în spatele lui.

    Densitatea punctelor scade pe ecrane mici.

Dacă WebGL2 lipsește sau contextul eșuează, hero-ul cade elegant pe fotografia produsului. Dacă JavaScript nu rulează deloc, tot conținutul rămâne vizibil — dezvăluirile sunt condiționate de o clasă pusă de script.

06 — Jurnalul iterațiilor

Trei treceri, fiecare cu constatări verificate în browser, nu presupuse.

  1. Trecerea 1

    • Norul nu se vedea deloc. smoothstep(230., 70., d) avea marginile inversate — comportament nedefinit în GLSL, care returna zero și anula opacitatea fiecărui punct.
    • Punctele erau sub-pixel. Formula de dimensiune folosea o distanță de referință de 140 mm; corectată și legată de camera curentă.
    • Compoziție. Arcada stătea exact în spatele titlului. Am introdus decalajul de obiectiv și am rescris voalul, ca titlul să se așeze pe întuneric, iar partea de sus a cadrului să rămână curată.
    • Banda de scanare era o linie dură pe toată lățimea ecranului și citea ca un artefact. Devenită glow lat, la o treime din intensitate.
    • Ritm vertical. Spațierea între secțiuni a scăzut de la 168 px la 116 px — pagina respira, dar părea goală.
  2. Trecerea 2

    • Hero-ul pornea gol. Scanarea începea de la zero, deci primele secunde arătau o ceață albastră. Acum pornește la 42% și ține modelul complet pe ecran între treceri.
    • Dispersia era prea mare. Punctele necapturate zburau la 9 mm de suprafață; reduse la 3 mm, silueta arcadei rămâne lizibilă tot timpul.
    • Imagine greșită. Fișierul primit ca „captură de ecran din software" era tot o fotografie de produs. Am înlocuit figura cu o diagramă de flux desenată — nu inventez o interfață pe care nu am văzut-o.
    • Mobil: arcada ieșea din cadru. Câmpul vizual orizontal e mult mai îngust pe un ecran înalt. Distanța camerei se calculează acum din raportul de aspect.
    • Aberația cromatică producea franjuri curcubeu pe telefon; redusă la jumătate sub 760 px.
  3. Trecerea 3

    • Ceața era absolută. Pragurile fixe de 130–320 mm stingeau modelul când camera se retrăgea pe mobil. Legate acum de distanța camerei.
    • Rezistență la eșec. Dezvăluirile depind de clasa .js; fără JavaScript pagina se afișează integral. Plus o plasă de siguranță la load pentru ce e deja în ecran.
    • Navigare. Ancorele primesc scroll-margin-top, ca titlurile să nu mai intre sub bara fixă.
    • Stări de focus vizibile pe toate elementele interactive și o legătură „sari la conținut" pentru navigarea de la tastatură.
    • Verificare finală pe 390, 768, 1280 și 1440 px, cu consola curată.
  4. Trecerea 4 · materialele producătorului

    • Fișa tehnică, refăcută din catalog. Sursa de adevăr a devenit catalogul INO200 2025 al BLZ, nu pagina distribuitorului. Filmul de produs din 2023 anunță „up to 25 mm" și „less than 40 s"; catalogul din 2025 dă 23 mm și 30 s. Am ținut catalogul — e mai recent și e fișa formală.
    • Diagrama de flux a fost înlocuită cu software real. La trecerea 2 refuzasem să inventez o interfață. Acum există capturile reale: paisprezece module, fiecare cadru extras din filmele de instruire ale producătorului.
    • Secțiune nouă — „Rezultat". Trei scanări reale din catalog (preparație, scanbody, metal) și o înregistrare a software-ului în timpul unei scanări clinice. Dovada înaintea argumentului.
    • Subtitrări în engleză, arse în cadru. Filmele de instruire au legende pe banda de jos. Toate capturile provenite din video sunt tăiate la 87% din înălțime, deasupra benzii — pierdem bara de butoane, nu lucrul.
    • Trei momente reașezate (cameră inteligentă, culoare, măsurători): cadrul ales inițial avea legendă exact în mijloc, nu la margine.
  5. Trecerea 5 · așezarea materialului

    • Panoul video ocupa toată coloana. Sursa are 864 px lățime; întinsă peste 1300 px devenea moale. Limitat la 900 px și centrat, ca să se afișeze aproape 1:1.
    • Alb pe negru. Software-ul BLZ e o interfață albă, iar pe fundalul paginii sărea ca un dreptunghi lipit. Rezolvat ca lumină, nu ca mască: luminozitate la 94–95%, plus un halou cian în spatele ramei — un ecran aprins într-o cameră întunecată.
    • Indice de modul. Rama arată acum 02/14 în colț, ca un aparat care îți spune pe ce canal ești.
    • Comutatorul de module avansează singur la 3,8 s, dar se oprește definitiv la prima atingere — ca să nu-ți fugă panoul de sub ochi în timp ce citești.
  6. Trecerea 6 · verificare

    • Tastatură. Comutatorul e un tablist cu roving tabindex: săgeți, Home și End; panoul activ e singurul în ordinea de tab.
    • Greutate. Filmele pornesc doar când intră în ecran și se opresc când ies — nu decodăm patru clipuri simultan. Total de imagine și video: sub 2,4 MB pe pagină.
    • Mișcare redusă. La prefers-reduced-motion filmele primesc controale și nu pornesc singure, iar avansul automat e oprit.
    • Contrast. Butoanele cu fundal în degrade sunt raportate greșit de verificarea automată; măsurate pe pixeli reali dau 14,4:1.
    • Verificare finală pe 360, 390, 768, 1024, 1280 și 1440 px: consolă curată, fără derulare orizontală, fără resurse lipsă.
  7. Trecerea 7 · brandul casei și registrul medicilor

    • Marca este Bonesphere. Sigla producătorului a ieșit din bara de sus și din subsol; în locul ei stă wordmark-ul Bonesphere din setul de brand, aceeași siglă folosită pe pagina Warantec și pe landing-urile medicilor. BLZ Technology rămâne numit în cele trei locuri unde este o atribuire de fapt, nu o marcă: sursa specificațiilor, fabricantul din subsol și nota de proveniență. Fără fabricant numit, „conform producătorului” n-ar mai însemna nimic.
    • Registrul, luat de pe pagina Warantec. Adresare formală, forme verbale complete, vocabular clinic — „linia de finiție”, „adaptare marginală”, „câmp operator”, „laborator de tehnică dentară”. Cifrele rămân atribuite o singură dată, în secțiunea de date și în subsol, nu repetate la fiecare planșă.
    • Antiteza de vânzător a dispărut. „Nu randări. Scanări.”, „Nu e magie și nu e un aparat foto.”, „Cifrele, fără ambalaj”, „parametri, nu aproximări”, „pe model, nu cu rigla pe gips” — toate erau construcții de reclamă, iar cititorul este medic. Au fost înlocuite cu afirmații de fapt.
    • Pagina nu se mai descrie pe sine. „Tot ce vezi mai jos…” și celelalte trimiteri la propria ordine au fost scoase; ce rămâne spune ce este imaginea, nu unde se află în pagină.
    • Convenții de casă. „Scanner”, cu doi n, este grafia cerută de Bonesphere. Butonul spune „Discută cu un specialist”, la fel ca pe pagina Warantec. Telefonul a trecut pe 0754 805 582.
    • Un defect vechi, ieșit la iveală acum. Titlul acestei note — „INSTRUMENT”, zece caractere care nu se pot rupe — depășea cu 11 px un ecran de 360 px. Trecerile anterioare măsuraseră doar cele trei pagini de produs, nu și notele. clamp(46px…) a coborât la clamp(40px…).

07 — Surse și rezerve

Sursa de adevăr pentru cifre este catalogul INO200 2025 al producătorului, BLZ Technology (Wuhan) Co., Ltd. Unde producătorul se contrazice cu sine — filmul de produs din 2023 spune „up to 25 mm" și „less than 40 s", catalogul din 2025 spune 23 mm și 30 s — am reținut catalogul, fiind documentul mai recent și mai formal. Unde distribuitorul diferă de producător, câștigă producătorul.

  • Fișa tehnică și configurația minimă de stație — catalog INO200 2025, p. 4.
  • Cele trei planșe clinice (preparație, scanbody, metal) — catalog INO200 2025, p. 2, secțiunea „Real Scanning Cases".
  • Capturile din software — cadre din filmele oficiale de instruire BLZ (scanare, raport A.I., cameră inteligentă, design de coroană, gutieră, culoare, scanbody, măsurători) și din posterele de produs (zone retentive, linia de finiție, simulare ortodontică, control al calității, model 3D).
  • Detecția ocluziei — panoul din catalog, p. 3.
  • Filmul de produs și randările — biblioteca de materiale a producătorului.

Nu am inventat termene de garanție, cifre de precizie sau afirmații clinice. Simularea ortodontică e prezentată ca orientativă, exact cum o declară programul în propria interfață. Prețul, pachetul livrat și demonstrația gratuită în cabinet sunt ale distribuitorului român.

O notă de onestitate asupra imaginii: filmele de instruire au subtitrări în engleză arse în cadru. Nu le-am șters retușând, ci am tăiat cadrul deasupra benzii de legendă. Nimic din ce se vede în capturi nu a fost desenat, mutat sau recolorat.