# Elite Inspiration

> Curated collection of award-winning websites organized by pattern and technique. Use when asked about: inspiration, examples, Awwwards, FWA, reference sites, what do top sites look like, or when researching how leading studios approach specific patterns. Archetype case studies cross-reference patterns from elite-gsap, elite-css-animations, elite-layouts, elite-design-core, and elite-ux-strategy.

- Skill: `rshvr/elite-inspiration` (Agent Skill, multi-file: 9 files)
- Install (CLI): `npx skillmds@latest add rshvr/elite-inspiration`
- Raw SKILL.md: https://api.skillmd.com/api/skills/rshvr/elite-inspiration/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: rshvr (https://skillmd.com/u/rshvr)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/rshvr/elite-inspiration

---


# Elite Inspiration

Curated references from Awwwards, FWA, and CSS Design Awards.

## Quick Reference

| Pattern                | Reference File                                                      |
| ---------------------- | ------------------------------------------------------------------- |
| Horizontal Scroll      | [horizontal-scroll-sites.md](references/horizontal-scroll-sites.md) |
| Bento Grids            | [bento-grid-sites.md](references/bento-grid-sites.md)               |
| Text Animations        | [text-animation-sites.md](references/text-animation-sites.md)       |
| Parallax               | [parallax-sites.md](references/parallax-sites.md)                   |
| Product Configurators  | [product-configurators.md](references/product-configurators.md)     |
| Agency Portfolios      | [agency-portfolios.md](references/agency-portfolios.md)             |
| Micro-interactions     | [micro-interactions.md](references/micro-interactions.md)           |
| Archetype case studies | [archetype-case-studies.md](references/archetype-case-studies.md)   |

---

## How to Study Inspiration

### Don't Copy, Understand

When studying award-winning sites:

1. **Identify the technique** - What animation/layout is used?
2. **Understand the purpose** - Why this technique? What does it communicate?
3. **Analyze timing** - Note easing, duration, stagger patterns
4. **Map to implementation** - How would you build it?
5. **Adapt to context** - How does it fit your project?

### Questions to Ask

- What makes this feel premium?
- How does animation support content?
- What's the hierarchy of movement?
- How does it handle mobile?
- What accessibility considerations exist?

---

## Award Platforms

### Awwwards

**URL**: https://www.awwwards.com

Best for: Cutting-edge techniques, design trends, agency work

Key sections:

