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 |
How to Study Inspiration
Don't Copy, Understand
When studying award-winning sites:
- Identify the technique - What animation/layout is used?
- Understand the purpose - Why this technique? What does it communicate?
- Analyze timing - Note easing, duration, stagger patterns
- Map to implementation - How would you build it?
- 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
Best for: Cutting-edge techniques, design trends, agency work
Key sections:
FWA (Favourite Website Awards)
URL: https://thefwa.com
Best for: Experimental work, interactive experiences, WebGL
Key sections:
CSS Design Awards
URL: https://www.cssdesignawards.com
Best for: CSS-focused design, clean implementations
Godly
Best for: Curated landing pages, SaaS design inspiration
Landbook
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)
- Visual excellence - Striking first impression
- Technical innovation - Novel techniques
- Purposeful motion - Animation supports content
- Cross-device - Works on mobile
- Performance - Fast load, smooth scroll
- Attention to detail - Micro-interactions, polish
Research Workflow
When Starting a Project
- Define the pattern - What type of site? (portfolio, SaaS, e-commerce)
- Search Awwwards - Filter by category, color, tech
- Collect 5-10 references - Screenshot key moments
- Analyze techniques - Note what makes each special
- Identify common threads - What do great examples share?
- 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