Not criticism, just explaining a problem I noticed and would make a fun exercise in CSS, or JS:
When a letter appears at the end of the line, the reflow (to make sure the whole text is centered) is not smooth, of course it isn't because the text is now n+1 characters wide and the rendering engine has probably been instructed to center it without any fancy delays. I wonder how to achieve a smooth "growth" of line.
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.
Oh yes, absolutely. It bothers me as well, and it strains the eyes, but you know... for such a toy project I half vibe-coded in an hour or so I didn’t bother too much. I agree it should be improved!
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...
If it was written by a human, none of this would be javascript except the next button click handler. I don't know what is going on that it mentions a service worker at the end. That's wild.
Anyway the CSS is missing a transition for the width. That's why it's jerky.
I came up with this one night when I couldn’t fall asleep and was looking (waiting) for some data analysis results on a web platform, noticing that the spinner was actually making me sleepy.
I guess that when the brain is engaged in an activity, and that activity becomes boring, it creates good conditions for falling asleep.
> The time the loader spins, as well as the speed at which the text appears, increases as you go through the story, so that you ideally never reach the end (unless you really, really want to).
Did you mean to say that the "speed at which the text appears" decreases, or am I misunderstanding?
It's tricky. Because it's both. The speed at which the text appears decreases, but the time the loader spins increases. OP should have broken these into two separate thoughts, but chose to combine them and words got wonky.
This would have the opposite effect on me. I can get unreasonably mad about slow / sluggish internet connections. This would keep me wake for a long time.
The skeleton provided by ChatGPT to get the page to load fullscreen as a PWA included it, so I just kept it. “Maybe in future”... But it’s unnecessary, I should have removed it.
Please make the background fully black. I am trying to bore to sleep and the background is bothering me a bit in the dark room. Also, add a full screen button so that I don't see anything on my phone at all except the words appearing slowly. May be even remove the next button and go to next part on touch. Also may be the words should appear slower too.
I know right. It is not only counterintuitive, but psychologically incoherent as to how sleep initiation actually works.
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.
That's interesting. How would you explain that for someone works then? At least on me, the loader does not trigger vigilance and temporal monitoring (I think). Instead, it "allows" my brain to focus on something else, which gets boring very soon, but that at the same is engaging enough to keep doing it. This kind of interactive yet very slow dynamic helps me stop trains of thoughts and relax.
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...
I presume there's no actual loading happening, it's just a timer. Real loading spinners aren't fun, but fake ones are next level bad. Not sure why anyone would deliberately put themselves through this experience.
As a proud European citizen, I visited your site… and… wait… WHERE IS MY SACRED COOKIE BANNER??
This is outrageous. Are you seriously trying to serve me content without first psychologically torturing me with 47 sliders and a philosophy essay about legitimate interest??
I checked the dev tools… zero cookies??
…excuse me?? Are you even trying to be GDPR compliant or are you just openly mocking the entire European project??
Not criticism, just explaining a problem I noticed and would make a fun exercise in CSS, or JS: When a letter appears at the end of the line, the reflow (to make sure the whole text is centered) is not smooth, of course it isn't because the text is now n+1 characters wide and the rendering engine has probably been instructed to center it without any fancy delays. I wonder how to achieve a smooth "growth" of line.
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.
Oh yes, absolutely. It bothers me as well, and it strains the eyes, but you know... for such a toy project I half vibe-coded in an hour or so I didn’t bother too much. I agree it should be improved!
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!
If it was written by a human, none of this would be javascript except the next button click handler. I don't know what is going on that it mentions a service worker at the end. That's wild.
Anyway the CSS is missing a transition for the width. That's why it's jerky.
Yeah, you could make this completely JS-free.
I came up with this one night when I couldn’t fall asleep and was looking (waiting) for some data analysis results on a web platform, noticing that the spinner was actually making me sleepy.
I guess that when the brain is engaged in an activity, and that activity becomes boring, it creates good conditions for falling asleep.
At what point does it start chanting "when you hear a bell, you'll think you're a duck."
Feel free to send a PR! But let's parametrize the animal :)
This is unreasonably effective, and I'm not entirely sure why
Thank you so much, an instant 'Add to Home Screen' from me
Happy to hear! It doesn't replace healthy bedtime routines of course, and it's halfway between an experiment and a joke, but still... :)
No, not at all, but sometimes we need all the help we can get
> The time the loader spins, as well as the speed at which the text appears, increases as you go through the story, so that you ideally never reach the end (unless you really, really want to).
Did you mean to say that the "speed at which the text appears" decreases, or am I misunderstanding?
It's tricky. Because it's both. The speed at which the text appears decreases, but the time the loader spins increases. OP should have broken these into two separate thoughts, but chose to combine them and words got wonky.
Exactly, I made a mistake when writing it down. Thanks to the original commenter for catching it and for your suggestion!
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"
This would have the opposite effect on me. I can get unreasonably mad about slow / sluggish internet connections. This would keep me wake for a long time.
Same here. I can already feel the adrenaline increasing ... :-P
Exactly. I elaborated on this here: https://news.ycombinator.com/item?id=46599477
What's the Service Worker for? It doesn't appear to do anything.
The skeleton provided by ChatGPT to get the page to load fullscreen as a PWA included it, so I just kept it. “Maybe in future”... But it’s unnecessary, I should have removed it.
Please make the background fully black. I am trying to bore to sleep and the background is bothering me a bit in the dark room. Also, add a full screen button so that I don't see anything on my phone at all except the words appearing slowly. May be even remove the next button and go to next part on touch. Also may be the words should appear slower too.
I can’t think of a more terrible way to fall asleep.
I know right. It is not only counterintuitive, but psychologically incoherent as to how sleep initiation actually works.
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.
That's interesting. How would you explain that for someone works then? At least on me, the loader does not trigger vigilance and temporal monitoring (I think). Instead, it "allows" my brain to focus on something else, which gets boring very soon, but that at the same is engaging enough to keep doing it. This kind of interactive yet very slow dynamic helps me stop trains of thoughts and relax.
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...
Excellent noticing.
I presume there's no actual loading happening, it's just a timer. Real loading spinners aren't fun, but fake ones are next level bad. Not sure why anyone would deliberately put themselves through this experience.
To fall asleep, presumably
in front of a screen? does the user tuck themselves in bed with lights off and suspend the device above their face?
Goodbye sound machine!
This is so dumb, I love it
And so boring
Twisted and great.
As a proud European citizen, I visited your site… and… wait… WHERE IS MY SACRED COOKIE BANNER?? This is outrageous. Are you seriously trying to serve me content without first psychologically torturing me with 47 sliders and a philosophy essay about legitimate interest?? I checked the dev tools… zero cookies?? …excuse me?? Are you even trying to be GDPR compliant or are you just openly mocking the entire European project??
Your project is awesome by the way
THat's great lolll