Loading ...

Responses by Madison Palasini, copywriter and Haihang Du, lead developer, Watson Design Group

Background: We wanted to create a nostalgic, interactive experience that captured the coming-of-age spirit of the film Lady Bird—by presenting users with familiar objects and experiences based on growing up and asking them to choose which memories they cherish most. In the end, users find out how connected they are to home—whether it might be time to leave the nest or maybe just time to call Mom.

Highlights: The quiz-like element of the site consists of colorful illustrated cards, each displaying a different memory of home that users can “take or leave” by dragging left or right. Certain cards flip over with subtle animation to reveal an immersive video clip, capturing relatable and heartwarming moments from the film.

Challenges: We couldn’t use standard CSS fonts to make common animations, so the main title typefaces on the site are actually all custom shapes. Another challenge was transforming the flipped card to a full screen video. The morphing SVG mask data was generated dynamically to bring a consistent animated experience.

Favorite details: We tried to use DOM and HTML animations in way that felt fresh and engaging. We also focused a lot on the smaller animations implemented subtly on the site.

Technical features: The site is mostly SVG-based with heavy animation, so we spent a lot of time improving the technical performance and included PNGs whenever possible.

ladybird.movie/quiz

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In