I suppose one could render the text off-screen or in an invisible DIV, measure how many letters it has on the target display, find the time to render the line (if the text shows at 2 chars/sec, 20 chars takes 10 seconds to render), measure how wide the element is with the 20 chars, and then make it a DIV where the text within it is left-justified, and the DIV's left margin shrinks at a constant rate per animation frame.
It could definitely be a fun exercise. Also maybe just rendering all the text in the same color as the background and then changing the colors of the characters one by one could be an interesting option (just thought about it), but I think yours would render better.
As a side note, I have to say that posting something as simple as this, where you can’t really get too attached to the project and can read feedback in a truly neutral way - instead of just pretending - is so refreshing...
Thanks for your comment!
Anyway the CSS is missing a transition for the width. That's why it's jerky.
I guess that when the brain is engaged in an activity, and that activity becomes boring, it creates good conditions for falling asleep.
Thank you so much, an instant 'Add to Home Screen' from me
Did you mean to say that the "speed at which the text appears" decreases, or am I misunderstanding?
I’ve now updated it to: "As you go through the story, the time the loader spins increases while the speed at which the text appears decreases"
A loading screen is psychologically linked to anticipatory arousal and goal-oriented expectancy, which activates the sympathetic nervous system. That is the opposite of what sleep requires, which depends on parasympathetic dominance and cognitive disengagement. Using a "loader" for falling asleep primes vigilance and temporal monitoring instead of relaxation, making it conceptually misaligned with sleep onset mechanisms.
Just my 2 cents.
It does not replace healthy bedtime routines of course, and it never meant to be a serious sleeping aid, but more of an experiment - and partially a joke. Maybe the premise should have been to help stop a spinning mind rather than to fall asleep...
Your project is awesome by the way