Max Ziebell × Tumult Hype 4SCENE 01 / TOOLS & EXTENSIONS
Small tools.
More possibilities.
A place for everything that makes Hype go further. Extensions, experiments and the pleasure of making things move.
Explore the extensions
Hype 4 — The toolboxHTML5
Scenes
Elements
InspectorHype Data Magic100%
Main Timeline01 / 06
◇ Timeline Actions▣ Artwork▤ CTA
54 modules
HypeAction EventsExtension that offers code execution based on events and can be declared by data attributes. Furthermore, it offers code execution through the Custom Behavior interface.HypeAnimation FrameA wrapper for window.requestAnimationFrame that cleans up after itself made for Tumult Hype.HypeArray CursorUse an array as the basis for a navigable data cursor.HypeAuto HeightSet the height automatically proportional to your scene width.HypeAuto LayoutCreate size adjusting layouts using Hype (inspired by Figma). This extension helps with positioning elements using a stacking order. HypeBlend ModesThis extension aims at offering CSS blend modes for Tumult Hype 4. HypeBundlesHype Bundler based made to work with the Hype exportscript interfaceHypeCard EventsHypeCardEvents introduces a meta entity known as cards, encompassing all scene layouts. This allows you to receive events for loading or unloading a card.HypeClip PathOpen the project on GitHub.HypeCommand PipelineThe idea behind Hype CommandPipeline is to map function calls originating from triggering custom behavior onto a handler function and then uses event.customBehaviorName to run an action.HypeCompressorProject aimed at different ways to reduce the file footprint and apply optimizations to Tumult Hype 4 export files.HypeCook BookTumult Hype Community Experts sharing their knowledge and insights.HypeData DecoratorProject for getting reactivity and feedback directly in Tumult Hype 4 using the additional HTML-attributes panel for options.HypeData MagicAllows you to easily add and handle data in your Hype documents (with live preview)HypeData ParserHelper to parse strings into JavaScript multiple data formats and to easily extract specific facets from the dataHypeDocument LoadThis function implements the missing HypeDocumentLoad as a workaround to be triggered as a native Hype Function called HypeDocumentLoadHypeDocument LoaderThis extension uses a tiny runtime proxy to fetch the loader data, offering instant access to it. This allows to read and maipulate some values you wouldn’t usually haveaccess to …HypeDocument Loader for PHPParse Hype generated script files using PHPHypeDrag ControllerA self-contained, physics-agnostic drag-and-drop controller for Tumult Hype with data-attribute-based configuration and callback support.HypeDynamic CameraCreate transformations based on a square defining the view port for animations and dynamic framing.HypeError DialogLittle helper to debug errors in Hype functionsHypeGesturesA collection of useful gestures mainly based on Hype Action Events.HypeGlobal BehaviorThis project extends custom behavior found in Tumult Hype 4 to the page context and beyond.HypeHandlebarsWrapper to connects Handlebars to your Hype document (rectangles/DIV's)HypeImage Base EncoderTurn those beautiful images into ugly little code frogs.HypeMatter HelperHelps in dealing with the matter.js Engine included in Tumult Hype 4HypeMissing SelectorsSimple project to get the missing CSS selectors we all wished for :v:. These include selectors based on Symbol names, Layout names and Scene names.HypeMutation ObserverThis extension called Hype MutationObserver, is a wrapper to MutationObserver. It allows to observer elements and act upon changes on their attributes, childlist and subtree. HypeOffline MonitorTrack offline time for your application and set up custom data variables (great addition for Hype Reactive Content). HypePetite VueImplementation of Petite Vue for Tumult HypeHypePost MessagePostMessage wrapper to communicate with nested Hype DocumentsHypePower PackGet extra actions and options using the export script interfaceHypeReactive ContentA small custom tailored extension to use hypeDocument.customData in a reactive manner.HypeRectangle OverlapSimple check if two rectangles overlapHypeRespellPlaying around with the idea of editing Hype Data Magic Data in the browserHypeRuler HelperQuick helper to render a meter on a canvas and refresh it on scene changesHypeRuntime PatchingA comprehensive build system for applying patches to Tumult Hype runtime filesHypeScale DocumentScale your entire Hype Document proportionally (cover and contain are supported)HypeScene MagicHype SceneMagic is a powerful JavaScript library that seamlessly extends Tumult Hype's native scene transition capabilities. Built with web developers in mind, it provides an intuitive API for creating visually stunning custom scene transitions with just a few lines of code. HypeScroll MagicA streamlined tool for synchronizing and managing nested timelines in response to scroll events, designed for use with Tumult Hype 4. This utility facilitates the control of animation timelines, allowing them to play forward or reverse in sync with the user's scroll position.HypeScroll TriggerGlue code to use GSAP with Scroll Triggers in Tumult HypeHypeSnapshot PropsSnapshot and restore properties in Tumult Hype 4HypeSound ControllerAllows you to control sound HypeState KitThis extension is a Hype specific interface to LocalStorage and allows for local persistent user data (browser specific). It also extends on the capability of the regular LocalStorage to store complex and nested data. HypeSticky ScrollMake a Hype widget sticky in a containerHypeStyle CasterCreate and override inline styles or cast value changes to custom properties (CSS Vars)HypeSvg FilterAdd duo tone effects to your documentsHypeSVGPath MaskMask an vector line supports uncovering AND antwalkHypeSymbol CacheAdds a cache and a new event callback to your Hype projectHypeText FitFit text in rectangles using data attributes and fitting rules (using Mutation Observer)HypeText PathA small custom tailored extension to animate text along a path in Tumult Hype.HypeTimeline WatcherWatch timeline completion and progress by codeHypeVideo ControllerThis Hype extension helps you control videos beyond what Hype itself does. It offers custom events, and also it has default values for videos (like autoplay). It also includes some experimental memory optimization by removing video sources from hidden scenes HypeXAPIConnector for Hype with xAPI
No modules match. Try another word.
SCENE 03 / FROM THE WORKBENCHTried. Built.
Tried. Built.
Shared.
Experiments and working notes from my time with Hype 4.
More articles on Hype SatelliteSCENE 04 / KNOWLEDGE TO SHAREHype Cookbook.
Hype Cookbook.
A recipe worth keeping.
Code recipes, insights into the Hype API and practical knowledge from the community. My open book project brings together things worth looking up, trying out and building on.
- Code recipes
- Hype API
- Runtime
- Extensions
A collection grown over time, with examples from earlier Hype versions. Check each recipe against your project.
