Home

Welcome to the Hype Cookbook!

This book is written as a wiki¹ and is maintained on GitHub. Its goal is to collect all the little "gold nuggets" of wisdom found on the Hype Forum and educate designers to learn about all the possibilities Hype has to offer beyond its IDE. The forum can be visited at https://forums.tumult.com/

This project is currently maintained by Max Ziebell and anybody willing to contribute to the wiki pages. Please check the sidebar or use the search function to find a topic of interest².

Font managment

• Centralized Font Management: An Efficient Approach to Embedding Fonts

Animation

• Creating a motionblur with element copies
• Use and sync Anime.js with your Hype projects

Collision detection and Drag & Drop

• Hypespecific Drag and Drop enabler using dataset attributes
• Track intersections enabler using dataset attributes
• Collision detection using the physics engine (Matter.js)
• Detecting intersections using the physics engine (Matter.js)
• Using canvas and an image for simple hit testing

Document, Layout and Scenes

• Adding proportional height to responsive scenes
• Endless scrolling using the wheel across scenes
• Order Hype elements and symbols in a autmatic resizing stack
• Resizing Hype scenes with native animations (Hype Stage Resizer)

Dynamic Data and Communication

• Using external data in your documents (with live preview)
• Expanding Hype element height based on overflow

Queries, Targeting and Selection

• Targeting Scenes, Layouts and Symbols by name using CSS

Canvas and Drawing

• Creating dynamic live image snapshots of your Hype projects
• Following drawn lines with your Hype element (for example a hand drawing lines)
• Converting a line into cavas pixel bases calligraphy
• Using SVG based filter effects for Hype elements and groups
• Reveal a SVG path with dash and gap

Physics

• Physics mini templates to use in your project
• Official Tumult cannon ball example using physics
• Hype Matter Helper (little functions and helper for Physics)

---

If you would like to contribute, please send your links to contribute@hypecookbook.de.

---

Footnotes:

^{1. to learn more about wikis please visit the GitHub documentation}

 ^{2. Note: the red links in the sidebar or in topics are pages yet to be created. Feel free to add them!}