Loader con split-text, scroll-driven parallax, transizioni di pagina con slab overlay, 3D tilt cards — tutto riusabile come componenti JS puri.
Muovi il mouse per il parallax. Naviga tra le pagine per la transition. Scrolla per il reveal.
Progress bar, parallax, horizontal scroll, reveal stagger — tutti legati allo scroll position con rAF.
Slab overlay a 5 colonne con stagger. Il contenuto svanisce e riappare. Smooth come un'app nativa.
Counter 0→100, split text char-by-char, curtain reveal. Prima impressione da film.
Velocità controllata, nessun jank. Lo sfondo scorre a un terzo della velocità del contenuto: profondità senza nausea.
Lo scroll verticale guida il tape orizzontale con sticky positioning. Nessuna libreria.
Il nastro si muove in base alla posizione scroll verticale, mappata linearmente.
position:sticky + altezza calcolata = scroll hijack pulito senza JS scroll handler.
Solo transform + will-change. Compositing sul GPU, main thread libero.
Le card si ridimensionano con min(). Su mobile funziona uguale.
Il componente SplitText divide automaticamente il testo in
<span> per parola, ognuno con delay incrementale.
L'IntersectionObserver attiva l'animazione solo quando è visibile.
Risultato: cinema puro, con un singolo attributo data-split.
Ogni card ha il 3D tilt + glow. Clicca per navigare (transizione slab).
Sistema design glassmorphism con 120+ componenti, dark-first.
Landing page con scroll-driven animations e page transitions.
WebGL meets CSS: card tilt, depth blur, ambient lighting.
Libreria di componenti animati: reveal, split, tilt, magnetic button.
Ogni movimento ha uno scopo: guidare l'attenzione, comunicare gerarchia, rendere l'interfaccia viva. Mai movimento gratuito.
Le animazioni migliori sono quelle che non noti. Supportano il contenuto,
non lo sovrastano. Qui ogni effetto è calibrato: timing, easing, blur.
Tutto rispetta prefers-reduced-motion.
Zero librerie esterne. Solo CSS custom properties, IntersectionObserver,
requestAnimationFrame, e position:sticky.
Ogni componente JS è una classe riusabile con API pulita.
Lerp fluido per parallax e mouse tracking. Zero jank.
Reveal, split text, lazy effects. Attivi solo quando servono.
Solo transform e opacity. will-change mirato. Main thread libero.