A typical design pattern on mobile is that if information is obscured for some reason, you click on it to expand it. Consider a drop-down text box on a blog: there's a little arrow and cut-off text with an ellipsis (...). When you click on the arrow, the cut-off text expands to fill the screen and allows you to read the rest of it. In contrast to what other users have said, this doesn't need to be idempotent. Tapping again hides the box.

To apply this design pattern to your site, simply make it so that tapping anywhere on a bar brings the UI to a known state, eg with the bar in the center with the text at a readable scale. This would work either horizontally or vertically.

Benefits:

- Your idea of the UI rescaling is preserved, and you can preserve the animations between states. I think the "rescaling bars" idea is fun.

- Cause and effect is preserved. If I want to read the text on the bar, I should not have to click on some arbitrary point above the current location of the bar.

- Further, the user does not have to hunt for the correct spot to click on a bar to make the text visible. Instead, clicking on a bar immediately and always makes all the information on that bar fully visible, by design.

I think this tweak would significantly improve the experience of interacting with the website.