5 ms·

Show HN: Moos.app – Interactive animated experiences for the web

102 points by thomasikzelf 5y ago

sabellito 5y ago
Some feedback: on the landing page on desktop, I spent 4-5 seconds trying to interact with the image, then I tried clicking on the underlined "interactive" word.
thomasikzelf 5y ago
Hello Hacker News, founder here. I'm very excited about this startup. One feature of this tool that I am particularly excited about which I think people here will appreciate is the way expressions are implemented. Expressions are fully typed and the types are automatically inferred. When you leave a hole the editor will tell you what type fits there. Don't forget to try out the (full) app in the playground!
- rememberlenny 5y ago
  The playground examples are very neat. Great job!
rapnie 5y ago
Note that your examples on the site are empty boxes on FF Android. Otherwise some nice animations my quick peek showed me.
- XzAeRosho 5y ago
  I just checked on FF Android, and the examples worked fine. Maybe it's related to the Android version you're running? I'm currently on Android 11.
  - rapnie 5y ago
    Ah yes, this is Android 8.
- thomasikzelf 5y ago
  Thanks for the heads up. I test on browser stack and it seems to be working there. The videos are AVIF or MP4 and there are definitively problems with AVIF implementations. For example in Edge AVIF would not play but it would also not fallback to MP4. If more people have problems I will have to fallback to just MP4. It is a shame though, the AVIF files are a lot smaller.
_1tan 5y ago
Cool! Is it open-source? Reminds me of Flash.
- thomasikzelf 5y ago
  Flash also took interactivity to the next level back in it's day. There is still adobe animate (which is the flash editor) but it does not adapt to screen sizes and you quickly need to drop down into code. I'm hoping to build a tool that can match flash in creativity with less of a learning curve, so that non programmers can use it too. Building all of this is a lot of work (and this is only the beginning). I think open-source is not a viable way of building this right now. Development will stall before a critical mass of features allows wider adoption.
  - ArekDymalski 5y ago
    >I'm hoping to build a tool that can match flash in creativity with less of a learning curve, so that non programmers can use it too. Are you familiar with Corel Rave? That was perfect Flash editor imho. I still miss it.
    - thomasikzelf 5y ago
      I never used it. It looks like people mainly used it for animations, I am not sure what kind of interactivity it allowed. It seems that the program didn't support actionscript. If somebody wants to do animation and then export it to a video then tools like adobe animate and adobe after effects are still better options, although cavalry[0] looks really cool as well. These do not really have the interactivity that moos.app gives you though. [0]: https://cavalry.scenegroup.co/ https://cavalry.scenegroup.co/
  - sporklpony 5y ago
    Maybe take a look at Wick Editor? https://www.wickeditor.com/#/ https://www.wickeditor.com/#/ It's open source and development has stalled lately, but it has a stated goal of being a low-learning-curve flash replacement.
webwielder2 5y ago
How does this compare to Tumult Hype? https://tumult.com/hype/ https://tumult.com/hype/
- thomasikzelf 5y ago
  I never used tumult but I think these are the differences: - Moos.app has built-in "behaviors" that are sort of a template for interactions. For example the scroller behavior allows you to put text next to your visuals, when the user then scrolls your visuals will update. It also works on mobile and desktop without additional actions. - I found that using SVG or HTML for complex animations is way to slow. That's why moos.app uses a custom WEBGL renderer. - Moos.app works in the browser, Tumult is a mac app - As Tumult is older it has a bigger community - Tumult has no web hosting build in (I think). With moos.app you click a button and you get a link (or a self contained HTML file) - Tumult is a one time payment while moos.app is usage-based-pay
  - gamlegaz 5y ago
    > - I found that using SVG or HTML for complex animations is way to slow. That's why moos.app uses a custom WEBGL renderer. Did you try Canvas2D? Also curious to what you used for the 2D rendering, did you do your own implementation?
    - thomasikzelf 5y ago
      Yes a previous version was built on canvas2D. For simple things such as a couple of objects moving across the screen it works great. As soon as you start to do fullscreen "camera" movements performance starts to suffer. All images and paths need to be uploaded to the gpu every frame. Maybe the browser optimizes some things but in my tests it was not enough. The WEBGL renderer in this project is built from scratch because none were available that support SVG and were small enough for regular web pages. It allows me to upload paths and images to the gpu making fullscreen animations a lot more smooth.
  - rchaud 5y ago
    I think the ability to create and animate objects in a 3D space would really set this app apart. I say this as a frequent user of Hype. It's a great app, but limited to 2D animation as what it creates is entirely in CSS3, SVG and JS. The examples on the website are nice, however from what I saw, they can be done in Hype as well. As you mentioned, Hype is more mature and has a sizable community, many of whom contribute towards extending its functionality by creating custom modules in JS for things like dynamic data imported w/ JSON. For 3D animation I've also used Spline, which is in beta. It's interesting, but on my 2014 MBP, it runs slowly and the fans are constantly on, which makes it less appealing for my use.
