Luma AI’s Post

Luma AI reposted this

View profile for Andrew Prifer, graphic

UI, UX, computer graphics. Head of frontend at Luma AI.

🎉 Releasing Framer Motion Theatre, a toolset for creating animated React components! ⚡️ Use Theatre.js in React with a simple declarative API ⚡️ Animate framer-motion's motion values using Theatre.js ⚡️ Get WYSIWYG editing tools for your components with 1 line of code FMT lets you get the best of Theatre.js' sequencer and React's declarative API, animate Framer Motion's motion values using Theatre.js, and have all the complexity like sheets, objects, animation instancing and wiring taken care of. ➡️ GitHub: https://lnkd.in/gFFfeHyr 🤔 How does it work? While Theatre.js provides a framework-agnostic toolset, its concepts map directly to React and Framer Motion. Sheets → React components Sheet instances → React component instances Objects → Framer Motion motion values By codifying this interpretation, we can wrap Theatre's complexity in a simple declarative API that is very easy to read and write, integrates with Framer Motion's motion components, and allows us to easily add powerful WYSIWYG editing tools to our components. Finally, let's look at the code for some fancy animated buttons. The Box component's animation is automatically instanced, we get WYSIWYG editing, Theatre's animation sequencer, and we don't have to write much more code than if we had used just Framer Motion!! 🥁 And this is what the code looks like. PS: If you'd like to work at a design driven company making the next generation of creative tools, we are hiring across the board at Luma AI. And if you'd like to help out with Theatre.js, Aria Minaei is looking for folks too!

GOAT 🤘🏽

Like
Reply
Antony Ndiritu,

Thinker,innovator,Designer

2w

🔥🔥🔥

Like
Reply
See more comments

To view or add a comment, sign in

Explore topics