Hai să facem cel mai cerut lanț în detaliu chinuitor, pas cu pas. Un hero 3D făcut în Spline, randat într-o aplicație construită de Lovable.
📜 Prompt Playbook, integrare Spline → Lovable
Cel mai bun AI. Claude integrat în Lovable •De ce. Lovable trebuie să instaleze un pachet și să folosească o bibliotecă specifică. Claude înțelege @splinetool/react-spline mai bine decât alternativele.
Adaugă o scenă 3D Spline ca fundal de hero.
- Instalează @splinetool/react-spline și @splinetool/runtime
- URL public Spline: [LIPEȘTE AICI URL-UL TĂU SPLINE]
- Învelește-o într-un div înalt de 100vh
- Overlay deasupra: un titlu, un subtitlu și un CTA (textul rămâne clar)
- Adaugă un overlay subtil cu gradient întunecat între 3D și text
- Pe mobil (<768px), înlocuiește 3D-ul cu o imagine poster statică pentru performanță
- Fă lazy-load la componenta Spline (dynamic import, ssr: false)
- Arată un loader minimal cât timp scena se inițializează
Lecția 4 • Ghid de integrare: Figma → Framer
Aceasta e aproape magie, Framer îți permite să lipești frame-uri Figma și să obții un site editabil.
Lecția 5 • Ghid de integrare: Lottie & Rive → Webflow
Animație
Cum o încorporezi în Webflow
Lottie
Nativ, Webflow are un element Lottie. Trage, încarcă .json, setează loop/trigger.
Rive
Embed cu cod custom. Page Settings → înainte de </body>: <script type='module' src='https://unpkg.com/@rive-app/canvas@2/rive.js'></script>. Adaugă un <canvas id='rive'> și un mic script de init.
📜 Prompt Playbook, embed Rive → Webflow
Cel mai bun AI. Claude Sonnet 4.6 •De ce. Sonnet scrie scripturi de embed strânse, fără umplutură.
Mi-am urcat fișierul Rive pe propriul CDN la: [URL].
Dă-mi codul exact de embed custom pentru Webflow:
- Un <canvas> cu id='rive-hero', cu width/height setate
- <script type='module'> inline care importă rive din jsDelivr
- Creează un new Rive({ src, canvas, stateMachines: ['main'], autoplay: true })
- Adaugă un click listener pe canvas care declanșează un input de stare boolean 'clicked'
- Respectă window.matchMedia('(prefers-reduced-motion: reduce)')
Ține tot codul sub 25 de linii.
Lecția 6 • Ghid de integrare: v0/Lovable → Cursor pentru editări avansate
Builderele AI sunt grozave pentru schițe. În momentul în care ai nevoie de un retuș pixel-perfect, mută codul în Cursor.
🎯 Pachetul de quest-uri Nivel 3
Alege cel puțin trei. Quest-urile de Aur de aici sunt cele mai bune piese de portofoliu din curs.
🥉 QUEST BRONZ+25 XP
🎞️Lottie într-un hero Framer
Obiectiv. Adaugă o iconiță Lottie în buclă într-un hero Framer.
Pași
Alege un Lottie gratuit demn de hero (caută 'ambient waves' sau similar).
În Framer: Insert → Assets → Lottie → upload.
Poziționează-l în spatele sau lângă titlul tău.
Setează-l în loop, oprește-l sub fold.
Gata când…
☐ Lottie rulează în buclă
☐ Fără autoplay când s-a dat scroll dincolo de el
🥉 QUEST BRONZ+25 XP
🎨Frame Figma → pagină Framer
Obiectiv. Lipește un hero Figma în Framer și păstrează totul editabil.
Pași
Proiectează un hero simplu în Figma (titlu + imagine + CTA).
Copiază frame-ul (⌘C).
În canvas-ul Framer, ⌘V.
Ajustează layout-ul și publică.
Gata când…
☐ Textul e editabil în Framer (nu aplatizat în imagine)
☐ Se publică curat
🥈 QUEST ARGINT+55 XP
🎭Scenă Spline → componentă de cod Framer
Obiectiv. Încorporează un iframe Spline într-un site Framer.
Pași
Exportă scena Spline ca 'Public URL'.
În Framer: Insert → Embed → lipește URL-ul.
Dimensionează ca să umple hero-ul, blochează raportul de aspect.
Adaugă o imagine de fallback în spatele ei.
Adaugă un overlay 'Loading…' care se ascunde la încărcarea iframe-ului (code override Framer).
Gata când…
☐ Scena se randează în site-ul publicat
☐ Fallback-ul apare înainte de încărcare
☐ Funcționează pe telefon (sau se degradează elegant)
🥈 QUEST ARGINT+60 XP
🧱Buton Rive → Webflow
Obiectiv. Încorporează un buton Rive interactiv în Webflow.
Pași
Construiește butonul cu 4 stări din Nivel 2.
Urcă fișierul .riv pe propriul Cloudflare R2 sau Netlify Drop.
În Webflow adaugă un embed de cod custom cu <canvas> + scriptul de init (vezi Lecția 5).