Introducing Haiku: Design and Create Motion (Code Optional)

Web developers are increasingly looking for new tools to streamline their creation. Haiku is a stand-alone application available for Mac users and also available as an option in the browser. By its own description "Design imaginative user interface components that fit into any web application." Optional code. "In this article, we will look at this new tool available for hobbyists. movement of all kinds; dive and explore all that is Haiku!

Creation of Haiku

Founder and Creator of Haiku Zack Brown set out to create Haiku after a long career in the creative industry digital where he has witnessed how much time has been misused by converting visual designs into code. Haiku allows designers, engineers, marketers, managers and others to create together instead of always remaining in "transfer" mode

The Overview

Before diving into Haiku in depth, we'll have a better idea, visually, of the end result you can expect.

This demo presents complex movements with regard to typography. This is reminiscent of many other library effects you may have seen before, such as those created with Mo.js .

Haiku is fully built using web technologies such as JavaScript, TypeScript, WebSockets, SVG, DOM Interns, React and Git to track Haiku's progress. Future goals are to allow the use of your own Git infrastructure instead of Haiku's; git hosting is just one of the workflow services offered.

The "WildLoader" demo above is another example taken from the gallery page and is a project provided by Haiku. For this demo I use CodePen to show and yes, everything is SVG

With Haiku you will have the power to:

  • Give life to any design from Sketch.
  • Add interactivity by responding to user events and data
  • Publish your creative as a clean, web-ready component.
  • Integrate your component with a few lines of code.

Sketch + Haiku

To get the most out of Haiku, you will need Sketch installed. In its current incarnation, Haiku does not have any of its own drawing tools and supports a rich integration with Sketch for this reason. There are future projects to support other drawing tools like Adobe Photoshop and Illustrator and finally to have some.

Behind the Scenes, Haiku Converts All of Your Sketch artboards, pages and cutouts into individual elements that can be composed and animated independently on scene. You might ask yourself "What if you need to edit the Sketch file? Haiku takes care to bring your new changes in Haiku and on all the assets that you have placed on the scene.

Haiku + CLI

The Command Line Interface (CLI) is an optional part of Haiku, but it opens up a lot of powerful features; for example, using the command line interface to import a Haiku project into an existing code base, or you can use the command line interface to directly clone a Haiku project on your computer and access to your code to edit it manually. You can even launch haiku login to interactively log in from the command line and you can also run haiku logout to log out. Soon you will be able to install the CLI directly from npm, using npm install -g @ haiku / cli .

Hello Haiku

When you open Haiku you will have three different demonstration projects provided for the purpose of learning. The one that I used to titled "Moto" is a scene depicting a motorcyclist riding on a mountain background while the elements go through the runner in a real way of life.

The application interface contains a visual timeline for each key element or frame of the scene. You can interact with this visual timeline to tweak your animations and get a visual result of the changes.

Every component you make in Haiku is automatically optimized for production. ; it is not a prototyping tool. Haiku believes that creative teams should spend less time making disposable prototypes and shipping more time. Under the hood, each Haiku component is a clean JavaScript code that you can always edit manually without breaking the link to the source design. Gone are the days of reworking your craft code as new design changes come into play. Haiku even provides a powerful API for cabling your components to external business logic.

to see other features such as collaborative editing in real time, hookup, sharing drafts, comments in context and much more.

The Timeline

Visual chronology is a central part of the product. , from my experience using it, is really well done. I find it extremely powerful that each element can be expanded or reduced to drill in any property such as rotation position or scale and each of these properties can be animated separately with keyframes and interpolations for each element. Combine all this with the option of choosing different acceleration curves for each interpolation and all wrapped in an intuitive and polished UX. So great!

Property entries in the timeline may contain more than just simple values. Users can embed code snippets called expressions . It's very fashionable with Microsoft Excel; start the entry value of your property by a sign equal to and the entry will recognize that you are typing an expression. Expressions are snippets of code that add dynamic behavior to the properties of your animation.

Each Haiku project you create can have its own collection of internal states. These data are specific to your component as a method to "summon" them into your expression functions allowing you to create complex and dynamic behavior. You can access a status value at any time via custom timeline expressions by typing the name of the state.

The states are the way you work with fictitious data in Haiku. For example, if you want to create a data visualization in which a series of points is animated according to a data table. Using states and expressions, you can visually configure your animations and then test them with fictitious data inside Haiku. When you are ready to align your project in a code base, these fictitious states are ready to accept real data

If you use the optional React Haiku adapter, all states in Haiku are automatically addressable as a React property. Connect your React data into the Haiku component and that's it! Your creations live inside your complete application with live data.

Publishing Haiku Projects

When you are finally ready to ship a Haiku project, you can publish using the Haiku Player. This player is not a browser plugin, it is rather a package of JavaScript included in your Haiku project that makes it possible to render it on the web using native HTML, CSS and JS technologies.

The use of web technologies for publishing means that a published Haiku project can run anywhere in your code using a modern browser. The Haiku team ensures that you do not need to think about the player who does most of the work and provides code snippets to include your Haiku for code bases of different kinds.

Post your project is a click of a button at the top right of the application. Behind the scenes, Haiku performs heavy tasks, pushing to hook up servers and publishing the project on npm so that it is ready for a developer to install, drop the component into its code and continue to operate. Unlike code generators (since Haiku uses components), you keep repeating about your design even after being part of a code base! All that remains to be done is to move to a developer via a single link, Haiku takes care of the rest.

There are, of course, times when you need more control; control the timeline based on events, change the way your component is sized in its container or any number of programmatic actions. For these special cases, you can take advantage of the API Haiku Player Developer .


Like what you see? Do you think this would be a valuable addition to your workflow? Let us know in the comments what you think and where you could see yourself using this wonderful tool to help build your animation desires. Happy coding!

Special gift for readers and readers

The first 100 readers to request an invitation to this URL will have early access to Haiku. Enjoy it!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.