Launch HN: Haiku (YC W18) – Build and Design Cross-Platform UIs and Animations

[zackbrown]

Hey HN! Haiku is a UI-building tool for both designers and developers. You can import vector and bitmap assets, animate them with a visual timeline, make elements respond to events, script behavior (if you like to code), then publish as production-ready UI components. Haiku components are versioned and can be pulled into codebases via Git or npm.

We are a remote, international team of six. We've all spent years in various design/development roles, and we've all run into the same problem: When building software, teams waste too much effort creating designs in design tools, then reimplementing those designs in code.

Here's how we're working to solve that:

1. Create a common tongue for design tools and codebases to communicate. We're starting with a simple JavaScript file format that can capture both how designs look and how components behave, where animation is a first-class citizen. We call this format Haiku Core and we've open sourced it under the MIT license, along with a standards-driven interpreter/renderer for that format on the Web. We'd love to hear from the community about how to improve our format or Web renderer.

2. Create a design tool that speaks that language. Our desktop app, Haiku for Mac [2], brings a familiar visual design/animation experience to designers, while remaining connected to the world of code. Haiku tracks designs with Git and delivers versioned components to developers. Haiku automatically sets up and hosts Git infrastructure and npm registration for your components. (This infrastructure is optional. Your files always sit on your computer, and you own them.)

3. Integrate with the tools that design/development teams already use. If you like to draw, you can keep designing in Sketch and see changes sync on stage. If you like to code, you can edit Haiku source files directly in your favorite text editor. Out of the box, Haiku components are compatible with vanilla web codebases, React, and Vue. Haiku also supports exporting to Airbnb's Lottie format, allowing native animation authoring for iOS, Android, or React Native.

Thanks for reading, HN. We know this subject is close to many people's hearts here — we'd love to hear what you'd like to see in a UI-building & collaboration tool like Haiku.

[1]: http://github.com/HaikuTeam/core

[2]: https://www.haiku.ai

[hnzix]

As much as everyone loved to hate on Flash, it was brutally effective as a web motion design tool and has yet to be surpassed when visually building interactive experiences.

I've seen designers with almost zero coding skills build incredibly immersive and creative web pieces. There was a whole generation and genre of web content that has vanished and never been replaced - praystation, flight404, Hi-ReS! and so on. Processing is similar in spirit but has only filled part of the niche.

I really hope Haiku revives experimental, interactive motion design on the web. While Flash was inappropriate for delivering marketing text content, I see the genre's value as being a standalone artform.

[zackbrown]

Totally agreed with your thoughts on Flash — it did a lot of things very right, even though its age and its combination of technical & corporate missteps led to its death.

Unfortunately, Flash got such a bad rap through performance/security issues and the wrath of Steve Jobs that the "baby" (the authoring tool & connected approach to design+code) got thrown out with the "bathwater" (namely, the plugin, Flash Player.)

We also really hope that Haiku helps empower experimentation and drives a new generation to explore the boundaries of design and code — the way several on our team were inspired by Flash many years ago. This is the crux of the name Haiku — we believe the artistic/creative spirit behind writing a minimal poem like a haiku is really similar to that which goes into crafting UIs.

[CharlesW]

> As much as everyone loved to hate on Flash, it was brutally effective as a web motion design tool and has yet to be surpassed when visually building interactive experiences.

My 2¢: I think you may be romanticizing the ratio of "interactive experiences" to intrusive ads, bad games (but in bulk, to make up for the quality) and (eventually) video.

But if you like the brutally-effective tool, it still exists[1] and has seen regular improvements, but now emits standards-based content that works as well or better than Flash did.

[1] https://en.wikipedia.org/wiki/Adobe_Animate

[drcongo]

You left out Gabocorp!

[jamesmcintyre]

Recently a side project of mine required custom svg animations based on user actions. I built a nodejs api abstraction so that a client could send a json request which described which svg asset and what type of size/animation/timing/sequence (the api allowed the client to compose animations in a sequence) then the response would be the resulting json lottie asset which would render on the React Native client flawlessly. I also incorporated client-side animations with another css-type animation library so that standard svg's could easily have default animations with little-to-no additional coding. This works on iOS, Android and web with one api and pure json.

However, the process of building the svg animation asset library still required I use Adobe After Affects to design/animate then use the Bodymovin After Affect plugin to export to the lottie-friendly json format. With Haiku I might be able to replace After Effects with Bodymovin and have a cleaner, version-controlled process!

Awesome product idea, I hope to give it a try soon!

[zackbrown]

Thanks! It does sound like the project you described would have been a great use-case for Haiku, e.g. how you can author custom/logic-bound SVG animations with Haiku, then pass live data into a Haiku component to update those animations via React/Vue props.

I'd love to see the project you made, if publicly available, as we're always looking for use-cases to drive our development. (You can mail [email protected])

