2026
Componente GSAP

Orbit

Navegação disposta num arco, com drag e inércia, uma pré-visualização em forma de arco e uma vista aberta que cresce até à largura total.

Código no GitHub
Demo ao vivo
GSAP
Draggable, InertiaPlugin, CustomEase
Versão
1.1.0
Ano
2026
Licença
MIT

Os links assentam num círculo largo cujo centro fica abaixo do palco, por isso só se vê o topo da curva: o link ativo no fecho do arco, os vizinhos a inclinar-se e a desvanecer pela encosta. Arrasta ou desliza com inércia, faz scroll ou usa as setas, Home e End. Para sempre num link.

Uma pré-visualização em forma de arco mostra o item ativo, cada nova imagem a subir a partir de um círculo na base, e o arco inclina-se com a velocidade da rotação. Clicar no link ativo abre-o: o arco cresce até uma imagem de largura total, o título sobe e o texto das barras muda para tinta escura ou clara para continuar legível.

Um som opcional dá a cada link a sua nota, por isso rodar o arco toca uma escala. Fica desligado até carregares no botão. Os links continuam a ser uma lista normal: o Tab roda o arco e os leitores de ecrã lêem-nos por ordem. As opções vivem em atributos: data-arco-orbit-start, data-arco-orbit-wheel, data-arco-orbit-thumbs e data-arco-orbit-open.