ui-enhance-animate

UI 增强 + 交错动画技能

此技能可对现有网站或组件进行全面的设计升级。它不只是添加动画，而是对视觉效果进行整体优化，涉及字体排版、间距、布局、层次感、微交互和动效。现有配色方案会保留；其他方面都可以且应该改进。

---

阶段 1 — 先审查和了解，再动手

编写任何代码之前，先彻底阅读现有代码。提取并记录：

1. 配色方案 — 所有十六进制、HSL、RGB 颜色值、CSS 变量和 Tailwind 颜色类。这些颜色至关重要，必须原样保留。
2. 字体栈 — 当前使用的字体。
3. 布局结构 — 使用的是 CSS Grid、Flexbox，还是普通块布局？页面整体结构是什么？
4. 组件清单 — 列出所有不同的区块/组件：首屏、导航栏、卡片、功能、用户评价、CTA、页脚等。
5. 当前不足之处 — 从视觉上找出显得业余或千篇一律的地方：卡片扁平、缺乏间距节奏、字体层级薄弱、缺少层次感/阴影、悬停状态乏味、视觉流不连贯、文字堆积等。
6. 技术栈 — React（使用 Framer Motion）、纯 HTML/CSS（使用 CSS 动画 + IntersectionObserver）、Vue 等。

完成审查后，才能开始进行修改。

---

阶段 2 — 全面升级设计（不含动画）

针对网站应用以下所有相关改进。务必全面，不要因为某些区块“看起来还可以”就跳过。网站的每个部分都应得到提升。

字体排版

• 建立清晰的字体层级：展示字号（基于 clamp 实现流式缩放）、区块标题、副标题、正文、说明文字——每种样式都应具有不同的字重和字号。
• 用 Google Fonts 或类似来源中有特色的字体组合替换通用系统字体（Arial、Helvetica、system-ui）。可将有力的展示/标题字体与清晰易读的正文字体搭配使用。
• 为大写标签和眉题设置 letter-spacing。
• 建立 line-height 节奏：标题约为 1.2，正文约为 1.6–1.7。
• 使用 max-width: 65ch 限制长文本块的宽度，提高可读性。

间距与节奏

• 建立统一的间距比例（例如 4/8/16/24/32/48/64/96px）。
• 增加区块内边距——大多数显得业余的网站都过于拥挤。
• 在各区块组件之间留出充足的空白。
• 确保卡片/组件内部的内边距一致。

层次感与表面效果

• 为卡片、模态框和凸起表面添加分层 box-shadow。使用多层柔和阴影，避免生硬的单层阴影。
• 使用低不透明度颜色设置微妙的 border，避免生硬的轮廓线。
• 在适当的导航栏或重叠卡片等玻璃拟态元素上应用 backdrop-filter: blur()。
• 使用现有颜色的稍浅/稍深色调，对不同区块的 background 作细微区分。

布局与构图

• 避免完全统一的网格布局。在能增加趣味性的地方采用非对称或错位构图。
• 添加视觉锚点：使用现有配色（低不透明度）添加装饰元素、大号背景文字/数字、渐变色块或几何形状。
• 确保首屏尺寸充足、重点突出，具有强烈的视觉焦点。
• 复杂布局使用 CSS Grid；避免过多嵌套的 div。

卡片与组件

• 统一圆角（卡片通常为 8–16px，按钮/输入框为 6–8px）。
• 为所有可交互元素添加悬停状态：卡片应向上浮动（translateY + 阴影），按钮应产生位移或辉光效果。
• 确保按钮内边距明显、对比度足够，并考虑添加细微图标或箭头。
• 为可交互元素设置基础过渡效果：transition: all 0.2s ease。

视觉精修细节

