Icone

Icone animate, senza runtime

Disegna l’icona, definisci due stati, e la transizione fra loro viene interpolata automaticamente. Quello che vedi nell’anteprima è quello che esporti, perché eseguono lo stesso codice.

Apri l’editor Come funziona

Cosa fa

Smart Animate che si spiega

I livelli vengono abbinati fra i frame prima per identificatore, poi per nome, poi per somiglianza. Quando un abbinamento è incerto l’editor lo dice e lo lascia correggere, invece di costringere a rinominare livelli finché non funziona.

Morphing dei tracciati che degrada invece di rompersi

I tracciati identici si interpolano direttamente. Quelli riconciliabili vengono ricampionati a un numero comune di segmenti. Tutto il resto passa per una dissolvenza. Il caso peggiore è una dissolvenza, mai una geometria contorta.

Export senza dipendenze

Tipizzato, tree-shakeable, compatibile con il rendering lato server. Quaranta icone misurano 11 kB gzip in tutto. Le stesse quaranta in Lottie ne misurano 24, e senza contare il player, che è una dipendenza in più che l’export a componenti non ha affatto. Entrambe le cifre vengono da un test nel repository, non da un dépliant.

Un editor vettoriale vero

Penna Bézier, modifica dei punti, operazioni booleane, contorno e offset del tratto, ripetizione radiale e specchio, griglia pixel e keyline Material. La riduzione del movimento è inclusa in ogni export animato, sempre.

Cosa finisce nel tuo repository

Un componente generato non importa niente. Nessun player, nessuna libreria di animazione, nessun provider attorno all’applicazione. È il file che avresti scritto a mano, se ne avessi avuto il tempo.

import { MenuIcon } from './icons/MenuIcon'

export function Header() {
  return <MenuIcon size={24} animate />
}

// size?: number | string   side in pixels, the icon stays square
// animate?: boolean        false keeps it still on the first frame
// className?: string

Tre passi

  1. Trascina due file SVG, oppure disegna l’icona da zero.
  2. Duplica il frame e cambia ciò che deve muoversi.
  3. Scegli un formato e copia il codice. Le immagini ferme, SVG e PNG, si prendono col tasto destro sul frame.

Dove sta il tuo lavoro

I progetti vivono nel tuo browser e si salvano mentre lavori. Non viene caricato niente e non serve nessun account. Un progetto si può scaricare come file e riaprire in seguito.