Skill: mkhaytman87/awwwards-design (version 1.0.0)

--- 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.querySelectorAll('a, button').forEach(el => { el.addEventListener('mouseenter', () => cursor.classList.add('cursor--hover')); el.addEventListener('mouseleave', () => cursor.classList.remove('cursor--hover')); }); ``` ### 6. Easing & Timing The secret sauce. Proper easing transforms mechanical movement into organic motion. **Essential Easing Functions:** ``` power2.out / power3.out — Natural deceleration (most common) power2.inOut — Smooth acceleration and deceleration back.out(1.7) — Slight overshoot, then settle (playful) elastic.out(1, 0.3) — Bouncy, energetic expo.out — Dramatic fast-start, slow-end circ.out — Quick initial movement ``` **Timing Principles:** - **Stagger delays**: 0.02-0.05s between sequential elements - **Hover transitions**: 0.2-0.4s (fast enough to feel responsive) - **Page transitions**: 0.6-1.2s (long enough to appreciate, not too slow) - **Scroll animations**: Duration tied to scroll distance, or 0.8-1.5s for triggered **The Golden Rule**: Fast in, slow out. Most movements should decelerate into their final position. --- ## Visual Techniques ### Gradients & Color **Mesh Gradients**: Complex multi-point gradients that feel organic ```css background: radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0px, transparent 50%), radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%), radial-gradient(at 0% 50%, hsla(355,85%,93%,1) 0px, transparent 50%); ``` **Animated Gradients**: Shifting colors that create movement ```css @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .animated-gradient { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient-shift 15s ease infinite; } ``` ### Texture & Depth **Grain/Noise Overlays**: Add organic texture ```css .grain::after { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); opacity: 0.03; pointer-events: none; z-index: 9999; } ``` **Glassmorphism**: Frosted glass effects ```css .glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; } ``` **Shadows for Depth**: Layered, soft shadows ```css .elevated { box-shadow: 0 1px 1px rgba(0,0,0,0.02), 0 2px 2px rgba(0,0,0,0.02), 0 4px 4px rgba(0,0,0,0.02), 0 8px 8px rgba(0,0,0,0.02), 0 16px 16px rgba(0,0,0,0.02); } ``` ### Layout Breaking **Overlapping Elements**: Break the grid intentionally **Diagonal/Angular Sections**: Clip-path for non-rectangular sections **Asymmetric Compositions**: Deliberate imbalance creates tension **Full-bleed Media**: Images/video that escape containers **Mixed Grid Systems**: Combine different column structures --- ## 3D & WebGL For truly next-level sites, 3D elements create unforgettable experiences. **Implementation Stack:** ``` Three.js — Full 3D engine React Three Fiber — Three.js in React Spline — No-code 3D design tool Lottie 3D — Lightweight 3D animations ``` **Common Patterns:** - 3D product viewers with orbit controls - Particle systems responding to scroll/mouse - Shader effects (distortion, ripple, noise) - 3D text and typography - Environment scenes with camera movement **Performance Note**: 3D is expensive. Use sparingly, optimize aggressively, and always provide fallbacks. --- ## Technical Requirements ### Performance Targets - **First Contentful Paint**: < 1.5s - **Largest Contentful Paint**: < 2.5s - **Total Blocking Time**: < 200ms - **Animation frame rate**: Consistent 60fps ### Optimization Strategies - Lazy load below-fold content - Preload critical assets - Use `will-change` sparingly and correctly - Debounce scroll handlers - Use `requestAnimationFrame` for JS animations - Prefer CSS transforms over layout-triggering properties - Compress and optimize all media ### Accessibility Award-winning sites must be usable by everyone: - Respect `prefers-reduced-motion` - Maintain keyboard navigation - Ensure sufficient color contrast - Provide text alternatives for visual content - Test with screen readers ```css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } ``` --- ## Implementation Checklist Before considering a site "award-worthy," verify: ### Animation - [ ] Scroll-triggered reveals with staggered timing - [ ] Smooth scroll (Lenis or equivalent) - [ ] Custom easing on all animations - [ ] Page/section transitions - [ ] Hover states on all interactive elements - [ ] Loading animation/sequence ### Visual - [ ] Distinctive typography (not Inter/Roboto) - [ ] Custom cursor (if appropriate) - [ ] Texture/grain overlay - [ ] Considered color palette with intention - [ ] Atmospheric backgrounds (gradients, effects) - [ ] Consistent visual language throughout ### Technical - [ ] 60fps animation performance - [ ] Mobile responsive with adapted interactions - [ ] Reduced motion support - [ ] Fast initial load - [ ] No layout shift during load ### Content - [ ] Clear narrative/story structure - [ ] Purposeful content hierarchy - [ ] Engaging copywriting - [ ] High-quality imagery/media --- ## Reference Sites Study these for inspiration (search on Awwwards): - **Immersive storytelling**: Apple product pages, Stripe - **Creative agency**: Resn, Active Theory, Locomotive - **Portfolio**: Bruno Simon, Aristide Benoist, Dennis Snellenberg - **Product**: Linear, Vercel, Raycast - **Editorial**: The Pudding, NYT Interactives --- ## When NOT to Use This Approach Award-winning design isn't always appropriate: - **E-commerce with conversion goals**: Simplicity often wins - **Information-heavy sites**: Clarity over creativity - **Accessibility-first contexts**: Heavy animation can be exclusionary - **Limited budget/timeline**: This takes significant time to execute well Use these techniques when the goal is to create a memorable brand experience, showcase creative work, or make a statement. For utility-focused sites, the standard frontend-design skill may be more appropriate. --- Remember: Award-winning sites aren't just technically impressive—they're emotionally resonant. Every animation, every interaction, every visual choice should serve the story you're telling. Technical skill without creative vision produces impressive-but-forgettable work. The goal is to make someone feel something.

path: SNIPPETS.md
content: # Awwwards Design — Code Snippets

Ready-to-use code patterns for award-winning interactions.

---

## Smooth Scroll Setup (Lenis)

```html
<script src="https://unpkg.com/lenis@1.1.18/dist/lenis.min.js"></script>
<script>
const lenis = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  orientation: 'vertical',
  smoothWheel: true
});

