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.
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?
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.
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.
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.
I've noticed it's a common practice on other places as well. It doesn't even need a reason, just random people or bots doing random actions to create more chaos.
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.
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).
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.
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.
I agree that preferring reduced motion and then visiting a site whose sole purpose is presenting motion is an interesting choice, but I don't think the CSS Working Group or web developers in general are in any position to question it.
> 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.
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.
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!
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
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
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.
Not sure what you mean by "not something you dictate to the server", browser preferences are client-side. When you say "all of those settings" there's really two major prefers- settings and you already covered one (prefers-color-scheme), writting an extra query to cover prefers-reduced-motion requires minimal effort and provides a lot of value to your site's accessibility.
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):
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.
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.
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.
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.
A rocket, flying saucer or bird seems obvious, for something which is going up and down. But as an improvement, it should also handle the direction of scrolling. At the moment, the buddy always looks into the same direction. Unless it's Michael Jackson doing a moonwalk (which you could add too), it's inconsistent.
Stickman Michael Jackson; complete with moon walk, anti grav lean, side glide, circle slide, and a toe lean at the end. Crotch grab optional (maybe on click?).
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?
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.
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!
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.
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.
I made a simple javascript by copying your code so that I can add this cute guy on my website, please let me know if this is not OK (https://github.com/jwenjian/scroll-buddy)
The act of scrolling is only noticeable by the browser + Javascript per whatever cycle it's on; it's not always watched except for at certain checkpoints.
To more accurately be affected by quick scrolls, save the last known y-axis value and compare to the current y-axis value. Act accordingly!
Please change the direction of walking when scrolling up. Right now the stick figure is walking backwards. It could be reversed or perhaps made to seem like backtracking (add a little more “caution”, “fear”, etc.).
love this.
would also love to see the direction of scroll and scroll speed reflected in character's behavior, ie walking up or down and walking vs running respectively.
I often wonder why corporate engagements (advertisements) aren't wrapped in something like this. people are always looking for distractions even while they're in the middle of a distraction so a fun interaction that starts out by getting your attention like this would seem to make sense. anyway, this is cool
I also didn't see anything until I realized that it doesn't work if you have browser-based dark mode because the character is black and the page background is black too.
I long for serious content and straightforward UX, and less on gimmicks. The modern scrollbars is a good example of how terrible UX has become, which is obvious when comparing to the design principles of the 90s.
The smartphone dominates UX today. I suspect the reason why scrollbars disappeared was to save pixels on low-resolution smartphone screens. And now we're stuck with it.
Exactly, I was adding perspective to the conversation. Things don't have to be absolute. You can have some users that love a design, while others hate it.
If you want to respect all your users, your design needs to have that diversity in mind.
But you attacked me personally, rather than what I had to say.
I like it, I just wish I could grab it to scroll too. Scroll bars are hard to grab these days as GUIs try to save space by making them one or two pixels thick.
Really cool thank for sharing! I tweaked the code a bit so that I could get Mario sliding down the flag pole for my gaming website. https://www.gamedrop.gg/
Speaking of how the guy starts out on one side of the scrollbar and “walks” to the other, a decade ago I programmed a “scroller” js tool (behavior) that I could add to any element. It basically made it so that when I pressed a trigger with my finger, a menu would appear under it, and then I could move the finger without lifting it until I reached the item I want and release. The memu would scroll under my finger, so that if I reached the bottom (minus a margin) it would already be scrolled all the way to the bottom. Same kind of math as the guy here.
I was tired of having to tap, then scroll, then tap again, on phones. Yes, I really made sure that mode worked too, but the “hidden mode” was to get the selection done in one swipe! Just like I could always do on a Mac, in one mouse swipe!
For mouse interaction - you didn’t even need to press, move and release. You’d hover over the trigger element and then move your mouse down, then click. In that case the menu would disppear if you moved the pointer out of it.
You don’t have to imagine, just try the Developer menu on https://Qbix.com for instance (the menu isn’t long enough but try turning your phone horizontally to make vertical space more limited.. or the tech savvy among you can use Safari debugger to copypaste some more menu items into that menu).
By the way, I now have dozens or hundreds of such “tools” I use to create interfaces. Menus. Dialogs. Tooltips. Onboarding Hints. Speech. Tabs. Chatrooms. Live videoconferencing. Peer to peer broadcast that’s uncensorable. Ok that escalated fast :) https://intercoin.app as an example.
I love this. I miss lighthearted things like this being more of the norm than the exception. Xeyes on 90s Linux, cowsay, whatever that was that made snow gather on top your windows (Xsnow?). Heck, I even have fond memories of Björks website having an animated bee that would follow you around. I think he was named Meesta Bee or something similar.
Everything is so dang serious all the time, I miss the sense of levity and wonder that used to follow tech around.
Until recently a must-have in my .bashrc was `fortune | cowsay` but this tripped me up when one of the spicier fortunes was output during a video call with my then-boss, no harm done but I decided to retire it to only personal machines.
I imagine there's many versions of that story contributing to why these things are less popular than they were.
This is peak 90s. Skifree, toasters, "under construction" gifs on your Geocities homepage, and random fun plugins and add-ons that you would download from Tucows.
Maximalist and absurdist digital culture that is all but gone now.
I would download sooo many random programs from the internet back then, and rarely were they viruses. I also didn't have online banking and my internet connection wasn't always on. The attack surface was just so much smaller. Like what, were they going to steal my collection of gifs?
I did once get a virus that made a long distance call to Japan with my modem before I realized what was happening and unplugged the phone cable.
Sorry, but I find this incredibly distracting and unpleasant to me. Yanks my focus every time I scroll. Any site using it is an instant back button for me.
Agreed. Extension user installs on their browser? Great. Something sites implement and impose on everyone? Please, no, except for truly pointless sites that are just about silly things. It's like those sites that try to force smooth scrolling on you.
There is a setting "reduced motion" on many browsers and devices. It should disable Scroll Buddy if a user has this turned on. Hope that helps. Thank you to @jsheard for the suggestion
Do you have reduced motion/animations enabled on your browser and/or system settings? If you don't, it sounds like it would help you a lot, if you do then OP just updated the site to hide the animation based on that setting.
Do you think it would be a good idea for this to be rolled out by: online banking, government service sites, medical clinic portals, ... on the premise that the user can just opt out with exotic user CSS settings?
It is just goof-off nonsense for someone's personal site, not a genuine good idea in UI/UX.
(It would actually be perfect for a 1990's site chock full of animated gifs, such as spinning skulls and flaming swords. Had we had the JS capabilities back then, it would have been all the rage.)
When Apple rolls out the next iPhone with walking figures for scroll bars, I will publicly retract my remarks and wipe the egg off my face.
(Your tone comes off as “rephrasing the original intent of the post as something slightly different in order to have something to whine about.” It’s just a bit of fun to brighten our morning, not a proposal to interfere with your online banking experience)
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.
Okay now i want this. For some reason i keep imagining the hamster to look similar to the gopher in golang (obviously not blue)
Nah, the hamsterdance.com hamster.
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?
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.
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.
> 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.
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.
Sorry you got downvoted. Uploaded it for a demo: https://65d22473-339d-4325-90bb-bef215770f60.paged.net/
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.
Thanks! People downvoting you should be ashamed of themselves.
I've noticed it's a common practice on other places as well. It doesn't even need a reason, just random people or bots doing random actions to create more chaos.
and on scroll up a hamster with jetpack/rocket
ok this sounds cool
[dead]
How has nobody said that this should be called 'Stroll Bar'????
This deserves a medal, come on!
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:
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.
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).
good to know thanks
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.
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
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.
"Dead dove, do not eat" - https://www.youtube.com/watch?v=YUKmq7UMJys
I agree that preferring reduced motion and then visiting a site whose sole purpose is presenting motion is an interesting choice, but I don't think the CSS Working Group or web developers in general are in any position to question it.
> 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.
I like that cartoon. much care and thought should be taken when implementing changes that affect users :)
I really wish there was a separate category for "short and funny" xkcds.
Some of them are incredibly hilarious, but the author is just way too productive.
> 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.
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.
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!
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.
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
good catch. it should be fixed now for users that have those settings turned on. much appreciated!
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
I hope you see this comment:
Please revert the "fix" that makes it so your demo is not seen at all.
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.
Oh that is a really good point!
that's a good point about prefers-reduced-motion... i hadn't considered that. it's an easy win for accessibility.
[flagged]
Not sure what you mean by "not something you dictate to the server", browser preferences are client-side. When you say "all of those settings" there's really two major prefers- settings and you already covered one (prefers-color-scheme), writting an extra query to cover prefers-reduced-motion requires minimal effort and provides a lot of value to your site's accessibility.
This is CSS, it's not dictating anything to the server, rather to the browser.
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...
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.
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.
He wants payment for his work, just in attention rather than money. Seems reasonable to me.
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?
Two guys pumping a rail-car.
Someone rowing the scrollbar thumb (the longer the thumb, the more rowers).
row boat would be cool
Saw this catapillar one a few weeks ago -> https://x.com/trunarla/status/1893705260142657764
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.
this is a great idea! I am working on a few other scroll buddy animations :)
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.
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!
Some gears meshing together and rotating that 'make' the page go up and down?
Love it! Super creative :)
How about a skier with little jumps or obstacles at each header
A rocket, flying saucer or bird seems obvious, for something which is going up and down. But as an improvement, it should also handle the direction of scrolling. At the moment, the buddy always looks into the same direction. Unless it's Michael Jackson doing a moonwalk (which you could add too), it's inconsistent.
Monkey climbing a pole (children's arithmetic problem)
Cat, with different animations depending on how fast you scroll.
Elevator, with stops at paragraphs(/some other break)
Change the persons orientation (make him turn around) when going back up?
scuba-diver.
also cave explorer on a rope.
scuba diver would be cool
A guy falling that just keeps eating shiit.
I am going to do one with Homer Simpson falling down a cliff hitting everything on his way
I like it. Coprophilia guy, they could call him.
I think you took that too literally. “Eating shit” is an idiom to indicate someone fell down.
Penguin waddle, slinky
Bookworm, of course.
I normally react to sites touching my scrollbar with language I shouldn't repeat on someplace as innocent as the internet.
Scrollbuddy is different. I would take a bullet for scrollbuddy. I want him on all sites.
could it turn around and walk up forwards?
Stickman Michael Jackson; complete with moon walk, anti grav lean, side glide, circle slide, and a toe lean at the end. Crotch grab optional (maybe on click?).
A platypus?
I like it, it's neat!
adds a bit of fun to a website :)
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?
Do you a have reduce motion set in your OS? That preference is respected and the guy is disabled.
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.
Perhaps because of this: https://news.ycombinator.com/item?id=43237747
I don't see it on Android Firefox or Android chrome. I see it on windows chrome.
Same for me, nothing happens.
Reminds me of the late 90s when people would add effects to their websites, like snow or trails of sparks that follow the mouse.
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!
Now it can remind you iOS 18’s iMessage. I just upgrade and got that 2000s feeling with the new emoji and text effects…
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.
Just stay on the page, don't click the "Get a scroll buddy for your website" link.
I see a preview on the linked page, but still odd instructions can only be emailed to you.
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.
This sort of project reminds me of the old internet. I love it.
I had exactly that same reaction. Someone just doing something fun and cool for the heck of it.
More marquee!
Old HN!
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.
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.
Maybe this is an obtuse question but what brought you to HN as a non-dev?
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.
Darn, if only HN had any non-dev content.
Not OP but waiting for the day I can fire my devs and replace with AI...
Anybody remember Comet Cursor?[1]
[1] https://en.wikipedia.org/wiki/Comet_Cursor
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.
Do you a have reduce motion set in your OS? That preference is respected and the guy is disabled.
That was it! Thank you!
I had Animation Effects off on Windows.
https://i.imgur.com/vqBmNUn.png
Aha! That explains my missing it here too. And it's staying off... .
For Windows 10 : Settings-->Display-->Show animations in Windows (enable)
I meant "I want it to stay off".
I made a simple javascript by copying your code so that I can add this cute guy on my website, please let me know if this is not OK (https://github.com/jwenjian/scroll-buddy)
Dear god, please never screw up the x-overflow...
(or... do it, and see if these artificial beings are already more powerful than us and can't be stopped...)
Sisyphus when using infinite scroll?
Modern Sisyphus is doom scrolling on tiktok.
This is nice. It reminds me of old Windows desktop pets: https://www.youtube.com/watch?v=CosQ1n7k6lw
Finally a useful piece of software that doesn't require a monthly subscription. Count me in.
Next version: stick man is context aware and does different actions based on the content, for example it jumps whenever the user scrolls to an h2.
Ooh, how novel, and we'll-executed. I imagine this might be useful in conjunction with a minimap as "terrain".
Useful, that is, in terms of getting a proprioceptive "feel" for the anatomy/topography of a document.
we've had minimaps in (some) text editors for more than a decade so why the hell not!
I am not sure about walking on a moving thing. I would like to see a kind of surfboard action, balancing only when it moves.
Over to you!
Haha, this is great fun. Scratching my own itch and making him turnaround when you scroll up:
Nice, I'm not sure if someone already suggested, reverse the toe direction when scrolling up.
The act of scrolling is only noticeable by the browser + Javascript per whatever cycle it's on; it's not always watched except for at certain checkpoints.
To more accurately be affected by quick scrolls, save the last known y-axis value and compare to the current y-axis value. Act accordingly!
It looks wrong when scrolling up. The direction of the feet makes it look like walking backwards in a very strange way.
cool screenmate could definitely be added as a userscript like https://greasyfork.org/en/scripts/465955-oneko-webmate
I tried it in 3 browsers but dont see anything in anyone of them.
This is awesome, thanks for sharing it. I love how creative/random it is, a real gem imo!
thank you :)
Please change the direction of walking when scrolling up. Right now the stick figure is walking backwards. It could be reversed or perhaps made to seem like backtracking (add a little more “caution”, “fear”, etc.).
or more easily, just rename the stick figure to Michael Jackson
love this. would also love to see the direction of scroll and scroll speed reflected in character's behavior, ie walking up or down and walking vs running respectively.
I often wonder why corporate engagements (advertisements) aren't wrapped in something like this. people are always looking for distractions even while they're in the middle of a distraction so a fun interaction that starts out by getting your attention like this would seem to make sense. anyway, this is cool
hmm... doesn't seem to be working in Chrome 122.0.6261.128 (Official) or Firefox 135.0.1
Can you make him moonwalk when you scroll up?
I don't see anything in Firefox on Windows. I tried adding `ui.prefersReducedMotion` setting as FALSE, nothing.
I also didn't see anything until I realized that it doesn't work if you have browser-based dark mode because the character is black and the page background is black too.
Not the case for me. I also tried disabling uBlock, still nothing.
really cool. On mobile devices, I would suggest inverting his movement So that he matches the way someone scrolls with their finger.
I remember when scrollbars were just visible all the time, everywhere you went, no special support needed
And our webpages were generated with coal, and scriptkiddies worked in Assembler.
And we liked it! Built character!
Super cool. The next way is to implement a Breakout game sideways which you can control by scrolling up and down :-)
But you can't grab him and move him (to scroll past large chunks).
users of dark reader: the buddy is invisible if you have dark mode turned on
Would be cool if you make him run when the scroll becomes faster
Didn't seem to animate on Firefox android.
Also it was invisible with Dark Reader.
good catch - will see if I can fix the colors for dark mode enabled
why should I give you my email to get this?
Would be cool if you could play one sided pong with the scrollbar and bounce a ball around the window.
Lots of positive comments.
Allow me to share a different perspective:
I hate this.
I long for serious content and straightforward UX, and less on gimmicks. The modern scrollbars is a good example of how terrible UX has become, which is obvious when comparing to the design principles of the 90s.
The smartphone dominates UX today. I suspect the reason why scrollbars disappeared was to save pixels on low-resolution smartphone screens. And now we're stuck with it.
You seem fun at parties
Is it only allowed to say positive things?
Why ad hominem?
My comment was more regarding your seeming opposition to any whimsey in user interfaces, instead arguing that everything must be purely utilitarian.
Exactly, I was adding perspective to the conversation. Things don't have to be absolute. You can have some users that love a design, while others hate it. If you want to respect all your users, your design needs to have that diversity in mind.
But you attacked me personally, rather than what I had to say.
I hope to see a % scrolled please :)
Can he turn around when you scroll back up?
I actually kind of like the "moonwalk"!
Good idea. I'll make him do that soon
This is oddly delightful :)
Fun! He’s a great speed walker too
Haha yeah, the longer the page is the faster he'll move. Should I slow his arms and legs down?
Now combine it with elevatorjs:
https://tholman.com/elevator.js/
I suspect either OP wasn't using the internet in 2001,or they were using the internet in 2001.
That Venn diagram is the area used to draw the Venn diagram.
This is awesome.
It's very cute!
I like it, I just wish I could grab it to scroll too. Scroll bars are hard to grab these days as GUIs try to save space by making them one or two pixels thick.
Really cool thank for sharing! I tweaked the code a bit so that I could get Mario sliding down the flag pole for my gaming website. https://www.gamedrop.gg/
Coooool. Please share code
Will do when I get home!
Edit here you go: https://gist.github.com/sergiotapia/961e40b3282260ca636240f2...
Give this to your AI and it'll be able to add it to your site pretty easily!
Need some sort of dancing gif, maybe user upload. Should fully stop / reset position when not scrolling. Also someone make AI bonzai buddy.
I like it, quickly tried to scroll back looking for the moonwalk, lol
I gotta make scroll buddy do the moonwalk next :D
amazing!
Speaking of how the guy starts out on one side of the scrollbar and “walks” to the other, a decade ago I programmed a “scroller” js tool (behavior) that I could add to any element. It basically made it so that when I pressed a trigger with my finger, a menu would appear under it, and then I could move the finger without lifting it until I reached the item I want and release. The memu would scroll under my finger, so that if I reached the bottom (minus a margin) it would already be scrolled all the way to the bottom. Same kind of math as the guy here.
I was tired of having to tap, then scroll, then tap again, on phones. Yes, I really made sure that mode worked too, but the “hidden mode” was to get the selection done in one swipe! Just like I could always do on a Mac, in one mouse swipe!
For mouse interaction - you didn’t even need to press, move and release. You’d hover over the trigger element and then move your mouse down, then click. In that case the menu would disppear if you moved the pointer out of it.
You don’t have to imagine, just try the Developer menu on https://Qbix.com for instance (the menu isn’t long enough but try turning your phone horizontally to make vertical space more limited.. or the tech savvy among you can use Safari debugger to copypaste some more menu items into that menu).
By the way, I now have dozens or hundreds of such “tools” I use to create interfaces. Menus. Dialogs. Tooltips. Onboarding Hints. Speech. Tabs. Chatrooms. Live videoconferencing. Peer to peer broadcast that’s uncensorable. Ok that escalated fast :) https://intercoin.app as an example.
I love this. I miss lighthearted things like this being more of the norm than the exception. Xeyes on 90s Linux, cowsay, whatever that was that made snow gather on top your windows (Xsnow?). Heck, I even have fond memories of Björks website having an animated bee that would follow you around. I think he was named Meesta Bee or something similar.
Everything is so dang serious all the time, I miss the sense of levity and wonder that used to follow tech around.
Until recently a must-have in my .bashrc was `fortune | cowsay` but this tripped me up when one of the spicier fortunes was output during a video call with my then-boss, no harm done but I decided to retire it to only personal machines.
I imagine there's many versions of that story contributing to why these things are less popular than they were.
So repressed :D Is your boss a minor? I doubt it.
This is peak 90s. Skifree, toasters, "under construction" gifs on your Geocities homepage, and random fun plugins and add-ons that you would download from Tucows.
Maximalist and absurdist digital culture that is all but gone now.
I would download sooo many random programs from the internet back then, and rarely were they viruses. I also didn't have online banking and my internet connection wasn't always on. The attack surface was just so much smaller. Like what, were they going to steal my collection of gifs?
I did once get a virus that made a long distance call to Japan with my modem before I realized what was happening and unplugged the phone cable.
Xroaches. Move a window, and cockroaches would scuttle out from underneath it and round the screen until they found another window to hide under.
I rarely literally LOL to HN posts but this one did it for me.
[dead]
[dead]
[dead]
Sorry, but I find this incredibly distracting and unpleasant to me. Yanks my focus every time I scroll. Any site using it is an instant back button for me.
Agreed. Extension user installs on their browser? Great. Something sites implement and impose on everyone? Please, no, except for truly pointless sites that are just about silly things. It's like those sites that try to force smooth scrolling on you.
Voting with your wallet is your right. Luckily, you don't control the purse strings for the rest of us
what would you change about it
I would make it a purple gorilla climbing up and down.
lemme click him to give him a little whack
[flagged]
People adding a fun little visual gag to their own personal website is not active malice to you.
There is a setting "reduced motion" on many browsers and devices. It should disable Scroll Buddy if a user has this turned on. Hope that helps. Thank you to @jsheard for the suggestion
Do you have reduced motion/animations enabled on your browser and/or system settings? If you don't, it sounds like it would help you a lot, if you do then OP just updated the site to hide the animation based on that setting.
Do you think it would be a good idea for this to be rolled out by: online banking, government service sites, medical clinic portals, ... on the premise that the user can just opt out with exotic user CSS settings?
It is just goof-off nonsense for someone's personal site, not a genuine good idea in UI/UX.
(It would actually be perfect for a 1990's site chock full of animated gifs, such as spinning skulls and flaming swords. Had we had the JS capabilities back then, it would have been all the rage.)
When Apple rolls out the next iPhone with walking figures for scroll bars, I will publicly retract my remarks and wipe the egg off my face.
Are you ok?
(Your tone comes off as “rephrasing the original intent of the post as something slightly different in order to have something to whine about.” It’s just a bit of fun to brighten our morning, not a proposal to interfere with your online banking experience)
Then why are we in a thread about honoring browser settings to have this turned off?
Just don't go to that site if you don't like it.
> Do you think it would be a good idea for this to be rolled out by: online banking, government service sites, medical clinic portals
Um... why are you asking this? Feels like an odd tangent. The OP never suggested this was a good idea anybody should use.
Yes, I do. Basically every possibly assistive option that can help me is turned on.