Figured it out! The current layout is two scrollviews stacked on each other: the one on top that holds the moving sharp text is masked to look transparent on the left/right so you can see the blurred text moving on the scrollview underneath. This nice effect is achieved with much fewer lines of code than I expected. It took a while to properly synchronize these two scrollviews with autolayout and everything in the code that interacts with the text, movement, etc.. I also implemented a new “characters visible on screen” feature, where you can set the size of the viewing window (the sharp, dark text in the center) by specifying how many characters you would like to have the user see at a time. It’s not super precise, but works well so far. I also had to adjust the calculation for the text’s travel distance since the size of the blur filter changes dynamically now. At the moment, this new look runs smoothly, the blurred/clear texts are synchronized, and blur amount, font, font size, and characters visible on screen are all easily adjustable.
- Update the documentation
- Implement this update in the TestViewController
- Add “characters visible on screen” setting to Remote Config