mindvirus 5y ago
Super cool, but I think your landing page could use some work: 1. First thing is an interactive-looking image, with a play button etc. I'd recommend embedding a real widget built with your tool there. 2. The FUTURE/TODAY sections are really spaced apart and have no images. 3. In the Skada section, "powerfull" is spelled incorrectly (should have one L). I know that sharing stuff online is stressful - so really want to emphasize that it looks like you're doing great work here, and congratulations on shipping :)
- all2 5y ago
  Came here to say #1. If I see a play button, I expect to be able to push said button. I went to grab the scrubber with my mouse and I got nothing. I was quite disappointed. Definitely use a video showing features above the fold. A picture doesn't communicate very much to me, especially for something for animation/motion.
  - thomasikzelf 5y ago
    Thank you both for the feedback, I appreciate it. If you want to see what is shown in the screenshot you can go to https://playground.moos.app/#!example-skada https://playground.moos.app/#!example-skada
    - cr3ative 5y ago
      Just FYI, this fails to load with the Dark Reader extension installed - you're relying on the DOM position of a stylesheet, which extensions can change. Might want to look in to that. https://i.imgur.com/yqjqrWI_d.webp?maxwidth=1520&fidelity=grand https://i.imgur.com/yqjqrWI_d.webp?maxwidth=1520&fidelity=gr...
    - deleted 5y ago
      [deleted]
- pedalpete 5y ago
  Completely agree. I'll also add the "do you stand out?" didn't really speak to me. It doesn't really give me an idea of what you're doing, what does "stand out" mean? Stand out from whom? Why? As a contrast, our tagline - which my co-founder hates, and also isn't great - says "want better sleep?". It's clear what we're bringing to the table, what area we're working in.
canadianwriter 5y ago
That's a... unique pricing. Or maybe I'm just really behind in the times - hours of using the app? And then only a per project without an unlimited plan? It seems cool, just have never encountered pricing like that and it would certainly take me aback and reconsider using the tool. Especially when I don't fully know what a "project" is.
- thomasikzelf 5y ago
  you're right it's.... special. Let me give you my thought process: - One time pricing can be a real hurdle for users to pay upfront. Remember adobe costing a lot of money up front. The upside is that after this initial huge hurdle your free to use the product. For the business non recurring revenue means they need to batch changes to make buying the product worth while. This results in a long cycle between updates. - Subscription pricing aligns the business with it's users. Users pay only for what they use and the business can ship features to the user as fast as possible. - The downside is the subscription is often 'per user' and is done on an ongoing basis. You pay for the tool even if you don't use it. - Usage based pricing: you only pay for what you use in the smallest quantity that is understandable. This is what I use and what AWS uses for example. I think this is a really fair pricing model. If you're only doing one project it might cost you 3 bucks, but if you are a company that uses the tool fulltime you pay accordingly. It might turn out that too many people are turned off by this pricing, I don't know. It is easier to change to a regular pricing model then to a weird one :-). If you open one of the examples that is one project. Your project can be published at one unique URL.
  - sombremesa 5y ago
    Does this really align the business with its users? With this model aren’t you incentivized to make users waste as much time as possible so their time spent in the app increases, which is directly convertible to $ for you? I’m not convinced. Maybe I’ve misunderstood something. Charging for time spent developing is very different from what AWS does.
    - thomasikzelf 5y ago

