Animação de cursor: uma equipe de cursores monta a página
A Animação de cursor reproduz uma montagem em uma página real: uma equipe de cursores, cada um com sua cor, monta o que o visitante vê, do jeito que se faz em uma ferramenta de design. Um cursor pressiona o canto superior esquerdo de um elemento, vira um cursor em cruz e arrasta um retângulo de seleção até o canto oposto enquanto o elemento é preenchido dentro dele, com o tamanho mostrado em tempo real e guias pontilhadas chegando das bordas da tela. Já os títulos e parágrafos são digitados uma letra de cada vez. A primeira tela é montada no carregamento e o resto conforme entra na tela durante a rolagem, e cada cursor fica parado onde terminou.
Como funciona
Escolha uma página
Comece com uma landing page, um workspace de produto ou um artigo de blog e role a prévia para ver cada parte sendo montada conforme aparece na tela.
Ajuste a equipe
Escolha o que ela monta (durante a rolagem, a primeira tela ou a página inteira), como o texto aparece e o ritmo. Na lista Equipe, dê a cada cursor sua própria cor, nome e imagem (uma foto ou seu logo, em um cursor ou em todos), adicione ou remova cursores e escolha o tamanho das etiquetas de nome e o que os cursores fazem depois da montagem.