Oh, and my colleague Taylor wrote some more thoughts about "Lottie without After Effects" from a designer's perspective, if you're interested: https://medium.com/haiku-blog/lottie-without-after-effects-9...

[diggan]

Since the tool is for building and designing cross-platform UIs, is the plan to also have the design tool be cross-platform?

The tool seems nice and would be lovely to have on linux. There is not a lot of tools that support my choice of platform, but if the aim is explicitly to support a lot of platforms, having support for the three major OSes would be nice.

[zackbrown]

Yes, we're planning to support Windows, Linux, plus an in-browser editor. Starting with Mac just helped us ship sooner.

We agree with you that for cross-platform dev, multi-OS authoring support is important. Windows support is expected mid-2018; I hesitate to put a date on Linux yet since we haven't deeply scoped it out, e.g. which distros we can easily support.

[tuchsen]

This is nuts! I've been working on something very similar to this for about a year now. You have no idea how happy I am to have a little competition, hopefully it'll push me to finish :). I'm going to have to look at your core library and compare differences between our implementations. Really excited to play with it as well but I don't have a mac machine near me right now. It looks fantastic!

[morganvachon]

Not to be confused with the Haiku OS project:

https://www.haiku-os.org/

[chrismessina]

Haiku is super cool.

There are so many great tools out there that bring together development and design tasks... it's about time someone went after the mantle of interactive UI building from Adobe — years after the demise of Flash!

[auggierose]

Great idea! Concerning the Terms of Service:

  Intellectual Property

  Haiku claims no intellectual property rights over the     
  material you provide to the Service. You acknowledge that 
  Haiku owns all right, title and interest in and to the    
  Service, including without limitation all intellectual    
  property rights, and such rights are protected by U.S. and 
  international intellectual property laws. You agree that you
  will not copy, reproduce, alter, modify, or create
  derivative works from the Service.

So let's say I try out Haiku under these terms, and go on and program my own solution that intersects with what Haiku does, and uses some ideas I picked up from Haiku (together with my own). Would this be a violation of the Terms?

[terhechte]

Since you seem to have a Mac app that can render your Haiku format, are you considering open sourcing the renderer just like the 'Haiku Core' renderer? I ask because animation abstractions for macOS are severely lacking. Even Lottie isn't supported.

[matthewtoast]

Haiku Core is what our Mac app uses to render the stage. (Our app is built in Electron.) Here's the GitHub link if you're interested: https://github.com/HaikuTeam/core

[Klonoar]

Uhhh, last I checked Lottie supports macOS.

[i_like_pie]

Congrats on the launch! Nice/clear demo.

2 questions 1) what's your take on https://coherent-labs.com/hummingbird/ 2) are you hiring

[zackbrown]

Thank you!

1. Hummingbird looks like it's tackling a similar problem with a similar approach, though it seems focused on games (where this problem & solution are pretty well cornered by Unity.) We're currently focused on non-game web & mobile apps.

2. We're always on the lookout. Are you interested in chatting? Please email [email protected] with a quick bit about yourself.

[apeace]

Is your homepage built using Haiku?

[zackbrown]

Parts of it are, yeah. The hero animation and each of the animated explainers are built in Haiku. So are each of the examples in the Gallery.

Haiku is meant to be "component-first," so you can add it to existing codebases without committing your entire tech stack. Our React+Gatsby website is an example of that.

We're almost ready to ship support for multi-component composition inside Haiku, which will enable features like reusable form controls, layouts, and more (see https://www.haiku.ai/features/ for more 'coming-soons') — in the meantime, think of Haiku as a discrete-component & animation builder.

[qhoc]

Not sure if anyone recalls Famo.us which used to focus on web animation and make it programmable although they don't have the client app like Haiku. However, their claim was that they "cracked" the web animation performance. Well it didn't work for them (basic performance test would tell otherwise - duh!). Why is Haiku able to achieve such awesome performance on the web like this for animation? I also saw Greensock and they did a very good job as well. I am curious on what's the secret sauce here and whether there is any performance comparison (sorry for loaded questions there).

[tuchsen]

I'm not with Haiku but I'm working on something similar, so I'll chip in with my 2 cents here.

To get good performance out of interactive web animations, you need the code that handles input to be in a really tight loop with the value that's eventually painted to the screen. The CSS Animations API really destroyed interactive design on the web for a long time. The reason is that they were fully declarative and had very few hooks for interacting with JS code, it's difficult or sometimes impossible to do things like chain/interrupt/restart them. Developers could work around that with hacks like using the style property on a div to override the animation classes when being interacted with, and then relying on the animations defined in classes for everything else. I've tried to write code like this, it's brittle across platforms and very hard to maintain. In addition, the global flat document structure of HTML makes it very hard to ensure that other code doesn't interfere with yours. My point is, you can't write a good animations editor for the old web because it just wasn't possible to do them well enough using the old API's.

