When can I use this?

[dandoen]

Hi Sam, saw you’re building this lib on X. love it. Would you recommend users already using it? Alpha/changing api is ok. Currently when running the demo code you’ve provided the visual debug mask is working as intended but it’s not actually applying the mask like intended.

[samdenty]

Hi Dandoen the visual debug option is for debugging the masks positioning, when that option is set to false it actually masks the elements. I'm still working on some bugs fixes but you should be able to start using it now :)

[dandoen]

Thanks Sam, but I meant the latest release isn't actually working; the mask isn't being applied. When turning on visual debug, you see that it's doing all the right things but when turned off the mask isn't being applied. Looking forward to give it a go!

[samdenty]

@dandoen this library is still under development, but the latest npm release should work. I'll let you know when it's closer to ready for prime time

[gontsolov]

Hi @samdenty ! Also very intrigued by the library you're building. I've tested other ones and I’m really not a fan of the span-soup that they create so I find your approach a lot nicer. Would love to use it, what's the current status on a production-ready release of it? Is there any way I could support it? Thanks a lot! 🙌

[samdenty]

Hi @gontsolov, on production ready releases this is the most up-to-date list of the work that needs doing:

• I've published a demo site to https://react-ai-flow.com/ showcasing the library in action. I'm hoping this can draw peoples attention to it & possibly inspire some people
• This site highlights on mobile some performance issues with the custom element renderers (aka combination of canvas mask + tracked element overlay)
  • Solutions: possibly switch to web-animation API to drive styles instead of inline styles (less DOM updates)
  • Works best in chrome atm
• Visual glitches:
  • The aim of this library is to avoid visual glitches at all cost, if you go onto the https://react-ai-flow.com/ website and leave it open for a minute you'll notice it loses track of the animation
  • Theres also some bugs when you resize the page with elements on it (need to investigate)
  • I've done loads of work here making it stable, but knowing exactly when it is "complete" is hard to tell.
  • To solve this: I've created an e2e testing framework https://github.com/samdenty/react-ai-flow/tree/main/e2e to snapshot & hydrate animations to ensure they don't change from a working example. This will let me ship with more confidence when I change something
    • I really need CI setup for this though (ie. github actions or something)
• Spring animation engine:
  • The most ideal animation engine for this project is a spring based one. The current one is all timed animations with durations, which doesn't look as good as smooth spring ones - https://github.com/samdenty/use-stick-to-bottom implements a spring curve based approach. Knowing how this fits into web animations API though is tricky
• Hammering out any remaining memory / performance issues to make it work on lower end devices & ensure people using the library don't have to pay with subpar performance in their chat app
  • DONE - .dispose() methods for deallocating custom Range class objects
  • DONE - super efficient updateBounds method (it can be called millions of times)

---

After this is tackled, the next step would be a really killer landing page / demo / docs website for the project, i'm not sure what the best solution is here - would appreciate input here from community

[samdenty]

https://x.com/samddenty/status/1914116115602567321

[TowhidKashem]

hey @samdenty, this lib looks incredible! Much cooler than more basic ones like https://llm-ui.com/. I would love to use it in my react native app. Any chance you would port it over? At the minmum react native gives u the ability to embed dom elements inside native views which would be a quick hacky way to support it. But it would be much better/performant to use something like https://docs.expo.dev/versions/latest/sdk/gl-view/ (since this appears to be canvas based) or https://shopify.github.io/react-native-skia/. Probably the latter makes most sense for something liken this but it would require a re-implementation although I wonder how much of it can be done with LLMs.

Webview links:

• https://docs.expo.dev/versions/latest/sdk/webview/
• https://docs.expo.dev/guides/dom-components/

[samdenty]

@TowhidKashem react native would be too big a challenge as this library uses many DOM APIs