Επισκόπηση
Ένα single-page portfolio για οπτικά εφέ που σχεδιάστηκε με έναν στόχο: να νιώθεις ότι κινείσαι μέσα σε τρισδιάστατο χώρο, όχι ότι κάνεις scroll σε ιστοσελίδα. Κάθε κύλιση είναι σκόπιμη κίνηση κάμερας. Κάθε hover αλλάζει την υφή αυτό που βλέπεις.
Χτίστηκε με React Three Fiber, GSAP ScrollTrigger, Lenis και χειρόγραφα GLSL shaders.
Τι υλοποιήθηκε
Kinetic headline — Τίτλος δεμένος με GSAP ScrollTrigger: το letter-spacing ανοίγει, το skew περιστρέφεται, οι λέξεις εμφανίζονται και εξαφανίζονται καθώς κυλάς. Καθαρά transform και opacity — κανένα layout trigger.
Stacking project cards — GSAP ScrollTrigger pin + overlap. Κάθε κάρτα γλιστρά κάτω από την επόμενη, δίνοντας την αίσθηση ότι στοιβάζεις χαρτιά στο χέρι. Το scroll scrub συγχρονίζεται με Lenis για απολύτως ομαλή κίνηση.
Project planes — Ξεχωριστά R3F planes ανά project με custom wave + RGB-split shader. Το πλάτος του κύματος αυξομειώνεται ανάλογα με πόσο κοντά είναι ο κέρσορας. Στο hover τα RGB channels χωρίζουν, δίνοντας εφέ χρωματικής απόκλισης.
Lenis + GSAP sync — Το Lenis τροφοδοτεί απευθείας το GSAP ticker μέσω gsap.ticker.add. Όλα τα scroll effects τρέχουν στο ίδιο RAF — δεν υπάρχει jitter μεταξύ του particle field και των GSAP animations.
Stack
| Layer | Technology |
|---|---|
| Build | Vite + React |
| 3D | React Three Fiber + Drei |
| Shaders | GLSL (custom vertex + fragment) |
| Animation | GSAP + ScrollTrigger |
| Scroll | Lenis |
| Styling | Tailwind CSS |
| Deploy | Vercel (Vite preset) |
Σημειώσεις απόδοσης
- Το
dpr={[1, 2]}κόβει το DPR στα 2× για retina οθόνες, χωρίς να σκοτώνει GPUs χαμηλής κατηγορίας. - Όλα τα scroll effects πιάνουν μόνο transform + opacity. Μηδέν layout triggers.
- Το grain overlay είναι
fixed inset-0canvas — δεν ανήκει ποτέ σε scroll container.
Βασικές επιλογές
Γιατί R3F και όχι απευθείας Three.js; Το React component model απλοποιεί κατακόρυφα τη διαχείριση της σκηνής. Τα useFrame, useThree και τα βοηθητικά του Drei εξαλείφουν σχεδόν όλο τον boilerplate — και το Three.js παραμένει πάντα διαθέσιμο κάτω από αυτά.
Γιατί Lenis και όχι native scroll; Ομοιόμορφη φυσική κύλισης σε όλους τους browsers. Η ease curve ρυθμίζεται ελεύθερα — το portfolio ήθελε συγκεκριμένη «βαριά» αίσθηση, τίποτα σχετικά με το ελαφρύ default του browser.
Γιατί Vite και όχι Next.js; Για ένα αμιγώς οπτικό portfolio δεν υπάρχει λόγος SSR. Το HMR του Vite είναι ταχύτερο στο shader iteration — και αυτός ο βρόχος ανατροφοδότησης είναι κρίσιμος όταν τελειοποιείς GLSL.
