🧭 A collection of 8 tools for designing and building interfaces: where to find real-app inspiration, top-tier web design, ready-made animated components, particle backgrounds, a live color playground, spring-physics motion, and full component libraries. For each one — a link, what it is, and a "how to use" cheat sheet.
| Site | What it gives you | Tech | Format |
|---|---|---|---|
| mobbin.com | Real app screens & full user flows | — (visual references) | Screenshots, flows, patterns |
| godly.website | Curated, top-tier web design inspiration | — (visual references) | Site gallery, screenshots |
| componentry.dev | Animated React components | React + Tailwind / Framer Motion | Ready-made code (copy) |
| realtimecolors.com | Test palettes & type on a live mockup | — (color tool) | Live preview + exportable CSS / Tailwind |
| react-spring.dev | Spring-physics animation for React | React (JS / TS library) | npm package / hooks |
| particles.casberry.in | 3D particle & swarm animations | — (WebGL generator) | Exported background / effect |
| originkit.dev | Free animated components (50+) | React + Tailwind / motion | Ready-made code + AI / MCP |
| daisyui.com | Tailwind component library | Tailwind CSS (semantic classes) | CSS plugin / class names |
What it is. A searchable library of 100,000+ real screens from top iOS, Android, and web apps, organized into full user flows. It's not code — it's a reference tool for seeing how real products solve onboarding, paywalls, settings, empty states, and everything in between.
How to use it:
Note: free browsing is limited; full search and flows are on the paid plan.
Best for: studying proven real-world UX patterns before you design a screen.
What it is. A hand-curated gallery of astronomically good web design — only standout sites make it in. Filter by category like typography, color, 3D, animation, portfolio, or agency. It's inspiration and visual direction, not code.
How to use it: