Awwwards Design

---
name: awwwards-design
description: Create award-winning, memorable websites with advanced animations, creative interactions, and distinctive visual experiences. Use this skill when building sites that need to be exceptional—portfolio sites, agency showcases, product launches, or any project where "wow factor" matters.
license: MIT
---

# 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.que