Back to browse
Scroll bar scuba dude swimming as you scroll

Scroll bar scuba dude swimming as you scroll

by hello12343214·Mar 27, 2026·3 points·4 comments

AI Analysis

●●SolidCozyRabbit Hole

Procedural limb animation using sin() math instead of sprite sheets or keyframes.

Strengths
  • Pure JavaScript with zero dependencies, runs anywhere
  • Respects reduce-motion accessibility settings automatically
  • Sin() based procedural animation avoids heavy sprite assets
Weaknesses
  • Decorative novelty — custom animated scrollbars already exist
  • Installation via email is unusual friction for a JS widget
Category
Target Audience

Website owners wanting decorative UI elements

Similar To

Custom Scrollbar JS libraries · Lottie scroll animations

Post Description

Hi! Instead of a boring scrollbar I made a scuba dude that swims down the page when you scroll.

The idea came from nostalgia; remember SkiFree game on Windows? I wanted a skier skiing down my site. Building the skier mechanics in pure javascript turned out to be difficult so I started with a runner, added a santa hat, and recently built scuba buddy.

You can try it directly as soon as you start to scroll down the page, and see the other animations with the "Change Animation" button.

Technical details: entirely javascript, takes scroll depth value (window.scrollY) and inputs that into math.sin() functions. This lets CSS (transform: rotate() property) create rotations of the various stick-figure's html elements, giving the character animation based on the input which is a user scrolling. It is pretty cumbersome to sync correctly when building the animations. It's difficult to get the upper and lower arms / legs to stay connected and have the animation transitions appear smooth.

Posted the runner about year ago here on hn. https://news.ycombinator.com/item?id=43237581

Should I re-try the skiier or something else? Thank for checking it out!

Similar Projects