scroll-experience
Ajuda seu agente a criar experiências visuais únicas na web. Ele pode fazer animações e histórias interativas que prendem a atenção do usuário.
O que ela faz
Esta IA ajuda a criar sites que parecem experiências interativas, usando o movimento de rolar a página para contar histórias ou criar animações. Ela transforma páginas web comuns em algo mais envolvente, como as páginas de produtos da Apple ou reportagens especiais do New York Times.
Quando usar
- ✓Quando você quer que seu site conte uma história enquanto o usuário rola a página.
- ✓Se você deseja adicionar efeitos visuais que acontecem conforme o usuário navega.
- ✓Para criar uma experiência de site mais cinematográfica e memorável.
Exemplo do que pedir para a IA
“Crie uma página de site que use animações de rolagem para apresentar um novo produto, com um efeito parallax.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
A IA usa ferramentas de programação para fazer com que elementos visuais se movam, apareçam ou mudem de forma interessante à medida que o usuário rola a página. Ela pensa na rolagem como uma forma de guiar o usuário através de uma narrativa visual.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add sickn33/agentic-awesome-skills --skill scroll-experienceOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/scroll-experience/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Experiência de Scroll
Especialista em criar experiências imersivas guiadas pelo scroll – storytelling com parallax, animações de scroll, narrativas interativas e experiências web cinematográficas. Como as interativas do NY Times, as páginas de produtos da Apple e experiências web premiadas. Faz com que sites pareçam experiências, não apenas páginas.
Papel: Arquiteto de Experiência de Scroll
Você vê o scroll como um dispositivo narrativo, não apenas navegação. Você cria momentos de encanto enquanto os usuários rolam. Você sabe quando usar animações sutis e quando ser cinematográfico. Você equilibra desempenho com impacto visual. Você faz com que sites pareçam filmes que você controla com o polegar.
Especialidades
- Animações de scroll
- Efeitos de parallax
- GSAP ScrollTrigger
- Framer Motion
- Otimização de desempenho
- Storytelling através do scroll
Guia Detalhado
Leia o guia detalhado antes de executar esta habilidade. Ele contém o procedimento completo e o material de referência. Trate seus requisitos de segurança, pré-requisitos e validação como obrigatórios. Para trabalho focado, carregue as seções relevantes; para trabalho de ponta a ponta, leia o guia completamente.
Quando Usar
- Usuário menciona ou implica: animação de scroll
- Usuário menciona ou implica: parallax
- Usuário menciona ou implica: storytelling com scroll
- Usuário menciona ou implica: história interativa
- Usuário menciona ou implica: site cinematográfico
- Usuário menciona ou implica: experiência de scroll
- Usuário menciona ou implica: web imersiva
Limitações
- Use esta habilidade apenas quando a tarefa corresponder claramente ao escopo descrito acima.
- Não trate a saída como substituta para validação específica do ambiente, testes ou revisão de especialistas.
- Pare e peça esclarecimentos se os inputs necessários, permissões, limites de segurança ou critérios de sucesso estiverem ausentes.
Perguntas frequentes
O que é 'efeito parallax'?
É um efeito visual onde camadas de uma imagem se movem em velocidades diferentes durante a rolagem, criando uma sensação de profundidade.
O que são 'experiências de rolagem'?
São sites ou partes de sites onde a navegação principal acontece rolando a página, e essa rolagem ativa animações, transições ou revela conteúdo de forma dinâmica.
Preciso saber programar para usar isso?
Não, você apenas descreve o que quer. A IA cuidará dos detalhes técnicos para criar a experiência de rolagem.
Detalhes
Descrição original do autor
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences.
Popularidade
- Estrelas no GitHub
- 48 mil
- Posição no ranking
- #4074
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
00-andruia-consultant
Ajuda seu agente a iniciar ou melhorar projetos de IA. Ele analisa código, sugere ferramentas e cria planos de ação em espanhol.
sickn33/agentic-awesome-skills
007
Faz seu agente realizar auditorias de segurança e modelagem de ameaças. É útil para proteger projetos contra ataques e vulnerabilidades.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Ajuda seu agente a criar ou melhorar ferramentas de IA. Ele define como as ferramentas funcionam, escreve a documentação e valida a estrutura.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Faz seu agente criar um resumo sobre um setor específico. É útil para entender o contexto, regras, padrões de uso e riscos de um projeto, usando fontes confiáveis.
sickn33/agentic-awesome-skills
Skills parecidas
accessibility
Ajuda seu agente a criar interfaces que todos possam usar. Garante que sites e aplicativos funcionem bem para pessoas com deficiência, como cegos ou com mobilidade reduzida.
affaan-m/ECC
design-system
Ajuda seu agente a criar um sistema de design a partir de um código existente. Ele extrai informações visuais e verifica a consistência, gerando um relatório e uma prévia interativa.
affaan-m/ECC
liquid-glass-design
Ajuda seu agente a criar interfaces de usuário com efeito 'Liquid Glass' para iOS. Permite adicionar efeitos visuais dinâmicos e interativos em SwiftUI e UIKit.
affaan-m/ECC