Interactivity
Animations
Hype's keyframe-based animation system brings your content to life. Click "Record" and Hype watches your every move, automatically creating keyframes as needed. Or, if you'd prefer to be more hands-on, manually add, remove and re-arrange keyframes to fine-tune your content.
Scenes
Scenes are similar to slides in presentation software, and are a great way to simplify animation flow or separate content. Hype lets you make as many scenes as needed, and a variety of actions can switch between scenes using smooth transitions.
Timelines
Timelines for the scene can be added and play when triggered by actions. This capability lets you add interactivity -- mousing over an object could trigger a timeline to play which animates other objects in the scene.
Actions
Engage your viewers and trigger custom animations, scene transitions, or JavaScript functions in response to users actions like mouse clicks/keystrokes or documents events.
Animations (1:01)
Scenes (0:44)
Actions (0:39)
HTML5
Styling
Hype outputs state of the art HTML5, CSS3 styles, and JavaScript. It supports cutting edge features like box shadows, reflection, and 3D transformations.
Multiple browser support
Hype tries hard to deliver 100% fidelity across all browsers. For example, if the high-performance CSS3 transitions aren't supported, Hype will fall back to Javascript-based heartbeat animations. When there are no good fallbacks, Hype warns about browser incompatibilities in the inspector and at export time, so you're never caught by surprise.
Accessible on mobile devices
Unlike other tools, Hype creates content for everything from the latest desktop browsers, to mobile devices like iPhone and Android.
HTML5 (0:21)
WYSIWYG
WebKit based canvas
Hype offers the best possible experience for creating beautiful web content — by using a WebKit-based canvas to render your content, what you create in Hype is exactly what your viewers see in the browser.
Canvas guidelines
Creating pixel perfect content is a snap with Hype's intelligent layout guidelines.
Sizing and alignment tools
Mise en scene. Everything has its place in your scene, and Hype's alignment and sizing tools make building your scene effortless.
Powerful inspector
A rich inspector accompanies Hype's canvas, letting you dive in and easily tweak every aspect of your content.
WYSIWYG (0:33)
Exporting
Easy embedding
When exporting, Hype creates an entirely self-contained directory that holds all the resources and JavaScript for your content. Upload that directory to your web server, copy and paste three lines of HTML into your exiting web page, and you're good to go.
Upload to Dropbox
Hype uploads directly to Dropbox, letting you quickly share your new creations with just a few clicks.
Exporting (1:10)
Flexibility
Edit HTML
Hype provides a rich set of tools for styling, but sometimes you need to get hands-on. Every element's inner HTML is only a couple clicks away and all of your changes are rendered on the fly, giving you a live preview as you edit.
Custom Javascript actions
Hype puts all the power of JavaScript at your fingertips. The integrated JavaScript editor lets you write custom functions triggered by user actions. The Hype JavaScript API can manipulate the scenes from inside or outside of the embedded Hype content.
Flexibility (0:48)
Native Mac App
Cocoa
Hype was written in Cocoa exclusively for Mac OS X. It is intuitive and easy to use, letting you focus on creating great content. Hype launches in a second.