Crumble started as a design hook: a cookie storefront with 3D ingredients — chocolate chunks, Oreo pieces — floating around the product as you swipe between flavors. Built entirely in Jetpack Compose. Making it look good was the easy part. Making it feel good to actually swipe through was a different problem altogether.
The first version was rough
Screen transitions were dropping frames almost 60% of the time. There was also a genuinely funny bug where a piece of floating garnish would render on top of the whipped cream mid-swipe instead of staying behind it — a draw-order bug that only showed up while things were moving.
Two fixes did most of the work
- Stop computing what you can't see. The app was still running the full physics/position math for ingredients that had already swiped off screen. Culling that work immediately cut a large chunk of the frame time.
- Shrink the gesture, not just the animation. People were dragging a thumb across the entire screen just to see the next cookie. Cutting the physical swipe distance by 70% made the gesture match how far people actually wanted to move their thumb — which incidentally also reduced how much had to animate per frame.
After fixing the render-order bug and cutting the dead work, janky frames went from 60% down to 17%.
The takeaway
Nobody cares how good your app looks in a screenshot if it feels bad to use. On Compose specifically, it's easy to keep adding visual richness without checking what's still being computed once it's off-screen — that gap is where most of the jank was hiding here.