Punctul de plecare
Am vrut ca vizitatorii să poată încerca interfețele pe care le construim în timp ce citesc despre munca noastră. Provocarea a fost să aducem mișcare și profunzime într-un site de servicii fără ca mesajul să depindă de încărcarea unei scene 3D.
Ce am construit
- O emblemă tridimensională care răspunde la cursor, cu vedere descompusă și controale pentru pauză și reluare. Aceeași scenă oferă și acces la jocul Fragments.
- O prezentare de cod care alătură exemple sursă animate și previzualizări vizuale, astfel încât vizitatorii să poată lega implementarea de interfața rezultată.
- Apariții la derulare, înclinarea cardurilor, butoane magnetice și tranziții de text care păstrează limbajul vizual pe întreaga pagină.
Cum integrăm mișcarea
Secțiunea principală pornește cu un SVG randat pe server. Randarea Three.js se încarcă după ce pagina este pregătită și scena se apropie de zona vizibilă. Animația logo-ului se oprește când scena este ascunsă, respectă preferința pentru mișcare redusă și păstrează o alternativă dacă WebGL nu poate porni.
Prezentarea de cod folosește o previzualizare statică pe ecrane compacte sau când este cerută mișcare redusă și verifică vizibilitatea secțiunii și a filei înainte să animeze. Conținutul rămâne lizibil și în afara configurației ideale de desktop.
Stack
Next.js, React, Three.js, SVG și CSS, cu IntersectionObserver, requestAnimationFrame și conținut în română și engleză.
Stadiul actual
O experiență de brand internă, construită și întreținută ca parte a acestui site. Deschide pagina principală pentru a încerca comenzile logo-ului, apoi derulează la prezentarea de cod pentru a explora exemplele animate.