MODVIA AI ACADEMY

Nivel 5, Signature Style

Modvia Academy | 2026

🟪NIVEL 5

Signature Style

Hero-uri 3D, cursoare custom, tranziții între pagini, mișcările care fac oamenii să te țină minte.

🎯 XP la finalizare: 700•🏅 Badge deblocat

 

 

Tehnica 1 • Cursor custom

Un punct sau un inel care urmărește mouse-ul, crește pe linkuri, se micșorează pe text. Detaliu mic, senzație de brand uriașă.

📜 Prompt Playbook, Cursor custom (React)
Cel mai bun AI. Claude Opus 4.6 via Cursor • De ce. Fizica cursorului e o problemă clasică de 'corectare cu spring damping'; Opus o rezolvă perfect.
Construiește-mi o componentă <SmoothCursor /> pentru Next.js 14 + Tailwind.

Comportament:
- Ascunde cursorul nativ doar pe desktop (păstrează-l nativ pe dispozitive touch)
- Randează un inel de 32px care rămâne în urma mouse-ului cu un spring (~200 stiffness)
- Randează un punct de 6px care urmărește instant
- La hover peste [data-cursor='grow'], inelul se scalează la 72px și se estompează
- La hover peste inputuri de text, cursorul devine o bară verticală de 2px
- Respectă prefers-reduced-motion (fallback la cursorul nativ)
- Toate stilurile în Tailwind; folosește motion values (fără layout thrash)
🥉 QUEST BRONZ +25 XP
🖱️Livrează un cursor smooth de bază

Obiectiv. Inelul urmărește mouse-ul cu lag, punctul e instant.

Pași
  1. Pune componenta generată în layout-ul tău Next.js.
  2. Testează pe o pagină reală cu linkuri.
  3. Verifică că e ascuns elegant pe touch.
Gata când…
  • ☐ Inelul rămâne în urmă, punctul conduce
  • ☐ Fără flicker al cursorului
  • ☐ Dispozitivele touch neafectate

 

Tehnica 2 • Tranziții între pagini care par native

Un fade blând + un slide ușor între rute. Face un SPA să pară o tăietură de film în loc de un whiplash.

📜 Prompt Playbook, Tranziții de pagină Next.js App Router
Cel mai bun AI. Claude Opus 4.6 • De ce. App Router + AnimatePresence e notoriu de tricky, Opus prinde corect pattern-ul template.tsx.
Next.js 14 App Router + Framer Motion. Construiește un <PageTransition> care:

- Învelește children în AnimatePresence cu mode='wait'
- Folosește usePathname ca key
- Fade + slide în sus 16px la intrare, fade + slide în jos 16px la ieșire
- Durată 300ms cu ease [0.22, 1, 0.36, 1]
- Trăiește în app/template.tsx ca să ruleze la fiecare schimbare de rută
- Respectă prefers-reduced-motion (fallback la instant)
🥈 QUEST ARGINT +50 XP
🎞️Adaugă tranziții de pagină pe tot site-ul

Obiectiv. Fiecare schimbare de rută trece printr-un fade.

Pași
  1. Pune componenta în app/template.tsx.
  2. Testează 3 rute.
  3. Verifică că poziția de scroll se restaurează corect.
Gata când…
  • ☐ Tranziția rulează la fiecare rută
  • ☐ Poziția de scroll se comportă corect
  • ☐ Fără layout shift

 

Tehnica 3 • Butoane magnetice & morph

Butoane care se înclină ușor spre cursor sau își schimbă forma la click. Mișcare de semnătură Apple.

📜 Prompt Playbook, buton magnetic
Cel mai bun AI. Claude Sonnet 4.6 • De ce. Sonnet e rapid și suficient pentru acest scop, e doar matematică vectorială.
Construiește o componentă <MagneticButton>:
- Copilul se translatează spre cursor cu un factor de damping de 0.3
- Se resetează la mouseleave cu un spring
- Limită: maxim 10px de translație în orice direcție
- Respectă prefers-reduced-motion
- Folosește pointer events (funcționează și cu stylus, nu doar cu mouse)

 

Tehnica 4 • Reveal-uri de text divizat

