This is an interactive Lottie animation that visually explains how a modern payment card is built using recycled and bio-sourced materials. The project highlights Mastercard’s Sustainable Card Program and brings attention to an often overlooked part of financial technology, the environmental impact of payment card production.

The animation transforms the Mastercard logo into a payment card, then breaks it down into its individual components. Each layer reveals its material and function through hover and click interactions. The experience ends by reassembling the card and returning to the logo, reinforcing the idea of circularity and sustainability.

You can view and interact with the animation using the link below:

https://lottiefiles.com/free-animation/mastercard-logo-reanimated-sustainable-payment-card-7NJn3ZPNl1

Millions of payment cards are produced and discarded every year. Most traditional cards are made from first-use PVC, a petroleum-based plastic that is difficult to recycle and contributes significantly to plastic waste.

While sustainability efforts in fintech often focus on software or energy use, the physical card itself is rarely discussed. Mastercard aims to change this by transitioning all newly produced plastic cards to recycled or bio-sourced materials by 2028. Communicating this shift in a clear and engaging way is a challenge.

This interactive animation was designed to make the sustainability story tangible.

Instead of using static diagrams or long explanations, the card is presented as a living system. Users can explore each component individually and understand how sustainable materials are integrated into the card without compromising security or performance.

The experience focuses on clarity, simplicity, and interaction to ensure the message is accessible to both technical and non-technical audiences.

The animation breaks the card into the following components:

Chip

Transparent overlay, front

Offset printed front

Core with antenna

Offset printed back

Transparent overlay with magnetic strip

Signature panel

Each component includes a concise description of its function and the sustainable materials used in its production.

The animation uses flat 2D vector design with isometric cues to suggest depth without relying on 3D or camera movement. Motion is smooth and deliberate, emphasizing clarity over spectacle.

Interactions include hover states for exploration and click actions to disassemble and reassemble the card. The visual flow mirrors the idea of a circular economy by returning to the original logo after each interaction cycle.

Figma

After Effects

Adobe Illustrator

LottieFiles' Creator and State Machines for interactivity

The animation is lightweight, scalable, and optimized for web and mobile environments.

The payment card industry produces hundreds of thousands of tons of plastic waste each year. Mastercard has already issued over 168 million cards made with more sustainable materials and plans to fully transition by 2028.

This project demonstrates how motion design and interactivity can help communicate sustainability efforts in a clear and engaging way. It shows that even small physical products, when rethought at scale, can have a meaningful environmental impact.

Sustainability can be communicated effectively through interaction, not just text

Product design decisions have long-term environmental consequences

Motion design is a powerful tool for education and advocacy in fintech