A New Opening for CSS-Tricks Videos
CSS-Tricks has been publishing video screencasts for a long time now, and those videos have gone through a few different custom intro animations over the years. When it came time to refresh the look again this year, a Twitter call for leads pointed to dina Amin, a stop-motion animator whose portfolio made the choice an easy one.
Amin worked with Assem Kamal on the project. The goal was straightforward: make something short enough that YouTube viewers wouldn't skip it, but with enough visual interest that it stays enjoyable even when watching several videos in a row. Amin did her homework, asking questions about how the intro would be used and what role it plays in tutorials specifically.
Keeping a Connection to the Original
The previous intro opened with an Apple keyboard, and that motif carries over to the new version. Amin explains the reasoning:
We started with an Apple keyboard, because we wanted to keep something from the original intro that Chris's audience would relate to, and most importantly because I wanted to take the keyboard apart!
Taking it apart turned out to be a surprisingly meaningful creative decision. The keyboards used in the animation weren't just props, they were broken ones headed for the trash:
"Did we cut up that keyboard?!" Yes, we did. It was too easy to find multiple broken Apple keyboards, it's a very well-engineered product and it all comes together beautifully with minimum parts, but only Apple can fix this product. You can't just get your screw kit out and open this up and fix one flawed button connection. So a lot of these keyboards are thrown away because it's too expensive to fix in countries like Egypt. We got our hands on three keyboards and we cut up one as we animated and used different keyboard buttons from the other two to make the buttons stretch.
From Keys to Code to Layout
The intro also carries forward another idea from the original: showing how websites are built from components. What was once implied with background sketches is now literal paper prototypes. Amin describes the sequence:
We thought of showing the 'how to make a website' process in very abstract steps where each step quickly transitions and transforms into the other. Starting with keyboard clicks that turn into code, then design blocks that make up a website, which scrolls to reveal the CSS-Tricks logo.
It's all real stop motion. Amin and Kamal spent hours moving small pieces by hand and photographing each frame to assemble the final video.
Built for Flexibility
The project delivered multiple versions of the intro in different aspect ratios and sizes, which makes it easy to swap between them depending on the context. The main version is already in use on current screencasts, appearing at both the start and end of videos.
