Frontend · Efeitos e motion

Scroll Stack

Cards empilhados que escalam, rotacionam e blur conforme o scroll. Lenis smooth scroll.

React · lenis · Scroll · Licença MIT · Criado por FlowCore Soluções LTDA

Este componente é a mesma peça de interface que a FlowCore usa nos sistemas sob medida que entrega: React com TypeScript e Tailwind CSS, tema claro e escuro, pronto para celular. Copie para o seu projeto, ajuste as cores e os textos, e use em sites, painéis e portais de cliente.

Efeito visual pensado para destacar um ponto da página sem pesar o carregamento. Use em seções de destaque, chamadas e títulos, e ajuste velocidade, cores e intensidade pelas propriedades do componente.

Como instalar

  1. Instale as dependências
    npm install lenis
  2. Crie src/components/ScrollStack.tsx Cole o código da aba Código. Esse efeito também tem ScrollStack.css: crie ao lado.
  3. Use na página
    <ScrollStack><ScrollStackItem>Card 1</ScrollStackItem></ScrollStack>

Código no GitHub · Biblioteca de códigos

A FlowCore Soluções desenvolve sistemas sob medida para empresas. Se você precisa desta funcionalidade dentro do sistema da sua empresa, integrada ao que já funciona, o diagnóstico é gratuito e o escopo sai em até 24 horas. Desenvolvimento de sistemas sob medida

Perguntas rápidas

Posso usar em projeto comercial?

Sim. A licença MIT permite usar, modificar e distribuir, inclusive em projeto comercial, mantendo o aviso de licença no código.

Precisa de cadastro?

Não. O código está na página e no repositório público do GitHub, sem cadastro e sem cartão.

Mais em Efeitos e motion