Shelf Snap: A Game About Keeping Things From Falling Apart
Shelf Snap started as a joke concept I scribbled down during a coffee break: what if you had to stop books from falling off a shelf? That was it. No grand design vision, no reference game, just a silly image I couldn't shake. Getting it to actually feel good to play took two weeks of iteration and an embarrassing number of attempts at getting click detection right on moving targets.
The Surprisingly Hard Problem of Clicking Moving Things
My first implementation moved books using CSS transitions. Smooth, easy to write, looks great — and completely broke hit detection. When you click a CSS-transitioned element, the browser reports the click position against the element's starting coordinates, not where it visually is during the animation. Players were clicking exactly where the book appeared to be and nothing happened. I burned a day debugging this before understanding the root cause. The fix was to abandon CSS transitions entirely and drive the animation in a requestAnimationFrame loop, updating the element's left offset in JavaScript on every frame. Now the DOM position always matched the visual position, and clicks registered perfectly. It's one of those lessons you only learn by making the mistake — CSS transitions are great until they aren't, and interactive click targets during animation is where they fall apart completely.
Designing a Difficulty Curve That Doesn't Spike
Early playtests revealed a brutal difficulty problem. Stage one was trivially easy — one book, sliding slowly, plenty of time. Stage four was suddenly overwhelming. I had scaled speed and book count together, which meant the challenge compounded too fast. I separated the two variables and scaled them independently across ten stages. Speed increased gradually from stage one to ten with a gentle curve. Book count increased in steps at stages three, five, seven, and nine — noticeable jumps, but with enough breathing room between them that players could adapt. I also added a soft difficulty relief mechanic: if you miss a book and it falls, the next book spawns 15% slower for three seconds. Players rarely notice this happening, but it prevents the panic spiral where missing one book makes you miss the next one in rapid succession. That small invisible aid made a huge difference in retention during playtests.
Making the Feedback Feel Satisfying
A reflex game lives or dies on its feedback loop. The moment you interact — the snap — has to feel right. I spent a full day just on the click response. First iteration: book instantly jumps back to position. Felt abrupt, almost buggy. Second iteration: smooth slide back over 200ms. Better, but too forgiving — it didn't feel like you'd actually "snapped" anything. Third iteration: book quickly snaps back over 80ms with a slight overshoot that bounces once. That was the one. The micro-bounce communicated physical weight and responsiveness at the same time. I added a subtle scale pulse on the book — it squishes to 95% width and 105% height at the moment of the snap, then returns to normal over 100ms. These two details, the bounce and the squish, made the interaction feel genuinely satisfying in a way that none of the earlier versions did. Small animations, big impact on how the game feels to play.
Browse All Games