elite-inspiration

Elite Inspiration

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

Quick Reference

Pattern	Reference File
Horizontal Scroll	horizontal-scroll-sites.md
Bento Grids	bento-grid-sites.md
Text Animations	text-animation-sites.md
Parallax	parallax-sites.md
Product Configurators	product-configurators.md
Agency Portfolios	agency-portfolios.md
Micro-interactions	micro-interactions.md
Archetype case studies	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
• Honorable Mentions
• Developer Awards

FWA (Favourite Website Awards)

URL: https://thefwa.com

Best for: Experimental work, interactive experiences, WebGL

Key sections:

• Site of the Day
• 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

---

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

---

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

---

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

---

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

---

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

---

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

---

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 on Twitter/X
• @thefwa on Twitter/X
• 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