Paul: Alrighty. Hi there and welcome to PodRocket. I'm your host, Paul. And today we have Matton and Miles Ingram with us. And Matton is a product designer. He's a CSS geek. He loves designing things and creating products and engineering. And miles is an everything engineer, because I was asking Miles, "What do you do?" He's like, "Oh, I do robotics." I do all sorts of stuff. So they both love front end. We're going to talk about front end today. We're going to talk about AnimXYZ. So let's roll right into it. And talk about what is AnimXYZ? Who created it? You guys created together? Mattan: Yeah, we created it together. We're brothers and we've worked together on side projects for many years. And through those side projects, we realized that we needed to write a lot of animations. And so that eventually led to AnimXYZ. And what it is, it's a CSS animation toolkit that it lets you create and compose key frame animations using Tailwind-like utilities that are all powered by CSS variables. And it lets you make the animation that you want without having to worry about boiler plate code or tons of key frame animations or custom CSS. Paul: Right on. So it's like an ergonomic way for people to approach animations. It sounds like it's very native. It's in CSS. There's nothing too crazy going on here, right? Miles: Yeah. I think we try to avoid JavaScript as much as possible because there's so many incredibly powerful web capabilities before even JavaScript. HTML and CSS have so much power behind them, especially now. It's really just ... yeah, I feel like the last couple years CSS has just really blown up and it's capabilities. And so don't have to wait for JavaScript to load. You can just ... the CSS runs right at the start and you get to see those animations as soon as possible, right on the GPU, no performance problems. Paul: CSS uses the GPU, right? I feel like that's a topic we haven't really delved in too much, at least here on the podcast or with guests. So do you really ... do you make special use of the GPU in some way or just what's natively built in? Mattan: We just try to follow animation best practices that we've learned, where we primarily just offer things like opacity and transforms as the built in animations. You can of course add more to that on top of that. But any CSS animation that uses just capacity or a transform will be as performing as possible because the CPU can just move that image around and change its capacity quite easily ... the GPU, rather. Paul: Gotcha. Okay. So it's just best practices, making sure you're using the right types of functions in the right spots. Gotcha. Mattan: Yeah. It's a very performance-first library. And I think that in order to do that, we had to use CSS. JavaScript is just not going to be as performant almost all the time. Maybe there's some edge cases, but almost all the time CSS is going to be the most performant way to do an animation. Mattan: And it makes it more approachable too, for any dev that maybe is new to JavaScript. This is still something that anyone who knows HTML and CSS can use. You don't need React or View, though it makes it easier if you want to use those. But it's just something you can drop in and add a few utility classes, like anyone who uses Tailwind knows, and it will work right out of the box. Paul: Oh yeah. I mean, it's great to be free of the ball and chain of JavaScript. It's great. It's the English of the programming world. But oh man, it's really nice to have ... it's like a free library it almost feels like. It's a good feeling. Miles: That's always been the holy grail of programming, is to be able to write plain English and just have something happen. And so we wanted to ... it's only in the animation space. It's not for all programming. There's no crazy logic. But in that space we wanted to make it feel kind of like you're just writing it out in words. Paul: So, all right. We learned a little bit about the basis of what AnimXYZ is. Let's like circle back for a sec because we jumped right into it, And I think it's really cool that you guys are brothers and you made this product. So you guys get into programming ... or into this field and making something together? Because that's a whole other step, like yeah, let's team up and let's actually do it. Miles: So many layers. Mattan: Yeah. I started out studying traditional design in school and I tried to do a self-determined human computer interaction major and took psychology and communication design and all that stuff. And funny enough, don't use pretty much any of that in my day to day real life. Almost everything I learned on the job. And what I was doing was working in startups for the last decade, starting out with more typical marketing content and then just more and more web stuff kept popping up and I realized, "Wow, I really need to understand this media that I'm designing for." And just over the years accidentally learned HTML and CSS and realized how much I loved it. And now that's my ... I'm a web designer front and center. Paul: That's a whole new definition of a happy accident. Mattan: Yeah. And I mean, in terms of working together, we've always been friends in terms of we have a close relationship in terms of our interests and a lot of overlapping and things in terms of what we like to talk about philosophically and practically and this and that. And in our separate work, we kept running into the same problems, the same frustrations, technically, culturally, things like that, and it made us realize that we want to work together because we share a lot of philosophy on how things should be built and designed and things like that. Miles: Yeah. I feel like our background started pretty separate and just converged. I don't know whether that was because we were in constant communication as brothers living under the same roof, but also just our interests align and have lined for a long time. And in terms of the core things that we like to do, which is solve problems and programming is great at doing that. Mattan: And we've also discovered ... we have our fights as brothers, but we discovered we're quite good at managing them and turning them into constructive conversations. Even if at first, sometimes it's like, "Ah," and then it turns out that actually we're really digging down to what is the core issue that we're trying to solve? And that could be super useful. Paul: Yeah. I mean, everybody's going to get in arguments when you're making something new. And I guess if you have those communication skills built up, it's a huge advantage. It puts you at an advantage because you can navigate through those problems faster than a new team. So I mean, that's cool. So you got together, you identified this problem and you started working on it. Was AnimXYZ the solution to that first problem? Or was that ... you guys started working together, you primed your pumps and then ... Miles: Yeah, so we were actually working on another project called You Heard, which was this project that was kind of for event invitations, RSVPs. And we were creating animations for this. And we had this kind of extensive list of keyframe animations that we copied from every project we work on to the next one. And we'd only use a few of those, but then we'd have to tweak them, maybe change the distance, the animation mood for the specific context, or change the amount of fade or things like that. And actually I think Matton originally was just like, "Why don't we use CSS variables? They're new in the CSS space. Why don't we try to make them a little bit customizable by adding a CSS variable maybe for the distance?" Miles: And so we did that and we're like, "Oh, that works beautifully." Now we cut this keyframe animations that we use in half, we made them very customizable. And then we thought about it together and we were like, "We can just go all the way with this. Why don't we make everything CSS variables, make the entire thing customizable, the entire thing composable?" Miles: And unlike some other things, it just worked right off the bat. It was kind of beautiful to do because it was just coming together day by day really quickly. And then of course we decided let's make this a full fledged thing, let's build this documentation site and became a whole project together. Mattan: And actually I think that's the way the best things work out, is that it's not like we had the idea fully formed from the get go. It was started out as I have way too much code here that is like ... 90% of it is identical, just fades with a X direction or a Y direction or a Z direction, and then also one for each distance. So I had one for small motion, a large motion, a hundred percent motion. And it was just all this duplicate code. But that's the thing, the seed of it was just that, let's reduce this code a bit and make it a little more customizable. Mattan: And then it dawned on us that was just like, you can take that so much further. And I think Miles was really the one that realized that instead of just having a few customizable directions here, let's just stack the whole transform list of options with variables and you could pass in whatever you want. And that was the first step towards AnimXYZ. Stuff like the utilities and the fancy attribute stuff came later. But the key thing was the realization of the power of CSS variables. Paul: What's an example of a fancy attribute? Mattan: Well, not so much fancy in the sense that giving ... at first, it was just you have an element, you could target it with a CSS selector, and then you could put on a CSS variable and change the animation that would have. And then I think, Miles, you realized that, oh, why not, kind of Tailwind, just have the variables in selectors, a class that we could just pass in? Miles: Oh yeah. And I think for example, the real fancy stuff that you can get with AnimXYZ, the thing that is really fun to play around with is nesting. You can even add a single property or a single class on an element, and suddenly it's animating at the same time as its parent elements are animating, and you can get these orchestrated animations without any JavaScript just by adding a few fancy attributes or classes. I mean, they're not really fancy, they're just regular classes, but they do fancy things on the child elements. Staggering where elements will appear after one another with a time between them. And that's just a single word you add in the utilities list. Paul: Enjoying the podcast? Consider hitting that follow button for more great episodes. Paul: So when you were talking a little bit at the beginning like, "Oh, we just wanted to make it English, you're just writing it," and I guess that's kind of one of the big tropes of AnimXYZ. It's like, it's very approachable. So what level approachable is it? Can we talk in English to it? How did you engineer it to get as close to that as possible and what prompted you to build it in that way? Mattan: Well, it definitely gives me an idea for machine learning version of AnimXYZ in the future. You can just describe anything. Miles: Well, that's be for all coding, right? Mattan: Well, I think if you look at some of the existing animation libraries out there, particularly the CSS ones, you're given very explicit predefined animations, like bounce or fade in left large. And those are plain English, but they're a whole sentence just given to you. And you can only use that whole sentence and it might not be as subtle or as exaggerated or precise as you want it to be. And so we wanted to create an alphabet or a dictionary of animation words that you can then turn into a sentence yourself. So instead of that bounce or that fade in up left being one word, you can describe it as fade, up, left, and those are separate words. And if you just take one out, you can tweak it. You can add different numbers on them to change the intensity. It makes it a little bit more just describing the animation instead of just picking and choosing from predefined ones. Paul: So it's like all the other frameworks are looping softwares and you're just a sampler. Mattan: That's an awesome way of putting it actually. I've never thought of it that way, but I like that metaphor. It's a great metaphor. Paul: Okay. I feel very powerful. And you can just kind of chain them onto each other and it becomes one statement that produces ... Miles: Yeah, absolutely. You can chain them. You can then ... let's say you like it, but you want it to move just a little bit less from the left and maybe slightly from up. You can add up in, tweak the value that's at the end of left. So maybe you had left 50% before. You can change it to left 25%. And you don't have to go to the docs and look up which exact sentence you want to pull out, and instead you can just tweak those individual words to compose a completely new sentence. I mean, we could probably calculate how many permutations of combinations of utilities there are, and it would just be insane. It would be a huge number. Mattan: There are definitely some nuances in when you're picking utility names ... like we used to have one called flip down, and is that the top of the item flipping down, or is it the bottom flipping back? There's ... different people might interpret the same word differently. And so we definitely had a few debates and discussions over what's the most default assumption you make when you hear a particular animation keyword? Miles: Those are the downsides of going into plain English, is like, do you use rotate Z, because who can immediately ... very few people were immediately visualize what rotate Z means, which is a vertical flip. Or do you use flip down or flip up? Do you use clockwise, counterclockwise? All these are options when you're dealing with things, which one is the most approachable. And I think the answer is nuanced. It depends on the person. Mattan: And for example, we did go with rotate left and instead of clockwise and counterclockwise, because it's shorter write, and we found that most people did assume that it meant the top part of the item rotating left or right, even though the bottom rotates the opposite direction. So we found there were some sane assumptions there, yeah. Paul: Yeah. I think discussions like this really make me think about if I didn't have English as a first language, these types of things would be very challenging. It can be incredibly nuanced, especially when you're ... there's some very high level libraries that use language like this and you have to interpret and really understand what's going on. Paul: So is this sampled approach, really being able to compose things, is this something that you think is unique to AnimXYZ? If there are new developers out here who are like, "I want a CSS-only animation framework." Is this one of the things that we would broadcast them and say, "This is powerful, it's unique to our framework?" And if yes or no regardless, what's maybe something else that you're particularly proud of that you're able to build into this framework? Miles: I think definitely when we built it was absolutely the first CSS animation library that did this kind of composable utility approach. Mattan: I think Tailwind has it now. Miles: I think Tailwind has some ways of doing transitions by combining their utilities. It feels a little less ergonomic, but I haven't used it much, so I couldn't say exactly how it works. But yeah, I mean, I think that the thing that we're really ... well, at least I'm really proud of is how ergonomic we were able to make it using these words, and how oftentimes we would find ourselves tweaking animations in these tiny little ways that just worked beautifully right when we tried it. We didn't have to check anything and make sure we were using the right words or whatever and the right utilities. And yeah, I don't know, and the nesting and the staggering, all of it just flows. I don't know. Mattan: And I think one thing that I also am proud of with AnimXYZ that it's I think one of the most approachable CSS-only animation frameworks, the only composable one beyond maybe Tailwind, but also it doesn't limit you. So tailwind has a few I think transition keywords it gives you, but they're not using the full transform stack that we provide, meaning any animation that you want to do that can be done with CSS keyframes, AnimXYZ can do. For some more complex and advanced stuff, you might have to tweak it a little bit further, but out of the box, we provide every transform and access to more complex things if you want, which I'm not sure any other library can promise outside of the JavaScript ones. Miles: Yeah. I mean, we definitely do that with transforms and opacities. I have to clarify by saying that we don't do color animations or all the other CSS properties, but we allow you to use your own keyframes to override the key frames that we use so that you can still use the duration and delay and stagger and all those other help or utilities with your own key frames if you want to do a very complicated one that involves box shadow transitions and who knows, all the other stuff. Mattan: And I think you actually bring up something there that we didn't mention is that beyond just the transforms and animations that you're doing, all the stagger, we have reverse stagger. We have kind of quality of life things where it's oftentimes this more complicated nth child selectors you're writing to try and have that happen and we realize we can save your time doing that. You just describe the stagger you want and it'll happen instead of having to go look up a bunch of CSS tricks articles to figure out how to write those nth child perfectly. Mattan: And I think there's a couple more. We also provide an absolute modifier so that the animation happens in a position in absolute space instead of the default one. Miles: Don't forget to mention that we have really cool docs. Mattan: Yes. It's fun. Miles: You want to have fun when you're looking up how to do something and learning a new tool. If it's not fun, you're going to lose interest fast. Paul: I think great docs are one of the paramount things of the success of any technology you might scoop up online. I mean, there are some GCP articles that are just so horribly written, I never ... I was like, "I'm using AWS. I can't even deal with this. I'm moving on." Paul: So that's really encouraging to hear about, especially in the CSS. One thing that gets me is coming from the back end space with the front end space is you guys know everything about everything. And if you're coming into web, I feel like I read articles and they will throw around terms sometime where I'm just like, "I am so disoriented and I really need ... let's start from ground zero documentation." And there are some frameworks out there that provide that. And that's why I've used them. Like React, they have phenomenal docs. So if people want to find these docs, is it just on the AnimXYZ website? Is that where we should point them to? Mattan: Yeah. AnimXYZ.com. There's a documentation link at the top, or just write /docs and it'll take you straight there. Miles: Or if you're one of those people that wants to go onto the source code to get a link and you can dive in. Mattan: And then we always encourage people that if something isn't clear there, please ping us in an issue or a GitHub discussion. And we really love to get that kind of feedback to improve the wording. I mean, we rewrote some of these doc sections like three or four times just to try and get that clarity. Miles: It's really hard to figure out how to describe something to someone when you built it. You know everything about the tool, so you're like, "How would I feel coming into this without any knowledge?" So we asked a few people and we've gotten some feedback, but definitely would love any additional feedback on the wording and confusion that may come from certain parts. Mattan: And we were blown away by the response actually. We're eight stars away from 2k stars on GitHub, and we've never made anything popular like that. So it was super amazing to see that something that saved us so much time and was so fun to use resonated with other devs as well. Miles: That's a great feeling. Probably the biggest reward of open source is just seeing people use your tool. Paul: Yeah, and celebrate it. And so are people actively contributing right now too? Mattan: I mean, there are definitely some people active in the issues and discussions. And one of my favorite thing to see is someone else solving a problem for someone else in the community without us even having to contribute. But in terms of directly code or docs, not so much. Miles: No, not so much. I think that one thing I see this often with CSS frameworks too, or CSS libraries, is that CSS just ... when it works, it just will continue to work. That's one of the things that's very nice about using CSS, is that once it's solid, it just kind of will stay solid. And there might be better ways of writing it in the future, new tricks come out in CSS that you can change a more complex wording to a simpler one or make it more efficient. But that's something that's really nice about working with CSS, is that it might be hard to get something working, but once it's working, it just kind of will work forever. Mattan: Although we did come across two web kit bugs that we submitted and the web kit team was fantastic about solving them. And so it's really cool to see that we've also maybe contributed to the development of Safari and other web kit based browsers fixing some of the animation bugs there. Emily: It's Emily again, producer for PodRocket, and I want to talk to you. Yeah, you, the person who's listening, but won't stop talking about your new favorite front end framework to your friends, even though they don't want to hear about it anymore. Emily: Well, I do want to hear about it, because you are really important to us as a listener. So what do you think of PodRocket? What do you like best? What do you absolutely hate? What's the one thing in the entire world that you want to hear about? Edge computing? Weird little component libraries? How to become a productive developer when your WiFi's out? I don't know. And that's the point. If you get in contact with us, you can rant about how we haven't had your favorite dev advocate on or tell us we're doing great, whatever. And if you do, we'll give you a $25 gift card. That's pretty sweet, right? So reach out to us. Links are in the description. $25 gift card. Paul: So if people wanted to take your AnimXYZ framework and use it in React today, what's their first step? Miles: I would say, as usual, the first step is to check out the docs and go to the section that describes the installation. But it's really as simple as doing the correct imports of the library. We have an @AnimXYZ/react, And then you also import the core library, which is the CSS. And then you use the components that it provides for React. View is quite similar, although view uses a plugin system, which allows you to not have to import the components everywhere. Miles: But yeah, the components that we provide are kind of quality of life improvement components that they basically add those classes when elements are entering the page and add the correct classes when they're leaving the page to do the animations that are running in CSS. So it really is just adding classes so that the CSS runs when the elements appear and disappear. And the View one is the same. We actually ran into some complexity trying to build a library for Svelte because we couldn't find a way to do that as easily with Svelte. Mattan: Yeah. Svelte animations don't run the same way as View and React ones do. So yeah, we haven't figured out how to do that yet, but we would love to have an AnimXYZ be even more framework agnostic in the future. Miles: Great opportunity for someone who wants to contribute. Mattan: There you go. Miles: If you could figure out how to get the same type of View or React transition group ergonomics with a Svelte component, that would be awesome. We'd love to add that. We will merge that full request in a heartbeat. Mattan: And I think something that was important to us was making the React and View developer experience as similar as possible to the most common ones people already have with View and React. So our components wrap around the native built in view transition components, and then the React one we use, the React transition group. Miles: Also the library. Mattan: ... library, which yeah, it's probably the most popular, React, just basic item and list transition ones. And so the experience is very similar to what people are already familiar with in those libraries with a couple of nice upgrades that we provided to make it even easier to use. Paul: Right on. So visit the docs. And it sounds like it's very pluggable to how anybody would be used to using React. Right? Awesome. Mattan: Exactly. If you have a list of items you're going to animate in, you just wrap it in the XYZ transition group component and pop on XYZ attribute, describing what you want and maybe a stagger on there, and it's going to work out of the box. Yeah. Paul: One thing about the Javascript animation libraries that I've used, even though they are really powerful, they can get messy sometimes to React in terms of who has control and how things are getting passed around. So if it's that easy to animate something that sounds like very enticing, because you can just go try it out in an afternoon. Just really easy. Miles: Oh, we also have some code sandbox links that will build you a little code sandbox with it set up so you can play with it right away. Paul: Oh, that's awesome. Miles: Yeah. That and the React and View sections of the docs, there's some links to examples and templates that you can use. Paul: So you have super docs. Miles: We like to think so, but there's always room for improvement. I think the wording is something that we'd love to get feedback on, especially. Mattan: But also I think what was so important about this and something I encouraged anyone working on open source to do was have fun with it. We kept working so much in the docs and adding so much detail because it was actually really enjoyable. We weren't just writing some plain mark down and putting it into a prebuilt doc generator. We were building the docs we wanted to use and that made it ... and that we also had the chance to put in little experiments and fun design details and stuff. If you get a chance, there's a little 3D cube on the site, and if you click on it, you'll get this fun effect that we call the x-ray effect and it lets you see all the XYZ attributes on each of the elements in the docs and the page that are being used behind the scenes. Mattan: And that's all CSS-powered. I mean, my brother made a genius little animation there and using the XYZ attribute and having that be the content of an after element. And it's just such a clever way to have this cool effect as well as being helpful to the docs and the users and being CSS only. It was just a lot of fun. Paul: Yeah. Highly interactive. You can see it right there. That's neat. Click the little cube. Paul: What's one of the ... I mean, sounds pretty cool already, but what's something crazy that somebody built? I've seen crazy stuff built in CSS. So I wonder if there's anything you've seen a user build that was very impressive or you were like, "Wow, they did that with our stuff? That's pretty cool." Mattan: That's a good question. I actually haven't checked some of the recent usage of AnimXYZ. I mean we see the MPM stats going up, but it's hard to tell which ones are the biggest projects. So mostly the usage we've seen has been kind of as expected landing page animations as you scroll or as things load. And we loved the example and the log rocket blog post in there. That's a perfect example of how it could be used. Miles: I think I saw someone ... I don't remember exactly the context. Someone used one of those libraries that splits a sentence into individual letters and then added AnimXYZ properties onto them so that they animated so they made a letter by letter animation where they all kind of stagger in and flow in. Paul: That's awesome. Miles: It was a cool kind of combination of our library with another library that allows you to do letter by letter stuff. I thought it was pretty nifty. Mattan: I think there's a great opportunity with AnimXYZ to do art animation, CSS art. I should play around with this a bit, but just generate a hundred elements on the page and just use our stagger and nesting and overrides and inheritance stuff. I think you could get some really cool cascading transforms and pulsating diamonds and things like that. Paul: What about ... have you guys watched Three Blue, One Brown? Mattan: Oh yeah. Love that. Paul: Could you do something with his framework with AnimXYZ to animate a little video and explain something? Miles: His name is Grant, right? Paul: Yeah. Grant. Miles: I mean, his stuff is just insanely beautiful and intricate. I think it would be hard to do graph-based animations. I mean, you can do linestroke animations. Mattan: The dash offset on an SVG stroke to draw in something you could do and chunks of SVG or chunks of presentation for a video could be animated in. But the more complex math animations where the actual equation line is evolving over time or turning into a spiral, that would definitely be beyond AnimXYZ's abilities. Paul: Right. Well, it's not really aimed at that, I guess. It's more like ... Mattan: I mean, you can do 3D transforms and it's ... stuff that people do with CSS 3D is pretty amazing. So I would love to see if someone use it for a CSS game or something. That'd be fun. Paul: Or what if somebody wanted to ... I want to make a video about networking and I have a computer here and a computer there and I want to show the pack that's going boo, boo, boo, boo, boo, between them like this. That's something AnimXYZ could excel at, right? Because it's just like a repeating ... Mattan: Yeah. I mean, you just select that group of items and just do left 100%. Miles: Iterate infinite. Mattan: And with the fade on it ... actually it'd be interesting if you could pulse the fading, I'm not going to ... maybe the infinite iteration would do that. But yes, you could do some basic diagram animations for sure. Paul: Nice. That's what I'm trying to talk about, diagram animations. Okay. Miles: One of the kind of future directions that we want to go is to ... similar to what Tailwind did do a Just-In-Time compiler, which just means that you aren't even only limited to the utilities that we provide, you could basically create your own utilities by using words. And so the things that would allow could maybe even go beyond what we already allow and let you do different timings for different parts of animations that are composed and maybe even animation chaining, which currently is limited to only JavaScript. Miles: So if you want to animation to occur the moment another animation finishes and then another one to occur the moment that one finishes, there really is no native CSS way of doing that because that has to rely on JavaScript events ... unless you use a Just-In-Time compiler, that could figure out how long the animation would take and then have a delay for the next animation that takes that long. So there's some really crazy stuff you could do if you use a Just-In-Time compiler. Mattan: Also I think one of my number one CSS feature requests is to be able to set variables using an attribute on an element so you don't have to write a whole inline style. Because with our utilities, you can tweak the left or the rotate amount by 1, 2, 3, 4, 5 or 25, 50, 75%. But if you wanted to get that exact 64.5 picks value in there, you have to add a CSS variable. So it would be like --XYZ translate X. And so to add that to an element, you have to either have to add it in an inline style or you have to make a selector and edit separately, and it'll be super cool if Just-In-Time compiler or attributes that become variables would be just to edit in line with much less text. Paul: So you guys mentioned before we started the podcast that you're moving on to another project, something else you're working on. And this one's startup. Mattan: Mm-hmm. Paul: What's the name of the startup? Let's talk about it for a sec. Mattan: It's called Visible. You can check it out visible.page. And we're trying to build a tool that transforms your information from static text into actually useful powerful views. So anytime you're interacting with information that has dates, locations, media, numbers, usually it's just stuck in a Google Doc or maybe a spreadsheet. And we have all these powerful web tools like maps and calendars and things like that, that you use a half dozen different tools just to see the same information in all those places. Mattan: So what Visible's going to do is let you transform your information into a map, into a calendar, into slideshows, galleries, whatever is most appropriate for your information in one place and in it's shareable, multiplayer, fully live. So you can plan a family trip together or do your apartment hunt on there, or write down your recipes. And each different set of information will be viewable in the best way possible. Paul: Can you give an example of maybe a use case that you've wanted this for that you didn't find online and you were like, "All right, we're going to make it put these features in?" Miles: One for me is just remembering what my favorite thing to order is at various restaurants. And it's a kind of silly example, but in Google Maps, I have a few restaurants favorited, but all you get is this tiny little text box if you want to add notes and that's essentially it. And I want to remember what it looked like and add a few notes and when we last ordered it or something like that. And so what this tool does is I could write down the name of the restaurant, when I last ordered, put in a photo that I took last took of it, and now I have an ongoing log of my favorite restaurants and dishes that I can view through any of those angles, through a map, through a calendar, just the gallery of the images. Miles: Similarly, we've done apartment hunts before and we try to use Trello and you have all these columns, but then the map is somewhere else, And then you want to know what days you're going to go visit the open house and that's in your Google Calendar and you're trying to coordinate this with your housemates and it's just ... it's a mess. And so we feel like why is that information spread out all over the place? It should be here in one tool that becomes the lens for seeing any kind of information available to you. Paul: Because this kind of reminds me of Shift a little bit, but that's more of a personal, here's my messages and mail. This is more of a collab, using these modern APIs and technologies as a collaboration tool. Is that an accurate representation of what you're kind of aiming at? Miles: Yeah, absolutely. I think that imagine the power of Notion in terms of dealing with data and free text and rich text, but with a lot more flexibility in the views and being able to see things in so many more ways, including maps, including ... and in the future, we're going to be playing with data views where you'll get graphs. So let's say you have inline numeric data in your kind of documents or in your database. You'll be able to see that on the graphs. So one example is I like surfing, so I could record my surf sessions and write how high the waves were and how strong the wind was and then see a graph of my surf sessions over time, where on the map they were, what date they were on. And you'll be able to view that on a map, view it on a calendar, view the graphs of the surf height over time. And that's like ... it would just kind of enable all sorts of new ways of writing things down with rich data embedded into that content and ways of viewing that data. Paul: So it's like auto-indexing things as you're adding to this lake of stuff that belongs to you. And so I don't know if I'm going to make a graph of my surfing wave Heights in the future, but if I want to, it's indexed, it's there and it's ready. I don't have to go through my Google Docs and pull it up. I like that, because I want to write things down, but god, it takes so much time if I want to use the information later. Mattan: You have to think about which column in your spreadsheet's going in or you think about what metadata you're adding with. Ours, it's just text and the important stuff is pulled out of that text. Paul: Everybody's different. I don't mind using a lot of different services. I think personally that's a problem for some people and that's why I guess Shift exists. But for my personal side, being able to have everything indexed like this and be able to produce these rich visualizations that I might not even know exist yet sounds really enticing. Miles: Check it out at visible.page. We have an interactive demo there and you can sign up for our private beta, and we're really excited to see people check it out and hear what they have to say. Mattan: And we use AnimXYZ in it. Miles: Yeah, we got to add it to the AnimXYZ ... Paul: Well, there's a professional example. People can go check out if they want, go check out your new tool. All right, well Matton and Miles, thank you for your time. It was great talking about AnimXYZ. And just to reiterate one more time at the end, if people want to go check it out, you have great docs. Go check out the AnimXYZ docs. And if they want to go learn more about your startup, where should they go? Miles: Visible.page. Paul: Visible.page. Okay. Gotcha. Thanks again for coming on, guys. Miles: Thanks so much. Mattan: Thanks so much. It's a pleasure. Emily: Hey, this is Emily, one of the producers for PodRocket. I'm so glad you're enjoying this episode. You probably hear this from lots of other podcasts, but we really do appreciate our listeners. Without you, there would be no podcast. And because of that, it would really help if you could follow us on Apple Podcasts so we can continue to bring you conversations with great devs like Evan Yu and Rich Harris. In return, we'll send you some awesome PodRocket stickers. So check out the show notes on this episode and follow the link to claim your stickers as a small thanks for following us on Apple Podcasts.