102 points by thomasikzelf 5y ago

Some feedback: on the landing page on desktop, I spent 4-5 seconds trying to interact with the image, then I tried clicking on the underlined "interactive" word.

thomasikzelf 5y ago

Hello Hacker News, founder here. I'm very excited about this startup. One feature of this tool that I am particularly excited about which I think people here will appreciate is the way expressions are implemented. Expressions are fully typed and the types are automatically inferred. When you leave a hole the editor will tell you what type fits there. Don't forget to try out the (full) app in the playground!

rememberlenny 5y ago
The playground examples are very neat. Great job!

rapnie 5y ago

Note that your examples on the site are empty boxes on FF Android. Otherwise some nice animations my quick peek showed me.

XzAeRosho 5y ago
I just checked on FF Android, and the examples worked fine. Maybe it's related to the Android version you're running? I'm currently on Android 11.
- rapnie 5y ago
  Ah yes, this is Android 8.
thomasikzelf 5y ago
Thanks for the heads up. I test on browser stack and it seems to be working there. The videos are AVIF or MP4 and there are definitively problems with AVIF implementations. For example in Edge AVIF would not play but it would also not fallback to MP4. If more people have problems I will have to fallback to just MP4. It is a shame though, the AVIF files are a lot smaller.

_1tan 5y ago

Cool! Is it open-source? Reminds me of Flash.

thomasikzelf 5y ago
Flash also took interactivity to the next level back in it's day. There is still adobe animate (which is the flash editor) but it does not adapt to screen sizes and you quickly need to drop down into code. I'm hoping to build a tool that can match flash in creativity with less of a learning curve, so that non programmers can use it too. Building all of this is a lot of work (and this is only the beginning). I think open-source is not a viable way of building this right now. Development will stall before a critical mass of features allows wider adoption.
- ArekDymalski 5y ago
  >I'm hoping to build a tool that can match flash in creativity with less of a learning curve, so that non programmers can use it too. Are you familiar with Corel Rave? That was perfect Flash editor imho. I still miss it.
  - thomasikzelf 5y ago
    I never used it. It looks like people mainly used it for animations, I am not sure what kind of interactivity it allowed. It seems that the program didn't support actionscript. If somebody wants to do animation and then export it to a video then tools like adobe animate and adobe after effects are still better options, although cavalry[0] looks really cool as well. These do not really have the interactivity that moos.app gives you though. [0]: https://cavalry.scenegroup.co/ https://cavalry.scenegroup.co/
- sporklpony 5y ago
  Maybe take a look at Wick Editor? https://www.wickeditor.com/#/ https://www.wickeditor.com/#/ It's open source and development has stalled lately, but it has a stated goal of being a low-learning-curve flash replacement.

webwielder2 5y ago

How does this compare to Tumult Hype? https://tumult.com/hype/ https://tumult.com/hype/

thomasikzelf 5y ago
I never used tumult but I think these are the differences: - Moos.app has built-in "behaviors" that are sort of a template for interactions. For example the scroller behavior allows you to put text next to your visuals, when the user then scrolls your visuals will update. It also works on mobile and desktop without additional actions. - I found that using SVG or HTML for complex animations is way to slow. That's why moos.app uses a custom WEBGL renderer. - Moos.app works in the browser, Tumult is a mac app - As Tumult is older it has a bigger community - Tumult has no web hosting build in (I think). With moos.app you click a button and you get a link (or a self contained HTML file) - Tumult is a one time payment while moos.app is usage-based-pay
- gamlegaz 5y ago
  > - I found that using SVG or HTML for complex animations is way to slow. That's why moos.app uses a custom WEBGL renderer. Did you try Canvas2D? Also curious to what you used for the 2D rendering, did you do your own implementation?
  - thomasikzelf 5y ago
    Yes a previous version was built on canvas2D. For simple things such as a couple of objects moving across the screen it works great. As soon as you start to do fullscreen "camera" movements performance starts to suffer. All images and paths need to be uploaded to the gpu every frame. Maybe the browser optimizes some things but in my tests it was not enough. The WEBGL renderer in this project is built from scratch because none were available that support SVG and were small enough for regular web pages. It allows me to upload paths and images to the gpu making fullscreen animations a lot more smooth.
