Desenvolvimento do Scroll Bar Buddy, que desce junto com a página durante a rolagem

• O Scroll Buddy é o primeiro protótipo que substitui a barra de rolagem tradicional por um personagem animado que caminha ao lado da página, transformando a própria rolagem em uma pequena interação
• A implementação atual assume a forma de um boneco de palito que se move para cima e para baixo de acordo com a posição da rolagem, em um experimento para transformar uma barra de rolagem sem graça em um elemento decorativo divertido
• Como próximos candidatos, foram sugeridos skateboarder, rock climber e squirrel, e outras ideias de personagens também estão sendo aceitas
• É fornecido um formulário de inscrição para quem quiser aplicar isso ao próprio site
• O exemplo na lateral da página inclui movimento e pode ser incômodo para leitores com vertigem vestibular; na maioria dos navegadores, ele deve ficar oculto quando a configuração reduce motion estiver ativada

---

Protótipo que transforma a barra de rolagem em personagem

• O Scroll Buddy é um experimento que transforma a barra de rolagem, de um simples elemento de UI, em um personagem animado que acompanha a lateral da página enquanto você rola
• O primeiro protótipo usa um personagem de boneco de palito que anda para cima e para baixo conforme o usuário rola a página
• Como candidatos para versões futuras, existem outros tipos de Scroll Buddy, como skateboarder, rock climber e squirrel

Inscrição para aplicar em sites

• É fornecido um link de inscrição para usuários que querem colocar o Scroll Buddy em seus sites
• Get a scroll buddy for your website

Aviso de acessibilidade sobre movimento

• O exemplo incorporado na lateral da página inclui animação e movimento
• Para leitores com vertigem vestibular, recomenda-se ativar o recurso reduce motion do dispositivo antes de visualizar a animação
• Se a configuração reduce motion estiver ativada, o Scroll Buddy deve ficar oculto na maioria dos navegadores

Pistas sobre a implementação e a composição da página

• A página tem um título de seção dizendo que foi feita com simple javascript
• Depois disso, a maior parte do corpo do texto é apenas texto fictício lorem ipsum para criar a rolagem

[GN⁺]

Opiniões no Hacker News

• Legal! Ainda não transformei em código, mas tive a ideia de um hamster de paraquedas.
  Ele iria caindo devagar pela página; se você rolasse rápido, abriria o paraquedas para pousar de novo no fundo da viewport; ao passar o mouse, levantaria uma plaquinha dizendo “Top”; e, ao clicar, voaria para cima com um jetpack e, quando a tela chegasse ao topo, abriria o paraquedas de novo para descer suavemente.

  • Agora eu quero isso. Por algum motivo, acho que o hamster seria parecido com o gopher da linguagem Go, só que não azul, claro.
  • Aguardando o link do repositório. Vou adicionar um fork em que, se o hamster rolar rápido demais, ele não consegue reabrir o paraquedas e o usuário “perde”.
    Talvez ajude a desestimular a rolagem?
  • https://gist.github.com/iamtomek/5d4a30c1a6765d695950c777e38...
    Aviso: não escrevi uma linha sequer pessoalmente; usei o Claude 3.7 como assistente da Kagi e fiz umas 10 revisões em uma única conversa. Basicamente só colei emojis no prompt.
    Nunca programei nada significativo em HTML e JS.
    Edit: é meio engraçado que, num lugar onde se fala tanto de IA, meu primeiro downvote veio depois de eu colar código gerado por IA que funciona. Parece que as pessoas gostam mais de odiar IA do que de hamsters.
  • Seria legal aparecer um hamster de jetpack/foguete ao rolar para cima.

