Project Overview
Interaction Archive is a web-based library of UI patterns and micro-interactions, built in Framer. It's a self-initiated project I'm actively building out, created to fill a gap I kept noticing in most design inspiration sites: they show what an interaction looks like, but almost never explain why it works, when to use it, or when to avoid it.
Instead of being another visual mood board, Interaction Archive is meant to work as both an inspiration source and a small learning resource — a place where designers, developers, and students can study interaction patterns the way you'd study case law: not just "here's the pattern," but "here's the reasoning behind it."
The Problem
Most UI inspiration sites are visual-first. You scroll, you see a nice hover effect or a loading animation, you save it — but you rarely learn:
What psychological principle makes it effective (feedback, anticipation, reward, trust)
What context or product type it actually suits
When the same pattern would be the wrong choice
That gap leads to a common trap in design: patterns get copied because they look good, not because they're the right fit for the problem. I wanted to build a resource that treated interactions as documented design decisions, not just visual trends.
The Concept
Interaction Archive is built on a simple idea: every interaction is a card, and every card is a mini case study.
Browse
Explore interactions through a dynamic bento grid with filters for category, style, theme, and interaction type.
Learn
Open any card to understand its purpose, psychological impact, ideal use cases, target audience, compatible design styles, and when it shouldn't be used.
Design Approach
Card-based knowledge — Every interaction is a self-contained card that can be explored independently.
Filter-first navigation — Browse by category, style, theme, or interaction type to encourage discovery.
Learn, don't copy — Each card explains the purpose, psychology, best use cases, and when the pattern shouldn't be used, promoting understanding over imitation.
Current Status
This is an ongoing project. The core framework, filtering system, and detailed card views—is complete, and I'm continuously adding new documented interactions. Rather than a finished library, it's designed as a living archive that grows over time.
Lessons Learned
Separating "browse" from "study" (grid vs. detail view) makes a reference tool feel usable instead of overwhelming
Writing the psychological reasoning behind a pattern is often harder than designing the interaction itself — it forces real clarity on why a decision works
Treating a personal project as a living archive, rather than a one-time launch, keeps it honest about being a work in progress rather than overselling it as finished
Next Steps
Expand the archive with more documented interaction patterns across categories (onboarding, gamification, form feedback, navigation transitions)
Add real product examples alongside each pattern, showing where it's used well in the wild
Introduce comparison views, so similar interactions (e.g. two loading-state patterns) can be studied side by side
Explore light community input — letting other designers submit patterns with their own reasoning
This project is designed and maintained independently by Prasād Borade, and is actively being expanded. Visit the live site at interaction-archive.framer.website.
