Guido: There needs to be a new format that kind of just rejects everything we've accepted about graphics formats today.
Guido: Things that were generally built, as the PNGs, SVGs, even video, they were built to like define graphics at rest, a byproduct of, of print.
Guido: It's not really interactive.
[00:00:20] Introduction
Andrew: Hello. Welcome to the DevTools FM podcast. This is a podcast about developer tools and the people who make them. I'm Andrew. And this is my cohost, Justin.
Justin: Hey everyone, uh, I'm really excited to have Guido Rosso on with us today. So Guido, uh, you're the founder and CEO of Rive, uh, and Rive is, a platform that I've been following for a while, and I'm super excited to talk about, it's this incredible animation platform, but before we dig into that, uh, is there anything else you'd like to tell our listeners about yourself?
Guido: Uh, no, thanks. Thanks for having me. Um, I guess we'll probably dig, dig into some of it, but, uh, uh, if you're wondering about the name, I am, yes. I am Italian. Italian is my first language. Just grew up gonna international schools all across the world. And yeah, drop, drop the accent pretty early on. I often talk about myself as we, and that's because I have an identical twin and in traveling a lot, like it was always we and, and, uh.
Guido: And yeah, my whole life has always been more about we than me. And, and he's, uh, you know, he's my counterpart. He's my, he's my co founder. He's engineer. I'm the designer. That's how this whole concept came across. And we can probably dig into some of that at some point if you want to shout about it, but Yeah,
Guido: uh, that's it.
Andrew: yeah, it's super fun that you ended up founding a company with your brother and you're that design developer other half of each other and that you're twins. That's like a fun story in and of itself. So how did you guys arrive at building an animation platform like that? The tool itself is quite quite a quite a big thing to accomplish.
Andrew: Not to mention all of the other stuff you guys have started to do after building that tool. So how did we get here?
Guido: Yeah. Yeah. Good question. I mean, Rive really is the culmination of, Mine which is life together. It's not even our career, you know, 25 years career of designer and developer, but really, uh, you know, closer to 40 years of, you know, being, you know, Identical twins doing stuff together, you know, from, from basic on the Commodore 64 when we first started coding.
Guido: Um, and it's, you know, one thing that people, I think sometimes get confused about animation, um, is they don't realize that animation in Italian and Latin and other Latin based languages actually means to bring to life, to give soul to an Italian animized soul. So really. Animation at Rive is much more than just motion.
Guido: It's about giving life to and the interactivity and, and bringing products to life. Um, so that's something I like to call out when, when folks, yeah, make the animation comment because Rive is so much more than just animation. It's, it's really a new way to build, uh, interactive software and graphics. I can, I can keep, yeah, following that thread if you want.
Guido: I mean, Luigi and I started working together really early on in the late nineties, he, he was going really, you know, low level into code. He was already, uh, you know, uh, middle school and high school coding, low level languages and modding game engines like Quake and, um, really some of the first mods for Quake, I think like.
Guido: That's some version of a grapple hook and a homing missile launcher and stuff like that. And I was doing all the graphics side of that. And that was kind of when we realized like, Oh, this is, this is fun. This is like a, we're a team. And, and, uh, after that we started our first company, which was, um, you know, very much web based, uh, this was like 90s, late 99, 99, 98, uh, doing HTML stuff really early on.
Guido: And then Flash obviously came along and we were doing a lot of Flash work. And we just always, um, did a lot of, like, we became known as a team you went to when you wanted to build something really custom. Um, we, we moved that, that first company we'd started, uh, ended up moving from, we were in Kuala Lumpur in Malaysia, ended up moving to Rome for college, where we're originally from in Italy.
Guido: And then that, you know, dropped out because work was going well and college wasn't super interesting and, uh, And, uh, ended up moving to the States where we had most of our big customers were here and, um, and, and that's where we kind of became known as a team that you went to when you wanted something that had really custom design, but also functionality, like not just the motion and the interactivity, but also like how to, how to work, you know, these were companies like Microsoft was one of our first, first companies we did like the Xbox 360 first third party apps for like Netflix and HBO.
Guido: Um, yeah. Red Bull was a customer, MLB was a customer, um, all these companies that have like custom, really care about their brand and they don't want to look cookie cutter like everything else. And so, um, what led to arrive is really that, that career of, of that work and, and building custom UI and things that, You know, um, informed a designer and a developer working for 25 years together about like the need for, for there being a better way to build software and graphics that actually work rather than mockups and prototypes.
Guido: And, and, um, yeah, I can keep talking about this forever. So feel free to stop me and, you know, we can take this in multiple directions. I can talk about some of the core problems that Rive solve are really, you know, hard coded design and that type of thing is really what we're fighting against them. Yeah.
Guido: Um, I think I've said enough though, to answer your initial question of what got us here.
[00:05:31] The Evolution and Inspiration Behind Rive
Justin: Yeah, I was going to actually had a question lined up to ask you if you took inspiration from Flash. So when I was in high school, I did a lot of stuff in Flash. And it seems like there was like an early part of like the 2000s internet. That was just a lot. Of Flash interactions and animations and these like really interesting dynamic websites that were also really heavy and very clunky, right?
Justin: They took forever to load, the internet was slow, the assets were large,
Guido: Yeah. The format was proprietary. It ran, didn't run well on Macs at all. I mean, even before the whole, you know, Apple drama, like it was almost a joke trying to run flash on a Mac and then they got the Intel processors and it started getting actually a little more serious and functional, but it was always felt like it was a little bit, yeah.
Guido: Performance issue. Yeah, so absolutely, like Flash was a huge inspiration for us and we, we actually worked on, one of the customers I was talking about, our first customers when we moved to the US was Macromedia. They became Adobe. We, we built some of the features that shipped in Flash CS two or CS three, I think.
Guido: Uh, our company was hired to build like the first kind of components that shipped the flash, like the scroll bars and scroll pan and all the little like components that you would use in, in Flash. Um, that was, yeah, one of our first big customers here in the us and. Uh, to this day, my and Luigi's name appear in the Adobe Animate, you know, Flash is now Adobe Animate.
Guido: If you load up the credits and scroll through all the names, I think we're still in there. Um, and so, yeah, Flash was definitely a huge part of that, and I think what we like to say about Flash that did really well, um, and that kind of was this vision for the future, I think, was that it empowered designers to build the actual graphics that run in the final, in the final product.
Guido: Um, Whereas even today, like we've kind of gone backwards a bit there where like we're working in design tools that helped designers kind of define a vision of what the product is, but the final job of building the product is left to engineers. Now, all, all that work has to be rebuilt. And that's what I mean by hard coded.
Guido: Like if it's going to go, you know, you can design a cool button as a part of your design system, but then. An engineer has to build it on the web, another engineer has to build it in iOS, another engineer has to build it on Android, you know, like, it all has to get hard coded and, and our design tools now help us.
Guido: Convert those graphics to code. Like they give us, you know, dev mode and, and, and red lines and guidelines and all these, you know, docs to help define how, how it should be converted to code and yeah, we see it a little differently and it's inspired a lot from flash, which was the idea that the designer gets to build a format that actually runs as opposed to, um, yeah, just a mock up or a prototype.
[00:08:18] Ad
Andrew: We'd like to pause for a moment and thank our sponsor for this week, MUX.
Andrew: There's some things in coding that seem easy on the surface when you look at them from afar, but when you have to integrate them into your product, they can end up being a lot more work than you anticipated and video is one of those things.
Andrew: Whether it's transcoding, serving, storing, getting analytics on, or even just playing, video is one of those things that's just hard to get right when adding to your app. That's where Mux comes in. Mux is a full stack solution to adding video to your app without adding backlog.
Andrew: They have an entire platform dedicated to making video a great experience in your app, whether it comes to uploading, streaming, or even playing the video back, Mux has something that'll help you out.
Andrew: Mux has been shipping a lot this summer, and one of the things that I'm really excited to see is that they have way better cross platform support now.
Andrew: Now even if you're on mobile platforms like iOS and Android, You can still get a nice, smooth, buttery video experience with little to no work, thanks to Mux.
Andrew: So if that sounds like an interesting thing that you could use in your toolbox, head over to Mux. com to check them out.
Andrew: You tired of hearing these ads? We'll become a paid member on one of the various channels that we offer it. With that, you'll get the episodes a little bit earlier, and they'll be completely ad free, and you'll also be helping out the podcast a little bit. But if you want to find a different way to help out the podcast, head over to shop.
Andrew: devtools. fm where you can buy a hat or a t shirt show your support for the podcast and keep us going a little bit longer. And with that, let's get back to the
Justin: Yeah, this is a, it's such a fascinating space. You see it at the like, sort of smaller level with tools like Webflow, right? It's like, you know, and again, these tools existed forever ago. You had like Dreamweaver, like, you know, here's a WYSIWYG site builder. The technology for those have gotten better. So Webflow, you know, there's a lot of people who are like publishing, you know, actual.
Justin: You know, product sites with Webflow. But the interesting thing here is like, there is a little bit of a limitation and what these things can do. And, and animations or especially interactive animations always seem to be left sort of to the last mile. And it takes a really sort of crack team to like bring those together.
Justin: Cause a lot of engineers get to the point of like, The designer, you know, sharing their vision of this animation, or maybe they've went through Adobe After Effects or something and actually like done the animation and they're showing them like a video of like, okay, this is what I want engineers just sitting there.
Justin: Yeah. I'm pretty sure?
Guido: we've, we've retweeted those jokes, but the, you know, designer vision engineers over here sweating and trying to look at it, you know, I forget the exact mean, but yeah, that's a popular video. Yeah, totally. I mean, I think we're looking at it a little differently from the web flows and the framers and all, like they're They're, um, very different spaces as, as similar as it is the concept that empower designers.
Guido: I think that's ultimately what we're trying to do is as tool builders, um, those guys are building, you know, they're focusing very much on like one kind of, uh, platform, which is the web. They're, they're helping designers build a, you know, a, a, a vision that then gets converted or behind the scenes as using the same constraints to build it in code.
Guido: Um, and, and, and basically create a website. With Rive, yeah, animation is a part of that, like you were saying, and it, it takes a lot of effort, and the, the vision was different, um, and complementary, I think, to all those platforms, because we want to work with all those platforms, too.
[00:11:46] Rive's Unique Graphics Format and Renderer
Guido: Um, so what we really started with was this, and this was Luigi, my co founder, this was his concept, was like, there needs to be a new format that kind of just rejects everything we've accepted about graphics formats today.
Guido: We don't want to have to adhere to an SVG spec or any other thing, you know, with all these legacy features and, Um, and, and also things that were generally built, you know, as the PNGs, SVGs, even video, they were built to like define graphics at rest, um, and, and like kind of, kind of like a byproduct of, of print, um, even, even film, you know, video is, is just a sequence of frames that is meant to be printed on film.
Guido: It's not really interactive. And the part that feels like the disconnect of why we need this new format is that majority of what designers will design today is going to run on software, like none of it is going to get printed or very little of it is actually going to be printed. If it does get printed, it's, it's like a, it's like a, you know, a side quest or a smaller, much smaller use case of, of, of what the design is in,initially built for.
Guido: Um, and so it started with like, okay, what does a format from the future look for look like, like, like, just like jump, you know, five, 10 years in the future? And what would we want to have if we were, you know, designing then and, and, and then work backwards from what do you need to support all of that? And, and yeah, the format needs to be you.
Guido: Purpose built to change state every frame, and that means that it's state driven. The graphics format can change state, and if it can do it every frame, it means it can animate. And that's where, you know, animation looks really exciting and really cool with Drive, is because the format was built to do that right off the bat.
Guido: Um, then it needs to have an editor that is built specifically to create just that format, and, you know, um, and be interactive. And then it needs a runtime, which is kind of the libraries that we have that let you, You know, basically give you an API to manipulate that graphics format, that new format on any platform, whether it's the web, Android, iOS game engines like unity or unreal to be ubiquitous, you have to have, you know, the ability to run on all those platforms.
Guido: If you're creating a new graphics format, it has to be ubiquitous, right? Um, and the final piece of the puzzle of like this whole insane endeavor, uh, of this building a whole new pipeline was the renderer. There needed to be a new renderer that's part of that runtime that is super performant and can actually accelerate vector graphics, which is something that has never been possible on the GPU.
Guido: Um, GPUs accelerate triangles. They don't know how to accelerate. Curbs and, and that's not to say no one has attempted to there are vector graphics renders that have been attempted, but I don't think anyone has looked at it as holistically as we have and has built a solution as performant and feature rich as we have that basically can emulate any design that you can do in any other design tool today.
Guido: But it's hardware accelerated and super performant and allows you to fill the screen with vector graphics. And so, all of those things had to come together. There's a lot more. There's a text engine behind it that is very novel and had to kind of be reinvented from scratch. Um, but it's like you're getting at a really kind of crazy endeavor to go after.
Guido: Uh, it took much longer than we initially thought to build out this whole pipeline. But now that we're here and we have the new render everywhere, we're at a spot where we can start seeing like, okay, there's new features we're going to be releasing soon that no one's ever seen design tools do. And, and that's, that's really exciting about the future because we have that whole pipeline and we can bring it ubiquitously everywhere.
Guido: Uh, we can suddenly start giving designers superpowers that hasn't been possible. I mean, the design tools and constraints have kind of stayed the same for the last 20, 15 years, you know,
Andrew: Yeah, it's so cool that you guys are designing like that, designing for the future of formats, because like I've, I've, uh, I think a lot of people have often wondered, like, why isn't there just one format to go across all the, all the renderers and like, let me build an app in nice ways. Like this conversation reminds me a lot of react.
Andrew: I don't know if you know what react is, but it has a very similar,
Andrew: like ethos.
Guido: Yeah. I'm the designer of the two twins. So less, but I mean, we, I know react, I used with the first version of Rive that me and Luigi built was I did all the front end and react, which he did all the hardcore graphics. Um, but yeah, very, very familiar with react.
Andrew: yeah, but it gives me like this similar vibe of like, I can render one thing one way, put it across many platforms and like speed up development, taking that a level higher and kind of going beyond code seems super interesting to me. How far beyond it do you go though? Like you have runtime renderers, how like specific to the runtime are, are they like?
Guido: So yeah, good question. So we initially supported multiple renders and we still do the runtime still has this philosophy of bring your own renderer. So, for example, on, on, uh, on iOS, you can choose to still use core graphics instead of the Rive renderer. Um, and there's some cases where you have to do that, like to plug into certain parts of iOS and Android, and I think, uh, Vision Pro, there's some parts that, like, need core graphics, like if you're trying, for example, to render a Rive animation in the dock, which you might have seen recently, um, that, that app that went viral, Banana Bin, did you see that?
Guido: It had, like, the flies. You know, in your dock and like flying around, I think MKBHD like, like shared it. And, and we saw it and said, Oh, cool. That's, that's, that's fun. And then, and then like a few weeks later we realized, Oh, that was built with Rive. The creator like tagged us and said, this was, this was Rive.
Guido: So like, there's some cases like that where, yeah, you just can't bring your own renderer. You have to use, uh, you know, the built in native renderer or the core graphics on the platform render. Um, so So, so yeah, Rive definitely supports that and, um, and, uh, that's something that will always, you know, be part of the runtime, uh, options, but the new renderer we developed is, is, you know, the advantage of it is that it gives you like a level playing field across everything, you know, you can know that, like, it's not like if you use a blur, it's going to, it might look one way on Android and one way on iOS, and it might not even work on the web because Canvas 2D might not even support blurs or whatever feature you're trying to use.
Guido: So. Inner outer strokes. People have asked us, why don't you have inner and outer strokes? It's like, well, like canvas doesn't have a concept of inner and outer stroke. And so, um, yeah, that's that's part of like, why initially it was like this huge ordeal to like, build this. Runtime that would support all these different renders, but we realized that we needed to build also our own render.
Guido: That's kind of the best in class way to render Rive content. Um, and, and that's why we still recommend it when possible, you should use it because the performance gains are huge. Um, memory consumption is lower and you get all the feature set that Rive supports. Like I was getting at, we have a new feature launching soon that's like, we call it, uh, I think this is going to be the first time I reveal it, we're calling it feathering.
Guido: Nothing particularly crazy, but it's kind of a new way to feather the edges of Strokes and paths, uh, creating glow and kind of blur and shadow effects, but using our novel rendering algorithm, which again is all open source and you can go see how it works. Um, but it's, uh, it's going to be like a new way to do shadows without having to Um, do multiple, and this is where I get a bit out of my element, but like, without multiple draw calls and all that, and it basically is super fast.
Guido: So you can, you can kind of blur the edges of a bunch of paths and not get any real performance impact. Um, and so, and so that's the type of stuff that you need our renderer to be able to use it. Um, I feel like I went a little bit off a tangent here on your original question. Feel free to rein me back in.
Justin: That's great. This is so fascinating. It does seem like the design space. Is so broad. I mean, the product area. So it's like, I mean, one, you have to have a really good editor like that is table stakes for any animation. And like, just doing that alone is a super, super hard problem. And then when you're doing cross platform support, yeah.
Justin: Runtime, like figuring out. How to render things across many different platforms, another hard challenge. Um, and I'm super interested to ask more about this, but I kind of wanted to start talking a little bit about the editor.
[00:19:42] State Machines: A Designer's Tool
Justin: So one of the things that's very novel to me about the editor is you have this sort of like state machine driven animation.
Justin: Um, so we had, uh, David from XState on like episode 48 or something. And, you know, they're building a really interesting product around like state charts and When we had that episode, I was thinking like animations were the thing in my mind. I was like, Oh, this would be really cool. And I think I've discovered Rive sometime after that.
Justin: Um, so what was, can you just talk a little bit about like where that developed, how people use it and like what it enables?
Guido: Yeah. That was Luigi entirely, his vision from, I want to say, I won't go back as far as the 90s, but sometime in the early 2000s he made a comment to me that like, he shouldn't be coding state machines every time. Like, every time I was building some graphic and doing something and showing him how I wanted it to work, he was like, we need to, at some point, make a visual state machine because this is the designer's job.
Guido: Um, or at least it's not just the engineer's job and I shouldn't be recreating it every single time. And he's made that comment to me many, many times. And, um, and so it's been something we've been thinking about for a really long time. The state machine was really Luigi's brainchild forever. And, and And it finally came to, I think we actually reached out to David from X state before we had started building our state machine.
Guido: We were kind of looking around and we had just started building Rive in a new format and demonstrating that it could change state every frame. So animation was really cool, but we didn't have like a visual state machine built in yet. It was still kind of all done at runtime. And although in the editor you could hit play on different animations and see them mixed together and anyway, this is just a side story, but we, I think we reached out to David and we're like, Hey, do you want to like chat about state machines?
Guido: Cause we saw he was like a state machine guy on Twitter already. This was like back in, I don't know, 2000, we kind of make up like 2016, 2017, somewhere around there. Um, and Yeah, maybe it was 2018. So anyway, somewhere around that. And, and, and he was, he was just starting, I think, to think about what he was going to do.
Guido: I think he might've been still at Microsoft and he was thinking about X and stuff like that. So we didn't end up working together, but we did share notes on state machines and got very excited. Um, and yeah, so, so the state machine, again, it was something we, it was always part of the plan, um, since, you know, way before RIDE was even incorporated.
Guido: And we, we've been thinking about this for, for many, many years in the 2000s. And. And so, yeah, finally in, I believe, 2020, we started building the current iteration and we got some funding and basically Luigi and I built the initial prototype, showed some traction and then got some funding early 2020 and started rebuilding the whole thing with a new team and making sure it was scalable and supported like concurrent editing and all this stuff and by the time we got to 2021 is where we started going really, uh, or no, 2021 is when we released the first version of the state machine.
Guido: Um, and, and yeah, the idea behind it was use animations as states, um, and, and give, you know, empower designers to, to create kind of a contract between design and engineering instead of, instead of handoff. You know, Duolingo has this quote that we love to recycle, which is a reuse and they like to call it.
Guido: Handshake instead of handoff. They, they told us early on when they started using ride, like, Oh, this is, this creates like a, instead of a handoff, it's a handshake. And the state machine has, um, basically these, these, we call them inputs. So they're like data coming into the state machine. Um, and that's kind of the contract between design and engineering.
Guido: You have like these variables or parameters, or, you know, we call them inputs and basically the state machine reacts to external data changing. And we think it's a really cool way to help designers think about like how to build graphics in a way though, that feels familiar. It doesn't feel like this alien, like you open up a state, no design tools really have a state machine before, but game engines have.
Guido: And I think probably argue that game engines are more developer tools and design tools. And, and, um, and I think the state machine in, in, in Rive's capacity is, is a lot more built to be like. You know, it feels like a little bit of Figma, a little bit of sketch, a little bit of, uh, a little bit of after effects.
Guido: So it, it, it uses all the tools that you already know. You don't have to really go and learn anything dramatically different. Um, you just have to think about animations are now states. You can kind of lay them out on a graph and you can have them react, you know, to, to these incoming, this incoming data, which is what your developer is going to be manipulating at runtime.
Guido: And so that's in the editor. You get a representation of the data that your engineer has access to. And so it's, it's not about removing code. It's about, um, making both sides be more efficient and getting rid of a lot of duplicate work. Like you look at a state machine and that's all code that an engineer would have had to write, and that would have been hard coded.
Guido: So now anytime you want to make it iterate on the graphics or change the design in any way you need to involve the engineer, whereas if you made a state machine and you've got these data points that are controlling how the state machine reacts. Provided those data points stay the same, that contract is honored on both sides, you know, the state machine, the design tool and how it's being run at runtime.
Guido: The designer can change the state machine can wildly make out all the graphics and type. You can go from like cool loading animation that's like a circle spinner with water rising to a fireball that's a bar or crazy or follows a crazy path and provided that input of like zero to 100 percent loaded stays the same.
Guido: Um, the designer can keep iterating on the graphic and And, and we think that that's what really unlocks, you know, you take, you take that for a single component and unlock it for multiple components and then building an entire app like that. And suddenly you've taken like months, if not years of development time and completely removed it and empowered both sides to do what they're good at.
Guido: Um, and so that's, that's why we, yeah, we definitely don't see ourselves as a no code tool. Code is necessary. But, um, it's, it's, it's, it's no hard code. That's what, that's how we think about it. No hard coding.
Andrew: So that, that seems like a super interesting primitive that you guys added there. Are there any other primitives that you've, you added to this platform that were kind of things that haunted you for years? And it was like, this is integral to making this product.
Guido: So I would say the state, which is probably the biggest, um, there's, there's text and text runs is another one that we just spent two years working on. That was, um, another thing that was totally his kind of brainchild. And it's a new way to do text in a way that, again, feels like. In, in, you know, people who have been following ride for many years.
Guido: We'll tell you that there were many years that we were like, why is there no text here? It was like the number one missing thing. Everyone needs text. And it was because we were building a totally custom text platform and we actually got to see flash release their first text version and then have to roll it back and make a total text V2.
Guido: I don't know if you remember it had a code name that isn't going to come to me. Luigi always remembers it, but like flash had this whole moment where they had to like release their text, their second text engine, because they couldn't do the things that they realized people needed. And they had cut corners on the first one.
Guido: So we wanted to go all in and make sure that our text engine did everything from, you know, supporting all languages, right to left, left to right, but also the ability to change state every frame and animate. A lot of text engines are really good at rendering super sharp text, but then they can't animate it.
Guido: Um, ours, you know, our, our renderer works in parallel with this, where it like it can accelerate it all in the same draw call that it draws everything else. So, so text is super sharp, even sharper than like some of the renderers that your browser uses today. Um, but it's also can animate and change state, meaning that every character can move, every, everything can have like tons of motion, but it's still dynamically connected to data.
Guido: That's one of the demos we do when we show, you know, we have new customers and we show them how to build texts and ride and demonstrate that. It can be, it can be localized. It can be connected to data. Um, we have companies building ads with Rai that are like super, you know, ads are not like the most exciting thing, but you can imagine like, you know, a lot of business behind it and, and, and it's definitely an interesting format to have a format that has like, can change state and is really lightweight and has text that is localizable, um, and can be heavily animated, like a, jumbotron, you think of something like a sports team.
Guido: Concepts of how you might use, right? Um, yeah, it unlocks these, these really cool things that, you know, you, you can't do another, another, uh, app or game engines with text. Um, the final thing I'll say, the features you're saying, like primitive things, is that one other thing we usually really cares about that he's been working on with the team that's going to be coming, hopefully still this year, we might slip to next year, but it's, it's, it's been another one that's been way longer than we thought to build, but, but ongoing and showing, like, A lot of problems really exciting is, um, data binding.
Guido: And so we're going to have in the editor, uh, full blown data binding. And, and it's, it's goes, the full scope of it goes beyond even my understanding of, of what you can do with it. But at the very basic level, it's a way to create data models in Rive and, and connect them, you know, um, to your graphics and.
Guido: And be able to swap out data models, so you can, for example, test like, Oh, what does my app look like if it's in Italian versus Turkish, you know, or, uh, Japanese, um, but then also be able to bind properties to one another and do, it unlocks a bunch of really interesting stuff that, that leads up to, um, to our scripting feature that is going to be all tied into this, but.
Guido: Yeah, uh, so there's a lot more to come, um, is what I'm saying here, but, but definitely I think the state machine has been kind of the biggest, like, I think helped people realize that we're trying to build something different, not, not just another design tool.
Justin: That's, that's really awesome.
[00:29:18] Exploring the RIV File Format
Justin: Uh, one of the next things that I wanted to ask about was the, the format. Uh, you have a riv file, uh, format. Um, and, like, you'd sort of talked about, like, traditionally how SVG and, and images and videos are, like, representative of very different things. You're, you're very explicitly making an interactive, uh, sort of experience and, and that, that is different than making static graphics.
Justin: Um, and at the same time, a lot of tools, you know, this goes back to, this is an age old problem when you're generating a code that is supposed to run on some platform and you're doing it with a visual tool. Oftentimes performance is the thing that, the trade off that you make such that a designer can come in and like, See their vision happen without a developer needing to be involved.
Justin: Usually it's like, there's a performance trade off. So as, as much as you're able, what is the, like, what are the decisions that y'all made to like, make it perform it? Like, what does the format look like? Or whatever you can describe there. I'm curious about
Justin: that. I I think, yeah, my co founder would be able to describe this better.
[00:30:30] Performance and Runtime Efficiency
Guido: I can share that it's, it's binary, it's a binary format. So that just keeps it like super lightweight. Um, it's, uh, it is open source. We have some documentation on our site, like how the format it's an under advanced topics in our, in our docs, how the format is created and built up and everything.
Guido: And, um, I think the team has plans, uh, once we released some of the big features I was just talking about too. Go back and create like more documentation around how to actually generate the format yourself. And some, in some of the runtimes, like I believe in unity, you can actually generate the format.
Guido: Graphics procedurally and the format procedurally and stuff like that. Um, but I think at the core of the performance question is really the fact that our runtime is C And that, that, that the, the, the file format itself doesn't run any code to date. Once we add scripting, that's one of the things we're exploring is how, how do we actually, you know, have a, you know, we have, we have assets that come packaged either in the RIV file or, or externally, like images and audio.
Guido: Um, and fonts today are things that, you know, are assets that could, that can come with the RIV or, or, or externally dynamically loaded in, you know, uh, we call it out of, out of band, I think is the future we call it, um, and, uh, and so there's, so, so there's, yeah, the, uh, where was I going with that? So, yeah, we will, we will add scripting as a way in the future to, to do that too.
Guido: Um, but to date, all the code is really in our runtime and happens in the runtime environment. And so like, if you're. If you're on the web, you're using WASM to run C on the web, and then you're using the JavaScript as, you know, to interface with, with the file and, you know, we have an API that lets you kind of, you know, You know, read the state machine and get the inputs and change the input on it.
Guido: And so, um, I think that's, you know, again, Luigi would be able answers better than I can, but I think that's the core of the performance that we get is that, um, that runtime is really low level. And that we, because it's C we write it once and it runs everywhere. Um, we, you know, we, we use the same runtime on the web as we do on an Unreal engine.
Guido: Um, and there's very few cases where there's like porting of that language that has to happen. And I believe there's like in Flutter, we have to port it to Dart and there's some kind of interface layer immunity, I think maybe to go to C sharp. Um, but again, that goes a bit beyond my domain. Um, but for the most part, it is this low level C runtime.
Andrew: And that, that's where really the performance comes from is the runtime and less the format. Um, I think the format is just really lightweight Yeah, comparing it to something like Lottie, they use a big old JSON file, so I'm sure just by having your own formats that's, that's binary, you can probably get a bunch of savings there. So you mentioned that, uh, the, the product is for more than just building like interactive graphics, like most people, when they hear that, I think they think, Oh, there's a hero image on my page.
Andrew: It's maybe an animated character, but you guys have much larger visions for what that means. So like, do you want me to build my entire website, uh, on Rive or, or is it just like some parts?
Guido: The website, I think the website is a bit of a stretch today. We have some accessibility stuff that we need to figure out first. Um, you can, there are best practices for, you know, making an entire canvas, your website that you can follow today. And you'd, there'd be a lot of manual work that you'd have to do to, you know, make sure that it's all accessible.
Guido: We do have plans in the editor to give you accessibility features to do a lot of that. So is there a day where you might build an entire website with Rive? Sure. Um, do we recommend it today? Probably not, but it depends on what you're trying to build. Like if you're trying to build a video game, maybe, um, and just run it full screen on a website.
[00:34:09] Innovative Use Cases for Rive
Guido: I think it's more the fact that we think the graphics that run in software, um, like there's an opportunity for Rive to become the ubiquitous format for that. Like we talk about how people are using us today, you know, they're using us, yeah, for like building. Design systems, for example, like, like functional design systems that you can actually ship.
Guido: So, that's one small, like, part of how people are using Rive, like, making, you know, Duolingo uses this for all their characters, but it also uses this to make, like, their graphics, their, like, parts of their buttons, their, like, You know, um, grids and other things that like are very visual and very interactive that they can just build it once and then tie it into the different format.
Guido: You know, it runs on the web, it runs on iOS, it runs on Android, and they have that same kind of graphic that can, that can react to data depending on what, what, uh, format it's on. And, and might have like some exposed things like fonts, like load the, load the correct iOS fonts on iOS so that it looks like a iOS, you know, button.
Guido: So Um, or, or, you know, most of the time these folks are building really custom graphics and they don't want it to look like the default iOS thing, but you can do that if you want to. Um, so that's, that's one use case, but then there's other use cases like, you know, people building full blown menus in, in games for, you know, every, every, um, game engine is currently lacking UI tooling.
Guido: Um, and, and the ones that are really good tend to be custom. Like there's, there's a custom game engines. We talked to the folks, uh, at, uh, Bungie that worked on, on Halo and they have a really powerful engine that does a lot of really cool custom UI, but that's proprietary and only for that game, you know, you want to use, you want to, you're working on another game at Bungie and you don't have that engine.
Guido: You're out of luck. You're, you're, you, don't work at Bungie anymore. And you're going to go work on another studio. You don't have that, that, that, that skill set anymore. And so like in games, there's a really big. Um, yeah, adoption of ride and interest growing significantly over this last year where there is no kind of design tool for, for those types of graphics.
Guido: And so that's a really big, um, area where people are creating, you know, a really big experience, like, like full blown menus and heads up displays and all that type of stuff with ride. Um, another big use case you can think about is like really custom stuff. Like you mentioned the website. Yeah, probably not.
Guido: You know, there's. There's, you might be building parts of a website, stuff like that, but like, for example, really custom software, like, like car dashboards and car displays and that type of stuff, that's an area where we're seeing like Rav take off because the time to build that stuff is usually so long and the iteration process is so terrible and demoralizing for everyone involved that if suddenly you can be actually sitting in the car with our editor Designing a gauge and the full cluster and have it like connected to live data while the car is driving.
Guido: And you're, you're actually seeing it react and testing it as you're building it, like it crushes iteration time. It means that you can be building it as you're driving. someone else driving the car or maybe it's driving itself, but, um, yeah, yeah. So those are some of the cases where you kind of hopefully helps open up like what we mean by a, a new way to build graphics, um, production ready graphics.
Guido: For, for software. And I think that there's so many, yeah, use cases and they're, they're all kind of plagued by the same problems. You know, this is something that, you know, like, uh, someone might advise startups, like, you need to focus, go for something small, you know, find the tiny market and build that up.
Guido: And our, our vision is a little different because we think. A format needs to become, you know, to become a new design format, you have to become ubiquitous. And the problems that are facing game developers are the same that are facing, um, app developers like Duolingo and, and are the same things that are facing, you know, car, car developers or people building graphics for TV.
Guido: All software is affected by this problem of hard coding graphics. And, and so I think that it carries across all those, all those verticals.
Justin: The idea of animation on embedded devices is very interesting. So, uh, in a different life, I was working with the food network team and they had, uh, a TV app for like the Roku or something. Right. And the Roku devices have like very, very little, uh, like capacity. So have you had customers who are actually building graphics on some embedded
Justin: platforms?
Guido: yep, yep, we, we have, um, I think one we can share is, I mean, Google has been one of the earliest adopters arrived from like 2019 when it was still the first version we and I built, um, before it was this, the kind of the new version. Um, and I think they, they ship on, you know, Google assistant ships on. Uh, very, you know, tiny device, like, like the bedside devices and stuff like that.
Guido: Um, there are other customers we can't share yet that are even tinier. Um, and, and they're working with Rive. One of the big benefits of our new renderer is exactly this, that it can, it doesn't need new hardware to be fast. And it doesn't, because it's just, it's just a novel new way to render vector graphics.
Guido: It doesn't rely on new hardware to do that. It's genuinely just a really cool new thing. Idea that the team came up with. Um, and it's also means lower memory. So, so it can run on more memory constrained devices. Um, there is a little example on our Twitter that you can probably go find one of our, uh, our, our head of DevRel Gordon, you can find, he's got an example of it running on some Android watch where he's like tapping through different, you know, screens and interacting with them, and those are all Rive graphics and it's super performant.
Andrew: Um, really animated, like, you know, 60 frames per second. So when you're building those, like more interactive experiences, like an app or a TV app or any of those, how much of the like state lives within, uh, the asset? Cause like you have state machines and you can, with a complicated enough state machine and inputs, like model a lot of stuff. So like, is there a sweet spot or is it just totally up to the person?
Guido: it totally depends. Yeah, today, I think without data binding, and, um, some of our layout features that are coming really soon, that's another feature we haven't talked about, that we're releasing a whole new layout engine that's gonna be really powerful. Um, that, that can do a lot of it. Not your typical kind of, you know, Auto layout, it can also animate and do a bunch of other stuff, um, the without that, I think it's, you know, depending on like the wash is perfect.
Guido: You can do that, right? Because it's not, it doesn't need to, you're not gonna be resizing the window size or car dashboards and stuff like that. So stuff like that. But if you're developing for. Anything where, um, you, you kind of have either a more complicated state engine or, or variable, you know, layouts and stuff like that.
Guido: So I don't want to say that you can't do, you can do layouts today in rides. It's, you can use our blend states and other, you know, you can, you can use. Right, you know, state machines to create breakpoints and have a change and there are ways to do all that. But, um, most of the time you'd probably want to do something where you're kind of setting up your, your, your instances of your Rive object and controlling the overall state in the main app, like in your, you know, HTML or, um, you know, uh, C if it's a custom, uh, engine of some sort.
Guido: Um, but there are people building, you know, things entirely with Rive, um, like, like the entire, there was someone that shared the other day on, on Twitter, like a unity menu that was all built in Rive, super animated, like the whole, the whole menu, like pops up and it's a whole experience that's built in Rive.
Guido: Um, there's also, you know, Age of Learning is one of our customers that pops up entire windows in their, in their iOS and Android apps that are, um, entire Rive. Scenes that the entire UI is Rhyme and they're actually I've talked about them before. Um, they're, they're really cool because they Um, they use a lot of our, uh, Inputs for the state machine, the text runs, that's like ability to connect different parts of your text box, you know, runs within the text box to data.
Guido: And also we have an event system. We talked about inputs. There's also outputs from the Rive file. Our eventing system is how you get data. You know, how you pass data out from the Rive file to back to the runtime. And so they, they use all of that. And, you know, without data binding yet, they have a way to standardize all of that so that the designer can basically, you know, build a whole new menu and a whole new UI, and they can, because it's just a Rive file and they can serve it dynamically, they don't have to ship a new version of the app.
Guido: They can just load a new Rive file and provided those events and inputs and text rounds have all stayed the same. Um, they've empowered the designer to just build a whole new layout and a whole new UI that they can, you know, A, B test and stuff like that. So, yeah, the, the, the kind of cop out answer is that it depends, you know, and then there's people doing both.
Guido: Uh, I think once we have data binding and layouts, which are coming, um, very soon, uh, you'll see a lot more like really crazy, different experiences that, that will be enabled by having, A design tool that lets you do that.
Andrew: Yeah, it just clicked for me what you've been meaning with hard coded. Uh, cause I'm like, well, all UIs kind of hard, it's still hard coded, but like really the file format is what enables that you can dynamically serve the file format from a server. And that can tell your app what to render. So like that's where you can get that dynamic testing.
Andrew: Right.
Guido: That's right. Yep. Exactly.
Justin: This is, it's, it's such a cool product. There's, there's a few sort of like category defining products that I just like, I'm really enamored with. I think Descript is one, Andrew and I started this podcast because of Descript largely, uh,
Justin: it's a fantastic product, but Rive is another one of those that I see as like really.
Justin: And just like a core part of the space, because it's like a theme that we've talked about on the podcast is, uh, customers expectations, users expectations of product experiences are only increasing. People are expecting more and more from the product experiences. And if you look at any like landing page for any tech product these days, this has got, they've got some fancy animation, some crazy transitions, like, you know, whatever they can do to sort of set themselves apart from the rest of the crowd.
Justin: And like, you know, kind of show their prowess, I guess. And, and I think that we're going to have more and more demand for. Interactive animated experiences going forward, and so I
Justin: think y'all are
Justin: in a great
Justin: spot.
Guido: that's awesome. Yeah, we talked about that a lot. Like, um, the fact that, you know, everything is so saturated now, you know, not just. Games, but apps and everything is so saturated that you don't have much of a chance to like really stand out unless design of the product is a big differentiator.
Guido: And that's becoming, you know, more and more important. And I think that, yeah, that's that's why a tool like ours we think is really important to help you. build something that is really custom and custom to your brand as opposed to just using kind of cookie cutter off the shelf, uh, graphics that, you know, you could, you could probably, you probably heard at some point, like every startup page looks the same, you know, like the, except for like a change, change the accent color and the logo and they all look the same.
Guido: And then with the exception of the ones you're talking about now, like there's these category defining products that are going all out to make sure that their pages really stand out. And. think that's part of, yeah, what we want to do with Rive is make sure that those tools are available to everyone.
Guido: And it's not just a crack team of. You know, insane, WebGL developers that, that have a design team that can code a little bit that can help them get to that vision and instead empower designers to use the tools they're familiar with to to do that.
Justin: Yeah, it's an awesome vision.
[00:46:04] Future Prospects and Scripting Capabilities
Justin: Um, so we like to ask a future facing question at the end of our episodes and maybe, maybe for you is, uh, you know, what's next for Rive and what do you, what do you think is next in this space in general?
Guido: So, I think next for us is, I mean, we talked a lot about the upcoming features and all, all that stuff. Um, I think you will start to see, um, people build features for Rive once we have our scripting. You know, part of the goal with scripting is to empower people to, um, build their own features. And, and the really cool thing about that is that it's not just like a plug in system like other design tools might have, but it also has to work at runtime, right?
Guido: So if you're building a new feature for our editor, you're also building the runtime functionality for it that can actually ship to Rive. With our runtimes. So it's suddenly a way to, you know, every time we add a feature today, like if we add audio, for example, to our, our, our editor and we add it to our runtimes, we're now shipping an audio engine for everyone.
Guido: And not everyone might need that audio engine. And so if you can just load the audio plugin, um, and there can be multiple of them, you know, that different people have built. Um, and you can ship only that as, you know, part of your, not only in your editor, you get custom UI for it, but also at the runtime you get custom functionality.
Guido: So that's something that I think is pretty cool. And for a dev audience, exciting, you know, you can imagine opening up like a marketplace of being able to create these types of scripts and sharing them with the community. Um, and then, yeah, I think just the fact that we have some of the features we talked about coming soon means that I'm really excited about seeing just what are the new kind of experiences that people will start building when, you know, suddenly.
Guido: A website can be an empty canvas that, um, can do a whole bunch of really unique creative stuff and doesn't have to follow a document object model and can be kind of whatever you want. I imagine we're going to start seeing a lot more games and gamified type of experiences or things that blur the lines even more than what Duolingo is doing, you know, with, with apps and games and.
Guido: And that's, yeah, that's, that's exciting to think about. Um, final thing I'll say is that we're, one of the things we're seeing is that, that I think is really exciting is the ability, like, for companies like Duolingo, and, and I should use another company, but I keep using the same ones. Um, but like to, to build, uh, these graphics across the platform, right?
Guido: So the fact that, like, I, I'm excited to, can't, can't share the game and the game companies that are working with Rive today, but, um, like, uh, you know, you can imagine someone having a really cool, You know, recognizable character in your game, and maybe a really cool menu built around that, but then also being able to load parts of that graphic or all the menu onto your website or onto a companion app, and empowering those type of, you know, scenarios that I think are going to be really exciting to see, like game websites that feel like the actual game menu from the game itself.
Guido: Um, yeah, I think that's just exciting
Guido: to think about.
Andrew: Yes. So many exciting things there.
[00:49:02] Closing Thoughts
Andrew: Like if you guys nailed that accessibility feature, I think that's going to like explode the use cases because like in the web development community, it comes up a lot that it's like, oh, I could just use canvas and my life would be a lot easier. And then the next question is, what about accessibility?
Andrew: So if you bring with that and scripting, it seems like such a fun, exciting platform to me, like just through this conversation, I really want to go learn, uh, the tool myself now. Cause it just feels, feels like before this conversation, I was excited about it, but now I'm really excited.
Guido: Yeah, that, we always talk about that. Like, that was one of the things Flash did really well. You know, we started this conversation talking a bit about Flash and, like, how it really converted a lot of design and made designers into developers. I mean, I, I learned a lot of code thanks to Flash, and I think we'll see a lot more of that, um, and, And we'll see a lot, I think we'll see the developer audience, you know, is already really big and right.
Guido: We have 40 percent of our users are developers. Um, and, and I think it's just going to explode even more when, when scripting becomes, um, yeah, a big part of that feature set.
Justin: It's very fitting to sort of end on Flash because I think my feeling here for a long time is that There's just never been a really great replacement for Flash. Like, Flash was a really interesting moment in time, and it had a ton of warts, and it had a ton of problems, but it was like, this incredible tool that enabled a whole generation of makers to like, just create these really rich, crazy, interactive experiences.
Justin: And that, I think, is the sort of mantle that Rive is taking on. It's like the only tool that I've seen thus far as like, this is like. The thing that Flash wish it could have been, you know, it's like, so
Justin: I'm really excited to see it develop.
Guido: that's a lot of big shoes to fill, but that's awesome. Yeah, yeah, definitely lots of, we have the power of hindsight and avoiding some of the mistakes they made with like the proprietary runtime and all that type of stuff. Um, and, and yeah, not, you know, Rive is, Rive plugin that puts the onus on every user to install it manually and things like that, that I think ultimately we get to benefit from being in the age of, you know, More modern web tooling and all that.
Guido: but yeah, you were, you were mentioning Andrew that you want to go try it out. This is, I guess, a good moment for me to, uh, uh, what is it on a plug that we, you know, couple of weeks ago got rid of the file limit for individuals accounts. So individuals have unlimited files. So. You, you know, feel free to hop in and we're trying to make it as ubiquitous as possible and as easy as possible for everyone to adopt it and try it.
Guido: You know, um, we, we didn't talk about, you know, some of the differences with our runtime model, but, you know, the, the format is open source. The, uh, The runtime is open source, the renderer is open source, the editor is really how we monetize. Um, but we've, we've scaled even that back a lot this year and made it, you know, we found that most of our revenue tends to come from, uh, teams collaborating and then upgrading to enterprise security and all those types of features that enterprises want.
Guido: Um, and, uh, and, and that's really like, Our, our model is to make it as accessible and as free as possible for, for individual users to use it and to become champions and bring it to their workplace and their enterprises where, and we hope to capture, you know, some of the value and revenue, but, um, yeah, that's, that's really the, the whole for, for growth for
Guido: Rive.
Andrew: Sweet. Well, thanks for coming on. This was a lot of fun.
Guido: Awesome.
Guido: both.
Justin: Yeah, thanks. This is, this is incredible. I'm super excited to see where y'all go. This is, it's an amazing tool.