Show HN: Moos.app – Interactive animated experiences for the web | Hacker News Reader

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

moos.app

102 pointsthomasikzelf30 comments

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

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.

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

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

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.

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.

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!

The playground examples are very neat. Great job!

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

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

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

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.

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.

Thank you for your message :-). Can you tell me in which ways you think Hype is more mature?

My app does not currently allow importing JSON, that is something on the roadmap. It does however allow you to send values to your project dynamically if you embed it on a web page. This way you can drive it with javascript.

If you would want to recreate the example from my website in Hype would you need to know code or do you use some kind of plugin?

IMO Hype is similar to Flash and After Effects in that it has a timeline-based GUI that's easy to grasp. So for the generation of Flash developers who were left in the lurch after 2012, it was a great option. It also has a code editor view that allows you to write custom JS for functions that aren't related to animation (e.g. a countdown timer).

It's a pretty niche tool these days as animation on the web is unfortunately rare, and game design has shifted to Unity. Those were Flash's biggest use cases.

From what I've seen, animators today create them in Adobe After Effects, then pass that through a library called Lottie[0] which exports to JSON, and can then be implemented in HTML. That might be the market you could try targeting.

[0] https://airbnb.io/lottie/#/

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.

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.

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.

Yeah you are right, there is no perfect alignment. I also agree that the usage based pricing from AWS is different from my hourly pricing (hourly being a subset of usage based).

I've never seen hourly based pricing being used for tools before. But hourly based pricing is common for human services and also for things such as AWS Lambda or VPS's. You could make an argument for AWS having an incentive for slow running lambda's.

In these cases you can test if the speed of AWS lambda is good enough for you. Similarly you can try out my app (for free) to see if it's slow or fast, and you can see this directly instead of having to rely on AWS's logs.

Anyway thank you for your feedback. It's really valuable for me to read these responses!

I love the idea! If you use it little, you pay very little. If you use it a lot (presumably because you profit from it a lot), you pay more. Sounds very fair!

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

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.

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.

Ah yes, this is Android 8.

Cool! Is it open-source?

Reminds me of Flash.

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.

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

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/

Maybe take a look at Wick Editor? 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.

This is actually a great example. Wick editor is an awesome tool but it needs a lot of work to become the go-to tool for creators. You can see that the Patreon now pulls in 147 euro p/m, not enough to sustain someone working on it.

It's a (awesome) niche tool and to become mainstream (for designers) it needs more features, but there needs to be money to built those. A catch 22.

Reply on news.ycombinator.com