• Parece correto desativar esse tipo de coisa se o usuário tiver configurado prefers-reduced-motion.
  https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
  Para esconder o personagem quando apropriado, basta adicionar uma regra CSS:
  @media (prefers-reduced-motion) { #scrollBuddy { visibility: hidden; } }

  • Parece que o autor implementou isso. Agora pessoas como eu veem só uma página sem sentido de lorem ipsum.
    Acho que uma demo poderia ser exceção a esse tipo de filtro, especialmente se só for acessível por um link explícito.
    O mesmo código que o fez desaparecer também poderia ter adicionado uma mensagem explicando “por que foi desativado”. No meu caso, é por causa de Apple Menu > System Preferences > Accessibility > Display > Reduce motion; para outros sistemas operacionais, veja https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref....
    Essa configuração remove pequenas animações do macOS e faz tudo parecer mais responsivo. Se não fosse por este comentário, eu teria passado anos sem saber que ela também afeta sites.
  • Provavelmente esse é exatamente o tipo de coisa pelo qual deixei “reduzir movimento” ativado, mas esta implementação é bem inofensiva, então é uma pena.
  • Eu preferia que o autor do site não tivesse visto este comentário. Levei um tempão para entender por que não aparecia em nenhum navegador.
  • Bem observado. Isso agora deve estar corrigido para usuários que têm essa configuração ativada.

• Por que ninguém disse que isso deveria se chamar Stroll Bar?

  • Infelizmente esse nome já está em uso, então comprei scrollbuddy.com e vou preparar tudo para que as pessoas possam implementá-lo em breve.

• Em vez de uma barra de rolagem chata, achei que seria divertido ter um boneco palito animado andando para cima e para baixo ao lado da página enquanto você rola.
  Este é o primeiro protótipo.
  Em seguida, penso em fazer um skatista, um alpinista e um esquilo; que outros amigos de rolagem eu deveria criar?

  • Duas pessoas bombeando um carro de linha.
    Ou pessoas remando na alça da barra de rolagem, com mais remadores quanto mais longa for a alça.
  • Vi uma versão de lagarta disso algumas semanas atrás -> https://x.com/trunarla/status/1893705260142657764
  • Ideia muito bacana. Como sugestão, o personagem poderia deixar para trás um rastro de migalhas de pão e, ao subir, recolhê-las de volta ou chutá-las para fora da tela.
  • Minhas duas primeiras ideias para “inovar” nisso foram um carro correndo página abaixo, ou luzes fazendo uma contagem regressiva no estilo “full tree”, como em uma árvore de Natal de arrancada.
  • Que tal gotas de chuva? Ninguém mais torcia em corridas de gotas de chuva em viagens longas de carro quando era criança?
    Uma maçã caindo na cabeça de Newton também seria legal.
    Só de pensar já é divertido.

• Estou surpreso por parecer que sou o único a perguntar isto: por que diabos o modo de implementação está escondido atrás de um Google Form?
  Edit: na verdade, os detalhes de implementação são acessíveis diretamente no DOM. Para quem não quer fornecer o e-mail, fiz um gist extraindo o conteúdo relevante:
  https://gist.github.com/brysonreece/b15f33cda30af06b7b70788d...

  • Não entendo. Tudo bem escrever algo e não querer compartilhar, mas querer coletar endereços de e-mail em troca de disponibilizá-lo é muito estranho.
  • Do jeito que está, código sem licença explícita não pode ser usado. O código publicado também não tem licença, mas talvez seja possível obtê-la entrando em contato com o autor.
    Usar o código linkado pode ser violação de direitos autorais.
  • É uma tentativa de receber atenção pelo trabalho, em vez de dinheiro. Parece bem razoável.

• O que estou deixando passar? Tanto no Firefox quanto no Chrome não vejo nada além da barra de rolagem.
  Será por causa das minhas cores personalizadas da barra de rolagem?

  • Você não ativou reduzir movimento no sistema operacional? O personagem é desativado para respeitar essa configuração.
  • Talvez seja por isto: https://news.ycombinator.com/item?id=43237747
  • Não aparece no Android Firefox nem no Android Chrome; aparece no Windows Chrome.
  • Aqui também, nada acontece.

• Isso me lembra o fim dos anos 90, quando as pessoas colocavam efeitos visuais nos sites, como neve caindo ou rastros de faíscas seguindo o mouse.

  • Sim, o DHTML Zone era o lugar clássico para pegar efeitos visuais oníricos que travavam o navegador do usuário, tudo para deixar o site super maneiro.
  • Agora também dá para lembrar do iMessage no iOS 18. Acabei de atualizar e os novos emojis e efeitos de texto têm uma vibe anos 2000.

• Gosto de projetos assim porque lembram a internet antiga.

  • Tive a mesma reação; parece algo que alguém fez só para tentar algo divertido e legal.
  • Mais marquee!
  • Parece o HN de antigamente!

• Por que isso está atrás de um Google Form...? Não há nem uma captura de tela mostrando como é antes de coletarem seu endereço de e-mail.
  É estranho uma postagem dessas chegar à primeira página.

  • É só ficar na página. Não clique no link “Get a scroll buddy for your website”.
  • A página linkada mostra uma prévia, mas ainda assim é estranho só receber as instruções de uso por e-mail.
  • Não é isso. Abri a página e funcionou bem.
    Talvez você tenha desativado o CSS ou não tenha percebido a implementação ao lado da barra de rolagem. Vale conferir os outros comentários.

• Divertido e inteligente.
  Se eu fosse desenvolvedor, faria uma versão em que, ao rolar para cima, o boneco palito andasse para trás fazendo moonwalk.

  • Pode ser uma pergunta meio boba, mas, se você não é desenvolvedor, fiquei curioso: como veio parar no HN?