elite-inspiration

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Elite Inspiration

精英灵感库

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

精选自Awwwards、FWA和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

设计模式	参考文档
横向滚动	horizontal-scroll-sites.md
便当式网格	bento-grid-sites.md
文字动画	text-animation-sites.md
视差效果	parallax-sites.md
产品配置器	product-configurators.md
工作室作品集	agency-portfolios.md
微交互	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

URL: https://www.awwwards.com

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

Key sections:

网址: https://www.awwwards.com

最适合：前沿技术、设计趋势、工作室作品

核心板块：

FWA (Favourite Website Awards)

FWA（最受欢迎网站奖）

URL: https://thefwa.com

Best for: Experimental work, interactive experiences, WebGL

Key sections:

网址: https://thefwa.com

最适合：实验性作品、交互式体验、WebGL

核心板块：

CSS Design Awards

URL: https://www.cssdesignawards.com

Best for: CSS-focused design, clean implementations

网址: https://www.cssdesignawards.com

最适合：聚焦CSS的设计、简洁的实现方案

Godly

URL: https://godly.website

Best for: Curated landing pages, SaaS design inspiration

网址: https://godly.website

最适合：精选落地页、SaaS设计灵感

Landbook

URL: https://land-book.com

Best for: Landing page patterns, conversion-focused design

网址: https://land-book.com

最适合：落地页模式、转化导向型设计

SaaS Landing Page

URL: https://saaslandingpage.com

Best for: B2B SaaS design patterns

网址: https://saaslandingpage.com

最适合：B2B SaaS设计模式

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

适用场景：作品集、案例研究、叙事类网站

核心技术：

GSAP ScrollTrigger 固定定位
CSS scroll-snap
进度指示器
移动端回退为垂直滚动

研究案例 → 查看 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

适用场景：功能展示、产品页、仪表盘

核心技术：

带跨列的CSS Grid
响应式重排
卡片悬停效果
用于筛选的FLIP动画

研究案例 → 查看 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

适用场景：Hero区域、标题、叙事内容

核心技术：

SplitText 字符/单词动画
遮罩式渐显
交错模式
滚动联动渐显

研究案例 → 查看 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

适用场景：营造深度、沉浸感、叙事

核心技术：

多层深度结构
基于滚动的变换
粘性区块
CSS perspective

研究案例 → 查看 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

适用场景：电商、SaaS、定制类网站

核心技术：

3D模型集成
颜色/选项切换
实时预览
FLIP过渡动画

研究案例 → 查看 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

适用场景：创意工作室、自由职业者

核心技术：

案例研究导航
项目悬停预览
自定义光标
页面过渡效果

研究案例 → 查看 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

适用场景：按钮、表单、导航、反馈

核心技术：

状态过渡
加载状态
悬停反馈
成功/错误状态

研究案例 → 查看 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

工作室	专长领域	所在地
Active Theory	WebGL、交互式体验	美国洛杉矶
Build in Amsterdam	流畅动画	阿姆斯特丹
Locomotive	滚动体验	蒙特利尔
Resn	实验性作品	惠灵顿
Studio Freight	动态设计	布鲁克林
Basement Studio	前沿技术	布宜诺斯艾利斯

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

工作室	专长领域	所在地
Basic/Dept	简洁极简风格	圣迭戈
Huge	企业级规模项目	布鲁克林
Fantasy	产品设计	旧金山
Ueno	品牌体验	雷克雅未克
Rally	初创企业项目	旧金山

Technology Patterns

技术模式

GSAP Usage

GSAP 用法

Most award-winning sites use GSAP for:

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

大多数获奖网站使用GSAP实现：

滚动驱动动画（ScrollTrigger）
文字渐显（SplitText）
布局变更（Flip）
时间线编排

WebGL/Three.js

Common in:

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

常见应用场景：

3D产品展示
交互式背景
粒子效果
基于着色器的视觉效果

Frameworks

框架

Common stacks:

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

常用技术栈：

Next.js - React SSR、性能优化
Nuxt - Vue SSR
SvelteKit - Svelte SSR
Astro - 静态优先、部分 hydration

Evaluation Criteria

评审标准

How awards judge sites:

奖项评选网站的标准：

Awwwards Criteria

Awwwards 评审标准

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

类别	权重	评审要点
设计	40%	视觉冲击力、创意性、趋势契合度
可用性	30%	导航、可访问性、移动端适配
创意	15%	创新性、独特性
内容	15%	质量、相关性

What Makes "SOTD" (Site of the Day)

如何成为“每日最佳网站”（SOTD）

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?

明确模式类型 - 网站类型是什么？（作品集、SaaS、电商）
搜索Awwwards - 按类别、颜色、技术筛选
收集5-10个参考案例 - 截图关键场景
分析技术手段 - 记录每个案例的亮点
识别共性特征 - 优秀案例有哪些共同点？
适配项目需求 - 这些灵感如何启发你的方案？

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)

按以下维度整理灵感：

模式类型（横向滚动、便当式网格等）
技术手段（滚动动画、3D、文字效果）
行业领域（SaaS、时尚、工作室）
复杂度（简单、中等、高级）

Staying Current

保持与时俱进

Follow

关注账号

@awwwards on Twitter/X
@thefwa on Twitter/X
r/web_design on Reddit
GSAP forums and showcase

Twitter/X上的@awwwards
Twitter/X上的@thefwa
Reddit上的r/web_design
GSAP论坛和展示区

Events

活动

Awwwards Conferences
OFFF Festival
Beyond Tellerrand

Awwwards 大会
OFFF Festival
Beyond Tellerrand

Newsletters

通讯简报

Awwwards weekly digest
Codrops Collective
Web Design Weekly

Awwwards 每周摘要
Codrops Collective
Web Design Weekly