il sistema della forma fluida

Una sola regola genera tutte le forme: un tracciato chiuso che passa per pochi punti, riempito pari-dispari, che nasce da una linea (il seme) e si apre. Qui la regola è smontata in tre parti: come si mettono i punti per guidare il flusso, come la forma fa passare da una foto all’altra, come vive dentro le pagine del sito. Tutto in bianco e nero; le foto sono tre esempi presi dalle storie.

01i punti guidano il flusso

Ogni forma è una posa: una serie di punti con le loro maniglie. Il flusso è il passaggio morbido da una posa all’altra, con un po’ di deriva libera sopra. Disegni le pose, il sistema le fa respirare.

  1. trascina un punto per spostare dove passa la linea; trascina una maniglia per cambiare come entra ed esce la curva.
  2. doppio clic sul vuoto aggiunge un punto nel lato più vicino; doppio clic su un punto lo toglie (minimo 3).
  3. con maniglie spezzate le due maniglie di un punto si muovono separate e nasce uno spigolo.
  4. curvatura accorcia o allunga tutte le maniglie: a zero i lati diventano dritti e la forma è un poligono spezzato. angolo apre l’angolo tra entrata e uscita di ogni punto: più gradi, più punte. Clic su un punto per dargli un angolo e una curvatura suoi.
  5. salva più pose: il flusso passa dall’una all’altra. La libertà decide quanto la forma può allontanarsi da quello che hai disegnato.
35 1.00 6 100% 0° 2.2 s

pose

La posa scelta è quella che modifichi. Con il flusso avviato le pose si susseguono in ordine; trascinare un punto ferma il flusso per il tempo del gesto.

02le foto si interpolano dentro la forma

La forma è una maschera pari-dispari: nei pieni si vede una foto, nei vuoti l’altra. Cambiando apertura e scala la foto nuova guadagna spazio finché resta sola.

modo
  1. passaggio. Sulla foto A nasce il seme; si apre e mostra B nei pieni, A resta nei vuoti. Crescendo copre tutto: resta B.
  2. finestra. La forma sta sulla carta e contiene la foto. Per cambiarla torna seme, cambia foto dentro la linea, si riapre.
  3. intreccio. Le due foto convivono: A nei pieni, B nei vuoti. Il passaggio è l’apertura stessa: forma chiusa = tutta A, forma che si sfalda = tutta B.
0.00

lo stesso passaggio fermo in sei momenti

scorri dentro il telefono

03come vive dentro il sito

Una pagina di prova senza contenuti veri: righe grigie per il testo, riquadri per le immagini. La forma segue quattro regole e lo stato attuale si accende qui sotto mentre scorri.

  1. seme. In testa alla pagina la forma è una linea: è la stessa spina dorsale della f del logo.
  2. abita. Dentro una sezione si apre in uno spazio libero della griglia e respira. Non copre i testi lunghi; se attraversa un titolo, il titolo si inverte (pieni e vuoti anche per le lettere).
  3. finestra. Dove c’è un’immagine, la forma la contiene: la foto si vede solo dentro.
  4. passaggio. Al confine tra due sezioni torna seme al centro, si riapre portando dentro la sezione successiva e cresce fino a coprire lo schermo.