awwwards-design

通过先进的动画、创意交互和独特的视觉体验创建屡获殊荣、令人难忘的网站。在构建需要出色的网站（投资组合网站、代理展示、产品发布或任何“令人惊叹的因素”很重要的项目）时，请使用此技能。

## 概述（中文）

通过先进的动画、创意交互和独特的视觉体验创建屡获殊荣、令人难忘的网站。在构建需要出色的网站（投资组合网站、代理展示、产品发布或任何“令人惊叹的因素”很重要的项目）时，请使用此技能。

## 原文

# Awwwards-Level Web Design

This skill guides creation of truly exceptional websites—the kind that win awards, get shared, and make people stop scrolling. These aren't just good websites; they're experiences.

## Philosophy: What Makes a Site Unforgettable

Award-winning sites share common traits that separate them from the millions of forgettable pages:

### 1. Intentional Storytelling
Every scroll, every click, every hover tells part of a story. The site guides users through a narrative, not just a collection of sections. Content reveals progressively, creating anticipation and reward.

### 2. Choreographed Motion
Animations aren't decoration—they're communication. Each movement has purpose: guiding attention, providing feedback, creating continuity, or building emotional resonance. The timing, easing, and sequencing are meticulously orchestrated.

### 3. Sensory Richness
These sites engage multiple senses. Custom cursors create tactile feedback. Sound design (when appropriate) adds depth. Textures, gradients, and lighting effects create atmosphere. The experience feels *physical* despite being digital.

### 4. Technical Craftsmanship
Smooth 60fps animations. Fast load times despite rich visuals. Graceful degradation on slower devices. The engineering is invisible but essential.

### 5. Breaking Conventions Intentionally
Award-winning sites know the rules well enough to break them deliberately. Unconventional layouts, unexpected interactions, rule-breaking typography—but always in service of the experience, never random.

---

## The Awwwards Evaluation Criteria

Sites are judged on four dimensions:

1. **Design** (8.5+ for SOTD): Visual aesthetics, composition, color, typography, imagery
2. **Usability** (8.5+ for SOTD): Navigation, accessibility, responsiveness, intuitive UX
3. **Creativity** (8.5+ for SOTD): Innovation, uniqueness, memorable moments
4. **Content** (8.5+ for SOTD): Quality, storytelling, relevance, engagement

To win Site of the Day, you need excellence across ALL four. A beautiful site with poor usability won't win.

---

## Core Animation Techniques

### 1. Scroll-Triggered Animations

The foundation of immersive web experiences. Elements animate in response to scroll position, creating a sense of discovery.

**Key Patterns:**
- **Reveal on Enter**: Elements fade/slide/scale into view as they enter the viewport
- **Scrubbed Animations**: Animation progress tied directly to scroll position (not just triggered)
- **Parallax Layers**: Background and foreground elements move at different speeds, creating depth
- **Horizontal Scroll Sections**: Vertical scrolling translates to horizontal movement
- **Pinned Sections**: Elements stay fixed while content scrolls through them

**Implementation Stack:**
```
Primary: GSAP + ScrollTrigger (industry standard)
Smooth Scrolling: Lenis or GSAP ScrollSmoother
React: Framer Motion + useScroll hook
```

**Code Pattern (GSAP):**
```javascript
gsap.registerPlugin(ScrollTrigger);

// Basic reveal
gsap.from(".reveal-element", {
  opacity: 0,
  y: 100,
  duration: 1,
  ease: "power3.out",
  scrollTrigger: {
    trigger: ".reveal-element",
    start: "top 80%",
    end: "top 20%",
    toggleActions: "play none none reverse"
  }
});

// Scrubbed animation (tied to scroll position)
gsap.to(".parallax-bg", {
  y: -200,
  ease: "none",
  scrollTrigger: {
    trigger: ".parallax-section",
    start: "top bottom",
    end: "bottom top",
    scrub: true
  }
});
```

### 2. Text Splitting & Typography Animation

Award-winning sites treat text as a design element, not just content. Individual characters, words, and lines become animatable units.

**Key Patterns:**
- **Character-by-character reveals**: Letters animate in sequentially
- **Word stagger**: Words cascade in with varying delays
- **Line-by-line reveals**: Each line slides or fades independently
- **Scramble/decode effects**: Text appears to decode or unscramble
- **Kinetic typography**: Text that moves, rotates, or transforms with scroll/interaction