• 为主视觉图片或深色区域添加微妙的渐变叠层。
• 在卡片上使用 overflow: hidden，以干净地裁剪子图片和效果。
• 确保图片使用 object-fit: cover，并设置明确的宽高比。
• 在各区域之间添加分隔样式（微妙的边框、渐变淡出或装饰性波浪／斜角）。
• 如果有图标，确保其尺寸一致，并与文本在视觉上对齐。

---

阶段 3 — 错落式模糊 + 上滑显现动画

动画理念

• 动画应当显得自然优雅，而非炫目或分散注意力。
• 每个主要内容区域进入视口时都应播放动画。
• 使用错落式效果：区域内的子元素逐个播放动画，并设置延迟偏移（例如，每隔 0.1s）。
• 动画效果：元素从 opacity: 0、filter: blur(8px)、translateY(24px) 过渡至 opacity: 1、filter: blur(0px)、translateY(0)。
• 时长：大多数元素为 0.6s。缓动：ease-out 或自定义 cubic-bezier，例如 cubic-bezier(0.16, 1, 0.3, 1)（灵敏的弹簧效果）。
• 尊重 prefers-reduced-motion，为选择减少动态效果的用户禁用动画。

---

React — Framer Motion 实现

如果尚未安装，请安装：

npm install framer-motion

核心动画变体

// lib/animations.ts
import { Variants } from "framer-motion";

export const fadeUpBlur: Variants = {
  hidden: {
    opacity: 0,
    y: 24,
    filter: "blur(8px)",
  },
  visible: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: {
      duration: 0.6,
      ease: [0.16, 1, 0.3, 1],
    },
  },
};

export const staggerContainer: Variants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.05,
    },
  },
};

// For heavier stagger (e.g., feature grids)
export const staggerContainerSlow: Variants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.15,
      delayChildren: 0.1,
    },
  },
};

可复用的 AnimateInView 包装器

// components/AnimateInView.tsx
import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import { staggerContainer, fadeUpBlur } from "@/lib/animations";

interface AnimateInViewProps {
  children: React.ReactNode;
  className?: string;
  delay?: number;
  stagger?: boolean;
}

export function AnimateInView({
  children,
  className,
  delay = 0,
  stagger = false,
}: AnimateInViewProps) {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-80px" });

  if (stagger) {
    return (
      <motion.div
        ref={ref}
        className={className}
        variants={staggerContainer}
        initial="hidden"
        animate={isInView ? "visible" : "hidden"}
      >
        {children}
      </motion.div>
    );
  }

  return (
    <motion.div
      ref={ref}
      className={className}
      variants={fadeUpBlur}
      initial="hidden"
      animate={isInView ? "visible" : "hidden"}
      transition={{ delay }}
    >
      {children}
    </motion.div>
  );
}

// Individual animated child (use inside AnimateInView with stagger=true)
export function AnimatedItem({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <motion.div className={className} variants={fadeUpBlur}>
      {children}
    </motion.div>
  );
}

使用模式

// Hero section — single block fade
<AnimateInView>
  <h1>Your Headline</h1>
  <p>Subheadline text here</p>
  <Button>CTA</Button>
</AnimateInView>

// Feature grid — staggered children
<AnimateInView stagger className="grid grid-cols-3 gap-6">
  {features.map((f) => (
    <AnimatedItem key={f.id}>
      <FeatureCard {...f} />
    </AnimatedItem>
  ))}
</AnimateInView>

// Section heading + body — slight delays
<div>
  <AnimateInView delay={0}>
    <h2>Section Title</h2>
  </AnimateInView>
  <AnimateInView delay={0.1}>
    <p>Section description</p>
  </AnimateInView>
</div>

减少动态效果

// Wrap your app or layout:
import { LazyMotion, domAnimation, MotionConfig } from "framer-motion";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <MotionConfig reducedMotion="user">
      <LazyMotion features={domAnimation}>
        {children}
      </LazyMotion>
    </MotionConfig>
  );
}

---

纯 HTML/CSS/JS — CSS + IntersectionObserver 实现

CSS 动画类