Titluri care se despart pe cuvinte sau litere și fac stagger la intrarea în vizor. Cea mai reutilizată mișcare de hero a ta.

📜 Prompt Playbook, reveal de text divizat
Cel mai bun AI. Claude Sonnet 4.6 • De ce. Mișcare simplă; folosește modelul mai rapid.
Construiește o componentă Framer Motion <SplitReveal>.

API: <SplitReveal text='Espresso worth waking up for.' stagger={50} by='word' />
- 'by' acceptă 'word' | 'char' | 'line'
- Fiecare bucată face fade + slide up 12px
- Se declanșează la intrarea în viewport, o singură dată
- Respectă prefers-reduced-motion
- Funcționează cu Fraunces și Inter fără să strice kerning-ul

 

Tehnica 5 • Hero WebGL cu scroll (Three.js)

Când Spline nu e suficient, shadere GLSL custom și Three.js. Aici e apa adâncă. Fă întâi quest-ul de Argint.

📜 Prompt Playbook, hero Three.js + react-three-fiber
Cel mai bun AI. Claude Opus 4.6 • De ce. Three.js e o capcană; Opus scrie r3f idiomatic cu useFrame, Scroll etc.
Construiește un hero Next.js folosind @react-three/fiber + @react-three/drei.

Scenă:
- Scenă întunecată, un singur tor plutitor într-un material auriu cald
- OrbitControls dezactivat, scena se rotește 30° pe baza progresului de scroll
- Parallax de mouse, camera se deplasează până la 20px
- Post-procesare: bloom subtil + film grain
- Fallback: pe dispozitiv slab (navigator.hardwareConcurrency < 4), randează o imagine poster statică

Fă-l un singur fișier Hero.tsx, importat dinamic cu ssr:false.
🥇 QUEST AUR +100 XP
🛸Livrează un hero WebGL

Obiectiv. Un hero Three.js custom pe un site real.

Pași
  1. Generează componenta Hero.
  2. Pune-o în site-ul tău personal sau în Halo Coffee.
  3. Testează pe un telefon vechi (sau cu throttling în Chrome DevTools).
  4. Adaugă calea de fallback pentru dispozitive slabe.
Gata când…
  • ☐ Rulează la 60fps pe desktop
  • ☐ Mobilul arată fallback fără să crape
  • ☐ Lighthouse mobil ≥ 70

 

Tehnica 6 • Secvență de imagini legată de scroll (stil Apple)

Un scroll conduce redarea cadru cu cadru a 60 de imagini. Ce face Apple pentru dezvăluirile lor de iPhone.

🥇 QUEST AUR +110 XP
🎞️Secvență legată de scroll

Obiectiv. O dezvăluire de produs condusă de scroll.

Pași
  1. Exportă 60 de cadre din Spline (randează ca secvență de imagini).
  2. Comprimă la WebP, țintă <40kb per cadru, total <2.5MB.
  3. Construiește o componentă <Sequence> care preîncarcă toate cadrele și folosește useScroll + un canvas.
  4. Leagă progresul de scroll de indexul cadrului.
Gata când…
  • ☐ Secvența rulează lin
  • ☐ Primul paint sub 3s
  • ☐ Fără sărituri de cadre când se dă scroll rapid

 

Tehnica 7 • Elemente reactive la sunet / ritm

Opțional, foarte de nișă, foarte memorabil. Un inel de hero sau o formă de undă care pulsează pe o piesă audio.

📜 Prompt Playbook, inel SVG reactiv la audio
Cel mai bun AI. Claude Opus 4.6 • De ce. Web Audio API e subtil, Opus gestionează AnalyserNode curat.
Construiește o componentă React <AudioRing audioSrc='/bg.mp3' />:
- Cerc SVG cu rază de 200px
- Folosește AnalyserNode din Web Audio API (fftSize 256)
- Scalează și schimbă nuanța inelului pe baza amplitudinii medii de frecvență
- Buton play/pause în interiorul inelului
- Muted din start, politicile de autoplay condiționate de gest respectate
- Respectă prefers-reduced-motion (tot redă audio, fără animație)