**Implementation:**
```
GSAP SplitText (premium but powerful)
SplitType (free alternative)
Splitting.js (lightweight)
```

**Code Pattern:**
```javascript
// Using SplitType + GSAP
const text = new SplitType('.hero-title', { types: 'chars, words' });

gsap.from(text.chars, {
  opacity: 0,
  y: 50,
  rotateX: -90,
  stagger: 0.02,
  duration: 0.8,
  ease: "back.out(1.7)"
});
```

**Typography Choices for Impact:**
- Display fonts with character: Neue Machina, Monument Extended, PP Mori, Clash Display, Satoshi
- Variable fonts for animation: Weight, width, and slant can animate smoothly
- Extreme sizes: Hero text at 15-25vw creates immediate impact
- Mixed weights and sizes within a single headline

### 3. Micro-Interactions & Hover States

The details that create delight. Every interactive element should respond to user input in satisfying ways.

**Key Patterns:**
- **Magnetic buttons**: Elements that pull toward the cursor
- **Reveal on hover**: Hidden content or effects that appear on interaction
- **Morphing shapes**: Elements that transform shape on hover
- **Ripple effects**: Click feedback that radiates from touch point
- **State machines**: Complex multi-state animations (idle → hover → active → complete)

**Implementation:**
```
Rive (for complex state-based animations)
Lottie (After Effects → web)
GSAP (programmatic control)
CSS transitions (simple states)
```

**Code Pattern (Magnetic Effect):**
```javascript
const magneticElements = document.querySelectorAll('.magnetic');

magneticElements.forEach(el => {
  el.addEventListener('mousemove', (e) => {
    const rect = el.getBoundingClientRect();
    const x = e.clientX - rect.left - rect.width / 2;
    const y = e.clientY - rect.top - rect.height / 2;
    
    gsap.to(el, {
      x: x * 0.3,
      y: y * 0.3,
      duration: 0.3,
      ease: "power2.out"
    });
  });
  
  el.addEventListener('mouseleave', () => {
    gsap.to(el, {
      x: 0,
      y: 0,
      duration: 0.5,
      ease: "elastic.out(1, 0.3)"
    });
  });
});
```

### 4. Page Transitions

Seamless transitions between pages create a native-app feel and maintain immersion.

**Key Patterns:**
- **Crossfade with motion**: Old page fades while new slides in
- **Shared element transitions**: Images or elements morph between pages
- **Wipe/reveal transitions**: Content sweeps across screen
- **Zoom transitions**: Click target expands to fill screen
- **Overlay transitions**: Colored layer sweeps over before revealing new content

**Implementation:**
```
Barba.js + GSAP (multi-page sites)
Next.js + Framer Motion (React apps)
Astro + View Transitions API (modern approach)
```

### 5. Custom Cursors

Replace the default cursor with something that reinforces the brand and adds interactivity.

**Key Patterns:**
- **Follower cursor**: A shape that follows with slight lag (lerping)
- **Context-aware cursor**: Changes based on what it's hovering
- **Magnetic cursor**: Snaps to interactive elements
- **Blob cursor**: Morphing organic shape
- **Text cursor**: Words that follow the pointer
- **Trail effects**: Multiple elements following in sequence

**Code Pattern:**
```javascript
const cursor = document.querySelector('.cursor');
let mouseX = 0, mouseY = 0;
let cursorX = 0, cursorY = 0;

document.addEventListener('mousemove', (e) => {
  mouseX = e.clientX;
  mouseY = e.clientY;
});

// Smooth following with lerp
function animate() {
  cursorX += (mouseX - cursorX) * 0.1;
  cursorY += (mouseY - cursorY) * 0.1;
  
  cursor.style.transform = `translate(${cursorX}px, ${cursorY}px)`;
  requestAnimationFrame(animate);
}
animate();

// Context changes
document.querySelectorAll('a, button').forEach(el => {
  el.addEventListener('mouseenter', () => cursor.classList.add('cursor--hover'));
  el.addEventListener('mouseleave', () => cursor.classList.remove('cursor--hover'));
});
```

### 6. Easing