This is one of those things where it’s just easier to show than explain. Are you a human on Earth? Then you probably know about the day / night cycle. So, why don’t our websites know about this? Many websites operate like it’s 12:00 PM — all day, every day. What if your website could know the difference? What if your website could react to the time of the day? That’s the task for this week’s free Tumult Hype template.
I’m no doctor. I don’t even play one on TV. But supposedly, there are health benefits to matching the monitor coloring to your sleep schedule. This idea is a big part of the recent changes to macOS. As an example, there’s a System Preference called “Night Shift”. Here’s the description…
Night Shift automatically shifts the colors of your display to the warmer end of the color spectrum after dark. This may help you get a better night’s sleep.
There’s also the “Dark Mode” feature. This can change the appearance of the operating system. It could be “Light” or “Dark”. Websites can also use Dark Mode. This website and several Photics apps support Dark Mode.
Not since Mike Lindell has a new invention helped so many people sleep better. 😆
While I do enjoy myPillow, that’s just a joke. I don’t know if Dark Mode or Night Shift actually helps people sleep. I do know that I like it. Apple’s “Dynamic Desktop” is another cool feature. The background can change based upon the time of day. Can a website do the same thing? Absolutely!
That Hype project loads a specific scene, based on the time of the day. This is not an inherent feature of Hype. But with a little JavaScript, it not too difficult to add this functionality to your Hype project.
57 | var interval = setInterval(tick, 1000); |
Every second, the “tick” function is triggered. It doesn’t have to be every second. That’s up to you. The value of “1000” milliseconds could be set to “60000” milliseconds for every minute. (1000 was chosen here as it works nicely with the bonus feature.) That function fetches the current time. Using the “getHours()” method, the current hour is returned. You could go even more granular with minutes or seconds. You could even expand and target specific days. For this particular project, only hours are really needed.
Once the current hour is known, conditionals are used to display a specific scene.
- If the hour is greater than or equal to 6, and less than 12, then show the “Morning” scene.
- Otherwise, if the hour is greater than or equal to 12, and less than 18, then show the “Afternoon” scene.
- Otherwise, if the hour is greater than or equal to 18, and less than 21, then show the “Evening” scene.
- Otherwise, if the hour is greater than or equal to 21, or less than 6, then show the “Nite” scene.
The Hype API is used to load a scene.
14 | hypeDocument.showSceneNamed("Morning", hypeDocument.kSceneTransitionInstant, 0); |
The four scenes are basically the same. The main difference is coloring. A “Persistent Symbol” was added to reuse the building artwork. In each scene, the color is shifted. The background and the buildings change color. With the right coloring, some simple rectangles can feel more like a lively city.
To give a more timely greeting, the text changes too,
If you look at Apple’s emoji for a city, not every window is shown. And when I first started this Hype project, I wasn’t enjoying it. The look felt fake. That’s why the windows were randomized. (That’s the bonus feature.) On startup, the opacity of a window is randomly changed — either 100% or 0% opacity. Then, every three seconds, a random window’s opacity is randomized again.
It’s not Michelangelo or Leonardo da Vinci. This is just a demo. Use your artwork to make something beautiful. The point is that JavaScript is art. Animation, randomization, personalization, with a little code you can impress your audience.
Download the Timely Template to see how it works. If you need help learning Tumult’s app, there’s A Book About Hype.