go back

Placeholder for post cover image
Cover image for post

DVD corner bounces, but more satisfying 📀

July 9, 2020

The bouncing DVD logo hitting a corner: we all know it & love it.

But what if what looked like a perfect corner bounce was actually a pixel or two off? Screens have millions of pixels nowadays; we humans don't have the visual faculty to discern something so precise.

Enter: [satisfying-dvd-corners](https://brycedorn.gitlab.io/satisfying-dvd-corners).


I attempted to do manual scale/deceleration to enable the zoom effect on all corners, but the math got complicated pretty fast. So went with the zoom CSS property instead. Couldn't find out how to adjust the zoom focal point though, so currently only applies to the default (top left corner).

May revisit this in the future to attempt at dynamic scaling so other corners have the effect (PRs welcome! 😇).

The corner-predicting calculation was tricky, but because the slope is always either 1 or -1 it made it easier to determine the intersection point.

Hope you enjoy it! 📺

View source on Github:

go back