Made a scroll bar buddy that walks down the page when you scroll
207 comments
·March 3, 2025psygn89
raaron773
Okay now i want this. For some reason i keep imagining the hamster to look similar to the gopher in golang (obviously not blue)
dhosek
Nah, the hamsterdance.com hamster.
averageRoyalty
His name is Hampton, and he released a wonderful full album.
andirk
Waiting for the repo link. I will add a fork where the hamster's parachute doesn't redeploy if scrolling to fast and then the user "loses". Discourages scrolling. Might be helpful?
szszrk
Have a look at my other comment. I just noticed it has an issue that parachute doesn't redeploy properly when you scroll down->up->down, but it works nicely aside of that.
szszrk
https://gist.github.com/iamtomek/5d4a30c1a6765d695950c777e38...
Disclaimer: I wrote zero lines of this, it was made purely with Claude 3.7 (via Kagi assistant) with around 10 additional revisions in one conversation. I pasted the emojis in the prompt, but that's basically it.
I never coded anything meaningful in html and js.
Edit: it silly that in a place where so much discussion is about AI, when I paste a working AI generated code what I first get is downvotes. I guess you like hating AI more than hamsters.
matsemann
> a working AI generated
The parachute will never deploy if you're higher than a previous low. So if you scroll down, a bit up, and then down again it will not have a parachute, until reaching the point where it was at the bottom last and then suddenly it gets a parachute mid fall.
If it's falling without a parachute, it will get glued to the corner the moment you start scrolling up. If it's falling with a parachute, scrolling up will break it and it will continue past the screen.
I don't want to sound overly critical - it's cool that you dished this up so quick - just commenting on your comment. The fact that the AI made so many bugs in such a short script is kinda disproving it "working", doesn't mean we like hating AI.
szszrk
You are 100% correct, but decided not to try to fix it manually, as it's a cool demo "I did this in 15 minutes in ai chat".
Truth be told, it has less UI issues than my last outsourced app I deployed. And it had dedicated UI team and a few million budget.
The Hamster v0.0.1 is working. He's just not great at his job.
turblety
Sorry you got downvoted. Uploaded it for a demo: https://65d22473-339d-4325-90bb-bef215770f60.paged.net/
dominicrose
I wouldn't downvote this because it's interesting to see what an AI can do. But it's pretty clear a human has to fix it.
null
MHM5000
and on scroll up a hamster with jetpack/rocket
hello12343214
ok this sounds cool
rizky05
[dead]
jsheard
This kind of thing should probably be disabled if the user has prefers-reduced-motion set.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
It just needs one extra CSS rule to make the guy invisible when appropriate:
@media (prefers-reduced-motion) {
#scrollBuddy {
visibility: hidden;
}
}geor9e
It seems the author has now implemented this. Now people like me just see a pointless page of lorem ipsum. I feel like demos can be exempted from filters like this, especially when you can only get to the demo via a clearly worded link.
The same code that disappeared the thing could add some text explaining that the page is disabled and why, in my case: Apple Menu > System Preferences > Accessibility > Display > Reduce motion (for other OS's see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...)
For me, this setting makes macOS snappier, by getting rid of the little animations in OS. If it weren't for this comment, I never would have known it affected websites. I've had the setting for years with no issues.
rendx
If you're like me and want to keep the OS setting intact but not have it affect web sites, add the following preference in Firefox: ui.prefersReducedMotion (0 = no, 1 = yes).
hello12343214
good to know thanks
sitkack
Thank you! I just went and adjusted a bunch of these, "reduced transparency" really reduced the visual load, I didn't realize how many windows were bleeding through for no reason.
DrammBA
Every change really does break someone's workflow https://xkcd.com/1172/
Counter-argument against exempting the demo page: https://news.ycombinator.com/item?id=43237672
geor9e
At a certain point, one must take responsibility for clicking "a scroll bar buddy that walks down the page when you scroll" and then being faced with exactly what it said.
crabmusket
> Counter-argument against exempting the demo page
I really don't think that's a counter-argument for exempting the demo. It's an argument against ever implementing this feature on an actual website. Or, an argument for using the prefers-reduced-motion check on an actual website.
hello12343214
I like that cartoon. much care and thought should be taken when implementing changes that affect users :)
null
LoganDark
> For me, this setting makes macOS snappier
For me, it just replaces the slow movement animations with slow fade animations instead, which is just utterly infuriating.
DrammBA
I just replied to call out how negative your initial comment was and was suprised to see the full edit, thank you for the change and even providing sample code.
oneeyedpigeon
I guess this is probably the kind of exact reason that I have "reduce motion" set, but it's a shame in this case since it's a pretty harmless implementation!
yuters
I wish the author of the site didn't see your comment. It took me a while to understand why I couldn't see it on any browser.
nashashmi
Time for the author to add a CSS VISIBILITY note for those with this preference alerting them to a non working page because their browser has this selected option
hello12343214
good catch. it should be fixed now for users that have those settings turned on. much appreciated!
robocat
Now some of us would like an override checkbox to enable your demo again!
I didn't even know I had prefers-reduced-motion turned on and I certainly didn't know it affected web pages via CSS!!!
Another 0/1 bit for fingerprinting. Doesn't appear in https://coveryourtracks.eff.org/ (panopticlick). Also see prefers-contrast, prefers-reduced-transparency, prefers-color-scheme, inverted-colors
mrjbq7
I hope you see this comment:
Please revert the "fix" that makes it so your demo is not seen at all.
null
watusername
Would be neat if the author added some text to the demo page when prefers-reduced-motion is in effect, similar to <noscript> tags alerting you to the fact that JavaScript is disabled.
null
robotsquidward
How has nobody said that this should be called 'Stroll Bar'????
hello12343214
Sadly that name was taken so just bought scrollbuddy.com and will have it ready for people to implement soon
gokaygurcan
This deserves a medal, come on!
hello12343214
Instead of a boring scrollbar thought it would be fun to have an animated stick figure that walks up and down the side of your page when you scroll.
This is the first prototype i made.
Going to make a skateboarder, rock climber, or squirrel next. what other kinds of scroll buddies should I make?
JKCalhoun
Two guys pumping a rail-car.
Someone rowing the scrollbar thumb (the longer the thumb, the more rowers).
hello12343214
row boat would be cool
thomasfromcdnjs
Saw this catapillar one a few weeks ago -> https://x.com/trunarla/status/1893705260142657764
block_dagger
Very cool idea! Suggestion: add a trail of breadcrumbs that the figure tosses behind them and, when scrolling up, picks them back up again or kicks them off the screen.
hello12343214
this is a great idea! I am working on a few other scroll buddy animations :)
chuckwolfe
My first two ideas to ‘innovate’ on this was; a car driving down the page, or a drag racing Christmas tree where the lights count down in ‘full tree’ style.
rexer
Maybe a raindrop? Anyone else cheer for raindrop races as a kid on long drives?
An apple falling on to Newton's head.
Fun to think about!
davidw
Some gears meshing together and rotating that 'make' the page go up and down?
jorisboris
Change the persons orientation (make him turn around) when going back up?
ohwaitnvm
Love it! Super creative :)
How about a skier with little jumps or obstacles at each header
brysonreece
Surprised I seem to be the only one willing to ask; _why in the world would you wall the implementation behind a Google Form?_
Edit: Implementation details are actually readily accessible in the DOM. Here's a gist that extracts the relevant details (for those who, understandably, don't want to give out their email in exchange):
https://gist.github.com/brysonreece/b15f33cda30af06b7b70788d...
_def
It's baffling to me. It's one thing if you don't want to do a write up and share it but to offer that in exchange to collect email adresses seems so strange.
kevlened
As it currently stands, code without an explicit license isn't usable. There is no license for the code you posted, but contacting him could get you one. Using the code linked could constitute a copyright violation.
null
rpmisms
He wants payment for his work, just in attention rather than money. Seems reasonable to me.
kmoser
What am I missing? I don't see anything except the scroll bar itself, on both Firefox and Chrome. Do my custom scroll bar colors have something to do with it?
Mashimo
Do you a have reduce motion set in your OS? That preference is respected and the guy is disabled.
kmoser
Yep, that was it. It would have been nice if the page detected the reduced motion setting and displayed a message indicating why the demo wouldn't work in that case.
EA
Perhaps because of this: https://news.ycombinator.com/item?id=43237747
mrgoldenbrown
I don't see it on Android Firefox or Android chrome. I see it on windows chrome.
AHASIC
Same for me, nothing happens.
rcfox
Reminds me of the late 90s when people would add effects to their websites, like snow or trails of sparks that follow the mouse.
altacc
Yep, DHTML Zone was the go to place for trippy visuals that'd paralyze your users' browser so that you could make your website look super awesome cool!
null
mercacona
Now it can remind you iOS 18’s iMessage. I just upgrade and got that 2000s feeling with the new emoji and text effects…
a12k
This sort of project reminds me of the old internet. I love it.
davidw
I had exactly that same reaction. Someone just doing something fun and cool for the heck of it.
kylecazar
More marquee!
pknerd
Old HN!
kwar13
Why is this behind a google form...? There isn't even a screenshot of what it looks like before collecting an email address. What a strange post to hit front page.
roetlich
Just stay on the page, don't click the "Get a scroll buddy for your website" link.
Jleagle
I see a preview on the linked page, but still odd instructions can only be emailed to you.
tinthedev
It's not? I opened the page and it worked just fine.
Oh, you've either got the CSS disabled, or you missed the implementation next to your scrollbar. Check the other comments.
pentagrama
This is funny and clever.
If I were a developer, I would make a version where, when the stick figure moves backward as you scroll up, it does the moonwalk.
The28thDuck
Maybe this is an obtuse question but what brought you to HN as a non-dev?
pentagrama
Thank you for your question, it was thought provoking.
Many things brought me here. One of them is that I’m a UX designer, and I like to stay in the loop with my dev friends—not just to build better products together but also to have interesting conversations.
I also have a lot of respect for development because I deeply value that knowledge. In a way, this aligns with a philosophical idea: understanding and respecting different fields of knowledge helps us grow and build better things together. As Montaigne suggested in his Essays, true wisdom comes from embracing our limitations and staying open to learning. I find it exciting to discover new things, knowing that there will always be more to explore.
iJohnDoe
Darn, if only HN had any non-dev content.
dankwizard
Not OP but waiting for the day I can fire my devs and replace with AI...
null
hmmm-i-wonder
This highlights just how useless and unusable existing scroll bars are.
The ability to easily see where you were on the page was great. And it's got some humour. I love it.
hu3
It doesn't render for me on any of these:
- Chrome on Windows 11
- Firefox on Windows 11
- Chrome on Android
- Firefox on Android
Also no JS errors on console.
Maybe I'm doing something wrong?
I tried in both Ultrawide and traditional FullHD screens.
Nice! I had an idea that I never coded up. Basically a hamster with a parachute that would fall slowly to the bottom of the page. If you scroll down fast his parachute will deploy to catch up and land once again at the bottom of the viewport. He'll hold a "Top" sign when you hover over him and will shoot off with a jetpack when you click on him and as the screen hits the top you'll see him deploy a parachute again to gently land at the bottom of the screen.