frontend-ui-animator by julianromli/ai-skills
npx skills add https://github.com/julianromli/ai-skills --skill frontend-ui-animator实现有目的、高性能的动画，以增强用户体验，同时避免让用户感到不适。重点关注关键场景：英雄区介绍、悬停反馈、内容展现和导航过渡。
"你不需要处处使用动画" - 优先考虑：
| 优先级 | 领域 | 目的 |
|---|---|---|
| 1 | 英雄区介绍 | 第一印象，品牌个性 |
| 2 | 悬停交互 | 反馈，可发现性 |
| 3 | 内容展现 | 引导注意力，减轻认知负荷 |
| 4 | 背景效果 | 氛围，深度 |
| 5 | 导航过渡 | 空间感知，连续性 |
按顺序执行各阶段。完成前一阶段后再进入下一阶段。
app/ 目录中的所有页面和 目录中的所有组件广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
components/tailwind.config.ts 中已有的动画/关键帧输出：动画审计表。参见 references/component-checklist.md。
输出：包含组件 → 动画映射的实现计划。
useScrollReveal、useMousePositionreferences/animation-patterns.md 中的模式性能规则：
// ✅ 应该做：仅使用变换和透明度
transform: translateY(20px);
opacity: 0.5;
filter: blur(4px);
// ❌ 不要做：对布局属性进行动画处理
margin-top: 20px;
height: 100px;
width: 200px;
prefers-reduced-motion 是否生效| 触发器 | 实现方式 |
|---|---|
| 页面加载 | 使用 CSS animation 和 animation-delay 实现交错效果 |
| 滚动进入视图 | IntersectionObserver 或 react-intersection-observer |
| 悬停 | Tailwind hover: 工具类或 CSS :hover |
| 点击/轻触 | 使用 useState 驱动状态变化 |
交错子元素动画：
{items.map((item, i) => (
<div
key={item.id}
style={{ animationDelay: `${i * 100}ms` }}
className="animate-fade-slide-in"
/>
))}
滚动展现钩子：
const useScrollReveal = (threshold = 0.1) => {
const ref = useRef<HTMLDivElement>(null);
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => entry.isIntersecting && setIsVisible(true),
{ threshold }
);
if (ref.current) observer.observe(ref.current);
return () => observer.disconnect();
}, [threshold]);
return { ref, isVisible };
};
用法：
const { ref, isVisible } = useScrollReveal();
<div ref={ref} className={isVisible ? 'animate-fade-in' : 'opacity-0'} />
references/animation-patterns.mdreferences/component-checklist.mdreferences/tailwind-presets.md始终在全局 CSS 中包含：
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
每周安装量
182
代码仓库
GitHub 星标数
148
首次出现
2026 年 1 月 23 日
安全审计
已安装于
opencode157
gemini-cli156
codex155
cursor146
claude-code141
github-copilot139
Implement purposeful, performant animations that enhance UX without overwhelming users. Focus on key moments: hero intros, hover feedback, content reveals, and navigation transitions.
"You don't need animations everywhere" - Prioritize:
| Priority | Area | Purpose |
|---|---|---|
| 1 | Hero Intro | First impression, brand personality |
| 2 | Hover Interactions | Feedback, discoverability |
| 3 | Content Reveal | Guide attention, reduce cognitive load |
| 4 | Background Effects | Atmosphere, depth |
| 5 | Navigation Transitions | Spatial awareness, continuity |
Execute phases sequentially. Complete each before proceeding.
app/ and components in components/tailwind.config.ts for existing animations/keyframesOutput: Animation audit table. See references/component-checklist.md.
Output: Implementation plan with component → animation mapping.
useScrollReveal, useMousePosition if neededreferences/animation-patterns.mdPerformance rules:
// ✅ DO: Use transforms and opacity only
transform: translateY(20px);
opacity: 0.5;
filter: blur(4px);
// ❌ DON'T: Animate layout properties
margin-top: 20px;
height: 100px;
width: 200px;
prefers-reduced-motion works| Trigger | Implementation |
|---|---|
| Page load | CSS animation with animation-delay for stagger |
| Scroll into view | IntersectionObserver or react-intersection-observer |
| Hover | Tailwind hover: utilities or CSS :hover |
| Click/Tap | State-driven with useState |
Staggered children:
{items.map((item, i) => (
<div
key={item.id}
style={{ animationDelay: `${i * 100}ms` }}
className="animate-fade-slide-in"
/>
))}
Scroll reveal hook:
const useScrollReveal = (threshold = 0.1) => {
const ref = useRef<HTMLDivElement>(null);
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => entry.isIntersecting && setIsVisible(true),
{ threshold }
);
if (ref.current) observer.observe(ref.current);
return () => observer.disconnect();
}, [threshold]);
return { ref, isVisible };
};
Usage:
const { ref, isVisible } = useScrollReveal();
<div ref={ref} className={isVisible ? 'animate-fade-in' : 'opacity-0'} />
references/animation-patterns.mdreferences/component-checklist.mdreferences/tailwind-presets.mdAlways include in global CSS:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
Weekly Installs
182
Repository
GitHub Stars
148
First Seen
Jan 23, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode157
gemini-cli156
codex155
cursor146
claude-code141
github-copilot139
GSAP时间轴动画教程：创建多步骤序列动画与关键帧控制
3,100 周安装