100 Great Design Sites to Sharpen Your Eye
100 design inspiration sites sorted into 9 work scenarios — competitions and awards, motion design, 3D rendering, cinematic framing, UI, web design, front-end interaction, typography and color, and everyday collecting. Each entry spells out what's on the site and when to go dig through it.
- Author
- Eian (X @EianLu)
- Number of sites
- 100
- Chapters
- 9
- Topic
- Design / aesthetics / sources of inspiration
- Best for
- People making videos, UI, front-ends, and 3D
- Updated
- 2026-11-15
Question map
0/100 readContents9 chapters · 100 questions
Preface
If you make videos, design UI, or write front-end code, you eventually hit the same realization: once everyone's technical skill is roughly equal, what separates people in the end is taste.
AI can write your code, animate your scenes, and generate your images now, but whether the result actually looks right — whether you can hand it over without flinching — is still your call to make. Only if you've looked at a lot of good work does it become possible to say "the letter-spacing here is too tight" or "that transition is too stiff," and to tell AI what to change or fix it yourself without losing the plot.
This list comes out of Eian's personal stash after cleaning up his browser bookmarks: 100 design sites he actually opens, grouped into 9 categories by the situations he's usually working in. Each entry uses a sentence or two to say what's on the site and when to go digging. Sites that need a paid subscription to see everything are marked (paid); the rest are free to raid. Every URL has been opened and checked one by one, and sites that changed names along the way — like Godly, which everyone bookmarked back in the day — have been updated to their current addresses.
Quick answers
- Start by loading the industry ceiling into your head: Awwwards, D&AD, Annecy, and Tokyo TDC set the upper bound of what you consider "good."
- For motion and video, watch enough great work before you learn the software; studio sites like BUCK and ManvsMachine teach rhythm better than any tutorial.
- Don't lock yourself away tweaking material spheres in 3D — go to ArtStation and 80 Level and look at other people's wireframes, lighting, and breakdowns.
- "Cinematic" isn't an adjective, it's lighting, focal length, and grading: ShotDeck, FILMGRAB, and StillsLab just lay the frames out in front of you.
- Before you draw an interface, look at real shipped products instead of marinating in concept shots; Mobbin, Refero, and Apple HIG are references you can actually build from.
- If you can't figure out how a front-end effect works, hit F12: Codrops, GSAP, Three.js, and Shadertoy basically leave the source on the page.
- Typography and color are fundamentals; Typewolf, Fontshare, and Radix Colors will rescue most of the "tacky" in your work.
- Shoving this into your bookmarks and letting it gather dust is worth exactly nothing: look at one site for 15 minutes a day, and when you're done, force yourself to say in one sentence what makes it good.
Source: This article is compiled from "100 Great Design Sites to Sharpen Your Eye," published by Eian on X (@EianLu, 2026-11-13). Copyright belongs to the original author; the original link is authoritative.
1. Competitions and Awards: Start by Seeing What the Ceiling Looks Like
When you're new to the field or stuck on a project, the most direct move is to look at this year's award winners. Load the industry's highest standard into your head first, then look back at your own draft and the flaws jump out immediately.
1. Pwnisher 3D Render Challenge#
🔗 https://www.youtube.com/@pwnisher
A global 3D rendering competition run by YouTuber Clinton Jones (known online as Pwnisher). The format is dead simple: he hands out a base mesh with a locked camera path and character motion, thousands of entrants worldwide riff on that same foundation, and it all gets cut into one long video. By 2026 it's on its 13th edition. Because everyone starts from an identical base, you can see at a glance whose lighting is better and whose idea is wilder.
2. Awwwards#
The award you can't avoid if you do web or front-end work. It names a Site of the Day every day, with judges scoring on design, usability, creativity, and content, plus year-end grand prizes. Perfect for a five-minute scroll before you start work each morning, to see what new heights web design has been pushed to.
3. CSS Design Awards#
🔗 https://www.cssdesignawards.com/
Another major web award on par with Awwwards, also featuring one best site per day, scored on UI, UX, and innovation. Its judges have different tastes from Awwwards — the two often pick completely different sites, so you can alternate between them.
4. The FWA#
A veteran digital design award running since 2000, also updating with one winning project a day. Compared with tidy commercial layout work, FWA favors technical showpieces that go wild with interaction, WebGL, and sound.
5. The Motion Awards#
A motion design award run by Motionographer itself. Title sequences, commercials, brand packaging, and documentaries are judged separately, and in recent years an AI category was added. Best of all, the winners' pages embed the finished films directly, so you don't have to go hunting elsewhere — the Shōgun title sequence is in there, and you can run through a whole year of the best motion work in one afternoon.
6. Apple Design Awards#
🔗 https://developer.apple.com/design/awards/
The award Apple hands out each year at its WWDC developer conference. The apps and games that make the list are basically textbook examples of Apple-flavored aesthetics, interaction feel, and integration with hardware features. Apple also writes a short citation for each winner explaining why it was chosen — well worth a close read for anyone working on mobile.
7. D&AD#
The UK's design and advertising awards; because the trophy is shaped like a pencil, people in the industry call it the "Yellow Pencil Award." Its top-tier "Black Pencil" is judged so ruthlessly that some years it isn't awarded at all, and everything that wins one is the kind of work that goes into design history. If you do branding, advertising, or graphic design, dig through its archives.
8. The One Show & ADC#
Two top-tier awards run by the American organization The One Club. The One Show cares more about the creative idea behind an ad, while the ADC (Art Directors Club, founded in 1921) cares more about pure visual execution, typography, and craft.
9. Runway AI Film Festival#
An AI film festival run by the AI video tool Runway, now in its 4th edition in 2026, with in-person screenings in New York, Los Angeles, and Tokyo. Alongside short films, it has categories for design, new media, fashion, and advertising. The official Screening Room lets you watch past winners directly — if you want to know where the ceiling of AI video currently sits, this is the most direct place to look.
10. Tokyo TDC#
🔗 https://tokyotypedirectorsclub.org/
The annual awards of the Tokyo Type Directors Club. Despite "type" in the name, it's really a bellwether for visual design across Asia. The judges' taste is exacting, and the winning posters, books, and motion visuals tend to be strongly experimental — perfect for washing your eyes out after you've grown sick of safe commercial work.
11. Annecy International Animation Film Festival#
🔗 https://www.annecyfestival.com/
A French animation festival founded in 1960 and the closest thing animators have to a cathedral. Beyond feature films and independent shorts, it has a dedicated commissioned-film category (advertising, music videos, title sequences), where you can see some of the best art direction and motion storytelling in the world.
12. Ciclope Festival#
🔗 https://www.ciclopefestival.com/
A film and advertising festival that hands out awards by craft discipline. Most awards judge the overall creative idea; this one deliberately takes the film apart — directing, cinematography, color grading, editing, 3D animation, VFX, and music each get their own prize. If you work in video and want to study "color grading" or "editing rhythm" in isolation, this is the right award to follow.
2. Motion Design and Video
With motion and video, burying your head in software tutorials easily traps you in parameter twiddling. Watch enough good films first so you know what good rhythm and transitions feel like, then go back and find tutorials on how to make them — it's far more efficient.
13. Motionographer#
A veteran site that's been covering the motion design world for nearly twenty years. Its editors have a sharp eye and don't post filler; when they do update, it's almost always work worth frame-stepping through repeatedly, often accompanied by behind-the-scenes notes written by the studio itself.
14. STASH#
An online film library that plenty of animation and VFX studios subscribe to (paid). It archives thousands of commercials, music videos, and channel packages by style and technique, and its biggest value is that many films come with making-of features and project breakdowns.
15. Art of the Title#
🔗 https://www.artofthetitle.com/
A site devoted to the "title design" of films, series, and games. It doesn't just host HD title sequences — the real work goes into long interviews with the creators, bringing directors and designers in to lay out early sketches, rejected drafts, and storyboards, and walking through how those two minutes of titles were ground out step by step.
16. Vimeo Staff Picks#
🔗 https://vimeo.com/channels/staffpicks
A channel of short films hand-picked daily by Vimeo's editorial team. In video circles, getting a Staff Pick badge on your work is something people brag about for the rest of their lives. Live-action shorts, experimental animation, documentaries — the standard is remarkably consistent.
17. Behance Motion#
🔗 https://www.behance.net/galleries/motion
Everyone scrolls Behance anyway, but its Motion category is especially good for learning workflow. Many studios post projects with the mood boards, styleframes, animatics, and final film all in one place, effectively laying the entire delivery process out for you.
18. Short of the Week#
🔗 https://www.shortoftheweek.com/
A site dedicated to recommending great independent short films from around the world, both live-action and animated. Each film comes with a proper written review by an editor, breaking down how the director establishes character and tells a complete story in fifteen minutes or so.
19. Directors Notes#
A blog built on interviews with independent directors. Each installment discusses one short film, and the questions are refreshingly practical: how the money came together, what camera and lenses were used on set, what went wrong in post. If you take on film jobs and shoot your own work, it'll resonate.
20. Sakugabooru#
🔗 https://www.sakugabooru.com/
A "sakuga" clip library maintained by animation fans, holding over 320,000 highlight cuts pulled from anime. Every entry is tagged: which key animator drew it, which production it's from, whether it's an explosion effect or character acting. If you want to study the rhythm and elasticity of a movement, search a tag and pull up hundreds of clips to watch frame by frame — useful for animators and for anyone generating action shots with AI.
21. Promonews#
A daily selection of a few new music videos and commercials, most accompanied by the director's notes: what camera, why this grade, how a particular shot was achieved. Music videos are where stylized framing, color, and editing rhythm get pushed hardest — if you're hunting for visual style references, scrolling here beats fishing in the ocean of a video platform.
The next 5 aren't aggregators but the five studio sites the industry agrees are the strongest. Download the films from their portfolios, put them in a player, and step through them frame by frame with the arrow keys — it's more useful than any advanced course:
22. BUCK#
One of the largest and most famous motion design studios in the world, a regular for Apple, Nike, and Meta. Equally strong in 2D, 3D, and live-action integration, with a portfolio the size of a museum.
23. ManvsMachine#
A top London creative studio, especially known for 3D material collisions and hard-edged product commercials, with lighting and texture quality that makes your scalp tingle.
24. Oddfellows#
A US studio built around illustration and 2D character animation, with extremely comfortable color palettes and buttery-smooth shot continuity and motion inertia.
25. Golden Wolf#
A London animation studio with an instantly recognizable style — high-saturation clashing colors, exaggerated perspective distortion, and edits that move at breakneck speed, the whole screen buzzing with street-cartoon energy.
26. Ordinary Folk#
🔗 https://www.ordinaryfolk.co/
A Vancouver team that specializes in wringing everything out of basic 2D geometric shapes, with total command of the spring and rhythm of motion curves.
3. 3D and Rendering
The worst thing you can do in 3D is lock yourself away blindly tweaking material spheres. Go look at wireframes and lighting setups in mature work in the community — a lot of the problems that have you stuck already have ready-made solutions.
27. ArtStation#
Where anyone doing CG or game art goes every day when they boot up. Concept artists, modelers, and lighterers from the world's game studios and film VFX houses all set up shop here; search for concept design or 3D assets in any style and you'll find top-tier references.
28. The Rookies#
An annual competition community for students and newcomers entering the field worldwide, with categories for 3D animation, game development, VFX, and concept design. If you've just started learning software or are preparing to job hunt, go browse it and see how far this year's graduates' portfolios have been pushed.
29. 80 Level#
A publication devoted to game art and 3D technology. Its most valuable content is the Breakdown articles: the original artist takes a complex 3D scene apart, from which software built the base mesh, to how dirt was brushed in inside Substance, to how the lighting was arranged in-engine, written as precisely as an operation manual.
30. Sketchfab#
A platform for spinning 3D models around 360 degrees right in the browser. When you find a well-made model, open the viewer settings in the lower right and switch straight to pure clay, wireframe, normal maps, or roughness channels — you can strip down exactly how someone else's model is topologized and how the UVs were laid out.
31. befores & afters#
🔗 https://beforesandafters.com/
An online magazine devoted to the VFX behind Hollywood blockbusters. Its articles love before-and-after comparisons: on the left an actor in a mocap suit in front of a green screen, on the right the finished explosion, alongside interviews with the VFX supervisor explaining how the shot was blocked and comped.
32. fxguide#
The longest-running technical publication covering film and TV VFX. The writing is hardcore and gossip-free, digging into renderer internals and algorithms, virtual production LED stage pipelines, and fluid simulation — suited to anyone heading toward technical art (TA) or the deeper end of VFX.
33. Blender Studio#
Blender's own open-source animation studio (paid). Every year the official team makes a high-quality animated short in Blender to test the software's limits, and a subscription gets you not just tutorials but the actual character rigs and lighting project files, downloadable to open and study on your own machine.
34. Poly Haven#
An essential good-citizen resource site for 3D rendering. Its high-res HDRI environment maps, PBR materials, and scanned models are all CC0 — meaning completely free, no registration required to download, and no attribution needed even for commercial client work.
35. Beeple Everydays#
🔗 https://beeple-crap.com/everydays
Since May 1, 2007, digital artist Beeple has forced himself to make one image a day and post it, without missing a single day through weddings, illness, or holidays — nearly twenty years straight. Scroll back to his first two years and you'll find the work was pretty rough, but page through forward and you can watch a regular person grind himself into a master by turning in homework every single day.
4. Cinematic Frames and Shot References
When you're shooting video or grading, the "cinematic feel" clients keep bringing up is actually a very vague term. Rather than guessing, pull frames straight out of films and see how professional cinematographers light, crush their shadows, and choose focal lengths.
36. ShotDeck#
A professional film still library spearheaded by Lawrence Sher, cinematographer of Joker and The Hangover (paid). The library is enormous, and each image is tagged with absurd precision: you can filter for "golden hour + backlight + wide lens + cool tones + car interior" and pull dozens of frames that fit exactly, ready to use as storyboard reference.
37. FILMGRAB#
A completely free film still site covering thousands of classic films. Its organization is refreshingly pure: one film is one page, holding fifty or sixty high-res key frames laid out neatly. If you want to study a director's lighting and composition habits, open a page and scroll from top to bottom and it all becomes clear.
38. StillsLab#
A free film and TV still library covering movies, series, music videos, and commercials, with the whole library viewable without paying. Tags are fine-grained: filter by shot size, camera angle, lighting, color, day or night, even the camera and lens used, or just type a plain-language description of the image you want. Each film's page also gives stats — for example, Blade Runner 2049 is 69% night and 52% soft light — which makes studying a film's visual recipe very convenient.
39. Flim#
A film still library with AI semantic search, covering music videos and commercials alongside films. The best part is that you don't need to remember titles: type a plain sentence into the search box ("a person standing at the end of a hallway, backlit" or "overhead shot of food on a table") and it pulls similar shots from across everything.
40. EyeCannndy#
A site that turns "shot language and editing technique" into a dictionary of animated GIFs. It's normal not to have a name for a transition or camera move you liked, so this site lists dozens of common techniques — match cut, dolly zoom, whip pan, POV — and opening an entry shows you five or six GIF examples from different commercials and music videos.
41. StudioBinder Camera Shot Guide#
🔗 https://www.studiobinder.com/blog/ultimate-guide-to-camera-shots/
A tutorial series written by a production software company, explaining shot sizes, camera angles, and camera movements (push in, pan, whip pan, orbit) one at a time, each with examples from films. The aesthetic level is ordinary, but it's systematic and easy to look things up in. When generating video with AI, putting "low angle," "dolly in," or "whip pan" in the prompt works far better than "make it look premium" — and you can look all these terms up here.
42. American Cinematographer#
A magazine published by the American Society of Cinematographers (ASC) for over a hundred years. Most articles have the cinematographer personally walk through a film: why this lens set, what camera, where the key light came from, how the grade was decided. A still library tells you what the frame looks like; this tells you why it was shot that way. Many articles are readable in full for free on the site.
5. UI Design
Before you draw an interface, go browse real products that have already shipped and are running, rather than hanging out in concept design communities. Real products help you sort out the basic logic of edge cases and button hierarchy; concept shots may look nice but many can never ship, and feeding them to AI just makes the output feel more "AI."
43. Mobbin#
Currently the best library of real app screenshots (paid; free accounts can see part of it). The team has screenshotted a huge range of mainstream overseas iOS, Android, and web apps from end to end, amassing over 600,000 screens. When you need to design a "subscription paywall" or an "empty state," filter by that feature tag and you can put Airbnb's, Spotify's, and Notion's approaches side by side.
44. Page Flows#
Mobbin shows static screenshots; this site stores screen recordings of real product usage (paid). From a new user opening the landing page, signing up, adding a card and paying, all the way to finding where to cancel a subscription, everything is recorded with cursor paths and page transitions — extremely convenient when mapping out interaction flows.
45. Refero#
A screenshot library focused on web and iOS interfaces (paid). Its component and page-type tags are cut very finely: if you want to see only how others design a "table filter," "breadcrumb navigation," or "pricing comparison table," searching is precise. It also has a free sub-site, styles.refero.design, which distills the colors, fonts, and spacing of 2,000+ real sites into DESIGN.md files AI can read directly — no login required.
46. Nicelydone#
A gallery dedicated to overseas web app and SaaS interfaces (paid). If you work on B2B products, enterprise back offices, or dashboard software, consumer apps often aren't much help — this is the right place for layout references on complex forms and data dashboards.
47. SaaSFrame#
Another interface library focused on SaaS products (paid), with marketing sites, sign-in and sign-up pages, feature modals, and backend settings pages all sorted into categories — well suited to indie developers and B2B designers to browse.
48. Figma Community#
🔗 https://www.figma.com/community
Figma's own open-source community. Screenshots only show you the surface; here, when you find a good design system, a big-company open-source component library, or a beautifully laid-out template, click "Open in Figma" in the top right and the whole source file lands in your drafts. Open the layers panel and it's immediately clear how they used Auto Layout and how they named color variables.
49. Apple Human Interface Guidelines (HIG)#
🔗 https://developer.apple.com/design/human-interface-guidelines/
Apple's official specification documentation for designers and developers. For basic questions like "how many icons belong in a bottom tab bar," "what's the minimum pixel size of a tap target," or "when should you show an alert," you don't need to ask around online — just read Apple's docs, which explain the reasoning clearly.
50. Material Design 3#
Google's design system documentation. Even if you never build native Android apps, this is well worth reading end to end. It lays out without reservation how a big-company design system defines color ramps, calculates type scale, handles dark mode contrast, and specifies hover and pressed states for components.
51. Vercel Web Interface Guidelines#
🔗 https://vercel.com/design/guidelines
A checklist of interface details compiled by Vercel, organized by interaction, animation, layout, copy, forms, and performance. Every item is a hard rule you can check directly against — for example, "input font size must not be below 16px on mobile, or iOS will auto-zoom when you tap it" and "don't be lazy and write transition: all." It's ideal for people writing code with AI: there's a dedicated section on wiring it into AI, with a ready-made AGENTS.md and review skill so AI can self-audit an interface against the list item by item.
52. Impeccable#
A design skill built specifically to cure "AI flavor." It turns the default tropes AI loves most into 62 checks: the beige "AI palette," italic serif display headlines, a colored vertical bar on the left of callouts, cards nested inside cards, numbered kickers like "01 Discover"... Install it into Claude Code, Cursor, or Codex and you can use its commands to have AI polish typography, adjust layout, and critique its own design. Even without installing it, reading the list once lets you spot why so many pages feel cheap at a glance.
53. The Component Gallery#
A site that pulls the "basic components" of major design systems onto one stage to compete. Want to study the most ordinary "toggle" or "alert banner"? Click in and it lists the corresponding component screenshots and documentation links from dozens of design systems — Apple, Google, Microsoft, Shopify, GitHub, and more — on a single page. Extremely satisfying for gap-checking when writing component specs.
54. 60fps#
A site dedicated to collecting "silky UI motion." It's full of high-frame-rate recordings of real app interactions, with no flowery filler — open the site and the screen is covered with card expansions, pull-to-refreshes, and page transitions that all feel great under the finger.
55. Spotted in Prod#
🔗 https://www.spottedinprod.com/
A site that captures the "small details that make you look twice" in shipped overseas iOS apps. They're all a few seconds of real-device footage — a button press whose haptic feedback is visualized, or a little easter egg hidden in a settings page. Great for hunting inspiration when you're sweating the details.
56. Growth.Design#
A site by two product designers that uses comics to break down the real experience of well-known apps. They'll go through Duolingo's onboarding like an ordinary user, or book an Airbnb, then draw it page by page: why the copy at this step makes you comfortable paying, and why the modal at the next step scares people off. Fun and substantive at once.
57. Laws of UX#
It condenses the psychology laws that interaction designers love to name-drop (Fitts's law, Hick's law, Miller's law, the peak-end rule) into twenty-odd clean illustrated cards. Open one and three sentences tell you what the law means, who first proposed it, and what to watch for when applying it to a concrete interface. Handy when you need theoretical backing for a redesign proposal.
58. Game UI Database#
🔗 https://www.gameuidatabase.com/
An intimidatingly large game interface screenshot library, covering nearly 2,000 console and PC games with over 70,000 high-res screenshots. Best of all, it's categorized by UI function: you can search across all games for "character creator," "equipment inventory," "skill tree," "quest popup," or "death screen." Even if you don't make games, seeing how game designers establish visual hierarchy under extreme information density is quite an education.
6. Web Inspiration
Every time a new web project comes in, the worst thing you can do is open your software and start drawing boxes on a white canvas. Spend a quarter of an hour scrolling a few dozen similar pages on the sites below first, get three or four credible layout directions in your head, then start — it saves you more than half the rework.
59. Recent (formerly Godly)#
Godly (godly.website), once bookmarked by nearly every web designer, now redirects from its old address to this new site, Recent. It keeps the delightful experience of watching HD scroll recordings right on the thumbnail without visiting the original site, and it has expanded its scope to product films, app icons, brand identities, and posters. If you want to see what web trends overseas indie developers and tech companies are currently into, this is the one to scroll.
60. Siteinspire#
🔗 https://www.siteinspire.com/
A veteran web inspiration library running for over a decade, with thousands of sites collected. Its filters are genuinely useful: you can stack "visual style (grid, minimal, big type)," "site type (portfolio, e-commerce)," and "industry (architecture, fashion)." The overall curation is restrained — it rarely includes flashy show-off sites, favoring typography that holds up over time.
61. Land-book#
A gallery dedicated to landing pages. Beyond product homepages, it also has separate collections for pricing pages, about pages, and personal résumé pages — very practical for ordinary commercial sites.
62. Landingfolio#
🔗 https://www.landingfolio.com/
Another landing page gallery, but it goes one step further: it breaks pages into sections — hero, feature intro, testimonials, call to action, footer — over 4,600 in total, copyable as Tailwind, Figma, or Webflow (partly paid). It's exceptionally convenient for feeding AI: pick a section you like and hand it over, and it's far more accurate than describing "make me a nice hero" in words.
63. awesome-design-md#
🔗 https://github.com/VoltAgent/awesome-design-md
An open-source collection on GitHub that distills the colors, fonts, spacing, and component styles of sites widely considered beautiful — Stripe, Linear, Vercel, Apple — into a DESIGN.md file for each. Drop it into your project and AI will generate interfaces following that brand's rules, which is far more reliable than you describing "I want that Linear feeling."
64. One Page Love#
A site dedicated to single-page websites. Some small products, offline events, or personal homepages can't justify a navigation bar with several sections — go here to see how others tell a story clearly and with rhythm in the space of one page scrolled top to bottom.
65. Minimal Gallery#
A gallery collecting only minimalist websites. If you always feel your layouts are crammed and suffocating, spend time here and learn how others hold a page up with nothing but black, white, gray, generous whitespace, and clean type-size contrast.
66. Dark Mode Design#
🔗 https://www.darkmodedesign.com/
A gallery collecting only dark-mode websites. Many people's dark pages end up either pitch black with no hierarchy, or so loaded with glow effects that they look cheap. Browse mature examples here to see how pure black and deep gray separate card levels, and how far transparency should be pushed on text and hairline borders so they don't glare.
67. Hoverstat.es#
A place dedicated to "weird websites." You'll basically never see a proper corporate homepage here — it's all independent artists, avant-garde design studios, underground bands, and experimental architects. Navigation hides in strange places, the cursor sends things flying across the screen — when you feel every site looks the same and you're sick of the formula, wandering here is a great palate cleanser.
68. Web Design Museum#
🔗 https://www.webdesignmuseum.org/
A proper "museum of web design history." The curator has archived screenshots of thousands of early websites from 1991 to 2006 — you can see what Apple's site looked like in 1997, how dense the Yahoo portal was around the millennium, and the skeuomorphic buttons and Flash showcase sites that were huge at the time. Beyond nostalgia, the Y2K revival many streetwear brands play with today can be traced back here to the purest primary sources.
7. Front-End and Interaction
For front-end developers, exclaiming "that's amazing" over a stunning interaction effect is useless — opening DevTools and figuring out whether it's CSS or WebGL is the actual skill. Most of the sites below just lay the source code out for you.
69. Codrops#
🔗 https://tympanus.net/codrops/
A treasure trove every creative front-end developer should bookmark. It consistently shares tutorials for the kind of front-end effects that win Awwwards: WebGL image distortion, silky page transitions without reloads, text grids that deform as you scroll. The best part is that every article not only explains the approach step by step but also links a live demo and a GitHub source repo.
70. CodePen Spark#
A collection of creative code curated weekly by CodePen's editorial team. It's full of little toys front-end developers around the world have built in a few hundred lines of CSS, SVG, or Canvas. Find an effect you like, click in and the HTML/CSS/JS panes are right there on the left; change a couple of numbers and the render on the right updates instantly — perfect for practice.
71. GSAP Official Demos#
The official example library of GSAP (GreenSock), the elder statesman of web animation: over a hundred effects sorted into scroll, text, hover, cursor-follow, and carousel categories, each with CodePen source. Many of GSAP's best premium plugins (ScrollTrigger for scroll binding, SplitText for character animation) used to require a paid membership; after the Webflow acquisition, all of them, including the commercial plugins, are now free. Find an effect you like and hand the source straight to AI to modify — a great deal.
72. Three.js Official Examples#
🔗 https://threejs.org/examples/
If you want to do 3D in the browser, you basically can't avoid Three.js. Don't go hunting for random tutorials — start by clicking through the hundreds of official live demos: everything from loading a rigged, animated model to ocean surface reflections, physics collisions, and post-processing bloom passes. Every demo has a "source" button in the bottom right, and what opens is the most canonical official way to write it.
73. Shadertoy#
Where graphics wizards show off. Every dazzling image on this site — rolling volumetric clouds, realistic water refraction, an entire neon-lit 3D city — is computed in real time on the GPU from a few hundred lines of math (GLSL shader code), with no external images or 3D models imported. The source sits right there on the page; the wall of trigonometry is intimidating, but anyone who wants fluid backgrounds or to study graphics can't avoid this place.
74. The Book of Shaders#
🔗 https://thebookofshaders.com/
If you opened Shadertoy and felt like you were reading an alien language, start with this free interactive online tutorial (it has a built-in Chinese edition, among others). The author breaks the dry subject of fragment shaders down from scratch: how to draw a line with one math formula, then a circle, then generate noise textures. Every code block can be edited right in the article with the pattern updating live — widely considered the best introduction to shaders.
75. Bruno Simon#
The personal site of French developer Bruno Simon. Other people's résumés are a one-page PDF; his lets you drive a toy car around a 3D sandbox in the browser, knocking over signposts to read his work history and projects. His Three.js Journey is also one of the clearest courses on web 3D available.
76. Lusion#
A UK studio specializing in bespoke creative development. Their own site is one of the current ceilings of WebGL web interaction — from page load and scroll damping to 3D particle transitions and sound design, not a single frame stutters or is superfluous. Worth every front-end developer opening slowly and studying.
77. Active Theory#
A top US digital interaction studio. Several years of Google I/O's online interactive experiences, and the interactive pages of Spotify Wrapped in earlier years — a lot of the viral technical marketing projects from big companies were coded by them.
78. Framer Gallery#
🔗 https://www.framer.com/gallery/
A collection of outstanding sites curated by Framer. Framer's interface is nearly identical to Figma's, but when you finish designing, one click publishes a responsive site with real code. Scroll through this gallery and you'll see how far a designer who can't code can push site motion using only drag-and-drop and built-in components.
79. Motion Official Examples#
The official examples page for Motion (formerly Framer Motion), the animation library most commonly used with React and Vue today. From basic spring physics easing and list add/remove/reorder to complex scroll-linked animation, the common UI motions mostly have ready-made short examples (partly paid): every example has a live demo, the hundred-plus in the basic categories are free with source, and the rest need Motion+ to see the code.
80. React Bits#
A completely free, open-source supermarket of small React animation components. It's full of ready-made visual widgets: text that resolves out of scrambled characters, magnetic cursor-snapping buttons, glowing card borders, animated fluid backgrounds. Set the speed and color parameters on the left, copy the code on the right straight into your project, and five minutes later a dry page comes alive.
81. coss ui#
The in-house design system of the open-source scheduling tool Cal.com, formerly Origin UI, which plenty of people had bookmarked. Built on Tailwind, with fifty-odd base components and five hundred-plus ready-made blocks, MIT licensed and free to use. Its style is restrained — it looks like a real product that's been carefully polished, not yet another AI startup homepage with "dark background + glowing borders + light-streak effects."
82. Josh W. Comeau#
🔗 https://www.joshwcomeau.com/
The blog of front-end developer Josh Comeau. When he explains CSS layout, spring animation, or SVG paths, he doesn't just paste code — the articles are stuffed with interactive diagrams you can drag and adjust, so dragging one slider makes clear why this curve feels better. Articles are free; advanced courses are paid. Once you understand the principle, you know what to ask for when you have AI write motion.
83. Rauno Freiberg#
The personal site of Rauno, currently a design engineer at Vercel. Strongly recommended: read the essay "Invisible Details of Interaction Design" from top to bottom. Using a dozen small interactive widgets you can click yourself, he explains the engineering details hidden below the surface — why Apple's scroll deceleration feels so natural, how a dropdown avoids accidental triggers based on the slope of the cursor's movement.
84. Emil Kowalski#
The author of the open-source toast component Sonner and drawer component Vaul that many front-end developers use, and formerly a design engineer at Linear. His blog posts are short, but each one grinds away at a single question: how to make interface animation feel "restrained yet responsive." How many milliseconds should a modal take, and when should you absolutely not animate at all — reading them cures a lot of the habit of adding motion everywhere.
8. Typography and Color
Whether you're cutting video and adding subtitles, or drawing interfaces and building web pages, typography and color are always where weak fundamentals show first. If a piece of work looks "tacky" or "messy," nine times out of ten these two things aren't sorted out.
85. Typewolf#
Widely regarded in overseas typography circles as the most reliable type guide site. The curator is a designer who is brutally picky about type; he used to recommend one real site a day that uses type beautifully, noting which fonts it uses for headlines and body (updates stopped at the end of 2025, but the accumulated cases and lists are still browsable). Its "Top 10 Sans Serifs" and "best Google Fonts pairings" lists are extremely high value — when you're unsure what typeface to use for an English or mixed-language page, going through its lists will never steer you wrong.
86. Fonts In Use#
A "field archive of typography in practice" maintained by designers around the world. It doesn't sell fonts; it collects real-world posters, book covers, record sleeves, street signs, and web screenshots, then forensically identifies every typeface used and labels it alongside. If you want to know what character a typeface has when printed on paper or set on a web page, search its real-world examples and you'll know.
87. Google Fonts#
The familiar old friend: a completely free, commercially usable open-source font library. Beyond a huge range of Latin typefaces, the most commonly used Chinese fonts — Noto Sans SC, Noto Serif SC, and the traditional Chinese version of LXGW WenKai — are all directly downloadable, and for front-end work you don't even need to download a font package: one line of link and it runs.
88. Fontshare#
A free font site run by the well-known Indian type foundry ITF. It doesn't have Google Fonts' sheer volume, but every typeface is a gem, and it promises 100% free use for personal and commercial projects. The geometric sans Satoshi, the display face Clash Display, and General Sans — all extremely visible in overseas indie websites and tech circles in recent years — came free from here.
89. Butterick's Practical Typography#
🔗 https://practicaltypography.com/
An exceptionally enjoyable free online book on typography. The author has both written code and worked as a professional type designer, and there's no mystifying art theory here — it opens with a chapter on "typography in ten minutes" that gives you hard targets: how many characters per line is most comfortable, what line-height multiple to set, and why you should never casually widen letter-spacing. Even reading only that first chapter will make your documents and web pages look noticeably better immediately.
90. Utopia#
Many beginners size a page by gut — 32px for headlines, 22px for subheads, 14px for body — and the page ends up looking completely unordered. This little tool helps you set type sizes by mathematical ratio: enter your body size for mobile and desktop, pick a scale ratio (say, a major third at 1.250), and it automatically computes a full set of type-size variables that scale smoothly with viewport width, spacing included. Free, no registration, and the generated CSS can be copied straight into use or handed to AI as a typography spec.
91. Coolors#
The most user-friendly color palette tool. Open the page, set nothing, just hit the spacebar and a random five-color palette appears; when you see a color you like, click the lock to pin it and keep hitting space, and the algorithm builds the rest around your locked colors. It can simulate how the palette looks to colorblind users with one click, and export palettes as images or code.
92. Realtime Colors#
🔗 https://www.realtimecolors.com/
You've saved a pile of nice five-color palettes, and then when you actually draw a page you're lost again — which color fills the background, which one paints buttons, which one writes body text. This tool solves exactly that: in the bottom toolbar you pick (or randomly roll) text, background, primary, secondary, and accent colors, and the standard landing page and dashboard charts above recolor in real time. Tap the sun/moon icon any time to check whether the palette falls apart in dark mode. When it's right, export Tailwind config or CSS variables, or sync it into Figma with one click via its companion plugin.
93. Radix Colors#
🔗 https://www.radix-ui.com/colors
A complete interface palette accompanying the open-source component library Radix. What it gives you isn't a few pretty palettes but each color split into 12 steps, with each step's job defined: which steps are for backgrounds, which for button hover, which for borders, which for text — with dark mode configured too. Use color by these rules and a page rarely goes wrong; telling AI "use colors per Radix's 12 steps" also works better than "make the colors more sophisticated."
94. tweakcn#
Plenty of people now write front-ends with AI using the shadcn/ui component set, and the result is that sites everywhere look identical — which is exactly why the author built this. tweakcn is a visual editor for reskinning shadcn: adjust colors, fonts, corner radius, and shadows on the left while cards, forms, and dashboards update live on the right. There's also a stack of preset themes to apply, and when you're happy you export the theme code and paste it into your project. Free and open source.
9. Collecting Inspiration Day to Day
Taste isn't something you can cram for. When you're scrolling your phone or browsing the web and see an image that makes you look twice, file it into your own library by category as you go. Then when a real project needs a direction, going through your own stash is always faster than fishing across the entire internet.
95. Pinterest#
Its image library is still the largest on the internet, and it's especially good for following a thread: find one reference image that's on target, click in, and follow the "similar images" downward — ten minutes gets you dozens of images in the same style. The downside is that in recent years the home feed has been polluted with rough AI-generated images and marketing spam. Build a few private boards and pin only genuinely curated images, and slowly clean up the recommendation algorithm.
96. Are.na#
A collection tool favored by many of the geeks, architects, and independent writers in the design world. It looks extremely plain — no ads, no algorithmic feed, not even "like" counts. You can create different channels, drop in images, PDF documents, web links, or a paragraph you jotted down, and connect your channels to other people's public channels around the world. Very well suited to quietly accumulating research material on a specific subject.
97. Cosmos#
A new-generation inspiration bookmarking tool that has taken off in overseas designer circles over the past couple of years. Install its browser extension and when you see a good image or video on Twitter or any site, right-click and it lands in your space. Its interface layout is extremely clean, and because early users were mostly creatives with good taste, browsing other people's public collections in Discover yields very high-quality images.
98. Savee#
A minimalist image community made specifically for visual designers. Open the site and there aren't even superfluous text titles — the screen is just a clean masonry flow of high-res images. The content is very pure, concentrated in graphic layout, brand packaging, avant-garde photography, type design, and industrial forms. When you need high-end graphic references, scrolling here is far more efficient than a general platform.
99. It's Nice That#
🔗 https://www.itsnicethat.com/
A creative culture publication that's been running in London for many years. It posts a few short articles a day covering the latest illustration, graphic design, animation, and photography projects from around the world. What makes it good is that it doesn't just post images — its editors dig out the fun stories behind the creators: how this strange typeface came out of a printing mistake, what the director of that absurd short film was thinking. Perfect lunchtime reading.
100. Brand New#
🔗 https://www.underconsideration.com/brandnew/
The professional critique site for global rebranding. Whenever a moderately well-known company, university, sports league, or consumer brand anywhere in the world changes its logo and visual identity, this site immediately puts the old and new versions side by side and delivers an objective (sometimes merciless) breakdown of everything from typeface tweaks and mark evolution to real-world rollout. Below each post, industry peers from around the world vote and rate (paid; without a subscription you can only see the old-versus-new logo comparison). Read this site regularly and you quickly develop an eye for judging commercial brand design.
Finally: how to actually use these 100 sites
As I said at the start, throwing this article into your bookmarks and letting it gather dust is worth nothing.
I use these sites with four dumb methods, and sticking with them has worked well:
Pick just one site a day and close it after 15 minutes. Whatever you do, don't open twenty tabs at once — you'll be sick of it in five minutes. Give yourself a mindless fixed schedule instead: scroll Awwwards with your Monday morning coffee, watch Motionographer on Tuesday, flip through Mobbin on Wednesday... one place for a quarter of an hour a day, and a steady drip is what actually sinks in.
Before you scroll past, force yourself to say in one sentence what makes it good. When an image or a page strikes you as beautiful, don't just save it — stop and think for ten seconds: does it feel premium because it dares to give you whitespace? Because the size gap between headline and body is wide enough? Because the background gray is tuned just right? Or because the button pops out at exactly the right speed? If you can sum up the reason in plain language, the trick has become yours; if you can't, you've just feasted your eyes.
When something really grabs you, take it apart and copy it. For a stunning web page, hit F12 and look at what grid spacing it uses, which Latin typeface, what parameters its CSS easing curve is set to. For a short film with great rhythm, download it, drag it into your editor, and count frame by frame how long each shot holds and which frame the transition hides on. Once you understand it, close the original, start a new project, and imitate it once — one attempt is worth ten tutorials.
Remember the names of the styles you see; they become your leverage when talking to AI. Everyone uses Claude, Cursor, or some image generator every day now. If all you can say is "make this page feel grander and more modern," you'll always get the most mediocre template back. But if you've spent time on the sites above, you can give orders like: "Following the rules in Linear's DESIGN.md from awesome-design-md, write me a dark Bento grid card with a faint highlight stroke on the border, headlines in a geometric sans like Satoshi, and an expand animation using the fast damping curve Emil Kowalski recommends; when you're done, self-audit against Vercel's interface guidelines" — when you can throw out specific names and techniques, what AI hands back is on an entirely different level.
In the end, only the things you can name precisely and explain clearly are the taste that has actually grown into you.
These 100 sites are what I filtered out based on my own habits making videos and drawing graphics — there are certainly good places I've missed. If you have sites in your bookmarks you can't bear to delete, drop them in the comments and let's compare notes.
If this list is at all useful, feel free to give it a like and pass it to a friend you work with. Next time you're staring blankly at a screen at the start of a new project, pull it out and take a look.
I'm Eian. Thanks for the support.