function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);

// Connect to GSAP ScrollTrigger
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);
</script>
```

---

## Staggered Text Reveal

```javascript
// Requires: GSAP, SplitType
import SplitType from 'split-type';

function animateText(selector, options = {}) {
  const defaults = {
    y: 100,
    opacity: 0,
    duration: 0.8,
    stagger: 0.02,
    ease: "power3.out",
    delay: 0
  };
  const config = { ...defaults, ...options };
  
  const split = new SplitType(selector, { types: 'lines, words, chars' });
  
  // Wrap lines for overflow hidden effect
  split.lines.forEach(line => {
    const wrapper = document.createElement('div');
    wrapper.style.overflow = 'hidden';
    line.parentNode.insertBefore(wrapper, line);
    wrapper.appendChild(line);
  });
  
  gsap.from(split.chars, {
    y: config.y,
    opacity: config.opacity,
    duration: config.duration,
    stagger: config.stagger,
    ease: config.ease,
    delay: config.delay,
    scrollTrigger: {
      trigger: selector,
      start: "top 80%"
    }
  });
}

// Usage
animateText('.hero-title', { stagger: 0.03 });
animateText('.subtitle', { delay: 0.5 });
```

---

## Magnetic Button Effect

```javascript
class MagneticButton {
  constructor(el) {
    this.el = el;
    this.strength = 0.5;
    this.boundingRect = null;
    
    this.el.addEventListener('mouseenter', () => this.onEnter());
    this.el.addEventListener('mousemove', (e) => this.onMove(e));
    this.el.addEventListener('mouseleave', () => this.onLeave());
  }
  
  onEnter() {
    this.boundingRect = this.el.getBoundingClientRect();
  }
  
  onMove(e) {
    const { left, top, width, height } = this.boundingRect;
    const x = (e.clientX - left - width / 2) * this.strength;
    const y = (e.clientY - top - height / 2) * this.strength;
    
    gsap.to(this.el, {
      x,
      y,
      duration: 0.3,
      ease: "power2.out"
    });
  }
  
  onLeave() {
    gsap.to(this.el, {
      x: 0,
      y: 0,
      duration: 0.6,
      ease: "elastic.out(1, 0.4)"
    });
  }
}

