
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.<p>We are a remote, international team of six. We&#x27;ve all spent years in various design&#x2F;development roles, and we&#x27;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.<p>Here&#x27;s how we&#x27;re working to solve that:<p>1. Create a common tongue for design tools and codebases to communicate. We&#x27;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&#x27;ve open sourced it under the MIT license, along with a standards-driven interpreter&#x2F;renderer for that format on the Web. We&#x27;d love to hear from the community about how to improve our format or Web renderer.<p>2. Create a design tool that speaks that language. Our desktop app, Haiku for Mac [2], brings a familiar visual design&#x2F;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.)<p>3. Integrate with the tools that design&#x2F;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&#x27;s Lottie format, allowing native animation authoring for iOS, Android, or React Native.<p>Thanks for reading, HN.  We know this subject is close to many people&#x27;s hearts here — we&#x27;d love to hear what you&#x27;d like to see in a UI-building &amp; collaboration tool like Haiku.<p>[1]: <a href="http:&#x2F;&#x2F;github.com&#x2F;HaikuTeam&#x2F;core" rel="nofollow">http:&#x2F;&#x2F;github.com&#x2F;HaikuTeam&#x2F;core</a><p>[2]: <a href="https:&#x2F;&#x2F;www.haiku.ai" rel="nofollow">https:&#x2F;&#x2F;www.haiku.ai</a>
======
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.

~~~
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](https://en.wikipedia.org/wiki/Adobe_Animate)

~~~
hnzix
_> 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?)

------
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 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...](https://medium.com/haiku-blog/lottie-without-after-
effects-9c5a8e74c239)

~~~
jamesmcintyre
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!

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

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

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

------
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/](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](https://github.com/HaikuTeam/core)

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

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

------
i_like_pie
Congrats on the launch! Nice/clear demo.

2 questions 1) what's your take on [https://coherent-
labs.com/hummingbird/](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
jobs@haiku.ai 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/](https://www.haiku.ai/features/) for
more 'coming-soons') — in the meantime, think of Haiku as a discrete-component
& animation builder.

~~~
apeace
Very cool, thank you!

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

~~~
zackbrown
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 ?

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

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

~~~
pavlov
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...](http://web.archive.org/web/20120509083927/http://radiapp.com/)
[2] [http://neonto.com/nativestudio](http://neonto.com/nativestudio) [3]
[https://reactstudio.com](https://reactstudio.com)

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

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

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

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

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

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

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

