{
  "schemaVersion": "1.0",
  "item": {
    "slug": "awwwards-design",
    "name": "Awwwards Design",
    "source": "tencent",
    "type": "skill",
    "category": "内容创作",
    "sourceUrl": "https://clawhub.ai/mkhaytman87/awwwards-design",
    "canonicalUrl": "https://clawhub.ai/mkhaytman87/awwwards-design",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/awwwards-design",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=awwwards-design",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md",
      "SNIPPETS.md",
      "TYPOGRAPHY.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "slug": "awwwards-design",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-29T03:31:04.753Z",
      "expiresAt": "2026-05-06T03:31:04.753Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=awwwards-design",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=awwwards-design",
        "contentDisposition": "attachment; filename=\"awwwards-design-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null,
        "slug": "awwwards-design"
      },
      "scope": "item",
      "summary": "Item download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this item.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/awwwards-design"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/awwwards-design",
    "agentPageUrl": "https://openagent3.xyz/skills/awwwards-design/agent",
    "manifestUrl": "https://openagent3.xyz/skills/awwwards-design/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/awwwards-design/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Awwwards-Level Web Design",
        "body": "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."
      },
      {
        "title": "Philosophy: What Makes a Site Unforgettable",
        "body": "Award-winning sites share common traits that separate them from the millions of forgettable pages:"
      },
      {
        "title": "1. Intentional Storytelling",
        "body": "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."
      },
      {
        "title": "2. Choreographed Motion",
        "body": "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."
      },
      {
        "title": "3. Sensory Richness",
        "body": "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."
      },
      {
        "title": "4. Technical Craftsmanship",
        "body": "Smooth 60fps animations. Fast load times despite rich visuals. Graceful degradation on slower devices. The engineering is invisible but essential."
      },
      {
        "title": "5. Breaking Conventions Intentionally",
        "body": "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."
      },
      {
        "title": "The Awwwards Evaluation Criteria",
        "body": "Sites are judged on four dimensions:\n\nDesign (8.5+ for SOTD): Visual aesthetics, composition, color, typography, imagery\nUsability (8.5+ for SOTD): Navigation, accessibility, responsiveness, intuitive UX\nCreativity (8.5+ for SOTD): Innovation, uniqueness, memorable moments\nContent (8.5+ for SOTD): Quality, storytelling, relevance, engagement\n\nTo win Site of the Day, you need excellence across ALL four. A beautiful site with poor usability won't win."
      },
      {
        "title": "1. Scroll-Triggered Animations",
        "body": "The foundation of immersive web experiences. Elements animate in response to scroll position, creating a sense of discovery.\n\nKey Patterns:\n\nReveal on Enter: Elements fade/slide/scale into view as they enter the viewport\nScrubbed Animations: Animation progress tied directly to scroll position (not just triggered)\nParallax Layers: Background and foreground elements move at different speeds, creating depth\nHorizontal Scroll Sections: Vertical scrolling translates to horizontal movement\nPinned Sections: Elements stay fixed while content scrolls through them\n\nImplementation Stack:\n\nPrimary: GSAP + ScrollTrigger (industry standard)\nSmooth Scrolling: Lenis or GSAP ScrollSmoother\nReact: Framer Motion + useScroll hook\n\nCode Pattern (GSAP):\n\ngsap.registerPlugin(ScrollTrigger);\n\n// Basic reveal\ngsap.from(\".reveal-element\", {\n  opacity: 0,\n  y: 100,\n  duration: 1,\n  ease: \"power3.out\",\n  scrollTrigger: {\n    trigger: \".reveal-element\",\n    start: \"top 80%\",\n    end: \"top 20%\",\n    toggleActions: \"play none none reverse\"\n  }\n});\n\n// Scrubbed animation (tied to scroll position)\ngsap.to(\".parallax-bg\", {\n  y: -200,\n  ease: \"none\",\n  scrollTrigger: {\n    trigger: \".parallax-section\",\n    start: \"top bottom\",\n    end: \"bottom top\",\n    scrub: true\n  }\n});"
      },
      {
        "title": "2. Text Splitting & Typography Animation",
        "body": "Award-winning sites treat text as a design element, not just content. Individual characters, words, and lines become animatable units.\n\nKey Patterns:\n\nCharacter-by-character reveals: Letters animate in sequentially\nWord stagger: Words cascade in with varying delays\nLine-by-line reveals: Each line slides or fades independently\nScramble/decode effects: Text appears to decode or unscramble\nKinetic typography: Text that moves, rotates, or transforms with scroll/interaction\n\nImplementation:\n\nGSAP SplitText (premium but powerful)\nSplitType (free alternative)\nSplitting.js (lightweight)\n\nCode Pattern:\n\n// Using SplitType + GSAP\nconst text = new SplitType('.hero-title', { types: 'chars, words' });\n\ngsap.from(text.chars, {\n  opacity: 0,\n  y: 50,\n  rotateX: -90,\n  stagger: 0.02,\n  duration: 0.8,\n  ease: \"back.out(1.7)\"\n});\n\nTypography Choices for Impact:\n\nDisplay fonts with character: Neue Machina, Monument Extended, PP Mori, Clash Display, Satoshi\nVariable fonts for animation: Weight, width, and slant can animate smoothly\nExtreme sizes: Hero text at 15-25vw creates immediate impact\nMixed weights and sizes within a single headline"
      },
      {
        "title": "3. Micro-Interactions & Hover States",
        "body": "The details that create delight. Every interactive element should respond to user input in satisfying ways.\n\nKey Patterns:\n\nMagnetic buttons: Elements that pull toward the cursor\nReveal on hover: Hidden content or effects that appear on interaction\nMorphing shapes: Elements that transform shape on hover\nRipple effects: Click feedback that radiates from touch point\nState machines: Complex multi-state animations (idle → hover → active → complete)\n\nImplementation:\n\nRive (for complex state-based animations)\nLottie (After Effects → web)\nGSAP (programmatic control)\nCSS transitions (simple states)\n\nCode Pattern (Magnetic Effect):\n\nconst magneticElements = document.querySelectorAll('.magnetic');\n\nmagneticElements.forEach(el => {\n  el.addEventListener('mousemove', (e) => {\n    const rect = el.getBoundingClientRect();\n    const x = e.clientX - rect.left - rect.width / 2;\n    const y = e.clientY - rect.top - rect.height / 2;\n    \n    gsap.to(el, {\n      x: x * 0.3,\n      y: y * 0.3,\n      duration: 0.3,\n      ease: \"power2.out\"\n    });\n  });\n  \n  el.addEventListener('mouseleave', () => {\n    gsap.to(el, {\n      x: 0,\n      y: 0,\n      duration: 0.5,\n      ease: \"elastic.out(1, 0.3)\"\n    });\n  });\n});"
      },
      {
        "title": "4. Page Transitions",
        "body": "Seamless transitions between pages create a native-app feel and maintain immersion.\n\nKey Patterns:\n\nCrossfade with motion: Old page fades while new slides in\nShared element transitions: Images or elements morph between pages\nWipe/reveal transitions: Content sweeps across screen\nZoom transitions: Click target expands to fill screen\nOverlay transitions: Colored layer sweeps over before revealing new content\n\nImplementation:\n\nBarba.js + GSAP (multi-page sites)\nNext.js + Framer Motion (React apps)\nAstro + View Transitions API (modern approach)"
      },
      {
        "title": "5. Custom Cursors",
        "body": "Replace the default cursor with something that reinforces the brand and adds interactivity.\n\nKey Patterns:\n\nFollower cursor: A shape that follows with slight lag (lerping)\nContext-aware cursor: Changes based on what it's hovering\nMagnetic cursor: Snaps to interactive elements\nBlob cursor: Morphing organic shape\nText cursor: Words that follow the pointer\nTrail effects: Multiple elements following in sequence\n\nCode Pattern:\n\nconst cursor = document.querySelector('.cursor');\nlet mouseX = 0, mouseY = 0;\nlet cursorX = 0, cursorY = 0;\n\ndocument.addEventListener('mousemove', (e) => {\n  mouseX = e.clientX;\n  mouseY = e.clientY;\n});\n\n// Smooth following with lerp\nfunction animate() {\n  cursorX += (mouseX - cursorX) * 0.1;\n  cursorY += (mouseY - cursorY) * 0.1;\n  \n  cursor.style.transform = `translate(${cursorX}px, ${cursorY}px)`;\n  requestAnimationFrame(animate);\n}\nanimate();\n\n// Context changes\ndocument.querySelectorAll('a, button').forEach(el => {\n  el.addEventListener('mouseenter', () => cursor.classList.add('cursor--hover'));\n  el.addEventListener('mouseleave', () => cursor.classList.remove('cursor--hover'));\n});"
      },
      {
        "title": "6. Easing & Timing",
        "body": "The secret sauce. Proper easing transforms mechanical movement into organic motion.\n\nEssential Easing Functions:\n\npower2.out / power3.out — Natural deceleration (most common)\npower2.inOut — Smooth acceleration and deceleration\nback.out(1.7) — Slight overshoot, then settle (playful)\nelastic.out(1, 0.3) — Bouncy, energetic\nexpo.out — Dramatic fast-start, slow-end\ncirc.out — Quick initial movement\n\nTiming Principles:\n\nStagger delays: 0.02-0.05s between sequential elements\nHover transitions: 0.2-0.4s (fast enough to feel responsive)\nPage transitions: 0.6-1.2s (long enough to appreciate, not too slow)\nScroll animations: Duration tied to scroll distance, or 0.8-1.5s for triggered\n\nThe Golden Rule: Fast in, slow out. Most movements should decelerate into their final position."
      },
      {
        "title": "Gradients & Color",
        "body": "Mesh Gradients: Complex multi-point gradients that feel organic\n\nbackground: \n  radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0px, transparent 50%),\n  radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%),\n  radial-gradient(at 0% 50%, hsla(355,85%,93%,1) 0px, transparent 50%);\n\nAnimated Gradients: Shifting colors that create movement\n\n@keyframes gradient-shift {\n  0% { background-position: 0% 50%; }\n  50% { background-position: 100% 50%; }\n  100% { background-position: 0% 50%; }\n}\n.animated-gradient {\n  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);\n  background-size: 400% 400%;\n  animation: gradient-shift 15s ease infinite;\n}"
      },
      {
        "title": "Texture & Depth",
        "body": "Grain/Noise Overlays: Add organic texture\n\n.grain::after {\n  content: '';\n  position: fixed;\n  inset: 0;\n  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\");\n  opacity: 0.03;\n  pointer-events: none;\n  z-index: 9999;\n}\n\nGlassmorphism: Frosted glass effects\n\n.glass {\n  background: rgba(255, 255, 255, 0.1);\n  backdrop-filter: blur(10px);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 16px;\n}\n\nShadows for Depth: Layered, soft shadows\n\n.elevated {\n  box-shadow: \n    0 1px 1px rgba(0,0,0,0.02),\n    0 2px 2px rgba(0,0,0,0.02),\n    0 4px 4px rgba(0,0,0,0.02),\n    0 8px 8px rgba(0,0,0,0.02),\n    0 16px 16px rgba(0,0,0,0.02);\n}"
      },
      {
        "title": "Layout Breaking",
        "body": "Overlapping Elements: Break the grid intentionally\nDiagonal/Angular Sections: Clip-path for non-rectangular sections\nAsymmetric Compositions: Deliberate imbalance creates tension\nFull-bleed Media: Images/video that escape containers\nMixed Grid Systems: Combine different column structures"
      },
      {
        "title": "3D & WebGL",
        "body": "For truly next-level sites, 3D elements create unforgettable experiences.\n\nImplementation Stack:\n\nThree.js — Full 3D engine\nReact Three Fiber — Three.js in React\nSpline — No-code 3D design tool\nLottie 3D — Lightweight 3D animations\n\nCommon Patterns:\n\n3D product viewers with orbit controls\nParticle systems responding to scroll/mouse\nShader effects (distortion, ripple, noise)\n3D text and typography\nEnvironment scenes with camera movement\n\nPerformance Note: 3D is expensive. Use sparingly, optimize aggressively, and always provide fallbacks."
      },
      {
        "title": "Performance Targets",
        "body": "First Contentful Paint: < 1.5s\nLargest Contentful Paint: < 2.5s\nTotal Blocking Time: < 200ms\nAnimation frame rate: Consistent 60fps"
      },
      {
        "title": "Optimization Strategies",
        "body": "Lazy load below-fold content\nPreload critical assets\nUse will-change sparingly and correctly\nDebounce scroll handlers\nUse requestAnimationFrame for JS animations\nPrefer CSS transforms over layout-triggering properties\nCompress and optimize all media"
      },
      {
        "title": "Accessibility",
        "body": "Award-winning sites must be usable by everyone:\n\nRespect prefers-reduced-motion\nMaintain keyboard navigation\nEnsure sufficient color contrast\nProvide text alternatives for visual content\nTest with screen readers\n\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}"
      },
      {
        "title": "Implementation Checklist",
        "body": "Before considering a site \"award-worthy,\" verify:"
      },
      {
        "title": "Animation",
        "body": "Scroll-triggered reveals with staggered timing\n Smooth scroll (Lenis or equivalent)\n Custom easing on all animations\n Page/section transitions\n Hover states on all interactive elements\n Loading animation/sequence"
      },
      {
        "title": "Visual",
        "body": "Distinctive typography (not Inter/Roboto)\n Custom cursor (if appropriate)\n Texture/grain overlay\n Considered color palette with intention\n Atmospheric backgrounds (gradients, effects)\n Consistent visual language throughout"
      },
      {
        "title": "Technical",
        "body": "60fps animation performance\n Mobile responsive with adapted interactions\n Reduced motion support\n Fast initial load\n No layout shift during load"
      },
      {
        "title": "Content",
        "body": "Clear narrative/story structure\n Purposeful content hierarchy\n Engaging copywriting\n High-quality imagery/media"
      },
      {
        "title": "Reference Sites",
        "body": "Study these for inspiration (search on Awwwards):\n\nImmersive storytelling: Apple product pages, Stripe\nCreative agency: Resn, Active Theory, Locomotive\nPortfolio: Bruno Simon, Aristide Benoist, Dennis Snellenberg\nProduct: Linear, Vercel, Raycast\nEditorial: The Pudding, NYT Interactives"
      },
      {
        "title": "When NOT to Use This Approach",
        "body": "Award-winning design isn't always appropriate:\n\nE-commerce with conversion goals: Simplicity often wins\nInformation-heavy sites: Clarity over creativity\nAccessibility-first contexts: Heavy animation can be exclusionary\nLimited budget/timeline: This takes significant time to execute well\n\nUse 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.\n\nRemember: 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."
      }
    ],
    "body": "Awwwards-Level Web Design\n\nThis 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.\n\nPhilosophy: What Makes a Site Unforgettable\n\nAward-winning sites share common traits that separate them from the millions of forgettable pages:\n\n1. Intentional Storytelling\n\nEvery 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.\n\n2. Choreographed Motion\n\nAnimations 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.\n\n3. Sensory Richness\n\nThese 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.\n\n4. Technical Craftsmanship\n\nSmooth 60fps animations. Fast load times despite rich visuals. Graceful degradation on slower devices. The engineering is invisible but essential.\n\n5. Breaking Conventions Intentionally\n\nAward-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.\n\nThe Awwwards Evaluation Criteria\n\nSites are judged on four dimensions:\n\nDesign (8.5+ for SOTD): Visual aesthetics, composition, color, typography, imagery\nUsability (8.5+ for SOTD): Navigation, accessibility, responsiveness, intuitive UX\nCreativity (8.5+ for SOTD): Innovation, uniqueness, memorable moments\nContent (8.5+ for SOTD): Quality, storytelling, relevance, engagement\n\nTo win Site of the Day, you need excellence across ALL four. A beautiful site with poor usability won't win.\n\nCore Animation Techniques\n1. Scroll-Triggered Animations\n\nThe foundation of immersive web experiences. Elements animate in response to scroll position, creating a sense of discovery.\n\nKey Patterns:\n\nReveal on Enter: Elements fade/slide/scale into view as they enter the viewport\nScrubbed Animations: Animation progress tied directly to scroll position (not just triggered)\nParallax Layers: Background and foreground elements move at different speeds, creating depth\nHorizontal Scroll Sections: Vertical scrolling translates to horizontal movement\nPinned Sections: Elements stay fixed while content scrolls through them\n\nImplementation Stack:\n\nPrimary: GSAP + ScrollTrigger (industry standard)\nSmooth Scrolling: Lenis or GSAP ScrollSmoother\nReact: Framer Motion + useScroll hook\n\n\nCode Pattern (GSAP):\n\ngsap.registerPlugin(ScrollTrigger);\n\n// Basic reveal\ngsap.from(\".reveal-element\", {\n  opacity: 0,\n  y: 100,\n  duration: 1,\n  ease: \"power3.out\",\n  scrollTrigger: {\n    trigger: \".reveal-element\",\n    start: \"top 80%\",\n    end: \"top 20%\",\n    toggleActions: \"play none none reverse\"\n  }\n});\n\n// Scrubbed animation (tied to scroll position)\ngsap.to(\".parallax-bg\", {\n  y: -200,\n  ease: \"none\",\n  scrollTrigger: {\n    trigger: \".parallax-section\",\n    start: \"top bottom\",\n    end: \"bottom top\",\n    scrub: true\n  }\n});\n\n2. Text Splitting & Typography Animation\n\nAward-winning sites treat text as a design element, not just content. Individual characters, words, and lines become animatable units.\n\nKey Patterns:\n\nCharacter-by-character reveals: Letters animate in sequentially\nWord stagger: Words cascade in with varying delays\nLine-by-line reveals: Each line slides or fades independently\nScramble/decode effects: Text appears to decode or unscramble\nKinetic typography: Text that moves, rotates, or transforms with scroll/interaction\n\nImplementation:\n\nGSAP SplitText (premium but powerful)\nSplitType (free alternative)\nSplitting.js (lightweight)\n\n\nCode Pattern:\n\n// Using SplitType + GSAP\nconst text = new SplitType('.hero-title', { types: 'chars, words' });\n\ngsap.from(text.chars, {\n  opacity: 0,\n  y: 50,\n  rotateX: -90,\n  stagger: 0.02,\n  duration: 0.8,\n  ease: \"back.out(1.7)\"\n});\n\n\nTypography Choices for Impact:\n\nDisplay fonts with character: Neue Machina, Monument Extended, PP Mori, Clash Display, Satoshi\nVariable fonts for animation: Weight, width, and slant can animate smoothly\nExtreme sizes: Hero text at 15-25vw creates immediate impact\nMixed weights and sizes within a single headline\n3. Micro-Interactions & Hover States\n\nThe details that create delight. Every interactive element should respond to user input in satisfying ways.\n\nKey Patterns:\n\nMagnetic buttons: Elements that pull toward the cursor\nReveal on hover: Hidden content or effects that appear on interaction\nMorphing shapes: Elements that transform shape on hover\nRipple effects: Click feedback that radiates from touch point\nState machines: Complex multi-state animations (idle → hover → active → complete)\n\nImplementation:\n\nRive (for complex state-based animations)\nLottie (After Effects → web)\nGSAP (programmatic control)\nCSS transitions (simple states)\n\n\nCode Pattern (Magnetic Effect):\n\nconst magneticElements = document.querySelectorAll('.magnetic');\n\nmagneticElements.forEach(el => {\n  el.addEventListener('mousemove', (e) => {\n    const rect = el.getBoundingClientRect();\n    const x = e.clientX - rect.left - rect.width / 2;\n    const y = e.clientY - rect.top - rect.height / 2;\n    \n    gsap.to(el, {\n      x: x * 0.3,\n      y: y * 0.3,\n      duration: 0.3,\n      ease: \"power2.out\"\n    });\n  });\n  \n  el.addEventListener('mouseleave', () => {\n    gsap.to(el, {\n      x: 0,\n      y: 0,\n      duration: 0.5,\n      ease: \"elastic.out(1, 0.3)\"\n    });\n  });\n});\n\n4. Page Transitions\n\nSeamless transitions between pages create a native-app feel and maintain immersion.\n\nKey Patterns:\n\nCrossfade with motion: Old page fades while new slides in\nShared element transitions: Images or elements morph between pages\nWipe/reveal transitions: Content sweeps across screen\nZoom transitions: Click target expands to fill screen\nOverlay transitions: Colored layer sweeps over before revealing new content\n\nImplementation:\n\nBarba.js + GSAP (multi-page sites)\nNext.js + Framer Motion (React apps)\nAstro + View Transitions API (modern approach)\n\n5. Custom Cursors\n\nReplace the default cursor with something that reinforces the brand and adds interactivity.\n\nKey Patterns:\n\nFollower cursor: A shape that follows with slight lag (lerping)\nContext-aware cursor: Changes based on what it's hovering\nMagnetic cursor: Snaps to interactive elements\nBlob cursor: Morphing organic shape\nText cursor: Words that follow the pointer\nTrail effects: Multiple elements following in sequence\n\nCode Pattern:\n\nconst cursor = document.querySelector('.cursor');\nlet mouseX = 0, mouseY = 0;\nlet cursorX = 0, cursorY = 0;\n\ndocument.addEventListener('mousemove', (e) => {\n  mouseX = e.clientX;\n  mouseY = e.clientY;\n});\n\n// Smooth following with lerp\nfunction animate() {\n  cursorX += (mouseX - cursorX) * 0.1;\n  cursorY += (mouseY - cursorY) * 0.1;\n  \n  cursor.style.transform = `translate(${cursorX}px, ${cursorY}px)`;\n  requestAnimationFrame(animate);\n}\nanimate();\n\n// Context changes\ndocument.querySelectorAll('a, button').forEach(el => {\n  el.addEventListener('mouseenter', () => cursor.classList.add('cursor--hover'));\n  el.addEventListener('mouseleave', () => cursor.classList.remove('cursor--hover'));\n});\n\n6. Easing & Timing\n\nThe secret sauce. Proper easing transforms mechanical movement into organic motion.\n\nEssential Easing Functions:\n\npower2.out / power3.out — Natural deceleration (most common)\npower2.inOut — Smooth acceleration and deceleration\nback.out(1.7) — Slight overshoot, then settle (playful)\nelastic.out(1, 0.3) — Bouncy, energetic\nexpo.out — Dramatic fast-start, slow-end\ncirc.out — Quick initial movement\n\n\nTiming Principles:\n\nStagger delays: 0.02-0.05s between sequential elements\nHover transitions: 0.2-0.4s (fast enough to feel responsive)\nPage transitions: 0.6-1.2s (long enough to appreciate, not too slow)\nScroll animations: Duration tied to scroll distance, or 0.8-1.5s for triggered\n\nThe Golden Rule: Fast in, slow out. Most movements should decelerate into their final position.\n\nVisual Techniques\nGradients & Color\n\nMesh Gradients: Complex multi-point gradients that feel organic\n\nbackground: \n  radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0px, transparent 50%),\n  radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%),\n  radial-gradient(at 0% 50%, hsla(355,85%,93%,1) 0px, transparent 50%);\n\n\nAnimated Gradients: Shifting colors that create movement\n\n@keyframes gradient-shift {\n  0% { background-position: 0% 50%; }\n  50% { background-position: 100% 50%; }\n  100% { background-position: 0% 50%; }\n}\n.animated-gradient {\n  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);\n  background-size: 400% 400%;\n  animation: gradient-shift 15s ease infinite;\n}\n\nTexture & Depth\n\nGrain/Noise Overlays: Add organic texture\n\n.grain::after {\n  content: '';\n  position: fixed;\n  inset: 0;\n  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\");\n  opacity: 0.03;\n  pointer-events: none;\n  z-index: 9999;\n}\n\n\nGlassmorphism: Frosted glass effects\n\n.glass {\n  background: rgba(255, 255, 255, 0.1);\n  backdrop-filter: blur(10px);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 16px;\n}\n\n\nShadows for Depth: Layered, soft shadows\n\n.elevated {\n  box-shadow: \n    0 1px 1px rgba(0,0,0,0.02),\n    0 2px 2px rgba(0,0,0,0.02),\n    0 4px 4px rgba(0,0,0,0.02),\n    0 8px 8px rgba(0,0,0,0.02),\n    0 16px 16px rgba(0,0,0,0.02);\n}\n\nLayout Breaking\n\nOverlapping 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\n\n3D & WebGL\n\nFor truly next-level sites, 3D elements create unforgettable experiences.\n\nImplementation Stack:\n\nThree.js — Full 3D engine\nReact Three Fiber — Three.js in React\nSpline — No-code 3D design tool\nLottie 3D — Lightweight 3D animations\n\n\nCommon Patterns:\n\n3D product viewers with orbit controls\nParticle systems responding to scroll/mouse\nShader effects (distortion, ripple, noise)\n3D text and typography\nEnvironment scenes with camera movement\n\nPerformance Note: 3D is expensive. Use sparingly, optimize aggressively, and always provide fallbacks.\n\nTechnical Requirements\nPerformance Targets\nFirst Contentful Paint: < 1.5s\nLargest Contentful Paint: < 2.5s\nTotal Blocking Time: < 200ms\nAnimation frame rate: Consistent 60fps\nOptimization Strategies\nLazy load below-fold content\nPreload critical assets\nUse will-change sparingly and correctly\nDebounce scroll handlers\nUse requestAnimationFrame for JS animations\nPrefer CSS transforms over layout-triggering properties\nCompress and optimize all media\nAccessibility\n\nAward-winning sites must be usable by everyone:\n\nRespect prefers-reduced-motion\nMaintain keyboard navigation\nEnsure sufficient color contrast\nProvide text alternatives for visual content\nTest with screen readers\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\nImplementation Checklist\n\nBefore considering a site \"award-worthy,\" verify:\n\nAnimation\n Scroll-triggered reveals with staggered timing\n Smooth scroll (Lenis or equivalent)\n Custom easing on all animations\n Page/section transitions\n Hover states on all interactive elements\n Loading animation/sequence\nVisual\n Distinctive typography (not Inter/Roboto)\n Custom cursor (if appropriate)\n Texture/grain overlay\n Considered color palette with intention\n Atmospheric backgrounds (gradients, effects)\n Consistent visual language throughout\nTechnical\n 60fps animation performance\n Mobile responsive with adapted interactions\n Reduced motion support\n Fast initial load\n No layout shift during load\nContent\n Clear narrative/story structure\n Purposeful content hierarchy\n Engaging copywriting\n High-quality imagery/media\nReference Sites\n\nStudy these for inspiration (search on Awwwards):\n\nImmersive storytelling: Apple product pages, Stripe\nCreative agency: Resn, Active Theory, Locomotive\nPortfolio: Bruno Simon, Aristide Benoist, Dennis Snellenberg\nProduct: Linear, Vercel, Raycast\nEditorial: The Pudding, NYT Interactives\nWhen NOT to Use This Approach\n\nAward-winning design isn't always appropriate:\n\nE-commerce with conversion goals: Simplicity often wins\nInformation-heavy sites: Clarity over creativity\nAccessibility-first contexts: Heavy animation can be exclusionary\nLimited budget/timeline: This takes significant time to execute well\n\nUse 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.\n\nRemember: 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."
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/mkhaytman87/awwwards-design",
    "publisherUrl": "https://clawhub.ai/mkhaytman87/awwwards-design",
    "owner": "mkhaytman87",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/awwwards-design",
    "downloadUrl": "https://openagent3.xyz/downloads/awwwards-design",
    "agentUrl": "https://openagent3.xyz/skills/awwwards-design/agent",
    "manifestUrl": "https://openagent3.xyz/skills/awwwards-design/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/awwwards-design/agent.md"
  }
}