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).
Features:
- Zooms in* & slows down time Matrix-style when a corner bounce is imminent, so you know with 100% certainty that it happened.
- *Doesn't work in Firefox, sadly. Also only zooms on top right corner. More about this below.
- Uses
Window.requestAnimationFrame()for 60fps smoothness. - SVG DVD logo for infinite scalability.
- Built in Svelte for a clean, boilerplate-free UI.
- Some buttons to control/customize behavior.
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:
Top comments (0)