a shelf of useful tabs
2026i do not live inside these tools every day. i keep them in mind for the moments a project asks for a mockup, a reference, or a shortcut you do not want to invent from scratch.
i am not the person with forty tabs open and a new plugin every tuesday. most of my work still happens in a small set of habits: layout, type, judgment, restraint. the list below is not a workflow. it is a shelf.
these are places worth remembering. not because you should use them all. because someday you will need a mockup in ten minutes, a landing page that already solved the pacing, a transition that feels finished, or a component you do not want to rebuild from zero. when that moment comes, it helps to know where to look.
nothing here replaces taste. it just saves you from pretending you have never seen a good answer before.
mockups
- https://shots.so/
the fastest way i know to turn a flat screen into a polished device shot or short motion clip. templates, backgrounds, and export presets without opening a giant PSD stack.
- https://mockups-design.com/
a deep free library of studio, packaging, and urban PSD mockups. no signup maze. good when you need a believable print or product scene in minutes.
- https://jitter.video/templates/devices/
animated device mockups and social ready motion templates. useful when a still frame is not enough and you still do not want a full after effects session.
- https://craftwork.design/
mockups, fonts, illustrations, and framer templates in one marketplace. i open it when i need one specific asset type without hunting five separate sites.
clothing mockups
- https://shop.studioinnate.com/
streetwear and apparel mockups with real weight. tees, hoodies, boxes, and scene tools that feel closer to fashion branding than generic device shells.
inspiration
- https://recent.design/
daily curation of websites, OG images, app screens, and icons. tight feed, low noise, good for catching what is moving right now.
- https://onepagelove.com/
the classic one page website archive. still one of the best places to study pacing, section order, and how much a single scroll can carry.
- https://60fps.design/
micro interaction and UI motion from real apps. filter by pattern like onboarding, buttons, or sheets when you need a reference for feel, not just look.
- https://mobbin.com/discover/apps/ios/latest
real product UI from shipped apps. flows, screens, and patterns you can study before inventing another generic dashboard.
- https://curated.design/
hand picked live websites you can actually visit. every entry links to the real page, which matters more than a pretty thumbnail alone.
- https://land-book.com/
landing page gallery with filters for style and industry. helpful when you need a specific mood before you start layout.
- https://www.landing.gallery/
large library of landing pages with builder and framework tags. useful when you want to see how framer, webflow, or next.js sites solve the same problem differently.
- https://saaslandingpage.com/
focused saas marketing references. pricing, hero, testimonials, and the usual product page grammar in one place.
- https://admiretheweb.com/
editorial web design inspiration with category filters. good for agency, portfolio, and brand sites with stronger art direction.
- https://supahero.io/
hero section library only. when the top of the page is the whole problem, this saves a lot of scrolling through full sites.
- https://posts.design/
social post design from real companies. strong for launch graphics, product updates, and how brands ship visuals on x and linkedin.
- https://design.arctis.sh/
my personal design feed. drafts, experiments, and visual ideas in one place, closer to a moodboard than a case study.
ui libraries
- https://ui.shadcn.com/
the baseline most react projects still start from. open code, copy in components, easy to reshape around your own tokens.
- https://ui.arctis.sh/
my own component library and docs site. components, blocks, motion, and install commands built the way i actually want to ship product ui.
- https://magicui.design/
animated react components that pair well with shadcn. good for landing pages that need motion without writing every effect from scratch.
- https://heroui.com/
polished react component set with strong defaults and a full docs surface. handy when you want a more finished visual system out of the box.
- https://uiverse.io/
community built html and css ui pieces. messy in a good way. useful for small interaction ideas you can adapt fast.
- https://www.easyui.pro/
react and tailwind templates and blocks aimed at landing pages. practical when you need a section fast and would rather edit than invent.
- https://reactbits.dev/
large collection of animated react components. strong for marketing sites, backgrounds, and small visual moments.
- https://smoothui.dev/
motion heavy shadcn compatible components. dynamic island, siri orb, number flow. the kind of polish people notice in product demos.
- https://appica.dev/ui
free open source react components with accessible defaults and ai friendly docs. solid when you want a clean kit without the hype.
- https://www.great-ui.com/
accessible react components with distinctive motion recipes. smaller library, but the interactions are considered.
- https://21st.dev/
huge registry of react components and blocks with copy paste and agent friendly prompts. good discovery layer when you know the vibe but not the exact piece.
- https://www.morphicons.com/
tiny library for morphing svg icons in react, vue, and svelte. one of those details that makes menus and toggles feel finished.
motion & interaction
- https://motion.dev/
my default animation library for react and the web. layout, scroll, gestures, and springs without fighting the dom.
- https://animejs.com/
lightweight javascript animation engine when you want fine control outside react component boundaries.
- https://transitions.dev/
curated ui transitions with copy paste code and agent skill support. good reference for modals, toasts, tabs, and the small moments products live in.
- https://motion-primitives.com/
focused motion components built on top of modern react animation patterns. helpful for scroll and text effects.
- https://orbs.jakubantalik.com/
animated thinking state orb component. niche, but perfect for ai product surfaces that need a calm waiting state.
- https://gooey.jakubantalik.com/
liquid gooey react ui effects. when you want organic motion without building metaballs yourself.
- https://rive.app/
interactive vector animation that ships in real products. heavier than css, but hard to beat for stateful motion illustrations.
- https://www.unicorn.studio/
real time webgl scenes and interactive graphics. useful for hero moments that need depth without a full three.js project.
- https://amicro.vercel.app/Anime
premium react micro transitions. small library, high craft, good for product polish.
- https://annnimate.com/
production gsap components for react, vue, and html. when motion needs to feel agency grade, not demo grade.
- https://csscursors.colorion.co/
library of custom cursor effects with copy paste css. fun for editorial sites and interactive portfolios.
- https://threeui.com/
three.js components and interactive shaders packaged for easier drop in use.
- https://blobatar.dev/
deterministic geometric avatars from any string. small, weird, and genuinely useful for placeholders and playful identity systems.
learning & craft
- https://www.interfacecraft.dev/
josh puckett’s library on designing with uncommon care. articles, walkthroughs, and references for people who want product ui to feel intentional.
- https://devouringdetails.com/
rauno’s interactive reference on interaction design. principles, prototypes, and source you can study when motion and ergonomics matter.
ai design & prompts
- https://www.getlayers.ai/
ai native template and 3d scene library with prompts. useful when you want a cinematic landing direction fast, then edit from source.
- https://motionsites.ai/
premium ai website prompts for sections and full pages. strong for hero, pricing, and footer patterns you can paste into your stack.
- https://videobg.ai/
large library of animated backgrounds for web. helpful when a static gradient is not enough and you do not want to render video yourself.
- https://app.arqe.ai/
ai design tool in the same family of products pushing faster visual exploration. one to watch when you want generated layouts with more control than a generic prompt dump.
- https://toolfolio.com/
broad tool discovery platform across design, ai, no code, and ops. good when you are looking for something specific and do not know the name yet.
- https://www.inspora.design/
design inspiration and resource discovery with a cleaner browse experience than most aggregator sites.
directories & free tools
- https://nosignups.net/
open source tools without the usual signup friction. a useful filter when you just want software that works immediately.
- https://agenticui.net/showcase
showcase of interfaces built with agentic ui patterns. good for seeing what ai assisted product ui looks like when someone actually finishes it.
- https://contentcore.xyz/
fast content creation workspace for images and video export. handy for social and marketing assets when speed matters more than a full design file.
backgrounds & assets
- https://www.figma.com/design/1RjQY50dy7t9SucZtAIb1p/Super-Visuals--Backgrounds-Library.?node-id=3832-2&p=f
free figma backgrounds library. my go to when a hero or card needs texture, gradient, or atmosphere without designing backgrounds from zero every time.
- https://www.icoon.co/
ai generated 3d icons and illustration assets. useful for product marketing, empty states, and landing visuals that need a bit of depth.
the point
you do not need to adopt a stack because someone made a list. you need a few reliable places in memory for the moments when speed, reference, or presentation matter more than pride.
open one tab. take what you need. close it. go back to the actual work.
that is how this stays useful. not as identity. as backup.