Loading summary
Transcript84 lines
- [00:00]
Guido Rosso
We don't have constraints. We don't have to follow the SVG spec, we don't have to follow the HTML spec. Let's make our own spec. If we were rebuilding vector graphics today, what would we do differently?
- [00:09]
Host (possibly a Dive Club host)
Welcome to Dive Club.
- [00:11]
Rid (Dive Club host)
My name is Rid, and this is where designers never stop learning. Today's episode is with Guido and Luigi Rosso, the twin founders of Rive, which.
- [00:20]
Host (possibly a Dive Club host)
Up until this point, I had thought.
- [00:22]
Rid (Dive Club host)
Of as a new motion format. But after this conversation, I now realize that their vision for the future of interactive software is so much bigger than I could have possibly imagined. So we're going to get into all of the details about their march over the course of five years to a V1 and what all of these features unlock for designers. But before we get into all that, I wanted to know, what was it like seeing Rive power the all new Spotify Wrapped?
- [00:51]
Luigi Rosso
A cultural moment that is Spotify Wrapped, that is so global on that specific date, and the fact that Spotify, like the next day, the official Spotify account started talking about how they use Rive for it, and some of the people working on it started publicly talking about it. It was just, I think, the first kind of really huge moment like that that just made everyone so aware at that scale of Rive. Similarly, other tools like, you know, we talked about, you've probably seen us talk about publicly about. Duolingo was a very early adopter. They built a lot of stuff that goes out to a lot of people. But, yeah, Spotify Wrapped was really a special moment for that reason. They had not had a great experience the year before. So there was a lot of pressure on this year to something really special. We were still building a lot of what we consider the V one of the products like Data Binding was just coming out. There was a lot of features, and they really wanted to make sure that, you know, the runtime of the features they were using were stable because they wanted to have it ready to go earlier in the year. They didn't want to be, you know, launching this thing in November or December. They want to make sure it's actually loaded on the device before the actual date. Like, a lot of people, you know, aren't going to update their app on the day that Spotify Wrapped comes out. So they need to have it done quite a bit earlier so that there's time for people to update their apps. And all of that, all of that was really exciting. And it was exciting how fast it came together. I think it goes to. And we can get into details about the benefits of Rive and why, you know, we see it as a really big unlock for teams like that that can keep iterating, keep building something really quickly and empower creatives, not just designers, but designers, animators, coders to all work together on something, to see the perception be really positive and everyone be really excited. There was a bunch of tweets on that first day that Spotify hadn't quite talked about it being built with ride yet. A bunch of tweets asking like, how is, how is this made? I can't even wrap my head around it. I think a tweet that was like, I don't know, I got like maybe 20,000 likes or something that was like, how is this made? And then I think the very next morning the Spotify team replied and gave us the okay, like, yeah, let's talk about it. And so we just retweeted it from the Rive account with replying. Right? You know, Rive, that was, that was a tweet. It was just like the question was made and I had like, yeah, and it was just like reply, right? It was such a cultural big thing that happened and kind of validated Rive as a full experience.
- [03:03]
Guido Rosso
What I loved about Spotify and I think Duolingo does the same thing, and a lot of our customers, every customer has driven Rive this way, is that they help us push the envelope because there's a lot of features that we're currently working on and we're like, oh, this would be. This, this would make their life so much easier. We need to prioritize this. And there's always a little bit of a internal, like, okay, how do we rework this such that they can have this by this drop dead date? We will rework working the Android runtime this year and we wanted Spotify to really have that and not be able to miss out on the performance gains of that and things like Guido said, data binding and everything and how that worked and how they could use it and how helpful it would be for them. There's just always this mad rush of features that we're trying to still complete.
- [03:41]
Luigi Rosso
Because we are not yet at what.
- [03:43]
Guido Rosso
We consider our V1.
- [03:45]
Rid (Dive Club host)
Real quick message and then we can jump back into it. So I got a new computer recently and what do you think was the very first app that I installed? If you've been listening to this show for a bit, then you probably guessed that the answer is Raycast. And at this point it is an extension of my fingertips and a fundamental way that I Use my computer. And I'm not alone. I mean, I see this sentiment from people I looked up to on Twitter all the time. So if you're still on the fence, just do it. Download Raycast and thank me later. Just head to Dive Club Raycast to get started. Don't be the person with the portfolio that doesn't have a custom domain. With Framer's latest release, you don't have that excuse anymore because they partnered with Hover to provide a seamless flow where you can select free or discounted domains that will automatically be connected to your Framer site after purchase. You heard me right. Framer is offering free custom domains for the first year when you upgrade your site to a yearly plan. So definitely don't miss out on this offer. You can head to Dive Club Framer to claim your domain today.
- [04:49]
Host (possibly a Dive Club host)
Okay, now onto the episode. I think one of my main goals for this conversation is to help designers listening kind of just break the box of what they currently have put Rive in. Because I'm sure like a good percentage of people listening, you know, they put it into this motion after effects lottie alternate like that kind of a bucket. And I know enough to know that the ceiling is way higher. But it also gets a little bit murky in terms of where can this go? What is the vision for the future? And also related the fact that you've been working on this for a long time and you're like a V1. So it's like, yeah, I really want to understand from this conversation like what the vision is, why it matters, and how it paints a picture of potentially even like where the world and where these roles are headed.
- [05:38]
Luigi Rosso
So I don't know that everyone knows this. We're identical twins. Luigi's the engineer, I'm the designer. That decision was made when we were going to date us here in late 90s. We just realized that like, wow, this, this works like we can be a team that does so much if we're complementary like that. So that kind of set the tone for what ended up being some, some of startups in the 90s. We, we launched a design dev agency that was doing a lot of custom work. We, we've always. And that kind of became our thing for the next basically 15 to 20 years. That's, that's why we moved to the U.S. we got a lot of customers that were here in the U.S. red Bull was one of the first ones and shortly after Xbox, Microsoft, and kind of what people came to us for was these really custom experiences that needed really custom design and development, that's what we became known for. We worked. I'd mentioned this one before too. 911 memorial. The very first sort of product experience that went along with that, like kiosks and websites, those were all things that had to be consistent but might run JavaScript in one spot and some other framework somewhere else and on the kiosk. And so that always requires a lot of effort to convert these graphics to code. And so that is really what the RIVE vision is aimed to fix. It's aimed to fix this, this thing that Luigi and I have dealt with. The core problem of converting graphics. Yeah, we've battled it for like since the late 90s. Let's give the designers an ability to actually work on a graphics format that ships. Not a mock up or a prototype, but then an engineer or an AI has to convert to code, you know, because whether you're working in, in Sketch or Figma or After Effects, you aren't working with constraints, you're just working in constraints of the software that you're using. So why not actually give you the constraints of what the, the actual runtime and hardware that it's going to run on are give give the designers the same constraints and get them designers and devs and motion people all working on the same format and the same language. And so that was really the big challenge of building Ride and why it's taken so long to get to almost V1 is that it's not just about building an editor, it's about building a new type of graphics format, a new type of editor, a new type of renderer that can run performantly everywhere and a low level C runtime that can run across all those platforms too.
- [07:54]
Guido Rosso
If you ever play a game or if you ever play something, if you're ever interacting with something, one of the most important things is that you can interrupt whatever is happening. Like the best games are the ones that let you like actually mid jump or mid something switch to something else and getting that really smooth visual feedback that it's doing exactly what you expect. And it looks just, it looks smooth. But there's a lot of work under the hood to make sure that those transitions are smooth and are happening at the right time and the constraints are being followed such that something doesn't bend the wrong way or whatever. Having tooling to be able to do that is actually not something that most designers have to work with. Game developers work with it to some degree. And I think that was the first part of what does a tool that lets you Mix animations with constraints that are respected no matter what happens. And being able to preview that very clearly in an editor that lets you basically interrupt things at any time, change things at any time. Because the biggest problem, and one of the fundamental things that was really hard in battling all these different systems that we fought with when we, when Gleedo and I were building all those different pieces of software that he talked about was the iterative loop. It's such a problem to be working in tooling that doesn't give me immediate feedback. I'll never be able to chase whatever it is that I'm trying to figure out. And so the tool needs to give you that in real time immediately, which ties into every feature we've built in Rive. It's why we have scripting directly in the editor and why all the features are directly in the editor. Because you need to be able to immediately see the result. You need to not be able to hit compile or in flash command enter. You had to hit command enter every time you wanted to see the result of some code you wrote. No, you need to see that right away. You need to see that immediately. Whatever I'm doing is having an effect, and how can I tweak it such that I am not broken out of that iterative loop? So the hardest thing about that is that no runtime format, no vector graphics renderer had been built to really think that way or support anything that way. So we had to write a format that had those concepts in it, and then also abstract at the time, the renderer. We tested so many different renderers to try to see, okay, can any of these keep up? And none of them could keep up. So we started writing our own, and then we started hiring people to help. Because at the time, it was just me and Guido, and it was just way too much for me to do all of that stuff and be successful at everything else that we wanted to do. So we finally started growing the team, and we've been very fortunate along the way to find some really talented people who share that vision and who love the kind of carte blanche of, let's redo this, let's rebuild a pipeline and let's build it right. And we don't have constraints, we don't have to follow the SVG spec, we don't have to follow the HTML spec, let's make our own spec. If we were rebuilding vector graphics today, what would we do differently? And that got a lot of people excited, and we've been very fortunate to keep doing that. And we take that approach with anything that we interface with or build at Rive.
- [10:38]
Host (possibly a Dive Club host)
Listening to talk, I think the thing that I wasn't actually even aware of is that motion, it feels like, has always been the stepping stone for you are. Whereas, like, that was like how I interpreted what Rive even is. But that was just the way to even get to something much, much larger.
- [10:53]
Luigi Rosso
Yeah. So motion was a requirement for the format. And that was sort of one of the hardest things to figure out is because if you think about all the graphics formats that existed before Rive, you can think of like, you know, PNGs or SVGs or any graphics format that you can think of. It basically just describes pixels or curves at rest in. In one state. That's it. There's nothing that describes, you know, changing state and movement and all. Even video. A video format is just a sequence of frames that is, you know, originally designed, you know, to be scanned from a film world, put on the computer to do some special effects on, and then printed back on film. And video is just a sequence of frames. It's not. It's not interactive. And the disconnect that Luigi and I had was that we felt like there needed to be this graphics format that could change state at any frame that you can. You know, you make a button, and in that button it's got states for hovered or for selected or, you know, bigger than a button, a bigger component that has, you know, animation to transition in and transition out a whole set of components and screens and characters and all that. And so that was the. The very first sort of thing we knew had to work really well for this new type of graphics format is that it had to change state every frame. And if it can change state every frame, it means it can do motion really well. And so that was this first sort of thing that we built and that we started showing off was like, look at the motion that this is capable. Because that was sort of like, well, why would I want to use this in the first place? We have HTML, we have SVGs, we have all these other things that define graphics and ui. Why would I even use this? And so serendipitously, he found us. He stumbled across our site and animated this. This fly. He's Juan Carlos JC Tune on social media. He was the first person that joined Rive after me and Luigi because he just made this, like, fly that had, like, a ton of motion and bounciness and, like. And it was just like, okay, this demonstrates why people should. Should use Rive. He. He had just like, kind of signed up, built something and put it up on our site. And we're like, whoa, we got a real animator here. That made us realize, like, this is how we get people excited and show them, like, why you need this format. Look at the stuff you can do with it. Look at the motion you can achieve that you just can't achieve with anything else, I mean, other than video. But then it's not interactive. You can't make a transition in anime. And so I think that really set the tone for, like, okay, Rive is an animation tool. Rive is trying to compete with After Effects and all of that. And instead, that really wasn't our intention. Our intention was to go after something much bigger, building those full experiences that we've talked about and helping designers and developers. Any creative person. Designers, developers, animators, those are really the three archetype creatives that we think about at ride that should all be working together in the same experience, with the same set of constraints, the same set of tools to build something really special, the likes of which you're starting to see now with Spotify wrapped. And they're going to be working on even bigger experiences, the stuff that Duolingo is Building. The LinkedIn Year in Review that they did with Rive, some vehicle companies, which we can't talk about yet, are doing some really exciting stuff.
- [13:52]
Host (possibly a Dive Club host)
Okay, I'm starting to get it. It started to click a little bit. And I remember even looking on Twitter randomly, somebody put. It was probably just like a prototype of a car dashboard. That was definitely the moment for me where I was like, wait, what?
- [14:03]
Luigi Rosso
What is R?
- [14:05]
Host (possibly a Dive Club host)
You know, like, I. I didn't think anything like that was possible. And I. Even from my own experience, we've been working with a amazing freelancer, Bartek, who's been doing a lot of Rive stuff for Inflight. Cool.
- [14:16]
Luigi Rosso
And it's.
- [14:16]
Host (possibly a Dive Club host)
I think the. He's amazing and, like, he represents this new type of. I don't know what the word is, you know, because he's very much so. Designer. Developer, animator. Like what? You know, creative creator. Yeah. You know, you're just a creative. Yeah, I love that. And it's a theme that has spanned many of the most recent episodes where it's like, you know, if you would have historically considered yourself just a designer, there's this reliance that you have.
- [14:41]
Luigi Rosso
Right.
- [14:42]
Host (possibly a Dive Club host)
You're making mockups.
- [14:43]
Luigi Rosso
Yeah.
- [14:43]
Host (possibly a Dive Club host)
Somebody else has to match your intent and. And nail all of the.
- [14:47]
Guido Rosso
You're selling yourself short.
- [14:48]
Host (possibly a Dive Club host)
Right.
- [14:49]
Luigi Rosso
Yeah.
- [14:49]
Host (possibly a Dive Club host)
And so it's like, that's kind of A cool comparison that I'm now making where I'm like, oh, ye. You actually have just been working towards this vision that I feel like we're seeing in different parts of the web. But, like, for a long time and I look at someone like Bartek and I'm like, yeah, that's it. Because I bring this dude in and I'm like, I have a really rough idea of what like the Core UX might be, but, like, figure it out, man. Just design it and build it and animate it and somebody like that can really wear all of the hats without having to loop in a bunch of other people. And that's amazing.
- [15:20]
Guido Rosso
Every designer has this ability. They just need to trust themselves enough to give it a try. If you're a designer, you're already thinking about these problems.
- [15:26]
Luigi Rosso
And that's some of the reasons why we chose to not sugarcoat things. When we introduced things like data binding and more engineering heavy concepts, we didn't want to give them friendly names. For designers, we're like, no, these have names in engineering. Let's use their real names so that when engineers are working in Rive, they're not having to do the opposite, just learn the simplified names of things that we gave things like, no, let's get everyone again in that concept of working in the same constraints, talking the same language, and level up everyone together. Instead of accepting that, oh, designers aren't smart enough to understand the engineering terms, we need to dumb them down.
- [16:03]
Guido Rosso
If there's design components that are exposed to engineering, they shouldn't be called something different. We should all talk the same language. And so that's been really a fundamental decision. And a lot of the features that have come out that have had these names that are, you know, they're not called variables, they're called view models. And we've taken that same approach for everything in Rive.
- [16:23]
Luigi Rosso
One way to help people maybe sort of grasp what the vision of Rive is is think of it as an experience engine that is lightweight enough, because that's what we built the runtime of the format to do. Like to be super lightweight that you can run it as part of your experience. For example, Spotify, they didn't build their entire app with Rive. They built the Spotify Raft experience. With Rive. You can bolt it on, but it's so lightweight that it doesn't trigger. And this was part of like the exploration we did early on with Spotify last year of like, okay, can we actually ship Rive? Is this going to put us over the file size for the entire app where we now can't download over self. It's an engine that is so lightweight that you can add it to your existing experience and have negligible effect on your file size and performance yet at the same time so flexible and powerful that you can build your entire app with it. And that's been the five years of building where there weren't quite all the features there yet to do that. Like the text engine. We described vector feathering which people got really excited about last year when it launched just about a year ago actually. Yeah, can be games and people are starting to build full blown games. In fact we have, we can't, we can't talk about customers yet but there are some pretty awesome studios, big studios that we hope to talk about later this year that are building like names that you know very well that are building really cool experiences with rive and launching on big game engines. And there's really just a few features left that were on our original V1 list and that's why you see us now being more public. Coming on podcasts, we were always very much of the mind of like we don't want to be over promising and have people like come in and then churn because they're missing dynamic text or they're missing responsive layouts which we just shipped last year. And vector feathering which was a huge undertaking. We didn't want to give people just your default glow and drop shadow because that is some of the things that can most kill performance and was one of the big reasons why we just didn't want to turn on. Here's a blur filter that a designer can go nuts on and on there M4Macs computer, they're like this is great. What do you mean it's not running well? I would be that person Android from five years ago. Yeah. And instead we, I mean Flash had exactly.
- [18:35]
Guido Rosso
This is exactly what happened to Flash. Remember it took them forever to add drop shadows, blurs and when they did it, it had exactly this. All these caveats, massive performance warnings and ways to cache it so that it was faster. And let's talk about this for a.
- [18:48]
Host (possibly a Dive Club host)
Second because I did put a tweet out and just kind of sourcing just general ideas of things that people were curious about. And the vector feathering came up I think at least like three times. So talk about what are you doing that is unique there and why does.
- [19:02]
Guido Rosso
It matter what most engines do when they do a screen space effect that blurs or does some interesting shimmer effect refraction all game engines, all apples, liquid glass. What they normally do is they draw things in layers and then they apply an effect that samples from those layers and does a very different thing on what you finally see. And there's ways to cache that. So it only happens within little rectangles of the screen. But it normally always involves some kind of copy of raster data. So the GPU is doing one thing, then it's using that data again for another thing, and then it's drawing the whole thing together. And it's just a lot. It's a lot of fill rate, it's a lot of redrawing to the same regions. What Vector Feathering does instead is it computes the vector extrusion of the edge. So it takes a shape and it grows it a little bit, and it figures out in that what we call the feather, that little edge. We can run the actual Gaussian formula for doing a blur directly as we are drawing the shape. So there's no resampling of the background, there's no filter applied. After everything, it's happening as it's drawing it. That means the pipeline is unified. That means there aren't as many state changes from the CPU to the gpu. It's just all much, much, much cleaner. And it's fundamentally doing much less because it's only evaluating that function on that very specific shaped edge. The feather versus the whole screen, or even an optimized version of the screen, it's still doing way less overall. And that's kind of the same approach that. This is why no one else can do this, though, because we have a tool that lets you see exactly the result of that. The result is that it's not quite the same as taking the screen and blurring the whole thing. Right? So visually, it'll look a little bit different. It gets very, very close to a real Gaussian blur.
- [20:50]
Luigi Rosso
It almost is.
- [20:51]
Guido Rosso
And now in particular, Chris has been working and has evolved it such that it's very, very close, but it isn't fundamentally the same. So if you give a designer a Gaussian blur and then you tell an engineer, okay, implement that, and they do it with Vector Feathering, they're going to complain. Well, this doesn't look quite. This one pixel here is a little off. What's going on with that? And that's a fundamental reason why Rive exists, because then you at design time, see exactly as it is. And if that pixel doesn't look right, tweak the value such that it looks right until you're happy and then it'll work the whole way through. So the whole pipeline has to be built for this from the start. And so that's why it's novel, that's why it's different, that's why it's not. It's not a blur. Traditionally it's a blur, but it's a blur on specifically only certain geometry.
- [21:34]
Luigi Rosso
We get some people who are like, why did you choose this hard mode? Why didn't you just make this runtime that other people can use different design tooling and different animation tooling and then just import it into rive and you know, your secret sauce is the performance of your runtime and your new format and all that. And what we just described is the exact reason why we couldn't do that. Because if someone designed something in a different tool, they would import it and it would never look exactly the way they want. Whereas instead, if you're designing directly in rive and using those tools, you're working within the same constraints at design time that the runtime has. And so yeah, that's been part of the hard mode is that to solve this problem holistically and really get designers to be able to build experiences that are in the moment that you're building it. Exactly what's going to ship and keep iterating on that experience right there meant having to build the whole pipeline. It meant having to build the design tool, the animation tool, all the rendering features and all that.
- [22:28]
Guido Rosso
It's all tooling. Like, like people will say, well, you know, Photoshop lets me design stuff like this. Yeah, but Photoshop was a tool for a different era. Photoshop was never a tool for runtime. And it's the same thing from when we went, you know, from building boats to building cars. You need the right tooling and the right tooling for something that is fundamentally interactive. Must be interactive.
- [22:48]
Rid (Dive Club host)
Hey, really quickly let me tell you about the all new Dive Talent Network. I've hand assembled over 100 of the most talented designers and builders that I know so I can recommend them my favorite companies. So if you're listening to this and you're open to new opportunities, the Talent Network is anonymous and super low pressure. It's just an easy way to see what's out there without having to post on social media. So if you're interested in joining or maybe you're looking for your next hire, head to Dive club slash talent to.
- [23:18]
Host (possibly a Dive Club host)
People who say the tools don't matter. I'm like, that era, the door is closed. Like we can't say that anymore, right?
- [23:23]
Rid (Dive Club host)
And like, even myself, I'm a perfect example.
- [23:25]
Host (possibly a Dive Club host)
Like, like, I've done a few little things with Thrive or at least, you know, worked with, with someone like a Bartek. And man, you get a little taste. I'm like, okay, I'm going to do that again. And even now, my own product roadmap, I think about these little micro experiences to help designers get better feedback. They're all going to be in Rive. They're all going to be in Rive because I can do things that I just simply couldn't do otherwise.
- [23:47]
Luigi Rosso
The fundamentals of good design, the fundamentals of good animation, and the fundamentals of like, knowing how to code, they're still going to give you a massive edge no matter what tool you're in. And I think that those are the people who are most successful at Rive are the people who already have, you know, the fundamentals of good motion, the fundamentals of good design. Even with the new scripting engine, we're seeing designers like immediately be able to use the AI agent to help them build code and scripts. But Luigi went into one of our, we can't talk about this customer yet, but very big streaming platform that is using Rive and building some games with Rive that have very high, like, performance requirements. One of our designers built this awesome experience that was really great and used the AI agent to help them do all the code. Like, he's never touched code and he built the whole thing. Luigi had to then come in after and make sure like, that the performance was really good and go and like basically double check it. And he actually used the AI agent to help him improve the performance. So Luigi, who is like one of the most low level engineers I think that I've ever met, low level meeting, like, he can work down to the machine code basically. Even he like, gets value out of using AI to help them think and think through these, these massive things.
- [24:57]
Host (possibly a Dive Club host)
Let's go a little bit deeper on that too, because I think that's why the timing of this conversation is particularly interesting to me, because I'm the perfect example of someone who like, you know.
- [25:05]
Rid (Dive Club host)
Got a little taste of what is.
- [25:06]
Host (possibly a Dive Club host)
Possible with AI and now I'm just overly confident in everything. I'm like, I can learn any tool, I can make anything happen in code, I can build anything, you know, so like, even the next episode that drops, that will be out before this comes. This like, you know, three Js and Blender and all this kind of stuff.
- [25:21]
Luigi Rosso
I would have had, I would have.
- [25:22]
Host (possibly a Dive Club host)
Had no Interest, really. But now all of a sudden I'm like, you know, AI can help me. Like, if I care enough to see something in the world, I can make it. So I am trying to point that ambition at Rive. Very much so. And I see the new release, you have the scripting engine, you have the AI agent. Talk to me a little bit about, like, what does that unlock for people like myself?
- [25:42]
Guido Rosso
So the point of what scripting was meant to unlock was the ability for. Again, when, when we were building stuff, as customers would come to us, they needed very spec. And what we quickly realized is, yeah, we can build the knobs and whistles to give you this thing, but then everyone is taking this feature and everyone who doesn't need this feature will have it as part of their runtime. And this is exactly the problem that a lot of game engines and other app engines run into is that they, they get bloated. They get bloated because they start building features for customers that need them, but not everyone needs them. And so the scripting engine was really meant to come at a time where the fundamentals of changing states of animation applied to text, applied to visuals, applied to curves, applied to images, applied to audio, applied to layouts, all these fundamental building blocks, like Rive is very low level in all these things. You'll see when you use Rive, everything is kind of, we don't give you a scroll panel, we give you the bits to build a scroll panel. And that's the same thing with everything in Rive. And that's why scripting had to come at a time when all those building blocks were there. And then you could bring the logic that made it work the way that you needed and could expose features that we didn't have that you needed. But all the fundamental stepping stones are there to do that. And that's why scripting is here now. It's meant to be a way to unblock your needs and be not only efficient at it, but also be kind of unlimited in what you can build with Rive. That's why it had to come now, after all those other features already. And the hardest decision that we made in the last two years was one, what is it? What are we bringing? And how we make a fit into those constraints? And two, how do our designers, engineers, people, creatives, how do they interface with this coding language? And it was a pretty early on decision to build a native editor for it.
- [27:30]
Host (possibly a Dive Club host)
We're talking a lot about data transfer and you'd be able to pull things in, and that was A moment for me where I was kind of like, oh, wow. It was kind of an aha moment where I could actually like have it be determined. Whatever I'm making is determined by like actual data that I'm getting that it's like stored in my database. I don't even have the right language to describe that. But for somebody who's listening, who's still trying to increase the fidelity of what they're able to imagine in terms of just use cases and what this could look like, like help them understand the relationship between.
- [27:59]
Luigi Rosso
Yeah, let's go back to Spotify. Let's use Spotify as. I think they're a perfect example. You know, when there's that kind of race at the end of the experience where all the artists, kind of the top artists for you appear. There's like the global one and there's one for you where they appear and they kind of like start racing each other all around all that. And that looks very cool. Motion graphics moment, which was animated and all that. But the whole thing is driven by data so that everyone sees something different. For example, the images that appear there are of the artists that are in first place for you, but your artist might be different from my artist. And so all those images are data bound. That's easy to think about. You just change the source of an image and it loads a different image in there. But the position, you know, every single property in Rive can be data bound. So the position, xy, scale, rotation, font weight, all of that can be driven by data too. So you get this very dynamic race that looks very different. Like in the middle of the year in July, you are listening way more to one artist and they pop forward and then sort of in August, they kind of pull back and they disappear. And this other artist came out of nowhere. You know, everyone had K Pop Demon Hunters pop up in September, October. Everyone's like chart kind of just suddenly had that and pop up there.
- [29:11]
Guido Rosso
But that was different for everybody.
- [29:13]
Luigi Rosso
You know, that kind of multiple snakes that appear on the screen, racing and moving it all around. And that was something that without data binding, you would have had to do a whole bunch of either permutations of animations, like here's all the different versions that we can support and then we put in some data, you know, and hard coded in and have the engineers control it. But with Rive, it doesn't have to be done like that. You can actually in the editor, build it in a way where then you can give it sample data. The fetch feature, I'm talking about now will actually let you bring in the real data so you can see, you know, let me just change the language across this entire experience and see what does. Does this fit in like a lucha, sing Thai or in Japanese? Does it. Does it look right? Does. Is all my wrapping setup, right? And my ellipses, overflows and all that so that it doesn't break the experience. So with Rive today, you can do that, but you have to set up all your sample data yourself in these view models in our data panel. And so when the designers, you know, are building something like that, they can actually set up their animation to do a bunch of stu, but then be driven by data which shows up in a data panel. And when you're playing it back, you can interact with that data. You can see like, okay, in July, this person became 90% of what I listened to, and you can actually see it react and move down the screen more and pop in and appear. And that's what working with data and drive enables you to do.
- [30:24]
Guido Rosso
And this is more structured data, right? These aren't just little properties. This is like entire structures of data that can be nested and can be very clearly exposed to the engineering team who then sees, okay, well, this, this artboard, this. The entry point is this data about these data values here. This is what the designer wants me to control to drive this experience. And you can very clearly understand, okay, that's my contract. That's what I can do. I need to also expose this. Can. Can we get an extra field in here? Let me go at it. Okay, now the design team can go hook that up and make it work with whatever's there. But it's all in that common system that lets you see exactly what's exposed.
- [31:01]
Luigi Rosso
I can give you, I think, a simpler example that maybe because the Spotify one was very unique to them, it's very. Is maybe not a ui, but like a more common experience that we've worked with with some vehicle companies is imagine your car cluster right where you have the car, maybe like a digital twin of your vehicle in the middle. And then you have like, some. Some different icons that can turn on. Like, I'm turning right, I'm turning left, hazard lights, I don't know, compass, direction of the car, the vehicle is pointing, all that stuff. You might like what we were just saying.
- [31:28]
Guido Rosso
Like, hey, I. I actually have like.
- [31:29]
Luigi Rosso
This icon that needs to, you know, blink if. If the left turn signal is on or the right turn signal is on. Can you pass me the data? So, so the engineers would be like, oh, yeah, we have that in our backend. We pass it to you, and the designer makes a viewmodel. Think of viewmodels as basically like data for a specific component or for a specific screen. It's like a collection of properties. So a viewmodel is a collection of properties. You might have a viewmodel that is for your. Your car component or for your collection of icons across the top. And you call it, you know, icon collection vm. And that's the viewmodel that has all the, you know, it's a component that gets linked to that. Then when you bring that component into a bigger screen, you bring an instance of that view model that has data that's connected to it and controls it. So one example of this is I might make a viewmodel called My car, and it's a little visual representation of my car. And now in that viewmodel, we put left turn signal. It's a boolean value, true or false. When that data comes in saying, hey, it's true, now we can connect it to an animation that makes it blink. The actual light on the car starts blinking when that viewmodel property turns on.
- [32:31]
Guido Rosso
On.
- [32:31]
Luigi Rosso
But that data is reusable. So we can reuse that same view model property that came in. I don't have to tell my engineers, like, hey, I want to actually use this also to turn on the icon. Not just in the digital twin version of the car that's there. I want its light to blink, but I also want the icon to blink up there. And maybe I want to also do some other thing. Play a sound to turn. Yeah, make a sound play. I don't have to go and tell my engineer all of that. All I need to know is like, okay, I have that data coming in. I'm just going to connect that also to the icon color changing. Or I'm going to connect it to this sound event that has to fire when that thing is on and when it's off, it has to stop playing that sound. All that stuff is what data binding enables you to do. It allows you to have this data that then you connect to playing an animation, changing a state. Just connect it directly to a property like in Spotify. The position of where those characters are on the screen or the artists are on the screen. You can put it at like 80% and it'll jump down to 80% and you can interpolate that's connected directly to the Y value of that group of objects.
- [33:35]
Guido Rosso
Well, the next part of it that's that's, I think the, you know, the biggest, like unlock I think designers love this is imagine if you're building so the Spotify thing that had multiple things on the screen. But imagine also, I don't know, you're building a store that's selling products or a list of songs or something. You design that. Once you get your view model for that, then the name of the song, the artist, the length, the duration. I designed that. Once I hook it up to that data and now I tell it, okay, I've actually got 20 of those coming in and it stacks them or it puts them in the right direction. You control the direction. You control the layout of how it looks like. You can make them look one next to another on a screen like racing cars, but it's actually your artists as they race throughout the year. And that's where it gets extremely powerful, is when you start being able to do this times n and you start being able to do this for as many of these things as possible, then you're being efficient. You're drawing thing once and you're giving it the multiple states that it needs to display them in different ways depending on what its data is. And then you can try it and all those different variations of that data coming in. It hasn't quite clicked for everyone yet. But why this is so powerful is because you can start designing much faster. Because you start thinking in terms of how it actually works at runtime much sooner. And you don't need to just, okay, I'll build this here and I'll make a copy of it and paste it and put it like this. You immediately start thinking, oh, in the other version, I need to hide this icon because it doesn't have an image or something. Okay, I'll build it like that. I'll make an animation that makes that go away. And now give it to me 10 times. What does that look like? And you can do that all directly as you're designing it. I think that's, that's. That's so much more powerful and efficient and iterative than doing a bunch of design work that then you throw away.
- [35:10]
Host (possibly a Dive Club host)
Can we pull on maybe one or both of your hypotheticals here? Help people imagine what they could do with scripting on top of that foundation. Just, it could be anything. Again, I'm trying to come back to just helping people imagine, like, what can I do with Rive?
- [35:25]
Guido Rosso
So. So one of the interesting things that scripting gives you the ability to do is kind of that end thing that I just talked about. It does let you directly take one of these components and instance them multiple times. We do this in a bunch of the games that you've seen built in Rive. Like the zombie one. It'll take a zombie and I want 30 zombies on this level. Great. I'll make a copy of it with the script. The script can place it anywhere, can change all of its view model properties, but it can also data into the view model. So it can also say, okay, instead of actually directly instancing graphics and placing them around, I can just work with data. I can go say, okay, I need three copies of the car twin or the music or whatever it is. So you can use it to actually create variations of data that you can preview directly in your design time and make sure that things work right. Like, okay, let me put some German here, let me put some tie there. And it could do that too. It's very, very flexible.
- [36:19]
Host (possibly a Dive Club host)
I know you're approaching the V1. Are we able to kind of shine a light on what you all are looking at upcoming to give people an idea of where you're headed?
- [36:28]
Luigi Rosso
So the biggest thing that's missing today from someone building their entire app in Rive, or their entire website or their entire any experience in Rive is a few small things. Not so small, but small in the scale of like the five years that we've been building.
- [36:43]
Host (possibly a Dive Club host)
Yeah, you guys have a different definition of small in timeline.
- [36:47]
Luigi Rosso
What is text input? So the ability to actually have a field where you input text into all the fundamentals for it are there. But there's a lot that goes into that that people don't realize. In fact, building our code editor in Rive was part of figuring all of this out. There's like having to select text, there's having to handle focus management and in our adverts, even multiple cursors with multiple people working together on a text field and all that. So we really want again, like we just include from first principles, fundamentals. Build a system that lets you build anything with it. And so that's one that's coming relatively soon this year. It'll be a big unlock. The other one is focus management which comes with it. But it's important not just for text, but also for accessibility. So the ability to use a keyboard to tab through and focus on the right thing and have a screen reader read back to you. This is a text box, this is a button, this is a headline and.
- [37:39]
Guido Rosso
That type of stuff.
- [37:39]
Rid (Dive Club host)
Stuff.
- [37:40]
Luigi Rosso
So that today is doable. With Rive, we have customers that are doing data binding Unlock the ability to do a lot of accessibility and expose it at runtime. But it requires a lot of manual work. In fact, I would say very few people are doing it because it's so much manual, especially across having to do it. If you're launching into the web and then you're doing on iOS and Android and Unity and Unreal, those are all different systems you have to expose it to. So that's actually the main reason we tell people not to build full websites. We have had customers that were like, I just want to build my entire website. So you guys added scrolling virtualized. Scrolling virtualized means that like you can have like a thousand items in it and it only renders what's on the screen. So it'll still be really formant. There's like potentially an infinite amount of items in there. Like, we've done a lot of work that enables all these like use cases that are real and necessary to be able to build full experiences. But we felt back saying like, yeah, you don't really want to build a full site yet because you're going to miss out on, you know, screen reader support and also the ability for, you know, a search engine or any discoverability.
- [38:34]
Guido Rosso
Yeah.
- [38:35]
Luigi Rosso
To crawl it and read the content.
- [38:37]
Guido Rosso
One big thing that is under the scripting umbrella that hasn't been fully baked yet is the ability to use pure and to write purely edit time scripts. And that means the ability to not only extend the editor by adding like the shapes and things like Guido was talking about, I want to make a squircle, I want to make a procedural boil effect on all my paths. Great. But what if I want really nice controls over it? Or what if I want to do. What if I want to add illustration support to rive so that I can draw and animate those drawings myself directly. I could write a tool that does that. That's a big part of scripting that we're working on right now that isn't available yet. Because again, we went for the hard thing first. We want scripts that carry through to runtime. But you can absolutely imagine that everything you can do at runtime you could also do at edit time. And it helps you create, I don't know, do things a very specific way. Design things your own way, create a level editor, whatever it is.
- [39:33]
Luigi Rosso
I mean, the example of one of our team members just did earlier this week was he built this feature that is a perfect example of what we would want to build with the scripting system, which is describing right now, which is only an edit time feature. Instead of something that we ship out to everybody. And that's this ability to basically like motion capture your face while you're in rive and have that draw keys or save keys for like a specific set of bones that you've connected. So you like basically say, hey, this is my left eye, my right eye, my mouth, my nose and all that. And this is the way Duolingo, by the way, animates their characters. And we have mesh deformations that deform the vector shapes or the raster images, which is how you get this really 3D looking deformations, but they go and manually move those bones. Like really talented animators today go and do that and position the mouth and the eyes and everything to get these really expressive things. Someone might want to just act it out themselves and be like, here's my smile, here's my frown. And it just capture this, capture that. And so you'll be able to make that a script that is available at edit time that saves those keys for you, but that not everybody wants. Like, not every, you know, some card company might not need that for their editor and they don't want to have that installed. So yeah, this, it's, it's really most akin maybe to Figma's plugin model, what we're talking about here, but it's got the ability to do a whole lot of really cool rendering stuff and to.
- [40:53]
Guido Rosso
Actually ship at runtime and support the runtime.
- [40:55]
Host (possibly a Dive Club host)
Yeah, I came into this conversation, I had Rive like in a box, you know, and then you kind of really significantly grew the box.
- [41:02]
Rid (Dive Club host)
And I'm like, okay, I think I.
- [41:03]
Host (possibly a Dive Club host)
Get it now, I get it. And then right at the end of the conversation you're like, oh yeah, and you can use our scripting engine to build literally any tool to create literally anything. And you're just like, oh, and we.
- [41:12]
Guido Rosso
Haven'T even talked about 3D. We'll save that for another one.
- [41:16]
Host (possibly a Dive Club host)
I, I yeah, I was wondering 3D.
- [41:18]
Luigi Rosso
And video are, I think, the two biggest things. Like if you were looking at after V1, what are the things that like, customers might most want? I think 3D video direct publish. You know, once you can build an entire app in Rive or game in Rive, you know, publish it directly to the iOS App Store, publish it directly to Steam, publish it directly to wherever those are some of the things like you can imagine where it's headed, you.
- [41:42]
Host (possibly a Dive Club host)
Know, in a world where so much of, I don't know, so much of design, a lot of it kind of is feeling homogenized in a way that's like, I get it, you know, but there's a very real impact of AI where the floor is being raised to a point where like things are kind of feeling a little bit the same and you all are over here just doing something that really kind of just blows the roof off of what you can accomplish as a creative and as somebody who just wants to like get their hands dirty and make things. And so I am genuinely rooting for Rive and I appreciate you coming on today and sharing a little about. Yeah, about the vision, you know, like this is. You're going to make software in general a heck of a lot more creative. And I'm in full support of this.
- [42:21]
Luigi Rosso
That that's been entirely the goal. There's, there's a lot of other business reasons why people pick Rive. Like it's faster to build stuff with it, it's cheaper, we don't have to code freeze@XY date. But the number one reason is that you can just build stuff with it that you can't with anything else. And that's, that's the number one reason why Luigi and I started building it and why we care about it is that you can't do bone and skeletal deformations that also interact with UI in any other tool. There's a be you could try it just be a lot of effort and that's what we want to enable these really creative experiences that you can't build with another tool.
- [42:56]
Rid (Dive Club host)
Before I let you go, I want to take just one minute to run you through my favorite products because I'm constantly asked what's in my stack. Framer is how I build websites. Genway is how I do research. Granola is how I take notes during crit Jitter is how I animated my designs. Lovable is how I build my ideas in code. Mobbing is how I find design inspiration. Paper is how I design like a creative. And Raycast is my shortcut every step of the way. Now I've hand selected these companies so that I can do these episodes full time. So by far the number one way to support the show is to check them out. You can find the full list at Dive Club Partners.