- [Sites of the Day](https://www.awwwards.com/websites/sites_of_the_day/)
- [Honorable Mentions](https://www.awwwards.com/websites/honorable-mentions/)
- [Developer Awards](https://www.awwwards.com/websites/developer/)

### FWA (Favourite Website Awards)

**URL**: https://thefwa.com

Best for: Experimental work, interactive experiences, WebGL

Key sections:

- [Site of the Day](https://thefwa.com/site-of-the-day)
- [Mobile of the Day](https://thefwa.com/mobile-of-the-day)

### CSS Design Awards

**URL**: https://www.cssdesignawards.com

Best for: CSS-focused design, clean implementations

### Godly

**URL**: https://godly.website

Best for: Curated landing pages, SaaS design inspiration

### Landbook

**URL**: https://land-book.com

Best for: Landing page patterns, conversion-focused design

### SaaS Landing Page

**URL**: https://saaslandingpage.com

Best for: B2B SaaS design patterns

---

## Pattern Categories

### Horizontal Scroll

Used for: Portfolios, case studies, storytelling

Key techniques:

- GSAP ScrollTrigger pin
- CSS scroll-snap
- Progress indicators
- Mobile fallback to vertical

**Study these** → See [horizontal-scroll-sites.md](references/horizontal-scroll-sites.md)

---

### Bento Grids

Used for: Feature showcases, product pages, dashboards

Key techniques:

- CSS Grid with spans
- Responsive reflow
- Card hover effects
- FLIP animations for filtering

**Study these** → See [bento-grid-sites.md](references/bento-grid-sites.md)

---

### Text Animations

Used for: Hero sections, headlines, storytelling

Key techniques:

- SplitText character/word animation
- Masked reveals
- Stagger patterns
- Scroll-linked reveals

**Study these** → See [text-animation-sites.md](references/text-animation-sites.md)

---

### Parallax Effects

Used for: Depth, immersion, storytelling

Key techniques:

- Multi-layer depth
- Scroll-based transforms
- Sticky sections
- CSS perspective

**Study these** → See [parallax-sites.md](references/parallax-sites.md)

---

### Product Configurators

Used for: E-commerce, SaaS, customization

Key techniques:

- 3D model integration
- Color/option switching
- Real-time preview
- FLIP transitions

**Study these** → See [product-configurators.md](references/product-configurators.md)

---

### Agency Portfolios

Used for: Creative studios, freelancers

Key techniques:

- Case study navigation
- Project hover previews
- Custom cursors
- Page transitions

**Study these** → See [agency-portfolios.md](references/agency-portfolios.md)

---

### Micro-interactions

Used for: Buttons, forms, navigation, feedback

Key techniques:

- State transitions
- Loading states
- Hover feedback
- Success/error states

**Study these** → See [micro-interactions.md](references/micro-interactions.md)

---

## Leading Studios

These studios consistently produce award-winning work:

### Development-Focused

| Studio                 | Known For          | Location     |
| ---------------------- | ------------------ | ------------ |
| **Active Theory**      | WebGL, interactive | LA, USA      |
| **Build in Amsterdam** | Smooth animations  | Amsterdam    |
| **Locomotive**         | Scroll experiences | Montreal     |
| **Resn**               | Experimental       | Wellington   |
| **Studio Freight**     | Motion design      | Brooklyn     |
| **Basement Studio**    | Cutting-edge tech  | Buenos Aires |

### Design-Focused

| Studio         | Known For         | Location  |
| -------------- | ----------------- | --------- |
| **Basic/Dept** | Clean, minimal    | San Diego |
| **Huge**       | Enterprise scale  | Brooklyn  |
| **Fantasy**    | Product design    | SF        |
| **Ueno**       | Brand experiences | Reykjavik |
| **Rally**      | Startups          | SF        |

---

## Technology Patterns

### GSAP Usage

Most award-winning sites use GSAP for:

- Scroll-driven animations (ScrollTrigger)
- Text reveals (SplitText)
- Layout changes (Flip)
- Timeline orchestration

### WebGL/Three.js

Common in:

- 3D product showcases
- Interactive backgrounds
- Particle effects
- Shader-based visuals

### Frameworks

Common stacks:

- **Next.js** - React SSR, performance
- **Nuxt** - Vue SSR
- **SvelteKit** - Svelte SSR
- **Astro** - Static-first, partial hydration

---

## Evaluation Criteria

How awards judge sites:

### Awwwards Criteria

| Category   | Weight | What They Look For                |
| ---------- | ------ | --------------------------------- |
| Design     | 40%    | Visual impact, creativity, trends |
| Usability  | 30%    | Navigation, accessibility, mobile |
| Creativity | 15%    | Innovation, uniqueness            |
| Content    | 15%    | Quality, relevance                |

### What Makes "SOTD" (Site of the Day)

1. **Visual excellence** - Striking first impression
2. **Technical innovation** - Novel techniques
3. **Purposeful motion** - Animation supports content
4. **Cross-device** - Works on mobile
5. **Performance** - Fast load, smooth scroll
6. **Attention to detail** - Micro-interactions, polish

---

## Research Workflow

### When Starting a Project

1. **Define the pattern** - What type of site? (portfolio, SaaS, e-commerce)
2. **Search Awwwards** - Filter by category, color, tech
3. **Collect 5-10 references** - Screenshot key moments
4. **Analyze techniques** - Note what makes each special
5. **Identify common threads** - What do great examples share?
6. **Adapt to project** - How can these inspire your approach?

### Bookmarking System

Organize inspiration by:

- **Pattern type** (horizontal scroll, bento, etc.)
- **Technique** (scroll animation, 3D, text effects)
- **Industry** (SaaS, fashion, agency)
- **Complexity** (simple, medium, advanced)

---

## Staying Current

### Follow

- [@awwwards](https://twitter.com/awwwards) on Twitter/X
- [@thefwa](https://twitter.com/thefwa) on Twitter/X
- [r/web_design](https://reddit.com/r/web_design) on Reddit
- GSAP forums and showcase

### Events

- Awwwards Conferences
- OFFF Festival
- Beyond Tellerrand

### Newsletters

- Awwwards weekly digest
- Codrops Collective
- Web Design Weekly