Luca Perullo

Curriculum / avanzato

Animazioni che fanno girare la testa

Tipografia brutalist, scroll-driven, View Transitions, magnetic cursor. Costruisci una landing in stile Awwwards SOTD per una pianista che è una rockstar.

Beige e timido nel 2026 vuol dire dimenticato. In 8 lezioni costruirai la landing personale di Ginevra Calzi — pianista classica trattata come una rockstar — con tipografia brutalist che riempie lo schermo, marquee infinito del repertorio, scroll-driven con animation-timeline, custom cursor magnetico con label che mutano, e una View Transition cinematica home/bio che è quasi un mini-film. Solo HTML/CSS/JS vanilla. Le tecniche dei siti che vincono Site of the Day su Awwwards.

Inizia adesso95 min · 8 lezioni

Foundation brutalist01

Sfondo nero #0a0a0a, accent acido lime, h1 oversized clamp(4rem, 18vw, 22rem), stagger reveal per parola, marquee infinito.

  1. 01Setup brutalist: il nome che riempie lo schermo2 min
  2. 02Stagger reveal: il nome appare parola per parola2 min
  3. 03Marquee infinito: il repertorio scorre senza fine2 min
  4. 04Custom cursor con label che muta3 min

Cursor magnetico + scroll-driven02

Custom cursor con label che muta per ogni elemento, mix-blend-mode difference, scroll-driven scale del titolo con animation-timeline: scroll().

  1. 05Scroll-driven: il nome scala mentre scrolli2 min
  2. 06Concert dates: reveal cinematici con clip-path3 min
  3. 07Magnetic CTA: il bottone che ti viene incontro2 min
  4. 08View Transition cinematica: il finale3 min

Reveal cinematici + View Transition03

Concert dates con clip-path e blur reveal via animation-timeline: view(), magnetic CTA, View Transition home/bio cinematografica.