Interaction Design Challenge

Design an interactive overlay that smoothly expands, and transitions between states. Challenge yourself to be creative. Focus on making the motion feel natural, and responsive.

Design a progressive input stack interaction that guides users seamlessly through a multi-step process. Focus on making transitions fluid and visually engaging, while ensuring important information remains accessible at each stage. Use creative motion and layout to enhance clarity and delight.

Design a folder interaction component that responds to user actions with smooth, engaging motion. Focus on how the interaction communicates state changes - opening, closing, hovering. Explore creative ways to provide visual feedback. Let your imagination guide how users experience a familiar digital object.

Design a transition that seamlessly blends from one page to another. You’re free to choose the the form factor (web or mobile).

Design an OTP input that clearly distinguishes default, active, correct, and incorrect states. Be creative with the interactions to enhance user feedback and make the verification process intuitive.

Interaction by Hassan

Design and build an animated avatar stack that goes beyond the basics. Think of how avatars can come alive through shapes, colors, gradients, transitions, and motion. Don’t be afraid to break conventions.

We’re sharing one example to get you started, but that’s just a spark. Your stack could flip, slide, bounce, fade, or completely reinvent the concept of an avatar group. The only rule: make it fun, creative, and uniquely yours.

Interaction by Jhey Tompkins