Process

Early on I wanted to accomplish this animation by building a fake simulation of the captcha that uses actual web technology. While that would have definitely made it more realistic, I didn’t go that route, instead I went the route of animating it all in Blender as I knew I would be able to get the idea out much faster.

Trying to emulate web design in a 3D program can be very difficult. For the rounded rectangles I made a rounded rectangle in Glyphs then exported an SVG out of that into Blender. I’m sure I could have made a rounded rectangle in Blender itself but I took the path I immediately knew (ironically I knew how to do this in Maya, despite not being as experienced in that). Same with the loading icon.

For the rectangle borders I cloned the rectangle, turned fill off and used a bevel. This is possible because the rectangles are 2D curve objects.

I used quite a few layers in order to achieve the masking, carousel, and drop shadow. I didn’t plan on the drop shadow since I figured that was well out of the question with me using Blender, but realized I could achieve that in the compositing stage very easily. Basically the layers consist of the checkbox, the window popup, the stuff in the window popup, and the cursor. That’s in order from back to front.

I tried to mimic more realistic mouse movements somewhat. Animated cursors tend to be extremely obvious because they are much slower and more linear than real cursor movement. And while it’s still apparent that it isn’t real, at least it feels a lot more real.

I’m actually mixing two different kinds of text objects. I’m using meshes that generate text via geometry nodes for the page indicator and input box in the first prompt. The static text doesn’t use standard Blender text objects, but instead uses a plugin called ST2. Why? ST2 supports kerning, and you can do a lot more typographically than you can with standard Blender objects. Although here I’m just using ST2 for the kerning.

Behind-the-scenes videos will be added in a future update.