Free Hype Templates 🏗

That would be a pity. Perhaps not enough people know about it yet.


I decided to create another free Hype template…

It has a Valentine’s Day theme, as this Sunday is February 14.

I also did some cleanup on my website this weekend. I setup page caching, so the templates should load almost instantaneously. You know, for all the massive traffic generated by the templates. HA HA. :smile:

1 Like

Nice gift for lovers :slight_smile:

I think part of the problem is that people around here don’t like to read long threads. Although, I like having a single thread, so everything is in one spot. So, here are links to the four templates in one spot…

  1. Coconut - Free Hype Templates
  2. Looking - Free Hype Templates
  3. Groundhog - Free Hype Templates
  4. Heart - Free Hype Templates

Those link to the original post with the link to the corresponding template page. Should there be a template #5? I haven’t decided yet.

Update – I think that’s it for this project. Surprisingly, I don’t see a lot of interest in free templates. It seems that more people are interested in buying A Book About Hype. Besides, I’m low on ideas anyway. I had already put my good projects in the book. :smiley:

OK, I decided to make another free template. It should be available at on April 12, 2016 :smiley:

The fifth free template is now online…


By moving the sliders, you can quickly calculate the length of the hypotenuse.

Not here, this is just a picture. To see it work, visit the site. :smiley:


I’m not sure what this means exactly.

Meanwhile, does anyone else have a template request?

If not, then I might just do this one…

…it would involve some JavaScript though. Hype doesn’t include collision detection. I’ve got some projects that are waiting on it, so I’m not sure if I should wait much longer.

here you are … :stuck_out_tongue_winking_eye:

1 Like

That’s good! Although, I had something somewhat different in mind, more like a game control – where you couldn’t move forward if there was an object in the way. But instead, I decided to work on different projects this weekend. One of the project ideas is to try and use Matter.js without using Hype. It would be nice if there were more physics options in Hype. But by using Hype, I’ve become less adverse to manually writing JavaScript code.

Web app UI elements templates, not for game behavior. I’m talking about UI prototyping here: tables (expandable, editable, etc.), dropdown lists, menus, radios, switches, accordions, all form elements, 3-state buttons, trees, etc.

You can find something also here


It’s been three months since the last free Hype Template at I’ve been feeling more rested and more creative lately, so I decided to create a new template.

This template is about displaying Frames Per Second. I believe that Hype has the potential to be great game development software. Perhaps little nudges like this can help unlock that potential.

Even if you’re not into game development, there is some general information about Hype that might be useful. Creating smooth animations is important for game developers and web designers alike!

The template is available at

It’s a two-page article, so the download link is on the second page. Also, for you know-it-alls, I intentionally left an open problem in the template. That way, you don’t have to be a beginner to have fun with this week’s template. HA!

@DBear started a new thread about the FPS problem here…


After reading this thread…

I started working on a new template. The idea was to show a way to animate buttons. It grew into a “United States Capitals Quiz”.

The four buttons don’t just turn light-blue on mouse over, it transitions from dark-blue to light blue. This is more advanced than regular button states, as this includes animation.

If you want to learn how to make a quiz, or if you want to find another way to manage button states, you might find this template helpful.


I felt inspired today, so I have another “Template” ready for next week. Although, it’s technically not a traditional Hype Template. It’s the answer to the FPS problem.

I was surprised that no one took on the challenge, so I’ll just post the answer next week. Although, it is just one way to solve the problem. There’s likely more than one way to solve this problem. What’s great about this solution is that it should be super easy to use. It’s basically a matter of cut-and-paste. Just about any Hype project should be able to use it — for easy FPS testing.

Will you be able to make it into an extension…

1 Like

It seems similar, but I’d probably just post it at my website.

Part II of the FPS template is online. There some nice effects here.

  • No image files are used for the FPS chart. This is drawn with SVG.
  • No additional elements needed. It dynamically creates the div. (In the example, it’s using the background element, but “document.body” could be used instead.)
  • The lines change color based on height – Black / Red – to highlight FPS issues.

This template shows how matter.js puts physics elements to sleep after they stop moving for a while.


Here’s a heads up. Template #9 is set to launch on Tuesday. So, if you’re stressing out about the Presidential Election, a mild diversion is on the way. HA!

The template is not about politics though. Here’s a hint…


Is that not enough of a hint? Here’s another. It’s something I think Hype could do by default. So, maybe @jonathan and @Daniel will improve upon the concept and make it a default part of Hype.

Also, some general ranting. I don’t like how the exported html file is project-name.html instead of index.html. It’s so tedious renaming the same file over and over. (Yeah, I know about advanced export, but it’s not as simple as a regular export.)

Free Template Tuesday #9 – Tumult Hype “Lock” is now online…


I updated the “looking” template…

Apparently, something changed with the “Ellipse” element. Even though the top border was set to zero, a thin line was appearing. This made the smiley look strange.

Also, I changed layerX / layerY to clientX / clientY.

Apparently, layerX / layer Y is non-standard…

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

1 Like