elite-inspiration

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

---

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?

---

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

---

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)

---

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 |

---

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

---

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

---

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)

---

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