Peerlist UI Challenge 2025

Peerlist UI Animation Challenge

5-Day Micro-Interaction Project | April 2025

A hands-on UI/UX challenge focused on crafting thoughtful, performant micro-interactions using pure HTML, CSS, and JavaScript—no animation libraries involved. The goal was to design interfaces that look good and scale well with real-world data and use cases.

🔹 What I Built:

• Day 1 – User Card Animation: Designed a clean entry animation for dynamic user cards to enhance visual onboarding.

• Day 2 – Status Pills: Created a responsive status indicator system using pills with seamless state transitions.

• Day 3 – To-Do App (Revived): Rebuilt a simple to-do app after 7 years, complete with satisfying animated checkboxes.

• Day 4 – Plan Tabs UI: Developed a tabbed layout for browsing different subscription plans with smooth transitions.

• Day 5 – Layout Switcher: Engineered a layout toggle (List, Card, Pack view) optimised for large datasets using only vanilla CSS and JS—avoiding animation libraries for better control and performance.

✅ Highlights:

• Focused on performance-first animations without third-party dependencies.

• Emphasised scalability and accessibility in each interaction.

• Revisited fundamentals and strengthened animation logic using pure CSS transitions and keyframes.

• Learned to balance creativity with real-world constraints.

Rebuilding interactions from scratch without relying on animation libraries helped me rediscover the joy of CSS and sharpen my UI problem-solving skills.

Tools Used: HTML, CSS (Tailwind), JavaScript (React), Git, Cloudflare

GitHub URL: https://github.com/ibuli/peerlist-ui-animation-challenge

Demo URL: https://peerlist-ui-animation-challenge.pages.dev/