Newer API's (CSS Variables, Web Animations, CSS Flex Box) and better component abstractions (React / Web Components) make it a lot easier to do something like Haiku. My tool just takes an intermediate JSON structure and generates React or Web components. The animations for React are handled by React Natives Animated library, and the Web Animations API for Web Components. Flexbox + CSS Transforms are leaned on for keeping the structure or the generated components consistent. Generating performant animations on the web really isn't that hard anymore.

The really hard part is defining a common set of API boundaries to make the generated components reusable and composable. Doing this is complicated because of the lack of proper module loader in JS, its dynamic types don't help either.

From the video it looks like Haiku is using a library from AirBnB called Lottie to handle the animations. Then they turn around and wrap that in a React component + others forthcoming. I wish I'd known about Lottie before starting my project, it probably would have saved time. I'm not sure that Haiku can pull of component re-usability with Lottie though, depending on how much of a black box it is, good luck to them on that front.

[bpicolo]

The auto-fullscreen and no-controls on the video demo are suboptimal (seems unlikely you're going to get people sitting through an 8 minute play through, especially when the duration bar is missing)

Cool software though.

[taylorpoe]

That's a good point about the unknown duration. Just redeployed the site with video controls added. Thanks for the note.

[pavlov]

It looks like "Flash for the web". There's been a number of those over the years. How is Haiku different?

Looking at the Github page, it seems to me that the answer would be that Haiku-created animation assets are stored in JavaScript objects so that it's easy to edit and store them as part of code. Is that the right impression?

How much does the Haiku Core player weigh on a webpage? Just curious to know. (I like following this space and it's always great to see new entrants!)

[zackbrown]

> Haiku-created animation assets are stored in JavaScript objects so that it's easy to edit and store them as part of code

Yes, that's the "core" of it! "Design-as-code" is how we've described this foundation, and it lets Haiku play nicely with dev tools like git & package managers (yarn/npm today, Gradle + CocoaPods planned for the future.) You couldn't hack on a Flash .swf or .fla file with your code editor, but Haiku was designed for hacking.

And unlike Flash or most of its successors, Haiku's renderer is open-source and standards-based. "Closedness" was the death stroke for both Flash and Silverlight, and open source is table stakes for modern-day development.

Re: footprint, Haiku Core currently weighs in at 51kb gzipped. A little heavier than React, for reference. That said, we've barely begun to optimize footprint. Much of the current file size comes from enumerated svg/css style properties as strings, which we're working to refactor to tighter wire format for runtime (similarly to what Lottie and FB Keyframes do.) Rough estimate: we should be able to cut that footprint in half or better.

[solarkraft]

Oh yes. I have been thinking about this concept for a while.

Though I have to admit that the name strongly reminds me of the Haiku Operating System I very much want this project to succeed.

[seanmcdirmid]

There always seems to be a misunderstanding that design tools are for production rather than design. They aren’t: even if you used code to explore your design, it is highly likely that most of that code (written quickly and written to be thrown away) would be unsuitable for production purposes.

[zackbrown]

We've observed that every software project and every team is different. Sometimes projects go through a quick-and-dirty prototyping phase; sometimes they don't. In almost all cases, design continues to evolve even after the initial code is written.

Through the thousands of users who went through our private beta last year and the feedback they've shared, we understand that many modern "product teams" need a better solution for collaboration between design and development — because in these teams, design is a living breathing part of the product. Waterfall style "design hand-off"s are a huge pain point.

As a bit of empirical proof for this kind of workflow: consider Unity. Unity uses a workflow very much like Haiku's to connect design and development, through common data formats and pipelines of interoperating tools. Unity works great for building incredibly complex UIs and software—or to repurpose your words, Unity is suitable for production purposes.

We believe that if somebody gets this right for apps outside of games — on a more open platform than Unity — that we'll start seeing big steps forward in creativity and team efficiency.

[polskibus]

Who's your most dangerous competitor and what's your uvp?

[panic]

Looks cool! I wish I could play around with it more, but I already used up my 30-day Sketch trial.

[zackbrown]

Ah, sorry to hear that! Our reliance on Sketch is not slated for the long-term — we'd like to integrate with Illustrator and Photoshop, and Figma just opened their APIs to us to investigate an integration with them, too.

We planning to build our own drawing tools in time — probably more Flash-style, e.g. with vector-fill paintbrushes and paint-buckets: lower barrier to entry, easier to be silly + creative, and they'd be more complementary rather than competitive with the precision-drawing tools of Illustrator/Figma/Sketch and co.

[quadrature]

one kind hearted criticism, the video on the landing page goes fullscreen when i click play which is really annoying.

[taylorpoe]

I've changed it to make full-screening a second explicit step. Thanks for the feedback. :)

[abimaelmartell]

Why that country TLD?

[zackbrown]

Because "ài" means "love" in Mandarin — ài drives our work. Also, .com and most other recognizable TLDs were taken.