- rchaud 5y ago
  I think the ability to create and animate objects in a 3D space would really set this app apart. I say this as a frequent user of Hype. It's a great app, but limited to 2D animation as what it creates is entirely in CSS3, SVG and JS. The examples on the website are nice, however from what I saw, they can be done in Hype as well. As you mentioned, Hype is more mature and has a sizable community, many of whom contribute towards extending its functionality by creating custom modules in JS for things like dynamic data imported w/ JSON. For 3D animation I've also used Spline, which is in beta. It's interesting, but on my 2014 MBP, it runs slowly and the fans are constantly on, which makes it less appealing for my use.

mindvirus 5y ago

Super cool, but I think your landing page could use some work: 1. First thing is an interactive-looking image, with a play button etc. I'd recommend embedding a real widget built with your tool there. 2. The FUTURE/TODAY sections are really spaced apart and have no images. 3. In the Skada section, "powerfull" is spelled incorrectly (should have one L). I know that sharing stuff online is stressful - so really want to emphasize that it looks like you're doing great work here, and congratulations on shipping :)

all2 5y ago
Came here to say #1. If I see a play button, I expect to be able to push said button. I went to grab the scrubber with my mouse and I got nothing. I was quite disappointed. Definitely use a video showing features above the fold. A picture doesn't communicate very much to me, especially for something for animation/motion.
- thomasikzelf 5y ago
  Thank you both for the feedback, I appreciate it. If you want to see what is shown in the screenshot you can go to https://playground.moos.app/#!example-skada https://playground.moos.app/#!example-skada
  - cr3ative 5y ago
    Just FYI, this fails to load with the Dark Reader extension installed - you're relying on the DOM position of a stylesheet, which extensions can change. Might want to look in to that. https://i.imgur.com/yqjqrWI_d.webp?maxwidth=1520&fidelity=grand https://i.imgur.com/yqjqrWI_d.webp?maxwidth=1520&fidelity=gr...
  - deleted 5y ago
    [deleted]
pedalpete 5y ago
Completely agree. I'll also add the "do you stand out?" didn't really speak to me. It doesn't really give me an idea of what you're doing, what does "stand out" mean? Stand out from whom? Why? As a contrast, our tagline - which my co-founder hates, and also isn't great - says "want better sleep?". It's clear what we're bringing to the table, what area we're working in.

canadianwriter 5y ago

That's a... unique pricing. Or maybe I'm just really behind in the times - hours of using the app? And then only a per project without an unlimited plan? It seems cool, just have never encountered pricing like that and it would certainly take me aback and reconsider using the tool. Especially when I don't fully know what a "project" is.

thomasikzelf 5y ago
you're right it's.... special. Let me give you my thought process: - One time pricing can be a real hurdle for users to pay upfront. Remember adobe costing a lot of money up front. The upside is that after this initial huge hurdle your free to use the product. For the business non recurring revenue means they need to batch changes to make buying the product worth while. This results in a long cycle between updates. - Subscription pricing aligns the business with it's users. Users pay only for what they use and the business can ship features to the user as fast as possible. - The downside is the subscription is often 'per user' and is done on an ongoing basis. You pay for the tool even if you don't use it. - Usage based pricing: you only pay for what you use in the smallest quantity that is understandable. This is what I use and what AWS uses for example. I think this is a really fair pricing model. If you're only doing one project it might cost you 3 bucks, but if you are a company that uses the tool fulltime you pay accordingly. It might turn out that too many people are turned off by this pricing, I don't know. It is easier to change to a regular pricing model then to a weird one :-). If you open one of the examples that is one project. Your project can be published at one unique URL.
- sombremesa 5y ago
  Does this really align the business with its users? With this model aren’t you incentivized to make users waste as much time as possible so their time spent in the app increases, which is directly convertible to $ for you? I’m not convinced. Maybe I’ve misunderstood something. Charging for time spent developing is very different from what AWS does.
  - thomasikzelf 5y ago