Design Inspiration
An internationally recognized web design awards platform — its winning work is worth browsing daily to train your eye
The Glasshouse · Frontend Nav
Where good sites grow toward the light
Hand-picked front-end websites organized by purpose, each with bilingual notes and a structured detail page. Stroll around, and taste grows on you.
Category
Tag
Design Inspiration
Design Inspiration
Direct links to official brand guidelines — Adobe, Spotify, IBM, Twitch and more, free to browse and download
Design Inspiration
A library of ~30 fully-written design style prompts — pick a style, copy the prompt, feed it to your AI
Design Inspiration
A global community of designers' work — the go-to place for UI and visual inspiration
Design Inspiration
A gallery of hand-picked landing page designs — visit before building your next marketing page
Design Inspiration
A library of real app UI screenshots — a practical mobile design reference (iOS-first)
Design Inspiration
The 17-year gallery devoted to one-page websites — 9,000+ sites plus 9,000+ section examples for landing-page inspiration
Design Inspiration
Social post design inspiration — real posts from 640+ brands (launches, updates, events) to borrow layout ideas for OG images and marketing
Design Inspiration
From the creator of Ptable: the entire tree of life as an interactive visualization — a masterclass in interaction design
Design Inspiration
A daily curation of exceptional design across a dozen categories — web, branding, motion, 3D and more
Design Inspiration
A gallery of real product websites — Stripe, Linear, OpenAI and more, with the twist of tracking each product's redesign versions
Design Inspiration
A long-running showcase of fine websites, filterable by industry, style and theme
Motion & Interaction
Motion & Interaction
A gallery of real app UI motion — 2000+ screen recordings across 487 apps, filterable by gesture and interaction pattern
Motion & Interaction
Compose animations by stacking words - fade, up, slide - no keyframes, 3KB core
Motion & Interaction
A front-end playground — a dense hub of motion snippets and experiments
Motion & Interaction
A long-standing source of creative web interaction tutorials with high-quality demos
Motion & Interaction
A visual cheatsheet of easing functions — a base tool for tuning motion feel (Chinese available)
Motion & Interaction
The industry-standard JavaScript animation library; its official showcase doubles as a motion inspiration gallery
Motion & Interaction
A Lottie animation library and toolset — a primary source for ready-made lightweight vector motion
Motion & Interaction
The de-facto standard for React animation (formerly Framer Motion) — springs, gestures and layout animation in one place
Motion & Interaction
Make videos in React — the timeline is state and every animation is a component, built for data-driven motion graphics and batch rendering
Motion & Interaction
A state-driven interactive animation platform for characters and micro-interactions
Motion & Interaction
WebGPU effects as declarative components - auroras, blurs and glows like plain tags, React/Vue/Svelte ready
Motion & Interaction
Shape-aware icon morphing - sun flows into moon, full Lucide support, 80KB engine
Motion & Interaction
App-grade page transitions on the web — hero flights, drills and sheets, recreating YouTube/Instagram switches
Motion & Interaction
Turn any font into stroke-by-stroke handwriting animation - CJK included, studio runs in your browser
Motion & Interaction
A copy-ready Three.js library — 3D heroes, WebGL backgrounds, liquid buttons, text animations, all with source
Motion & Interaction
A particle effects engine — interactive backgrounds, confetti and fireworks, live-configurable, wrappers for every framework
Learning
Learning
The classic CSS blog — home of the widely cited Flexbox and Grid guides
Learning
A curated directory for design engineers — articles, component libraries and tools sorted by what you want to do
Learning
A free coding education platform — learn by building projects, with free certifications along each track
Learning
Real design challenges to sharpen your front-end skills — well suited for portfolio-worthy practice
Learning
The Modern JavaScript Tutorial — a systematic free course from basics to advanced (Chinese translation available)
Learning
A boutique front-end blog where CSS and animation tutorials are deep and delightful
Learning
A Chinese developer community — a major source of front-end articles and China's tech scene
Learning
A modern guide to front-end design patterns and rendering strategies
Learning
Google's guidance for modern web development — the home of performance and UX courses like Core Web Vitals
Docs & Tools
Docs & Tools
12 free 3D tools in one page - image-to-3D, normal maps, remesh, reduce; file tools stay local
Docs & Tools
The framework for content-driven sites — zero JS by default, React/Vue islands where needed
Docs & Tools
The world's most popular front-end framework - v6 brings CSS-first theming and AI-assistant docs
Docs & Tools
Browser support tables — check before you code and save yourself rework
Docs & Tools
AWS's open-source design system - 94 components, 62 pattern guidelines, cloud-grade enterprise polish
Docs & Tools
See how 20+ design systems build each component before you build yours — 60 component types across 95 systems, 2,700+ real examples
Docs & Tools
A color palette generator — press one key, get a full scheme
Docs & Tools
A free web font library for both CJK and Latin typefaces
Docs & Tools
React bindings for the GPU framework behind the Zed editor — native-grade desktop apps without Electron
Docs & Tools
Extract PDF images in your browser — original resolution, zip download, nothing uploaded
Docs & Tools
Raster-to-SVG in your browser - vectorize logos locally, images never leave your machine
Docs & Tools
Compose state from atoms with automatic dependency tracking - the cure for React context re-renders
Docs & Tools
An open-source icon library with a clean line style — well suited for project icons
Docs & Tools
The authoritative documentation for Web technology — start here for HTML/CSS/JS references (Chinese available)
Docs & Tools
The de-facto full-stack React framework - routing, rendering, data and caching in one, AI-friendly docs
Docs & Tools
Fast 3kB alternative to React with the same modern API - the king of widgets and embeds
Docs & Tools
The official React docs — high-quality tutorials and practical guides (Chinese translation available)
Docs & Tools
The fastest path to admin dashboards — wire REST/GraphQL and get tables, forms, auth and i18n
Docs & Tools
Adobe's headless accessible component library - interaction, a11y and i18n built in, styles are yours
Docs & Tools
The de-facto node-based canvas for React - drag, connect, zoom; the base for flow editors and AI canvases
Docs & Tools
Meta's learn-once-write-native: one React codebase rendering true native Android/iOS UI
Docs & Tools
The most popular router in React (4.8B downloads) - and the framework this very site is built on
Docs & Tools
An online regex debugger that explains matches in real time
Docs & Tools
Privacy-first browser utilities — an image converter handling 30+ formats entirely on your device, no upload, no watermark
Docs & Tools
Six browser-only security tools for front-end devs — JWT debugging, CSP scoring, SRI hashing and more, nothing leaves your machine
Docs & Tools
Change image DPI losslessly, right in your browser — no re-encoding, no uploads, a lifesaver for print and paper submissions
Docs & Tools
An open-source React component library that brings ink-wash aesthetics to interfaces
Docs & Tools
The utility-first CSS framework — its docs are a design-system textbook in themselves
Docs & Tools
One codebase for web and native — a cross-platform style library plus UI kit for React and React Native, tuned by an optimizing compiler
Docs & Tools
The official TypeScript site with its handbook and live Playground
Docs & Tools
A copy-paste component supermarket — 3,000+ community components (buttons, cards, forms, loaders) in CSS or Tailwind
Docs & Tools
Run WebGPU shaders right in the browser — a fresh Vercel library with interactive examples and agent-friendly docs
Docs & Tools
The next-generation front-end build tool — this very project is built on it
Docs & Tools
A ~2KB minimalist router for React and Preact — hooks-first and a featherweight React Router alternative
Docs & Tools
Framework-agnostic interaction logic as visual state machines — menu/dialog/accordion patterns, reusable across React, Vue, Solid and Svelte
Recommend a site
Know a front-end site worth listing? Leave a name and a URL.
Clicking submit opens GitHub to finish your recommendation (GitHub account required) — human reviewed, with a curated bilingual write-up before listing.
FAQ
What is this site?
A curated front-end navigation: sites are grouped into four purpose-based sections — design inspiration, motion & interaction, learning, and docs & tools — each with bilingual notes and a structured detail page.
What does it take to get listed?
Quality over quantity: only hand-picked sites make it in, judged on content quality, freshness and real value for front-end learners — never on exhaustive coverage.
How do I recommend a site?
Use the form at the bottom of this page (or open an issue on GitHub directly). Clicking submit opens GitHub to finish the recommendation; submissions are human-reviewed and listed with a curated bilingual write-up.
Why bilingual?
Every note comes in both Chinese and English — handy for bilingual search, and any visitor can tell what a site does. One standard for personal use and for the public.
How are categories organized?
By purpose: design inspiration (visual reference), motion & interaction (how effects are built), learning (systematic growth), and docs & tools (daily lookups). Each site sits in its primary purpose.
How is content updated?
Everything is data-file driven: add or edit a site, rebuild, and both the listing and detail pages update — no page-by-page edits.
About this site
Frontend Nav is a maintained learning navigation and curated collection: hand-picked sites organized by purpose, so you find the right reference in the right context — and taste grows on you.
Every site carries bilingual notes and a structured detail page (what it is, how to use it, key features), so reading and searching across languages never loses the trail.
The whole site is statically generated from data files, and every listed site gets its own detail page — together forming a searchable matrix of front-end site pages.