I'll start with, wow, that's pretty cool and entertaining. As another commenter said, a reminder of the whimsicalness of the 90s internet.<p><i>sigh</i>, then along came Comet Cursor to remind us why we can't have nice things:<p><a href="https://en.wikipedia.org/wiki/Comet_Cursor" rel="nofollow">https://en.wikipedia.org/wiki/Comet_Cursor</a><p>The "can't have nice things" part comes from the tracking that came along with it. Comet Cursor was a pioneer of what would become the modern web!
Fashion trends are currently rebelling against the understated 2010s by bringing the late 90s/early 2000s aesthetic back in the form of wider fits and louder colors. Makes me wonder if/when we might see a similar change in web design, or even furniture. I might be biased as a younger person without many memories from that era, but I'm all for some change (barring impacts to accessibility) if it breaks up the monotony of the corporate-lite graphic design trends of the mid 2010s.
One thing I loved about the internet back when these types of effects were popular was how collaborative and innovative web design was. People would see something they liked on someone else's website and just add it to their own. It might be an animated gif, a cursor effect, a background image, or a site's entire layout. Everything was fair game.<p>You'd see something cool on one site and suddenly it'd be all over the place and then it'd eventually get edited until it became something new that got spread around again.<p>Even though everyone was shamelessly copying everyone else the effect was that websites were very diverse yet familiar. Then people started using social media where they didn't even have to learn to copy/paste HTML and everything slowly became very bland and generic.
The cursor lag is really bad, particularly on Windows, but there are at least 2 ways the lag could be much lower:<p>1. Use 'desynchronized', e.g. canvas.getContext("2d", { desynchronized: true });<p>2. Instead of using requestAnimationFrame(), draw as soon as a move event is received.<p>Here's a paint app that uses techniques 1 and 2 to achieve much lower input lag drawing the pen strokes that chase the cursor:<p><a href="https://paint.js.org/" rel="nofollow">https://paint.js.org/</a><p>Two other tricks to be aware of:<p>3. [Chromium only.] Use 'pointerrawmove' to get move events as soon as they happen instead of waiting for a big bunch of coalesced moves to all arrive after a delay.<p>4. Drawing where the cursor is predicted to be in order to compensate for lag works well during smooth cursor/pen motion. For example, the Windows Snip & Sketch tool actually renders the line you are drawing in front of the direction your pen tip is detected traveling because when using, say, a Microsoft Surface Pen on a physical Surface Pro screen the line being drawn would otherwise noticeably lag behind the physical pen tip (especially on a 60Hz screen) unless this predictive trick is used.<p>Finally, be aware of open Chromium issue #992954. When the devtools are open [F12], coalesced events aren't used so you get lower input lag but more events to pump (like 'pointerrawmove'). This bug is maddening because it depends on whether or not you have the debugger open!<p><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=992954" rel="nofollow">https://bugs.chromium.org/p/chromium/issues/detail?id=992954</a>
I remember when everyone switched from myspace to facebook. At the time, I wondered why people like fb more because the pages were more boring and standardized. At the end of the day, whoever claimed "we got tired of the flashy effects" were just themselves tired of the flashy effects. Somehow the boring people convinced designers that boring was more "professional" or something like that and the designers just changed everything and forced that change on most users. It's just another example of how I don't really believe everything is "market driven" but suppliers (in this case, designers) really can force changes of habit and consumption on users unilaterally if they have enough market share.
This brings me back to my childhood and building web pages when JavaScript elements to add whimsy and whatnot to the page.<p>Was it particularly attractive? No. Was there much function (except for a few screen types and maybe cursor styles, not really). Was it fun and did it make the internet feel exciting and like a truly new and unique medium? Hell yes.<p>Love seeing this stuff preserved.<p>And add me to the list of people that now misses skeuomorphism from the aughts and the Delicious Generation of Mac apps. Lickable icons and interfaces. I still love them, mostly because it reminds me of when software had personality.<p>That’s the thing about the late-90s to early 2000s web aesthetic: it had personality.<p>I love stark and clean Swiss-influenced designs as much any anyone else. But software, websites, and hardware was always best when it had personality.
Also, xneko and oneko. (Cartoon cat chases your "mouse" cursor, catches it, goes to sleep on it, you move the cursor, cat is alerted, repeat.)<p><a href="http://www.daidouji.com/oneko/" rel="nofollow">http://www.daidouji.com/oneko/</a>
I did web design back when it was called webmaster, and every time we finished a site my boss would ask me to 'make it sparkle' and this is what she meant, every time. I would explain why I thought it was a bad idea but then I would add the js snippet and show her. She would clap her hands and jump with glee. I would deploy it. The customers loved it. Invariably, the next day I would remove it because what mattered is whether the customer's customers liked it, and half the time they would think it was a virus and the other half were using IE 1.0 so they couldn't see it.
I particularly like the ESM examples in the README of this project for feeling like an interesting modern take for how some of the old 90s JS libraries used to feel. Many of the 90s libraries often weren't distributed as JS files to add to a SCRIPT SRC but as SCRIPT blocks to copy and paste with big comments denoting things you might want to tweak, giving more of that feel of "ownership" of the JS and that "everything is tweakable", not just JS lives on remote CDNs and is imported all or nothing and nowhere near as tweakable. ESM feels like it starts to bring some of that back and head towards a best of both worlds: composable pieces imported from remote URLs and tweakable script blocks to copy, paste, and then make your own.<p>I'm probably biased from my position of already knowing ESM well at this point having pushed a lot of my own modern tech stacks towards it, but I'd like to imagine 90s teen me would have found ESM blocks exciting.
I miss Classic Mac OS extensions which added whimsical things like this.<p>As I remember there were a few cursor trail extensions, as well as an extension that added physics to dragged icons (you could even throw them!), an extension that turned all on-screen text upside-down, etc. Not the least bit useful but <i>fun</i>.<p>The Classic Mac OS extension model was a security and stability disaster but it was unparalleled in terms of how it let third party devs tweak the OS. Even modern Linux desktops can't compare.
I appreciate that the Hacker News title is “90s” correcting the author’s typo of “90's” (though more pedantically I suppose “’90s” could be preferred)
Most of these are lifted off of Stardock CursorFX:<p><a href="https://www.stardock.com/products/cursorfx/" rel="nofollow">https://www.stardock.com/products/cursorfx/</a><p>I used to love the big juicy funky cursors!<p>The pro version had the trailing and click effects (smooth, photo realistic fireballs, yeah!!!)<p>I currently straight up use the cursor from Starcraft I. It's crazy cool looking, and subtly animated, bot not distracting. I found it a few months ago in my 90s junk folder, I love it.<p>Here's the *.ani file:<p><a href="https://drive.google.com/file/d/1kPJvoH2HNjWtMgJp0DS-fDtbXs3Joq5I/view?usp=sharing" rel="nofollow">https://drive.google.com/file/d/1kPJvoH2HNjWtMgJp0DS-fDtbXs3...</a>
The last website I saw with a perfect mouse cursor: <a href="https://thekebabshop.com/" rel="nofollow">https://thekebabshop.com/</a>. See if you can resist slicing the logo with that big knife.
I love these - a fantastic piece of retro coding!<p>My only criticism would be that the code uses `element.appendChild(canvas);` - if the element already contains child elements then the generated canvas is going to go over them, blocking any user interaction associated with them - for example, links. I think `element.prepend(canvas)` would give a better UX?
I can't believe these actually used to be popular but they were. I wonder if their over-the-top nature made learning how to use a computer mouse a little more fun.
For more nostalgia check out <a href="https://www.cameronsworld.net/" rel="nofollow">https://www.cameronsworld.net/</a>. Great curation of old geocities websites complete with a Netscape navigator lookalike.
Is there a way for HTML+CSS to capture what the user's cursor actually looks like, in case if a website wants to perfect the "ghost" effect without replacing the cursor image?
To be truly nostalgic they would have to take longer to load, and slow down my whole computer. If I trusted the page enough to enable javascript, which was so rare to begin with in the 90s. Heck, I rarely enabled images until at least 2000 when I got a cable modem.<p>That said, this is fun and impressive. I wouldn't even know where to start with something like this, I just bookmarked with the intention of reading through the code later but I probably never will.
This is hilarious and beautiful and I love it.<p>I just launched a 90s app called Later Cam:
<a href="https://latercam.com" rel="nofollow">https://latercam.com</a><p>It turns your phone into an old-school disposable camera that mails you real printed photos.<p>Last week Apple decided to feature it #1 on New & Noteworthy and now hundreds of people are visiting the home page every day. And thanks to you, now it feels a bit more magical!
Brings back memories! dynamicdrive.com and another site that I can't quite remember the URL of (it was something like pruitt.com) provided amazing examples of what can be done with JavaScript and DHTML. Inspired me to add these sorts of whimsical effects on my personal website hosted on memebot.com in the early 2000s. Sadly, the interesting sites of that era are mostly gone now.
There was a whole startup, "Comet Cursor" whose goal was to get people to install a plugin (that spied on you, of course) to get enhanced cursors. I was working for a Big Media company in the early 2000s when the Comet Cursor execs managed to convince our execs that it would be a good idea to accept money from Comet Cursor in exchange for forcing downloads on our customers.
Very early OS X versions had a fairly simple way to revert the GUI back to a NeXT or Win look. Reason being, OS X was Openstep, which was NeXT, and part of Openstep was integration with NT at the time, hence the GUI toolkit.<p>Neither of the non-OS X interfaces were very functional at all. I always wondered why those throwaway parts will still lying around.
I love it! I had forgotten about the fun we used to have with simple things like this.<p>Another thing I miss is the vast array of really awesome graphic visualizations for WinAMP MP3 player.<p>iTunes never had a fraction of the visual goodness that was available for WinAMP - the visualizations especially, but also the skins.
These used to be so popular, that my circa 2003-2005 public school district's official website where we could find our homework assignments, social calendars, teacher phone numbers, etc had a cursor effect for cougar paws (honoring the school mascot).
I use the mouse trails and a desktop app for the "laggy following dot" on my workstation because, well because four 32" 4K monitors, you lose the darn cursor even with the "find my cursor" key.
Real life use case: we had a super user mode for support that looked just like what the end user would see, so we add cursor sparkles to distinguish it from a standard login.<p>Before then we had to roll back a ton of accidental changes.
Sort of off topic but also sort of relevant, pixel-accurate mouse motion blur should really be a thing by now. The lack of it makes mouse movements significantly less smooth than need be.
So much memories of DHTML and JS tips sharing websites come back to my mind when using this page ! It immediately reminded me of frames with customized scrollbars and marquee text too =).
> Comet Cursor was a pioneer of what would become the modern web!<p>In more ways than one.<p>In hindsight what they did was almost innocent compared to what Google and Microsoft do now and Apple tried to do a year ago.
It's very nice, especially the dot and smiles; it looks like you're playing with a mouse. You did an amazing job; it's very entertaining and funny.
Be aware, the code is not framerate independent. Maybe that was intentional? Put up a PR to make it framerate independent but also just wanted to pass it on, if you have code using requestAnimationFrame and you want your effects/animations to run at the same speed across browsers you need to compute a deltaTime between frames and use that to calculation your animations. Otherwise, people on different devices will get different effects/experiences.<p>In this case I'm on a M1 Mac and Chrome runs requestAnimationFrame at 120fps, at least on the built in display (external displays get whatever they're set to. I have one at 60 and one at 72)
> for your modern browser<p>I don't know which modern features might be required for that potentially breathtaking presentation, because for me it stops running at the first occurrence of optional chaining operator. According to caniuse.com, ?. has been supported for just two years, and is still only available for 92% of users. The Web is three decades old, but let's ignore that, because everything must not exist for more than a year before being replaced with Next Generation Thing. Lifespan of a butterfly is our true goal!<p>I guess self-promotion of web developers also requires them to compete in shouting at the top of their lungs “I don't give a fuuuuuuuuuuuuuuuck about people who have to deal with websites I make”. The boldest get hired.