/* Add to your global stylesheet */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(8px);
    transition:
      opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .reveal.in-view {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }

  /* Stagger delays for children */
  .stagger-children .reveal:nth-child(1) { transition-delay: 0.0s; }
  .stagger-children .reveal:nth-child(2) { transition-delay: 0.1s; }
  .stagger-children .reveal:nth-child(3) { transition-delay: 0.2s; }
  .stagger-children .reveal:nth-child(4) { transition-delay: 0.3s; }
  .stagger-children .reveal:nth-child(5) { transition-delay: 0.4s; }
  .stagger-children .reveal:nth-child(6) { transition-delay: 0.5s; }
  /* Add more as needed */
}

IntersectionObserver 脚本

// Add before closing </body>
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("in-view");
        observer.unobserve(entry.target); // animate once
      }
    });
  },
  { rootMargin: "-80px 0px", threshold: 0.1 }
);

document.querySelectorAll(".reveal").forEach((el) => observer.observe(el));

使用模式

<section>
  <div class="reveal">
    <h2>Section Title</h2>
    <p>Description text</p>
  </div>
</section>


<div class="stagger-children grid">
  <div class="reveal card">Feature 1</div>
  <div class="reveal card">Feature 2</div>
  <div class="reveal card">Feature 3</div>
</div>

---

阶段 4 — 逐区域应用指南

按以下方式对每种区域类型应用改进和动画：

区域	设计升级	动画模式
导航栏	毛玻璃效果 backdrop-blur、微妙的底部边框、精细调整 Logo 间距	加载时淡入（不触发滚动）
主视觉区	大号流畅字体、鲜明的层级、渐变或装饰性形状、精修 CTA 按钮	单组错落显现：标题 → 副文本 → CTA 按钮（每项间隔 0.1s）
功能／网格	卡片层次感（阴影 + 悬停上浮）、精修图标、统一间距	网格项目依次显现，偏移间隔为 0.1–0.15s
用户评价	引文样式、精修头像、区分卡片表面效果	卡片从左至右依次显现
统计数据／数字	加大数字并使用强调色、标签排版、分隔线	每项统计数据错开淡入
CTA 区域	鲜明的背景处理、精修按钮、充裕的内边距	单组显现
页脚	列间距、链接悬停状态、微妙的分隔线	单次显现

---

阶段 5 — 质量检查清单

交付结果前，请确认：

• 保留所有原有颜色（不引入新的配色）
• 每个区域至少包含一个 .reveal／AnimateInView 包装器
• 对所有包含 2 项或更多内容的网格／列表／卡片组应用错落效果
• 遵守 prefers-reduced-motion
• 所有交互元素均有悬停状态
• 排版层级清晰（字号／字重并非全部相同）
• 卡片／表面具有层次感（阴影、边框或背景区分）
• 间距充裕且富有节奏感，不显拥挤
• 没有泛泛的占位式改进，每项改动都有明确目的且效果可见
• 网站相比之前明显更加精致

---

注意事项与边缘情况

• 如果网站使用 Tailwind：使用 Framer Motion 的 motion.div 和 Tailwind 类。模糊效果可使用任意值：[filter:blur(8px)]，或使用内联样式设置动画初始状态。
• 如果颜色定义在 Tailwind 配置值中：在动画组件中引用这些颜色，但不要更改它们。
• 如果有图片：确保图片设置了固定高度或宽高比，并使用 object-fit: cover。可考虑添加轻微的悬停缩放效果。
• 对于深色网站：玻璃拟态效果尤其出色。卡片表面可使用 bg-white/5 或类似的低不透明度白色。
• 对于浅色网站：使用柔和的分层阴影（组合 shadow-sm 和 shadow-md）。使用轻微的背景色调来区分不同区域。
• 性能：blur() 滤镜动画在低端设备上可能会占用大量 GPU 资源。如果性能是个问题，请移除模糊效果，仅使用 opacity 和 translateY。