---
name: elite-inspiration
description: |
  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.
---

# 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) |

---

## 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