Hacker News new | past | comments | ask | show | jobs | submit login
Launch HN: Haiku (YC W18) – Build and Design Cross-Platform UIs and Animations
127 points by zackbrown on Feb 12, 2018 | hide | past | web | favorite | 53 comments
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

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.

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.

> 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

> the ratio of "interactive experiences" to intrusive ads

What is the ratio of poo HTML websites to awesome ones? Probably worse :) Anyway I don't care about ratio, I care about the best examples - and I really haven't seen any JavaScript showcase websites that really inspire me. Processing is the only experimental stuff that sparks any interest.

(Please, do hit me with awesome JavaScript arty links to change my mind! ... remember hell.com?)

You left out Gabocorp!

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!

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 zack@haiku.ai)

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...

Hi Zack, thanks for the article I'll check it out. Unfortunately I haven't made that project public yet but I'll try to reach out to you once I have!

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.

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.

In browser editing would be awesome. Sketch was awesome, but Figma changed the way I work. I work both in Windows and Mac, and it is unbelievable how far browser based tools have come I have Haiku at home on Mac (beta tester) and now on Windows at work.... Browser support would be perfect for continuing where I left off regardless of the machine I am on.

What is it about Figma that changed the way you work?

Awesome! Browser-editor would support everything out-of-the-box, while a Linux native editor would be awesome as well.

Very glad to hear and looking forward to hearing news in the future.

Would be cool if it supported Haiku OS too. :)

Ha! We'd love to. We're fans of the Haiku OS project — as we scope out posix/*nix support, we'll be giving Haiku for Haiku a serious look.

Neat! Feel free to give me a buzz if you get stuck with anything. Always happy to help people port stuff. :)

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!

Not to be confused with the Haiku OS project:


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!

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?

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.

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

What is there to "scope out" about platform support, then?

Fair point! Short answer: Even though our UI is totally platform-agnostic, we have a lot going on under the hood with platform-specific considerations. Examples include our Sketch integration (which, like Sketch, will have to be Mac-exclusive), ensuring our CLI works with the various ways our users can install Node/npm/yarn and Git, and supporting various firewall/antivirus configs in conjunction with our live design features. Like we said, multi-platform support is coming soon — focusing on Mac just helped us ship sooner.

Uhhh, last I checked Lottie supports macOS.

Congrats on the launch! Nice/clear demo.

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

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 jobs@haiku.ai with a quick bit about yourself.

Is your homepage built using Haiku?

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.

Very cool, thank you!

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).

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.

The first half of this is spot on (the flaws of declarative CSS for interactions) — your last paragraph has some mistakes about Haiku, though.

> 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.

For the Web, Haiku Core is our renderer. We don't use lottie-web; we use Lottie only to export Haiku Core for rendering on iOS and Android.

Haiku Core uses "the fastest parts" of SVG + CSS + JavaScript to render its animations. Nothing magical here, it's just using web standards, though it was important for us to build around SVG+DOM instead of canvas so that you can still use the Web for what it's best at: rendering documents.

Haiku Core is a component format explicitly defined for reusability — and hackability. Haiku components for the Web aren't 'generated' or 'exported'; the design source file is the code source file. And due to the way that Haiku handles state (strictly internally) and data flow (strictly message-passing,) they work in any codebase, as polite and predictable guests.

EDIT: P.S. tuchsen, I'd love to chat with you some more. Can you email me zack@haiku.ai ?

Hey sorry for misrepresenting your architecture, I did start with the caveat that I'm not with you guys though :). I shot you a couple of emails.

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.

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

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!)

> 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.

Thanks for the reply. It looks cool, good luck!

I've actually made a couple of apps in this space over the years. Radi [1] was an HTML5 canvas+video animation app with a Flash-style timeline released back in 2010, though long since defunct. Neonto Studio [2] is a design environment for native mobile apps. React Studio [3] is an offshoot from the Neonto Studio product for making web apps, it's free.

My experience is that designers are not a great target market for this kind of product because their influence and competence is fundamentally limited. They just don't have the sway within a team or organization to push developers to make use of anything that looks like code coming from the design side. To make the sales pitch even more complicated, most designers are pretty happy with this state of affairs – they already have plenty of work and don't really want the extra responsibility and learning curve involved in making anything production-ready.

There's a reason why Sketch is so popular among designers: it's because it does so little. It doesn't try to model anything or actually represent anything about what makes user interfaces tick, it's just a pared-down Illustrator.

You seem to be working up from animations towards UI components in general. I hope that approach works out for you.

[1] http://web.archive.org/web/20120509083927/http://radiapp.com... [2] http://neonto.com/nativestudio [3] https://reactstudio.com

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.

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.

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.

There are huge differences between production artists and designers. Also, the design that gets made in sketch often turns into living specification and documentation that are necessarily not one-to-one with production artifacts.

Many have tried this before (anyone remember XAML/Blend?) but it always falls down for the same reason that they don't really capture what designers really do (despite of what their managers and developer colleagues think they do!), which has nothing much to do with helping developers write code. Tools like these are more apt for UI developers.

Since we're both associated with Y Combinator, perhaps we can agree on the directive to "make something people want"?

We can probably also agree than a data-driven approach is more powerful than individual opinions, even from smart folks. It sounds like we could intellectually debate how connected design and code should be for days—I'm certainly passionate about this subject, and I sense you are too.

So here's some data. From the >10k users who went through our private beta, over 10% responded to our requests for feedback. A representative sample:

  > I want a better solution for collaboration between designers and developers. Our developers don’t want to code for the motion.

  > The main friction we experience is getting the concepts onto a functioning unit ASAP so we can iterate very quickly and throw away bad ideas before it’s expensive to do so

  > I want a tool that is similar to Flash, but does not need a plugin and runs natively in the browser.

  > Dynamic, code-ready animation is extremely intriguing to the team – it's absolutely a pain point in our current process.

  > I'd love a tool that's easy to use so that the designers can be more involved - even take the lead - on getting the animations we use on sites exactly how they want them.

  > Working as an interaction designer in IT everyday makes me think how I can better translate my designs to the engineers, even more so I get steadily closer involved with the front-end side of things.

  > My partner and I want a better solution for collaboration between designers and developers. I am a developer, he is a designer. We are a two man team and efficiency is our top priority.
(and on... and on.)

We're confident that we're building something people want. Not everyone! Sounds like not you. But plenty of folks. So we're chasing our passion, and chasing the opportunity, while listening to our users and doing our best to continue learning from both past and present.

I got it, but I'm not sure how you will succeed where countless many likewise projects with similar goals have failed. I really do wish you luck here, hopefully you have some secret sauce to succeed where others have failed.

Sketch is great as a design tool because it doesn't try to be a production tool (unlike say Illustrator which is more of a production tool than a design one). That difference is super important, as you don't want to limit design iteration with production requirements, nor do you want unpolished design assets making it into production (same with code actually).

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

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

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.

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

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

Thanks!, I've been hoping for a tool like this for a while now. Downloaded it and giving it a go.

Why that country TLD?

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

Applications are open for YC Summer 2019

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact