Free Hype Templates 🏗

Just kept on looking at the repeat lines… and just could not help myself… [it’s lock down after all]
And I know foreach recursive madness.

//-- elements X  COORDS object
var setXObjects =   {
   //-- elements Y  COORDS object
 var setYObjects =   {

  //--  coord array  to loop through
var XYObjects = [setXObjects,setYObjects]

 var counter = 2 // start number for id name of element.
 var coord = "x" // coord we are going to set
 //-- loop over each item in XYObjects
 XYObjects.forEach(function(ob) {
 //-- loop over this item in XYObjects
Object.keys(ob).forEach(function(key) {

//-- loop over this objects value  in this XYObjects item 
ob[key].forEach(function(val,index) {

//-- use the key name with object index  number + counter to get the Element by ID. Set the coord to the value
  hypeDocument.getElementById(key + ( index + counter) +"_hype_pat").childNodes[0].setAttribute(coord, val );
//-- change the coord and the start number
 coord ="y"

Ha ha… nice.

I considered automating that part, but I didn’t see the timesaving…

…but I’m only working with 16 pieces. If someone made a much larger puzzle, then that’s pretty neat.


Drawing those puzzle-pieces with hypes svg-shapes you’ve earned this weeks diligence-award :wink:


If you missed it, the "Jump" template is online...

There’s a nice discussion about this template here…

...and there's a related post here...

The webpage template is online…

…it has cool features, such as a responsive menu, viewport based animation, and vector drawing.

UPDATE — Fixed an issue where the menu wouldn’t update when changing layouts.

Also, this template is based on the “Hype Book” landing page… …and related chapter / section in the book.


Recently, I received a message asking if it was OK to use the templates. This was somewhat surprising to me. They're free templates. Go and have fun! HA HA. But yeah, if you're working on a commercial project, you might be looking for something more official.

So, here it is... the Photics Public License (PPL)

I thought about using the MIT license, but I don't want the templates distributed on a stand-alone basis. The PPL was created to emphasize that distinction. If people are looking for unaltered templates, then they should get them from I don't mind if people pass around the templates privately to their friends and co-workers. But if shared publicly, it should be done via a link to the template page.

If you've already been using the templates in your projects, that's great! This is change is not about harassing you. If you notice, I put "Attribution Recommendation" — not "Attribution Requirement" — because I want to be friendly to people that previously used the templates.

This change is more in response to this...

An open source license protects contributors and users. Businesses and savvy developers won’t touch a project without this protection.

In other news...

A new template is scheduled for Tuesday. It's a response to this thread...


The "Orientation" webpage is online... comparing the width and height of a webpage, it can be quickly determined if the orientation is landscape or portrait. This technique can be applied as an alternative — or complement — to responsive elements and breakpoints.

UPDATE 7/28/2020 (Afternoon) — A new version of template was uploaded.


The "Spotlight" template is online...

It's in response to this thread...

What I find interesting is how there are so many solutions to this problem. Here's one from @gasspence A Flashlight (mouse follower) — back in May of 2015. It's one of the oldest templates in the "Template Gallery" category. After posting the "Spotlight" template, I looked at the forum list. I was surprised to see that one second to last. Did I waste my time? Nope, it's different, but it's another coding solution.

...and that's where the "Spotlight" template gets tricky. It uses two "On Drag" actions, so the image can be moved left/right or up/down.

It's not pixel perfect. The "Control Element Position" action is pixel perfect. But if you move the image too far, this can happen...

That's why the "Spotlight" template uses "On Drag". While the speed is set to be a bit fast, this method has some advantages. It works well when using a trackpad or touch device. Your finger doesn't have to move so far to control the spotlight. Plus, if the spotlight exactly matched the touch location, your finger could cover the animation.


The "Timely" template is online...

It's in response to this thread...

Basically, the template shows how to add real-world time-based animation. Based on the time of the day, you can load a specific scene. That same idea could be used to load a timeline, or go to a specific point in a timeline. In this example, it's a city scene that changes color... Morning, Afternoon, Evening, and Nite. There's also a corresponding greeting.

Recently, macOS added a lot of timely features... Dark Mode, Night Shift, and Dynamic Desktop. Tumult is even expanding that with their "Nightly" app...

...with a few conditionals and a timer, your Hype project can also react to the time of the day.

These related templates may also be useful...


2 posts were merged into an existing topic: Topics on time triggers

The "Controlling" template is online...

It is in response to this thread...

Instead of a game competition, something more casual was planned. That means no prizes. Instead, there's a gift for everyone that wants to make games with Hype. It's called the Photics-Physics-Bridge. By adding this JavaScript library to your project, the gap between Matter.js and Hype's Physics API is bridged. In other words, it becomes easier to make games with Hype.

That's what this week's template is all about. It shows how to make a four-way controller with Hype, by using the PPB.

If you do make a good game with Hype, starting from April 20, 2021 until October 20, 2021, can show it off in the Year of Fun :joystick:


Just a heads up, while working on the App version of A Book About Hype, I updated the "Origin" template...

I realized that the previous method that I was using to animate the crosshair was excessive. I switched it to use SVG animation — much easier.


1 Like

The “Looking” template was updated. It's much cleaner and more modern now. Also, the YouTube video is online.

hype-template-02[Hype #2] The “Looking” Template (When Is It Necessary To Write Your Own Code?)

1 Like

This post is to let you know that some of the earlier templates have been updated recently. In particular, the first "fps" template was updated.

It didn't have the optional duration value, which lets the needle in the FPS gauge move more smoothly. Also, it's better coding to use innerText instead of innerHTML, when possible.

This is next video for Photics.TV, but it's not ready yet. Meanwhile, I lost track of which other templates were update. HEH! So, see for the latest versions of the templates.

Also, @jonathan, I noticed a problem…

It looks like a thumbnail images is included in the Template. This doesn't seem like a good idea. The screenshot is bigger than the rest of the template. So, for these free Hype templates, I've been manually removing the thumbnail images from the updated templates.

1 Like

This is a cache, so it is a disk space vs. performance issue. If thumbnails are not included then scenes need to be fully loaded and rendered when the document opens. This can potentially take a lot of time, CPU power and RAM, so we favor maintaining a cache. You're welcome to delete the thumbnails if you do not want to incur the costs of disk or transfer.

That's too bad. This seems like it could be a user preference, or even one of those cool terminal commands.

1 Like

Maybe try an Automator Folder Action that runs a script to rm *.hype/Thumbnails/* or something like that.

Hah, those two little characters look so innocent and they are so long as you know how to use them.
If you are not familiar with its usage and there is a small typo, it could lead to very unexpected Permanent Deletions. (even for the familiar )

Personally I would use something like this which moves them to the Trash bin.

1, find Finder items

  • set where to look
    -set kind is other and to Hype Document Template

2, Get folder contents

3, Applescript

  • will filter and move to trash.

on run {input, parameters}
	repeat with i from 1 to the number of input
		set this_item to (item i of input)
		set this_info to info for this_item
		if name of this_info is "Thumbnails" then
			tell application "Finder" to delete this_item (* moves to trash *)
		end if
	end repeat
end run
1 Like

Just a heads up! I didn't forget about the Tumult Hype series of videos on Photics.TV. I'm planning to launch the “Captials” video on Veterans Day, since that template has a big American flag. :us:

UPDATE: The video is scheduled to launch on 2021-11-11T13:00:00Z and here's the link…

The “Capitals” template was updated too.

  • Uses Hype's customData API instead of “window” Global Variables
  • Switched one stray innerHTML to innerText
  • Changed hover style, as it was blurry in Safari when scaled
1 Like

The “Multilingual” video should be on Photics.TV soon. In preparing for the video, I updated the code.