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.
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.
| Element | Declanșator | Durată |
|---|---|---|
| Titlu principal | la încărcare, mască pe rând | 1,15 s |
| Blocuri de conținut | IntersectionObserver, prag 8% | 0,80 s |
| Contoare numerice | prag 50% | 1,20 s |
| Linii de indicație | desen stroke-dashoffset | 0,90 s |
| Șina de flux | scalare verticală + noduri | 1,20 s |
| Scanarea din hero | buclă 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.
-
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.
-
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.
-
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.
-
Î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.
-
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ă.
- Norul nu se vedea deloc.
-
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.
-
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ță laloadpentru 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ă.
-
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.
-
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.
-
Trecerea 6 · verificare
- Tastatură. Comutatorul e un
tablistcu 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-motionfilmele 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ă.
- Tastatură. Comutatorul e un
-
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 laclamp(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.