Muitas funções, uma de cada vez, no ritmo de quem lê.
A Cypay é um aplicativo de carteira de criptomoedas que reúne troca de moedas, rendimento, negociação, transferência entre redes e cartão, em nove redes diferentes. A página de apresentação precisava explicar tudo isso sem virar um paredão de texto. A resposta foi uma página guiada pela rolagem.
- Cliente
- Cypay
- Ano
- 2026
- Entrega
- página de apresentação (landing page)
- No ar
- cypay.io, hoje em versão nova
Um produto financeiro explicado sem pressa.
Uma carteira autocustodial é aquela em que a própria pessoa guarda as chaves de acesso ao dinheiro, sem um banco ou corretora no meio. Para quem chega pela primeira vez, a lista de funções da Cypay é longa e cheia de termos novos.
A página foi pensada para quem decide se vai baixar o aplicativo. Em vez de mostrar tudo de uma vez, ela mostra uma coisa por vez, sempre em volta da tela do celular, que é onde o produto vai ser usado.
Uma página única, conduzida pela rolagem.
- 01
Seções presas à tela
Algumas seções ficam presas à tela enquanto a página rola por várias alturas de tela. Nesse trecho, o que muda é o conteúdo em volta do celular, e não a posição da página.
- 02
Animação pela posição, e não pelo relógio
Nos trechos presos, cada elemento entra e sai de acordo com a posição da rolagem, e não com um tempo fixo. Quem lê devagar vê tudo; quem volta a página vê a animação voltar junto.
- 03
Feita à mão, sem framework
HTML, CSS e JavaScript escritos à mão, sem bibliotecas de interface. A única biblioteca externa é a de 3D, usada pelo mascote.
- 04
Um mascote em 3D
Na primeira versão, o logo da Cypay virou um objeto em 3D, extrudado a partir do próprio desenho vetorial com Three.js. Ele atravessava a página acompanhando a rolagem.
- 05
Uma barra de leitura
A primeira versão também tinha uma barra de progresso, que mostrava quanto da página já tinha sido lido.
A posição da rolagem como régua.
Uma animação ligada à rolagem pode deixar a página travada se fizer trabalho demais a cada movimento. A página usa recursos do próprio navegador para fazer só o necessário.
- 01
Uma régua de 0 a 1
Em cada seção presa, a rolagem vira um número de 0 a 1: 0 quando a seção começa, 1 quando ela termina. Cada elemento tem a sua faixa dentro dessa régua. As colunas laterais, por exemplo, sobem entre 0,55 e 0,85. Com isso, a coreografia fica fácil de ajustar sem mexer no resto.
- 02
Desenho no ritmo da tela
O fundo de pontos e o mascote são redesenhados com o requestAnimationFrame, um recurso que roda o código logo antes de o navegador pintar a próxima imagem da tela. Assim o desenho acompanha o ritmo da tela, sem trabalho desperdiçado entre uma imagem e outra.
- 03
Só trabalha o que está na tela
O IntersectionObserver avisa quando um elemento entra na área visível. É ele que dispara a entrada dos textos, o preenchimento das barras e a contagem do saldo, uma vez só; depois, o elemento deixa de ser observado.
O que este projeto ensina.
- Ligue a animação à posição da rolagem, e não ao relógio. Quem lê controla o ritmo.
- Fixe um objeto central (aqui, o celular) e mude o que está em volta dele. O olho não precisa procurar onde olhar.
- Uma ideia por tela. Funções demais numa tela só viram lista que ninguém lê.
- Anime só o que está visível. O resto da página não precisa gastar bateria.
- Página de apresentação muda com o produto. Planeje para que textos e telas possam ser trocados sem refazer a coreografia.
Ficha técnica
- Primeira versão
- HTML, CSS e JavaScript escritos à mão
- Animação
- requestAnimationFrame e IntersectionObserver
- Mascote
- Three.js, com o logo extrudado a partir do SVG
- Site hoje
- cypay.io, em versão nova, com outro conteúdo
- Marcas
- Cypay e as moedas citadas pertencem aos seus donos.
Seu produto precisa ser explicado com calma?
A Acheme faz páginas de apresentação que contam uma coisa por vez, leves e rápidas no celular. Conte o que você precisa e respondemos em até 48 horas.
Conversar sobre um projeto