I got to talk with Amit Sheen this week about his journey into creative coding. Even his early work is incredibly interesting and recent work is downright stunning. Now he’s entering a phase of sharing what he knows with workshops like Pushing CSS to the Limit. Here’s a list of Pens we talk about in the podcast (mostly):
- Bubbling – https://codepen.io/amit_sheen/pen/BxQqxz
- Turning pages – https://codepen.io/amit_sheen/pen/WNweryv
- Bouncing off the walls – https://codepen.io/amit_sheen/pen/abBgWvJ
- House of CSS cards – https://codepen.io/amit_sheen/pen/QWGjRKR
- FlipBoxes – https://codepen.io/amit_sheen/pen/YzQoMxR
- RadioPoles – https://codepen.io/amit_sheen/pen/RwZwGVQ
- 3D Wobbly Disco – https://codepen.io/amit_sheen/pen/LYLQQpW4D
- 4D SimplexNoise – https://codepen.io/amit_sheen/pen/XWgVKxO
- Typing effect – https://codepen.io/amit_sheen/pen/YzZYoMV
- Text morphing – https://codepen.io/amit_sheen/pen/xxqYzvm
- csStickman – https://codepen.io/amit_sheen/pen/abLPdoQ
- The Lonely Claw – https://codepen.io/amit_sheen/pen/yLzWVYo
- Newton’s CSS cradle – https://codepen.io/amit_sheen/pen/XWMXwvJ
- Table tenniCSS – https://codepen.io/amit_sheen/pen/PobQjMX
Time Jumps
Sponsor: Retool
Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.
Thousands of teams at companies like Amazon, DoorDash, Peloton, and Brex collaborate around custom-built Retool apps to solve internal workflows. To learn more, visit retool.com.
Transcript
[Radio channel adjustment]
Announcer: Today, on CodePen Radio.
Chris Coyier: Hello, everyone. Time for another CodePen Radio. This is 356 with a special guest that I am so stoked to have on because his creativity knows no bounds. I'm sure you've seen his work and, if you haven't, I implore you to go check it out. We'll get into all that. It's Amit Sheen. Hi, Amit. How ya doin'?
Amit Sheen: I'm fine. Thank you. Thank you for having me. How are you, Chris?
Chris: Fantastic! Thank you. We had Louis on the other week, and he did this thing where he's like, "I'm going to kind of give you a timeline of Pens that were important to me," or mattered for X, Y, and Z reason.
I kind of just threw it out to you, too, thinking maybe you'd - I don't know - have that same kind of idea or pick out ones. I could pick your Pens all day. That's easy.
Amit: [Laughter]
Chris: By why not pick ones that you know that we could talk about? So, for those following along, it might be an episode you want to listen to at your computer, almost, so you can click open the Pens and see what we're talking about. But that's okay if you can't. It's going to be interesting anyway.
You did that for me. That's great. The first one you list here really only has a date stamp of 2018 on it, which to me just doesn't feel that long ago. Is that early days of CSS for you, or when did you start?
Amit: Yeah. First of all, it's very hard to pick my favorite Pen, as I told you.
Chris: Right.
Amit: I have picked something from the timelines and something from different areas that I've explored over the years with CSS because most of the things I do, most of the Pens I do is like I'm trying to explore a specific subject, if it's text, colors, or something like that. I'm trying to explore it through animations.
Chris: Right.
Amit: Actually, the first Pen that I listed, the one that started it all, it was a CodePen Challenge of bubbling.
Chris: Was it really?
Amit: Yeah.
Chris: That's great.
Amit: It's a CodePen Challenge. I actually remember it was a GreenSock sponsored challenge, and I actually won the challenge. I won a year subscription to GreenSock.
Chris: Oh, nice.
Amit: It was the first week that I ever published because the way to submit this challenge to CodePen was to tag CodePen in Twitter. I said, "Okay." I did have a Twitter account, but I never tweeted anything. I said, "Okay. Let's tweet it over there," and I tagged CodePen.
By the way, to this day, this Pen only got one like of GreenSock. GreenSock gave it one like.
Chris: Oh...
Amit: That's it. But it made me want to do more, so I did do a lot of challenges later on over the years, a bit less in the last couple of months but I'm doing other things, obviously.
Chris: Yeah, you're a busy man. You've got a new Smashing Magazine workshop. Yeah, congrats on all that.
Amit: Yeah.
Chris: No, that's great.
Amit: The workshop is actually like I finally felt that I'm ready. After all the things that I've done and all the things that I explored, I understand over the years, now I'm finally ready to pass them over.
I didn't want to do a course, like an online course, because online courses are not always up-to-date. You need always to update them, and I wanted the live feeling. I wanted a workshop. I wanted a hands-on workshop, and the Smashing Magazine platform was just absolutely suitable for everything I needed.
Chris: Nice. You get students. You're talking to them, as you do.
Amit: Yeah.
Chris: That's what a workshop is, right? [Laughter]
Amit: Yeah. It's live. You get feedback. You give exercises. You see the results, and you can answer questions in live mode. Yeah, so this works out much better. In my opinion, for what I believe in, I think it's better than just an online course.
Chris: Nice. Okay. Well, we'll put a link to that in the show notes, for sure. If we started at the top with your Pens, I think it'll be fun to talk about the idea behind the Pen but also the tech and see if I can learn something. This is like a mini-workshop where you get to teach me--[Laughter]
Amit: Yeah.
Chris: --some of your tricks. It's funny to think of this one that started it all, the bubbling Pen. It's literally in Canvas.
Amit: Yeah.
Chris: I think most of your work as--
Amit: CSS.
Chris: Yeah, really CSS and leaning in (in an amazing way) to, like, how is there no JavaScript at all happening here? What?!
Amit: Yeah, so--
Chris: But early days, it was Canvas, apparently.
Amit: Actually, I do a lot of -- to this day, I do a lot of Canvas. I do a lot of work with libraries like Three.js, but I don't normally upload them as Pens because I don't actually have anything new to say. But by working with CSS, I do explore and push the limits of CSS. At least I try to push the limits. Every Pen that I publish, it's not just, "Oh, it looks nice." It looks nice, but it actually explores something.
This Pen is a bit different because, as you said, it's all Canvas. That was my Canvas period. But in this Pen, I also explored how do you manipulate specific pixels inside of Canvas. If you go to the code, you could see it's not just uploading an image. I'm actually transferring the pixels into arrows and then do a lot of math manipulation on it and passing it back to the Canvas.
Chris: Yeah. Still, it's 95 lines one JavaScript, so it's not something -- you know, people could wrap their mind around it if they tried.
It's fascinating to me in that it's one thing to show some kind of randomized bubbles on the screen. That can be pleasant all by itself. But like many of your things, it takes it a step further. There's this text that it's revealing underneath, so you can't read all of the text all the time. You have to watch it for a while to kind of see what word is being revealed and stuff. It has a very kind of satisfying feel to it in that way.
Those were kind of early days, at least for your public CodePen career.
Amit: Yeah. That was really early days in my career. I had a CodePen before that, but it was really my early days.
Chris: Mm-hmm.
Amit: But yeah, again, I've done a lot -- I've tried a lot of things in that period of time until I focused on, oh, I can actually explore CSS and can give value back to the community with some CSS Pens and projects.
Chris: Maybe we'll go right to a huge one for you. I remember this was a massive Pen, many thousands of likes, which is pretty rare on CodePen--there are not a lot of Pens in that company--is one about turning pages. This is literally 100% CSS.
Amit: Yeah.
Chris: It's like a book laying flat, and you'd be looking down on it at a table. It has some perspective to it. Then the pages are kind of automatically turning in a very 3D kind of way. It looks like After Effects or Three.js or something. I mean it really, really does.
Amit: Yeah.
Chris: It's an incredible look. [Laughter] I think I get it to some degree in that, sure, it's CSS transforms and he must slice the pages into--
Amit: Exactly.
Chris: --vertical strips or something.
Amit: Exactly. Actually, this Pen got a lot of attention. I think it was the first Pen that I made that really exploded. I remember when people like you and Adam Argyle and Lynn Fisher gave it a like, and I'm like, "Oh, my God. People actually like things I'm doing with CSS." Yeah, so this was the first one that really got out there.
The general idea, exactly as you said, it's perspective with a lot of transforms. The images are sliced into vertical lines, seven lines for each page. It took me a long time to really fine-tune the math of exactly when the image transfers from one image to the next because, when the page flips, the H1 of the lines flips in a different time or in a different spot.
Chris: Oh, the timing was what made this difficult? Interesting.
Amit: Yeah, the fine-tuning of the timing really took me a long time. This is actually something that I'm saying every time that I'm speaking about animations that I'm making. I normally do rough numbers when I'm starting doing the animation just to get the general movement and then start the fine-tuning process. The fine-tuning process can take sometimes more time than the actual animation.
Chris: Interesting.
Amit: Yeah.
Chris: Yeah.
Amit: But I think I always said that -- it was a long time ago. It was like a year and a half ago, and I think it's time to do it again.
First of all, the pages need to flip on the other direction, obviously. Right now, they're flipping from left to right because that's the way I'm used to reading books.
Chris: Mm-hmm.
Amit: But it's supposed to be the other way around. Yeah, and I actually know that this Pen was implemented in several websites as like an image gallery.
Chris: Is that right? That's cool.
Amit: Yeah, and a couple of developers actually took this code, and I'm so happy that it happens - by the way - that somebody takes my code and says, "Okay, but I'm going to add buttons to it, and I'm going to add not five pages by six or seven pages," or make it dynamic or anything.
Chris: Mm-hmm.
Amit: I really like it when people take an idea that I made and build something on top of it. That's so satisfying. I know for a fact that the few developers who took this book and implemented them in their website.
Chris: That's great. Yeah. I mean I've done that. I haven't used this exact one, but sometimes when I'm thinking -- you know, like I have a books page on CSS-Tricks. I saw some example of a 3D-looking book that's more vertical looking. It just turns in 3D space a little bit. It was just pulled from somebody else's example and tweaked to kind of fit my needs. That's why CodePen gets the traffic that it gets. I think there are an awful lot of people out there.
You heard about the ones that told you or that you ran across or saw somehow, but I bet there are ten times more (people that just did it and didn't even say anything).
Amit: I hope so. If people out there actually did use some of my code that they got on CodePen, tell me about it. I'm not angry about it. I'm happy to hear about it.
Chris: Yeah.
Amit: That's why I'm doing everything. I do believe in open-source. I do believe in sharing code, sharing knowledge. That's what I do. Yeah, please tell me if I helped you with anything. It's just more fuel to keep going.
[Guitar music starts]
Chris: This episode of CodePen Radio is brought to you in part by Retool. It's retool.com.
Building internal tools from scratch - slow. It takes a lot of engineering time, resources that aren't going to your main product. A lot of small software businesses, they just build a couple, like the bare minimum of what they need, or they come up with some inefficient hack or a workaround for business processes that can be quite important, that probably deserve a little better than that.
Retool helps developers build internal tools faster, so you can focus on the software that you sell. It's like a complete UI component library, so you're building forms and tables and piecing together workflows as easy as kind of drag and dropping them together.
But the most important aspect is that it connects to basically any data source. It's offering app environments, permissions, single sign-on, and all that stuff out of the box. You can write your own JavaScript code to connect it all, if you absolutely have to. Otherwise, it generally just works.
With Retool, you can build user dashboards, database GUIs, CRUD apps, that kind of stuff that you're always building internally to mess with your own data because you have to. It's not user-facing stuff. It's internal tools, so you can build all this stuff without Googling around trying to find the best component library because you're not going to write one for yourself just for this. Avoid debugging dependencies and writing boilerplate stuff and all that.
Thousands of teams are already doing this: Amazon, DoorDash, Peloton, and Brex. They collaborate around custom-built Retool apps to solve internal workflows. Learn more. Visit them at retool.com.
[Guitar music ends]
Chris: Something about this, like the way that this is done, reminds me of your CSS stickman - or whatever - which is literally how a kid would draw a stickman: head on the top, a single line for the body, and simple lines for the arms. You actually made it not just stand there but animate in a walk and run. I saw this. You'd been talking about it on Frontend Horse yesterday for a minute.
Amit: Yeah. Yeah. Actually, this stickman Pen started as a conversation between me and a friend. He's a game designer. We talked about rigs, about creating characters.
I told him, "I need to build a rig with CSS," and he said, "You can build a rig with CSS." I said, "Oh, really?" [Laughter]
Chris: [Laughter] A rig? Is that like a model?
Amit: A rig is the skeleton of a digital character.
Chris: Okay.
Amit: Yeah, it's like the skeleton. It's like the connection between those two parts and how do you animate. I built a simple character. I thought about what is the most simple character I can build, which obviously was a stickman.
The thing is that once you have the skeleton -- Alex called it the meat around the skeleton -- it doesn't really matter what it is or how you do it once you have the skeleton itself. So, I did a pretty simple skeleton, just lines that are rotating around the center of the rig. It's not the most pretty outcome, but I think that, again, it proves a point. It explores a specific topic, and I think, "Okay, now I've made it walk. I've made it run. Now it can do anything else we want."
As you said, when I was at Frontend Horse, we built a stick horse with the exact same techniques - just because you can.
Chris: Thinking about animation, but also anatomy - in a way. I think of maybe the shin part of your leg. There's a certain animation to that.
Amit: Yeah.
Chris: Just looking at this, and not looking at the code, I could see maybe you animate -- you actually are animating the top part of the leg in its own unique way. Then the shin is actually a child element of the leg, and it's animated separately, but it just comes along for the ride of the parent animation as well. Right?
Amit: Exactly because when you think about how a skeleton is built, it's actually built exactly like the DOM. You start with the spine and, from the spine, it splits to the torso and the hip. Those split to the arms and the legs, and so on and so on. It starts with one main element and it's nested other elements. When you do it and then you do a position absolute to each one of them, you can position each one of them absolute to the parent element. Yeah.
Chris: Then when you do a transform on it, you'd have to make sure the transform-origin is at the joint.
Amit: Exactly. Yeah. This is one thing that we talk about on Alex's show that you need the transform to be exactly as you said, the joint. Yeah, but that's exactly what I did.
Chris: Now if you were to move the spine or something, you don't have to also animate the legs to move along with the spine because the legs are just a part of the spine.
Amit: Exactly. If each element was positioned fixed or positioned relative to the parent (to the container or something), then yeah; you need to position every element if you just moved one of them.
Chris: Mm-hmm.
Amit: But once they're all nested, it happens automatically. That's the nice part of working with CSS.
Chris: Right. That's what made me think of the turning pages. Is it true that each little strip is like a child of the strip before it?
Amit: Exactly.
Chris: It's a skeleton. It's just a very linear skeleton.
Amit: Exactly. If you want to take this example to the edge, (a week after the stickman) I did a Pen. I called it The Lonely Claw. It's a lot of elements, hundreds of elements, one nested in the other.
Also, the nice thing about CSS is the inheritance. If you give one of them the width of 80%, your tag is going to be 80%, and his child is going to 80% of the father and his child is going to be 80% of the father and so on. You can see it in the base of The Lonely Claw and on the fingers that just go the other way around.
Chris: I see. I see.
Amit: Yeah, so this nesting part is actually one of the things that I try to think about. But the thing that you mentioned before about the anatomy, I do think a lot about the movement, about how things should move in the way that it would look relatively real.
Chris: Natural? Yeah.
Amit: Natural is a better way to say it. You can see it in a lot of my Pens. Even in some things, like, do you have a link to Newton's CSS cradle? If I do have to pick one favorite, I think this one was one of the hardest ones.
Chris: That's it? Really, the Newton's cradle? People probably think of it as an office toy.
Amit: Yeah.
Chris: There are balls hanging down from two, and you pull one. It hits the rest of the balls and only one flies off the other side. It's supposed to be demonstrating -- yeah.
Amit: Yeah, but only one flies. But if you see the left one flies out, but the other takes a big backward. There are a lot of Newton's cradles--
Chris: Oh... I see. I see.
Amit: There are a lot of 2D Newton's cradles, even on CodePen. But I thought about, okay, how do I do it in 3D, and how do I do the marbles, the balls? I want them to look like marbles. I want them to reflect the floor. How do you do the movement of the marbles, and how do you make the lines that hold the balls to look like they're actually holding the ball, and to have them look thin but still visible from every direction?
Yeah, so there were a lot of small details that I really needed to crack, and I think this is one of the Pens that I felt most satisfied when it was finished. I was like, "Oh, yeah! Yeah. It looks like I imagined it."
Chris: That's great. I like that detail where, just because one ball goes flying in the other direction doesn't mean the others are absolutely stacked or stuck where they were. If they were, it might look a little bland or something, the movement of it.
Amit: Yeah, exactly. It wouldn't look the same, so that's why I've added the small details. Again, maybe probably if I do it today, after I learned a lot about working with perspective and manipulating elements, maybe I will do it a bit different.
Chris: Mm-hmm.
Amit: But again, it looks great and it was just like how do I correct these little things inside of this big animation.
Chris: Right. Right. Altogether, it really speaks a lot. Each of the marbles is different, too. They're not just all like, "Ooh, I got one marble looking right. Copy it five times." [Laughter]
Amit: Yeah.
Chris: Each of them are a bit different, and the wood grain is just very wood-like. Even though it still has that 3D model look to it, the wood just looks great, and it's sitting on this floor that's some kind of textured marble-looking stuff that just looks incredible.
There are a lot of details that have to come together to make this as satisfying as it is. Without the details, it could basically look like this but not be nearly as satisfying.
Amit: Even the shadows of the balls beneath them.
Chris: Mm-hmm.
Amit: Th balls that don't move a lot, it's not a problem. But the balls that fly away from the cradle, the shadows actually need to behave differently. Yeah, there were a lot of small details that make it look pretty real. Again, it doesn't really look real. It won't be in a Pixar movie. But as a CSS animation, I think it looks pretty good.
Chris: Yeah. Back to the claw for a moment, it's this three -- it has like a mouth almost, which is funny to think about.
Amit: Yeah.
Chris: I know you were thinking of the Little Shop of Horrors in it, which is very evocative, but you're thinking about how things move. You can really feel it when the mouth goes down to pick up the ball that it feels honest, like it really has a grip on the ball. Then it moves backward. There's nothing about this technology that means that animation would need to stop where it does. But as the plant leaned back -- plant, I call it -- the claw, I guess, leans back--
Amit: Yeah.
Chris: It feels like, ugh... You know, like it can't go back any further, which is totally artificial feeling that you had to code into it.
Amit: Exactly. Actually, thank you. Why did you say Little Shop of Horrors, because that was exactly my inspiration, but it doesn't really look like Audrey's plant from the Little Shop of Horrors.
Chris: No because Audrey has just an actual mouth and it has nothing to do with three claws or anything, but I get that it's a big thing that puts something in its mouth.
Amit: [Laughter] Yeah because that was absolutely my inspiration. That's why it has this little leaf. It's not exactly a leaf, but a little -- this entire plant....
Chris: Yeah, it has some organic feel to it. Yeah.
Amit: Yeah, and it's based on a lot of divs, a lot of single I's, and it looks like a killer plant or something like that.
Chris: [Laughter] Right, "The Lonely Claw." Wonderful. It's not like you're trying to make a faithful replica. It's just inspiration. That's what we try to get out on this show anyway. Fantastic.
Let's see. What haven't we talked about? One of them that you noted you said, "The one I made by mistake," which is of interest to me, this one also got a lot of attention. It's about a ball falling through space and kind of bouncing off of things. Yeah?
Amit: "Bouncing Off the Walls," I called it. Actually, we talk about CodePen Challenges. Way back, there was a CodePen Challenge called "Rise." That was the challenge. I made this ball that is bouncing up never-ending stairs.
Chris: Mm-hmm.
Amit: I made this Pen. It was great. After I made this Pen, I was certain that the next week's challenge was going to fall, so I've made this Pen.
Chris: You were ready to go? That's funny.
Amit: Yeah.
Chris: Mm-hmm.
Amit: But the next big challenge was not fall. It was something completely else, so I actually put this Pen aside. I didn't publish it. After three weeks later, I was like, "I've got nothing to publish, but I made this Pen a few weeks ago. Let's put it out there."
Once I put it out there, Kevin Powell had a video about it, and the front-end host did an article about it. Everybody tried to break it down to understand what happens, and it's not the most complicated Pen I did. Seriously, I did it, like, it would be something for next week.
Chris: [Laughter]
Amit: Yeah, it did get a lot of attention, and it looks great, I think.
Chris: I mean I'm here to tell you; you never know what's going to be popular, whether it's a Pen or a blog post or a workshop or whatever.
Amit: Yeah.
Chris: It is so hard to know. Yeah, sometimes the simpler ones--
Amit: So true. So true.
Chris: It's more about the idea here, and I think the idea here is just satisfying, especially because again there are little details that, if you didn't do them, probably would add up to much less interesting. I mean the camera is moving. The colors of the things that they bounce off, I'm sure they're not completely random, but have a random kind of feel to it. When the ball hits it, the little walls kind of collapse a little bit, like the ball has weight and has feeling.
Amit: Yeah.
Chris: You could have done this with all gray walls with no camera movement with no gravity or weight to the thing.
Amit: Yeah.
Chris: It'd still be kind of cool looking, but it just wouldn't have all the details to this. The more people I talk to on this show, the more I home in on that idea is that what makes these great Pens is a collection of little choices that add up to a beautiful whole.
Amit: Yeah. By the way, to this day, I have published hundreds of Pens, obviously, as you probably know. You have all the numbers. [Laughter]
But to this day, I have no idea what would get more likes and what would get less. I don't know, but I'm putting it out there for me. I'm not a content creator as a day job. I'm just putting it out there for fun, and some of them people like, some of them they like less, and it's okay.
Chris: Yeah. Yeah. There are some tricks. Although, I wonder how well they work for you or not. One of them that we've talked about with Marie before on the show because she has her own theories on what's the secret to success of a Pen.
[Laughter]
Chris: Still, it's not like we have all the answers. We just like to guess about it.
Amit: Get it published in January.
[Laughter]
Chris: Oh, yeah, to make the top 100 and all that. One of the cheat codes is to have some element of practicality to it. Whereas people might really like the falling ball, but they don't see their own work in it. They can't be like, "I could use this," necessarily. Sometimes when it's a button or a radio box or something, they're like, "Hmm... Maybe I could slip this in." You have one here with checkboxes that are [laughter] pretty out of this world.
Amit: Yeah, so one thing that I get a lot is, "Why do you use 3D animations in CSS, because it doesn't have any real -- they don't use it in the real world?"
I said, "Well, you can use it in the real world," so I did, a few months ago, flip boxes and radio buttons that are 3D. The flip box is just a check box that, when you click it, it flies up, turns on one degree, and lands back.
Chris: Yep.
Amit: It looks great and it's absolutely accessible. It's absolutely responsive. Yeah, you can use--
Chris: You can tab to them. They have focus states. You can hit the space bar to change them. Yep.
Amit: Of course. Of course. One thing that when we're doing inputs and real-world elements with 3D in CSS, you can absolutely still be responsive and still be accessible, and you should be responsive and accessible.
I did a YouTube play button. The button turns around. All kinds of things that you can actually do like info cards that you can click and they open up. All kinds of things that you can actually take and use in the real world.
Chris: Yep.
Amit: Because I think, again, you can do it, and now we're on the verge of the world of VR and AR and the metaverse is everywhere. We are going to see, I think, more and more 3D designs in our regular 2D screens.
Chris: That's interesting because we've had the technology for a while, but it's not the technology, you're saying, that's going to change the landscape. It's the fact that more people experience 3D because things like the Oculus 2 is more affordable and things like that.
Amit: Exactly because if you remember ten years ago (or more than ten years ago), the first days of the iPhone, all of the iPhone buttons had a depth to them.
Chris: Mm-hmm.
Amit: When you click on it, it looks like you clicked it.
Chris: Morphism. I remember.
Amit: Yeah, exactly. As time has gone by, we actually retreated back to more flat designs because they look better. But now that more and more people will experience 3D, it's not just 3D buttons. I'm talking about 3D menus and 3D layouts. Really build full websites with 3D.
We do have the technology, as you said, but we don't have the need right now. But I think that, more and more, we will see more and more designs that involve some sort of 3D in our elements.
Chris: Yeah.
Amit: I hope so.
Chris: I saw; it was a news item the other day. Igalia, which is this company that helps Web browsers implement things. I'm sure it's a bit complicated what they do, but they took over a browser they're now calling Wolvic for the metaverse, as it were.
It's like what is a Web browser like in VR? It's not straightforward. It's not as simple as just take a typical browser interface with tabs and stuff and just put it in VR. This is their opportunity to rethink what the browser experience is like. What is it like to have a back button and what are tabs like in VR? They get to reinvent that space a little bit. I'm sure whatever choices they make (assuming people like them), those ideas will make their way to websites themselves.
Amit: Exactly. Exactly. Yeah. This is exactly what I'm thinking of.
Chris: Hmm. Well, thank you for helping or for having that thought and having me lob onto it.
This is one of my favorites, which is funny because I wonder. I mean I guess you listed it in your favorites too, so here we go. But in CSS, there are filters, and they have a bunch of possibilities. Some of them are maybe less useful, like sepia or something. It's like, okay.
But then some of them are very useful like being able to blur something, so it's a blur function. Pretty cool. It turns out, which I guess I didn't even really realize, but they're animatable. You have these words that you're showing one at a time, and the animation starts blurring one of them and unblurring the word behind it. It ends up to be this incredibly satisfying morphing-like animation. You called it "CSS Morphing." It's so simple, but it just looks phenomenal.
Amit: Yeah. Actually, again, first of all, it's not just blurring. It's a combination of blurring and contrast.
Chris: Oh, contrast. Really?!
Amit: Yeah.
Chris: Oh, I missed that.
Amit: You add blur and you add contrast, so it's the way to fake a GUI effect, a goo effect.
Chris: Oh, right, where the contrast fights against the blur. Right. I remember that.
Amit: Exactly. You have a goo effect of two elements that are connecting to one another. As I said, I'm using animation to explore. Instead of using blur one pixel, blur 10 pixel, blur 100 pixel, let's do animation of blur from zero to 1,000 and back and see what happens.
Chris: Yeah.
Amit: That's the way I started exploring the concept of the goo, of the goo filter, which again is the combination of the blur and the contrast. Initially, it was just shapes, like CSS shapes blurred together.
Chris: Right.
Amit: But then I said, "Oh, we can do it with text."
Chris: Yeah. I remember thinking of it in terms of SVG because the GUI feels good as blobby shapes, which SVG is good at expressing. But you're proving here that it absolutely doesn't have to be SVG. It can just be whatever and, in this case, words.
Amit: No, you don't. Yeah, I actually, before that, have done fire with the exact same effect, which was just circles going up and getting smaller. But later on, when I started doing the morphing effect, I tried it with shapes. It was like a triangle morphing into a rectangle and so on. But then I said, "Let's try it with words." I took those divs, and I just put content in them. That's how this Pen came to life.
Chris: Yeah. Wow. It's awesome. It's one of those ones that I want to just find an excuse to use it.
Let's end with, similar to the Newton's Cradle, there's one with two, a red and blue square playing table tennis against each other. It's just spectacular to even know that [laughter] it's possible. Yeah, we're coming up on the end here, so I'd love to hear about it.
Amit: I think this is one of the most complicated ones. Just like the CSS cradle, there are a lot of small things. Even starting with the legs, how do you do a leg that would look good, because the table is rotating 360 degrees?
Chris: Right.
Amit: How would you make the leg? How would you make the pedals? How do you make the ball move on all three axes and the shadow is going to follow it? How do you have a neck that looks natural?
Chris: Yeah.
Amit: And how the shadow looks when it hits the pedal. There were a lot of questions that I asked myself and tried to figure it out. There are a lot of divs, a whole lot of animations. Yeah, seriously. I think there are 14 different animation declarations on 15 different elements. Yeah, it was really complicated because the pedals also move to different positions every time.
Chris: Right.
Amit: It's not like a pawn that is just moving from side-to-side. They also move back and forth. Yeah, there were a lot of questions. It took me a really long time--
Chris: [Laughter]
Amit: --to figure everything out. But to this day, I think it's one of the Pens that I'm most proud of because eventually, it looks great. When people ask me, "Okay, give me a good example of something amazing that you've done," so the Newton's Cradle is one and the Table Tennis is just after that.
Chris: I can see that. It's kind of like if you're in a band or whatever. "What can you show me that really represents you?" That's your riff, your song, or maybe even a whole album at this point because of how much work it was, I'm sure.
Amit: Yeah. Yeah, this one was a really long time. Yeah.
Chris: I like how the table is so thick, it gave you an opportunity to essentially sign it. [Laughter] I think more people should do that. Work your own name into the Pen somewhere. In this case, your Twitter handle, I think.
Fantastic. Amit, thanks so much for being on the show and talking to me about all your creative endeavors and all that stuff. You told me you're potentially looking for -- if anybody out there has something for you, you're looking for your next big challenge. Right?
Amit: Yeah, well, people know me as the CSS guy. I should mention that I'm a JavaScript developer first. My day job is a React developer.
By the way, as a React developer, I do think that learning CSS actually made me a better React developer, and being a React developer made me a better CSS guy, because I do think there's a lot of synergy between JavaScript and CSS. Obviously, those languages were supposed to work with one another.
But yeah, I am looking. I started looking recently for something that is a bit more on the creative side, maybe even a bit more on the dev role side. Yeah, I don't know anything specific, but if you have something good, let me know.
Chris: I'm going to, but this is for everybody else out there. You do it, too, if you have a perfect role. Hit him up, man.
Amit: Yeah.
Chris: Hit him up, y'all. Okay. Again, super appreciate it, and I hope to talk to you again soon.
Amit: Yeah, thank you.
Chris: And a whole new crop of Pens. Take care.
Amit: Okay. Bye for now.
[Radio channel adjustment]