15 ms·

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

127 points by zackbrown 9y ago

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 http://github.com/HaikuTeam/core [2]: https://www.haiku.ai https://www.haiku.ai

diggan 9y ago
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 9y ago
  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.
  - skykooler 9y ago
    Would be cool if it supported Haiku OS too. :)
    - zackbrown 9y ago
      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.
      - waddlesplash 9y ago
        Neat! Feel free to give me a buzz if you get stuck with anything. Always happy to help people port stuff. :)
  - diggan 9y ago
    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.
  - redindian 9y ago
    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.
apeace 9y ago
Is your homepage built using Haiku?
- zackbrown 9y ago
  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 9y ago
    Very cool, thank you!
polskibus 9y ago
Who's your most dangerous competitor and what's your uvp?
seanmcdirmid 9y ago
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 9y ago
  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 9y ago
    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 9y ago
abimaelmartell 9y ago
Why that country TLD?
- zackbrown 9y ago
  Because "ài" means "love" in Mandarin — ài drives our work. Also, .com and most other recognizable TLDs were taken.
terhechte 9y ago
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.
- Klonoar 9y ago
  Uhhh, last I checked Lottie supports macOS.
- matthewtoast 9y ago
  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 9y ago
    What is there to "scope out" about platform support, then?
    - matthewtoast 9y ago
      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.
bpicolo 9y ago
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 9y ago
  That's a good point about the unknown duration. Just redeployed the site with video controls added. Thanks for the note.
quadrature 9y ago
one kind hearted criticism, the video on the landing page goes fullscreen when i click play which is really annoying.
- taylorpoe 9y ago
  I've changed it to make full-screening a second explicit step. Thanks for the feedback. :)
  - quadrature 9y ago
    Thanks!, I've been hoping for a tool like this for a while now. Downloaded it and giving it a go.
tuchsen 9y ago
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!
i_like_pie 9y ago
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 9y ago
  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.
jamesmcintyre 9y ago
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 9y ago
  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-9c5a8e74c239 https://medium.com/haiku-blog/lottie-without-after-effects-9...
  - jamesmcintyre 9y ago
    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!
pavlov 9y ago
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 9y ago
  > 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 9y ago
    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
chrismessina 9y ago
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!
morganvachon 9y ago
Not to be confused with the Haiku OS project: https://www.haiku-os.org/ https://www.haiku-os.org/
solarkraft 9y ago
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.
hnzix 9y ago
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 9y ago
  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 9y ago
  > 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 9y ago
panic 9y ago
Looks cool! I wish I could play around with it more, but I already used up my 30-day Sketch trial.
- zackbrown 9y ago
  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.
qhoc 9y ago
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 9y ago
  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.
auggierose 9y ago
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?

127 points by zackbrown 9y ago

diggan 9y ago

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 9y ago
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.
- skykooler 9y ago
  Would be cool if it supported Haiku OS too. :)
  - zackbrown 9y ago
    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.
    - waddlesplash 9y ago
      Neat! Feel free to give me a buzz if you get stuck with anything. Always happy to help people port stuff. :)
- diggan 9y ago
  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.
- redindian 9y ago
  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.

apeace 9y ago

Is your homepage built using Haiku?

zackbrown 9y ago
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 9y ago
  Very cool, thank you!

polskibus 9y ago

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

seanmcdirmid 9y ago

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 9y ago
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 9y ago
  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 9y ago

abimaelmartell 9y ago

Why that country TLD?

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

terhechte 9y ago

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.

Klonoar 9y ago
Uhhh, last I checked Lottie supports macOS.
matthewtoast 9y ago
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 9y ago
  What is there to "scope out" about platform support, then?
  - matthewtoast 9y ago
    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.

bpicolo 9y ago

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 9y ago
That's a good point about the unknown duration. Just redeployed the site with video controls added. Thanks for the note.

quadrature 9y ago

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

taylorpoe 9y ago
I've changed it to make full-screening a second explicit step. Thanks for the feedback. :)
- quadrature 9y ago
  Thanks!, I've been hoping for a tool like this for a while now. Downloaded it and giving it a go.

tuchsen 9y ago

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!

i_like_pie 9y ago

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 9y ago
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.

jamesmcintyre 9y ago

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 9y ago
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-9c5a8e74c239 https://medium.com/haiku-blog/lottie-without-after-effects-9...
- jamesmcintyre 9y ago
  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!

pavlov 9y ago

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 9y ago
> 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 9y ago
  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

chrismessina 9y ago

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!

morganvachon 9y ago

Not to be confused with the Haiku OS project: https://www.haiku-os.org/ https://www.haiku-os.org/

solarkraft 9y ago

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.

hnzix 9y ago

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 9y ago
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 9y ago
> 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 9y ago

panic 9y ago

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

zackbrown 9y ago
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.

qhoc 9y ago

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 9y ago
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.

auggierose 9y ago

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?