Peças vivas
As peças com movimento próprio da home, da aceleração e da landing Shopify, sem GSAP. Todas respeitam movimento reduzido e, sem JS, mostram um estado útil. As que correm sozinhas param pelo interruptor de pausa.
Pausar o movimento
O que corre sozinho por mais de 5 s precisa de um jeito de parar. Um interruptor por página, antes das peças: ligado, o ticker para, o marquee e a órbita viram a grade do movimento reduzido e a malha tira as casas que pulam. O CSS lê o próprio interruptor, então funciona sem JS. Com movimento reduzido nada corre, e ele some.
Interruptor da página
.rq-pausa · .rq-interruptor · data-rq="pausa"- Nesta página
- Este interruptor para as peças da página inteira.
- Movimento da página
- As peças do Roque param pelo CSS e não dependem do módulo. Um movimento feito na própria página pergunta a
parado(), dejs/modulos/pausa.js, se deve ficar quieto (movimento reduzido ou pausa ligada); o eventorq:pausanodocument, comdetail.pausado, avisa na hora.
Ticker
Uma faixa que corre, em CSS puro. Uma por página. O texto vem duas vezes para a volta fechar; a cópia é escondida do leitor de tela. Com movimento reduzido ou com a pausa ligada, fica parada.
Faixa da aceleração
.rq-ticker · __faixa · --duracao · --rq-ticker-fundo · --rq-ticker-textoMarquee de marcas
Nunca para no hover: desacelera para 80% numa rampa curta e volta ao sair. Fora da tela, pausa. Com movimento reduzido ou com a pausa ligada, vira grade centralizada.
Lojas da Chesslab
.rq-marquee · __trilho · __lista · --reverso · data-rq="marquee"Órbita de lojas
As lojas giram em elipse ao redor do título, uma volta a cada 100 s, só na tela e sem ninguém apontando. Escolher uma abre a janela no centro, crescendo de onde a loja estava, e a captura longa rola dentro. Setas trocam de loja; Esc volta.
Home
.rq-orbita · __palco · __centro · __lista · __item · __detalhe · data-rq="orbita"- HeyMu
- Pé Direito
- PureUp
- ElGato
- Ogranulado
- Criare
- Cantu Decor
- Sabarabuçu
- FromVix
- Teclado
- Tab passa pelas lojas e o giro para enquanto o foco está nelas. Enter abre; setas trocam de loja; Esc ou Voltar para a órbita fecha e devolve o foco à loja.
- Sem JS, movimento reduzido e pausa
- A lista vira grade e a órbita não gira. Despausada, ela volta a girar do ângulo em que estava. Sem JS a loja não abre: ficam a imagem e o nome, fora do Tab.
Vitrine fixada
A loja em destaque ocupa a tela, rola por dentro e encolhe até o lugar dela na grade enquanto a página desce; as outras aparecem em volta. Só a partir de 951 px e sem movimento reduzido. Abaixo disso, ou sem JS, é a grade.
Desenvolvimento
.rq-vitrine · __palco · __conteudo · __cabeca · __grade · __vaga · __destaque · __resto · data-rq="vitrine"Loja sob medida na Shopify, sem tema pronto.
Design exclusivo no Figma e performance em qualquer dispositivo.
Ver o desenvolvimento-
Pé Direito 
PureUp 
Ogranulado 
Cantu Decor 
Sabarabuçu 
FromVix
Pilha de painéis
Cada painel fica preso no topo e o seguinte cobre, com um degrau de 14 px. Serve para etapas de um método. Sem JS, funciona igual: é CSS.
O que entra na aceleração
.rq-pilha-paineis · .rq-painel · data-cor · __num · __titulo · __textoBiblioteca de anúncios.
Criamos uma biblioteca de referências de anúncios para você saber como gravar os seus.
Edição de vídeos e imagens.
Editores de vídeo e de imagem da própria Chesslab preparam o material dos anúncios.
Melhorias no site.
Fazemos uma auditoria do seu site para identificar o que dificulta as vendas e corrigimos ou orientamos como resolver.
Fidelização de clientes.
De e-mail marketing a automações de cashback, estruturamos o que a loja precisa para vender mais para quem já comprou.
Feedbacks e reuniões.
Toda semana você recebe um resumo das campanhas. A cada quinze dias, uma reunião para olhar os resultados e planejar as próximas ações.
- Cores
data-cor: neve, nevoa, pistache, verde ou grafite. Cada painel define o próprio texto, com contraste conferido.
Malha
O tabuleiro da home atrás de uma seção. Casas Pistache de uma só cor do tabuleiro pulam a cada 2,4 s; rolar acelera o relógio. Só roda na tela; com a pausa ligada, as casas saem e fica o tabuleiro. Sem JS, ficam as casas escritas no HTML.
Seção com malha
.rq-com-malha · .rq-malha · --clara · __casa · data-rq="malha" · data-malha-blocosUma aceleradora, três frentes.
Salto do cavalo
Uma trama de símbolos. Rolando, acende uma casa por vez no caminho do cavalo, em L, saindo do centro. Com movimento reduzido, fica a primeira casa.
Postura (landing Shopify)
.rq-com-salto · __grade · .rq-salto · __casa · data-salto-gatilho · data-rq="salto"Se sua loja vai competir com grandes marcas, ela precisa ter postura de grande. É isso que a gente constrói.
Seta que segue o cursor
No fecho da home, uma seta sai do cursor e encosta no botão, sempre perpendicular à borda dele. De lado, a curva dobra; alinhada, fica quase reta. Some perto do botão. Só com mouse e sem movimento reduzido; uma por página.
Fecho
.rq-seta-area · data-seta-alvo · data-rq="seta"Diagnóstico gratuito · 30 min
Ainda não sabe por onde começar? Comece pela conversa.
Falar com a ChesslabSem compromisso · Resposta em 1 dia útil
Alternância de aparelho
A mesma tela no computador ou no celular, como na seção Recursos da landing Shopify. A tela tem a largura real do aparelho (1024 ou 375 px) e é reduzida para caber; dentro dela, os componentes respondem por container query. A moldura some em 140 ms e volta no novo formato.
Página de serviço
.rq-aparelho · __barra · __palco · __visor · __tela · data-aparelho-escolha · data-rq="aparelho"Desenvolvimento de site
Loja sob medida na Shopify, sem tema pronto.
Design exclusivo no Figma e performance em qualquer dispositivo.
Desenhamos
Criamos seu layout exclusivo no Figma. Sem tema genérico, sem Ctrl+C.
Codamos
Desenvolvemos tudo na Shopify com performance e responsividade.
Revisamos
Você navega, testa e aprova. Ajustes finais inclusos.
- Padrão
- Celular até 700 px de janela, computador acima. A escolha vale até sair da página.
rq:aparelhocomdetail.aparelhopede outro aparelho por um instante;nulldevolve. - Acessibilidade
- Rádios nativos (setas trocam). A tela é uma região rolável com nome que diz o aparelho e a largura.
Rodapé vivo
A luz do fundo segue o cursor com atraso e bem difusa, e apaga depois de 1,4 s parada. Cada clique na marca troca a cor da luz; no quinto, um recado curto. Só com ponteiro fino e sem movimento reduzido.
Home
.rq-rodape-vivo · __marca · __recado · data-rq="rodape-vivo"