// Initialize all magnetic elements
document.querySelectorAll('[data-magnetic]').forEach(el => new MagneticButton(el));
```

---

## Custom Cursor with Context States

```html
<style>
.cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border: 2px solid white;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transition: transform 0.15s ease, width 0.3s ease, height 0.3s ease;
}

.cursor--hover {
  width: 60px;
  height: 60px;
  border-width: 1px;
}

.cursor--text {
  width: 100px;
  height: 100px;
}

.cursor--text::after {
  content: 'View';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.cursor--hidden {
  opacity: 0;
  transform: scale(0);
}

@media (pointer: coarse) {
  .cursor { display: none; }
}
</style>

<div class="cursor"></div>

<script>
const cursor = document.querySelector('.cursor');
let mouseX = 0, mouseY = 0, cursorX = 0, cursorY = 0;

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

function render() {
  cursorX += (mouseX - cursorX) * 0.15;
  cursorY += (mouseY - cursorY) * 0.15;
  cursor.style.left = cursorX + 'px';
  cursor.style.top = cursorY + 'px';
  requestAnimationFrame(render);
}
render();

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

document.querySelectorAll('[data-cursor="view"]').forEach(el => {
  el.addEventListener('mouseenter', () => cursor.classList.add('cursor--text'));
  el.addEventListener('mouseleave', () => cursor.classList.remove('cursor--text'));
});
</script>
```

---

## Parallax Image Container

```html
<style>
.parallax-container {
  overflow: hidden;
  position: relative;
}

.parallax-image {
  width: 100%;
  height: 120%; /* Extra height for parallax movement */
  object-fit: cover;
  will-change: transform;
}
</style>

<div class="parallax-container">
  <img src="image.jpg" class="parallax-image" alt="">
</div>

<script>
gsap.registerPlugin(ScrollTrigger);

document.querySelectorAll('.parallax-container').forEach(container => {
  const image = container.querySelector('.parallax-image');
  
  gsap.to(image, {
    y: '-10%',
    ease: 'none',
    scrollTrigger: {
      trigger: container,
      start: 'top bottom',
      end: 'bottom top',
      scrub: true
    }
  });
});
</script>
```

---

## Horizontal Scroll Section

```html
<style>
.horizontal-scroll {
  overflow: hidden;
}

.horizontal-track {
  display: flex;
  width: fit-content;
}

.horizontal-panel {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

<section class="horizontal-scroll">
  <div class="horizontal-track">
    <div class="horizontal-panel">Panel 1</div>
    <div class="horizontal-panel">Panel 2</div>
    <div class="horizontal-panel">Panel 3</div>
    <div class="horizontal-panel">Panel 4</div>
  </div>
</section>

<script>
const track = document.querySelector('.horizontal-track');
const panels = gsap.utils.toArray('.horizontal-panel');

gsap.to(track, {
  x: () => -(track.scrollWidth - window.innerWidth),
  ease: 'none',
  scrollTrigger: {
    trigger: '.horizontal-scroll',
    pin: true,
    scrub: 1,
    end: () => '+=' + track.scrollWidth
  }
});
</script>
```

---

## Page Transition with Barba.js

```javascript
import barba from '@barba/core';
import gsap from 'gsap';

barba.init({
  transitions: [{
    name: 'fade-transition',
    leave(data) {
      return gsap.to(data.current.container, {
        opacity: 0,
        y: -50,
        duration: 0.5,
        ease: 'power2.inOut'
      });
    },
    enter(data) {
      return gsap.from(data.next.container, {
        opacity: 0,
        y: 50,
        duration: 0.5,
        ease: 'power2.out'
      });
    }
  }]
});
```

---

## Reveal Animation on Scroll

```javascript
// Generic reveal system
function initReveals() {
  gsap.registerPlugin(ScrollTrigger);
  
  // Fade up
  gsap.utils.toArray('[data-reveal="fade-up"]').forEach(el => {
    gsap.from(el, {
      y: 60,
      opacity: 0,
      duration: 1,
      ease: 'power3.out',
      scrollTrigger: {
        trigger: el,
        start: 'top 85%'
      }
    });
  });
  
  // Fade in
  gsap.utils.toArray('[data-reveal="fade"]').forEach(el => {
    gsap.from(el, {
      opacity: 0,
      duration: 1,
      ease: 'power2.out',
      scrollTrigger: {
        trigger: el,
        start: 'top 85%'
      }
    });
  });
  
  // Stagger children
  gsap.utils.toArray('[data-reveal="stagger"]').forEach(container => {
    const children = container.children;
    gsap.from(children, {
      y: 40,
      opacity: 0,
      duration: 0.8,
      stagger: 0.1,
      ease: 'power3.out',
      scrollTrigger: {
        trigger: container,
        start: 'top 80%'
      }
    });
  });
  
  // Scale in
  gsap.utils.toArray('[data-reveal="scale"]').forEach(el => {
    gsap.from(el, {
      scale: 0.8,
      opacity: 0,
      duration: 1,
      ease: 'power3.out',
      scrollTrigger: {
        trigger: el,
        start: 'top 85%'
      }
    });
  });
}

// Usage in HTML:
// <div data-reveal="fade-up">...</div>
// <div data-reveal="stagger"><span>1</span><span>2</span><span>3</span></div>
```

---

## Noise/Grain Overlay (CSS)

```css
/* Add to body or a fixed overlay */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

.grain::before {
  content: '';
  position: absolute;
  inset: -100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.035;
  animation: grain 8s steps(10) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0%); }
  70% { transform: translate(0%, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
}
```

---

## Reduced Motion Support

```javascript
// Check for reduced motion preference
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// Adjust GSAP defaults
if (prefersReducedMotion) {
  gsap.defaults({
    duration: 0,
    ease: 'none'
  });
  
  // Disable ScrollTrigger scrubbing
  ScrollTrigger.defaults({
    scrub: false
  });
}

// Or conditionally apply animations
function animate(element, props) {
  if (prefersReducedMotion) {
    gsap.set(element, { opacity: 1, y: 0, x: 0, scale: 1 });
    return;
  }
  gsap.from(element, props);
}
```

---

## Loading Sequence

```javascript
// Orchestrated loading animation
function initLoader() {
  const loader = document.querySelector('.loader');
  const counter = document.querySelector('.loader-counter');
  const tl = gsap.timeline();
  
  // Fake loading counter
  let progress = { value: 0 };
  gsap.to(progress, {
    value: 100,
    duration: 2,
    ease: 'power2.inOut',
    onUpdate: () => {
      counter.textContent = Math.round(progress.value) + '%';
    }
  });
  
  // After "loading" completes
  tl.to(loader, {
    yPercent: -100,
    duration: 0.8,
    ease: 'power3.inOut',
    delay: 2.2
  })
  .from('.hero-title', {
    y: 100,
    opacity: 0,
    duration: 1,
    ease: 'power3.out'
  }, '-=0.3')
  .from('.hero-subtitle', {
    y: 50,
    opacity: 0,
    duration: 0.8,
    ease: 'power3.out'
  }, '-=0.6')
  .from('.nav', {
    y: -50,
    opacity: 0,
    duration: 0.6,
    ease: 'power2.out'
  }, '-=0.4');
}

document.addEventListener('DOMContentLoaded', initLoader);
```


path: TYPOGRAPHY.md
content: # Award-Winning Typography

Font choices that elevate designs above the generic. Avoid: Inter, Roboto, Open Sans, Arial, system fonts.

---

## Display Fonts (Headlines)

### Geometric/Modern
- **Clash Display** — Bold geometric, sharp corners (free via Fontshare)
- **Satoshi** — Clean geometric, versatile (free via Fontshare)
- **Cabinet Grotesk** — Strong personality, slight quirks (free via Fontshare)
- **General Sans** — Modern geometric, professional (free via Fontshare)
- **Switzer** — Contemporary geometric (free via Fontshare)

### Expressive/Artistic
- **Monument Extended** — Ultra-wide, dramatic (premium)
- **Neue Machina** — Technical, futuristic (free via Pangram Pangram)
- **PP Mori** — Elegant with character (premium)
- **Right Grotesk** — Bold with soft edges (premium)
- **Aktura** — Art deco meets modern (free via Fontshare)

### Serif Display
- **Fraunces** — Expressive, variable (free via Google)
- **Playfair Display** — Classic editorial (free via Google)
- **Cormorant** — Elegant, high contrast (free via Google)
- **DM Serif Display** — Contemporary serif (free via Google)
- **Bodoni Moda** — Classic Bodoni style (free via Google)

### Variable Fonts (for animation)
- **Recursive** — Mono to sans, casual to linear (free)
- **Fraunces** — Weight, optical size, softness (free)
- **Anybody** — Width and weight (free via Fontshare)
- **Epilogue** — Clean, variable weight (free via Google)

---

## Body Fonts

### Sans-Serif
- **Plus Jakarta Sans** — Modern, geometric, readable (free via Google)
- **Outfit** — Contemporary, clean (free via Google)
- **Sora** — Geometric, technical feel (free via Google)
- **Manrope** — Semi-condensed, modern (free via Google)
- **DM Sans** — Geometric, low contrast (free via Google)

### Serif
- **Source Serif 4** — Professional, readable (free via Google)
- **Libre Baskerville** — Classic, elegant (free via Google)
- **Spectral** — Screen-optimized serif (free via Google)
- **Lora** — Contemporary serif (free via Google)

### Monospace
- **JetBrains Mono** — Developer favorite (free)
- **Fira Code** — With ligatures (free)
- **IBM Plex Mono** — Clean, professional (free)
- **Space Mono** — Quirky, editorial (free via Google)

---

## Font Pairing Examples

### Tech/Startup
```
Display: Clash Display (bold)
Body: Plus Jakarta Sans (regular)
Accent: JetBrains Mono (code/details)
```

### Editorial/Magazine
```
Display: Fraunces (variable)
Body: Source Serif 4
Accent: Space Mono
```

### Agency/Creative
```
Display: Monument Extended or Neue Machina
Body: Satoshi or General Sans
Accent: IBM Plex Mono
```

### Luxury/Premium
```
Display: PP Mori or Cormorant
Body: Plus Jakarta Sans (light)
Accent: JetBrains Mono (sparse)
```

### Playful/Bold
```
Display: Cabinet Grotesk (bold)
Body: Outfit
Accent: Space Mono
```

---

## Typography Scale

Award-winning sites often use extreme scales:

```css
:root {
  /* Fluid type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1rem + 1.25vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1rem + 2.5vw, 2rem);
  --text-3xl: clamp(1.875rem, 1rem + 4.375vw, 3rem);
  --text-4xl: clamp(2.25rem, 1rem + 6.25vw, 4rem);
  
  /* Hero sizes (extreme) */
  --text-hero: clamp(3rem, 2rem + 10vw, 12rem);
  --text-mega: clamp(4rem, 2rem + 15vw, 20rem);
}

/* Usage */
.hero-title {
  font-size: var(--text-hero);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
```

---

## Advanced Typography CSS

```css
/* Optical sizing for variable fonts */
.display-text {
  font-optical-sizing: auto;
}

/* Fine typography control */
.refined-text {
  font-feature-settings: 
    "kern" 1,      /* Kerning */
    "liga" 1,      /* Ligatures */
    "calt" 1,      /* Contextual alternates */
    "ss01" 1;      /* Stylistic set 1 */
  
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tight headlines */
.headline {
  letter-spacing: -0.02em;
  line-height: 1;
  text-wrap: balance;
}

/* Comfortable body */
.body {
  letter-spacing: 0.01em;
  line-height: 1.6;
  max-width: 65ch;
}

/* All caps with tracking */
.overline {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: var(--text-xs);
  font-weight: 500;
}
```

---

## Font Loading Strategy

```html
<!-- Preload critical fonts -->
<link rel="preload" href="/fonts/ClashDisplay-Bold.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/PlusJakartaSans-Regular.woff2" as="font" type="font/woff2" crossorigin>

<style>
/* Font-face with display swap */
@font-face {
  font-family: 'Clash Display';
  src: url('/fonts/ClashDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Fallback stack */
:root {
  --font-display: 'Clash Display', 'Arial Black', sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;
}
</style>
```

---

## Free Font Sources

- **Google Fonts**: fonts.google.com
- **Fontshare**: fontshare.com (high quality, free)
- **Font Squirrel**: fontsquirrel.com
- **Pangram Pangram**: pangrampangram.com (some free)
- **The League of Moveable Type**: theleagueofmoveabletype.com
- **Fontesk**: fontesk.com


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)