ss-motion

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Motion Seed Applier

Motion Seed 应用手册

When NOT to use

不适用于以下场景

For general framer-motion docs or learning → use the framer-motion site
For non-React motion (CSS-only transitions, GSAP) — this skill targets
```
motion.X
```
JSX only
For full scroll-linked timelines or parallax — out of scope for this skill (it does per-component seeds/moves). Note these ARE allowed on a marketing/landing/brand page (DESIGN-LANGUAGE §43 Cinematic tier); just build them with a scroll library, not this skill. On app/data surfaces they stay banned.
For tweaking the existing FadeIn/FadeUp/Stagger wrappers — edit
```
engine/components/ui/motion.tsx
```
directly

若需查阅framer-motion通用文档或学习相关知识 → 请访问framer-motion官方网站
非React动效（纯CSS过渡、GSAP）——本工具仅针对
```
motion.X
```
JSX组件
完整滚动关联时间轴或视差效果——超出本工具的适用范围（本工具仅处理单组件的种子/动效）。注意：此类效果在营销/落地/品牌页面中是允许的（参考DESIGN-LANGUAGE §43 电影级规范）；只需使用滚动库直接构建，无需借助本工具。在应用/数据类界面中，此类效果仍被禁止。
如需调整现有FadeIn/FadeUp/Stagger包装组件——请直接编辑
```
engine/components/ui/motion.tsx
```
文件

Vibe → Seed mapping

氛围感 → 动效种子映射

Translate the user's prompt to one of the five seeds before applying. Use this lookup table from

engine/motion/index.ts

Words the user might say	Seed
bouncy, springy, playful, energetic, alive	Spring
smooth, silky, fluid, elegant, composed, continuous	Silk
snappy, quick, instant, decisive, sharp, precise	Snap
floaty, gentle, weightless, dreamy, ambient, drifting	Float
rhythmic, punchy, pulsing, heartbeat, beat	Pulse
"Toss style", "Arc style"	Spring (per brand default)
"Stripe style", "Notion style"	Silk
"Linear style", "Raycast style", "Vercel style"	Snap

If the user says only a brand name, use that brand's default seed from

BRAND_DEFAULT_SEED

. If the user is explicit about a seed name (

spring

silk

, etc.), respect it verbatim.

在应用动效前，先将用户的需求描述转换为五种种子之一。请参考

engine/motion/index.ts

中的对照表：

用户可能使用的描述词	动效种子
bouncy、springy、playful、energetic、alive	Spring
smooth、silky、fluid、elegant、composed、continuous	Silk
snappy、quick、instant、decisive、sharp、precise	Snap
floaty、gentle、weightless、dreamy、ambient、drifting	Float
rhythmic、punchy、pulsing、heartbeat、beat	Pulse
"抛射风格"、"弧线风格"	Spring（品牌默认设置）
"条纹风格"、"Notion风格"	Silk
"线性风格"、"Raycast风格"、"Vercel风格"	Snap

如果用户仅提及品牌名称，请使用

BRAND_DEFAULT_SEED

中该品牌对应的默认种子。如果用户明确指定了种子名称（如

spring

、

silk

等），请严格遵循用户的选择。

Recommend mode — use-case → motion (when the user describes the moment, not the vibe)

Use case	Reach for	Why
Primary button / CTA press	`spring · press`	tactile, confident — the press should "give"
Modal / dialog / sheet enter	`silk · entrance`	smooth; never bounce serious/destructive content
Dropdown / popover / menu	`snap · entrance`	instant, precise — frequent UI shouldn't wait
Toast / inline notification	`spring · entrance`	small friendly arrival, non-blocking
List / feed items appearing	`stagger-cascade`	choreograph order, gently
Feature / marketing card hover	`tilt-3d`	depth/flair OK on content-light marketing
Dashboard / data card hover	`snap · hover`	a subtle lift only — keep dense UI calm
Like / favorite / reaction	`like-burst`	a celebratory one-shot; reward the tap
Live / online / recording dot	`pulse-beat`	looping heartbeat = "alive"
Loading / skeleton	`shimmer`	calm directional progress
Success / confirmation	`pop-in`	positive little "done"
Toggle / tab / segment switch	`toggle-flip`	distinctive, recognizable switch
Page / route transition	`silk · entrance`	smooth, minimal, get out of the way
Number / balance / KPI / price reveal	none	don't animate the payload — it must read instantly

使用场景	推荐动效	原因
主按钮/CTA点击	`spring · press`	有触感、自信——点击时应有“反馈感”
模态框/对话框/底部弹窗入场	`silk · entrance`	流畅；严肃/破坏性内容绝不使用弹跳效果
下拉菜单/弹出层/菜单	`snap · entrance`	即时、精准——高频UI不应让用户等待
提示框/内嵌通知	`spring · entrance`	小巧友好的入场效果，不阻塞操作
列表/信息流条目出现	`stagger-cascade`	按顺序编排，柔和呈现
营销/功能卡片悬停	`tilt-3d`	在内容简洁的营销页面中，可增加深度/亮点
仪表盘/数据卡片悬停	`snap · hover`	仅需轻微抬起——保持密集UI的沉稳感
点赞/收藏/互动反馈	`like-burst`	一次性的庆祝效果；响应用户点击
在线/直播/录制状态点	`pulse-beat`	循环心跳效果 = “活跃中”
加载/骨架屏	`shimmer`	平稳的方向性进度提示
成功/确认提示	`pop-in`	积极的“完成”小动效
切换器/标签页/分段控件切换	`toggle-flip`	独特、易识别的切换效果
页面/路由过渡	`silk · entrance`	流畅、简洁，不干扰用户操作
数字/余额/KPI/价格展示	无	不要为核心内容添加动画——必须让用户立即读取信息

Named motion keywords (distinctive moves)

命名动效关键词（特色动效）

Seeds set a personality (how a fade/scale feels). The motion library in

engine/motion/library.ts

adds distinctive moves — a flip, a curtain wipe, a morph — each behind a unique keyword. Prefer a keyword when the user wants a specific, recognizable motion rather than a generic feel.

engine/motion/library.ts

(exported as

MOTION_LIBRARY

MOTION_BY_KEY

from

@engine/motion

) is the single source of truth — every keyword carries its own runnable

snippet

. Pull the snippet from there; never hand-write the params.

Keyword	Move	Say it when the user wants…
`toggle-flip`	3D Y-axis card flip	a switch/toggle to flip between two faces
`toggle-slide`	slide-stack swap	a value to slide out and the next to slide in
`toggle-morph`	pill ⇄ circle morph	a control to change shape on toggle
`toggle-curtain`	top→bottom clip-path wipe	a panel to reveal like a curtain
`reveal-blur`	blur(12px)→0 focus-in	content to focus-pull into place
`reveal-rise`	masked clip-path text rise	a headline/text to climb into view
`reveal-unfold`	scaleY from top edge	an accordion/panel to unfold
`pop-in`	spring overshoot from 0	a badge/checkmark to pop in bouncily
`press-squish`	scale-down + skew	a button to feel jelly/tactile on tap
`tap-ripple`	radial ripple from tap	Material-style press feedback
`pulse-beat`	looping scale pulse	a live/recording/heartbeat indicator
`wiggle`	quick horizontal shake	error / invalid-input feedback
`shimmer`	skeleton loading sweep	a loading placeholder
`stagger-cascade`	children fade-up in sequence	a list to animate in one-by-one

Applying a keyword:

Read the exact recipe from
```
engine/motion/library.ts
```
— find the entry whose
```
key
```
matches, copy its
```
snippet
```
verbatim (it is calibrated and runnable).
Adapt only the element/content to the user's JSX; keep the transition values.
If the keyword is stateful (toggles, ripple), wire the
```
useState
```
shown in the snippet. If it's a one-shot reveal, a
```
key
```
bump replays it.
Tell the user the keyword you applied so they can reuse it elsewhere for consistency, and point them at
```
/motion
```
to preview/Copy others.

If the user describes a move but no exact keyword fits, fall back to a seed + context. If they say a keyword that doesn't exist, suggest the closest real one from the table — never invent a keyword.

动效种子定义的是风格个性（淡入/缩放的感受）。动效库（位于

engine/motion/library.ts

）提供特色动效——翻转、幕布擦除、变形等，每个动效对应唯一关键词。当用户需要特定、可识别的动效而非通用风格时，优先使用关键词。

engine/motion/library.ts

（从

@engine/motion

导出为

MOTION_LIBRARY

MOTION_BY_KEY

）是唯一可信源——每个关键词都带有可运行的

snippet

代码块。请直接从该文件获取代码片段；切勿手动编写参数。

关键词	动效效果	适用场景
`toggle-flip`	3D Y轴卡片翻转	用户需要在两个状态间通过翻转切换
`toggle-slide`	滑动堆叠切换	用户需要让旧值滑出、新值滑入
`toggle-morph`	胶囊形⇄圆形变形	用户需要控件在切换时改变形状
`toggle-curtain`	从上到下的裁剪路径擦除	用户需要像拉开幕布一样展示面板
`reveal-blur`	从blur(12px)到清晰的聚焦效果	用户需要内容逐步聚焦呈现
`reveal-rise`	蒙版裁剪路径下的文字上升	用户需要标题/文字向上滑入视野
`reveal-unfold`	从顶部边缘开始的Y轴缩放	用户需要折叠面板展开
`pop-in`	从0开始的弹簧过冲效果	用户需要徽章/对勾弹跳式出现
`press-squish`	缩小+倾斜	用户需要按钮点击时有果冻般的触感
`tap-ripple`	点击位置的径向波纹	Material风格的点击反馈
`pulse-beat`	循环缩放脉冲	在线/录制/心跳状态指示器
`wiggle`	快速水平抖动	错误/无效输入的反馈
`shimmer`	骨架屏加载扫过效果	加载占位符
`stagger-cascade`	子元素依次淡入上移	列表逐个动画入场

应用关键词的步骤：

从
```
engine/motion/library.ts
```
中读取对应配方——找到
```
key
```
匹配的条目，直接复制其
```
snippet
```
代码块（已校准且可运行）。
仅根据用户的JSX调整元素/内容；保留过渡参数不变。
如果关键词涉及状态（切换器、波纹），请按照代码片段中的示例配置
```
useState
```
。如果是一次性展示效果，通过更新
```
key
```
值重新触发动画。
告知用户你所应用的关键词，以便他们在其他地方复用保证一致性，并引导他们访问
```
/motion
```
页面预览/复制其他动效。

如果用户描述的动效没有完全匹配的关键词，退而动效种子+场景。如果用户提及的关键词不存在，建议使用表格中最接近的真实关键词——切勿自创关键词。

Context detection

场景上下文识别

Infer one of the five contexts from the prompt:

"on hover" / "when hovered" →
```
hover
```
"on press" / "on tap" / "on click" →
```
press
```
"when it appears" / "on mount" / "entering" →
```
entrance
```
"when it leaves" / "on close" / "exiting" →
```
exit
```
(requires
```
<AnimatePresence>
```
)
"when layout changes" / "FLIP" / "rearranging" →
```
layout
```

If ambiguous, default to

entrance

. If multiple contexts are reasonable (e.g., a button needs both

hover

and

press

), apply both.

从用户的需求描述中推断以下五种上下文之一：

"on hover" / "when hovered" →
```
hover
```
（悬停）
"on press" / "on tap" / "on click" →
```
press
```
（点击）
"when it appears" / "on mount" / "entering" →
```
entrance
```
（入场）
"when it leaves" / "on close" / "exiting" →
```
exit
```
（退场，需配合
```
<AnimatePresence>
```
）
"when layout changes" / "FLIP" / "rearranging" →
```
layout
```
（布局变化）

若上下文不明确，默认使用

entrance

。如果多个上下文合理（例如按钮同时需要

hover

和

press

效果），则同时应用两种。

Application steps

应用步骤

Apply seed: $0 · Context: $1 · Target: $ARGUMENTS

Read the target file at the path given (or, if no path was given, ask the user which file). Locate the JSX element the user is talking about — usually a
```
<button>
```
,
```
<div>
```
,
```
<Card>
```
, or similar.
Confirm the import paths. The component file must be able to import:
- ```
motion
```
  (and
```
AnimatePresence
```
  for
```
exit
```
  ) from
```
"framer-motion"
```
- the chosen seed from
```
"@engine/motion"
```
  — in a project that doesn't use the
```
@engine/*
```
  alias, use a relative path to
```
engine/motion
```

Replace the target tag with a
<motion.X>
and spread the seed's recipe:

tsx

// hover example
<motion.button {...spring.hover}>Save</motion.button>

// press + hover combined
<motion.button {...spring.press} {...spring.hover}>Save</motion.button>

// entrance (mount)
<motion.div {...silk.entrance}>...</motion.div>

// exit (requires AnimatePresence wrapper somewhere up the tree)
<AnimatePresence>
  {open && <motion.div {...silk.entrance} {...silk.exit} />}
</AnimatePresence>

// layout (FLIP)
<motion.div {...snap.layout}>...</motion.div>

Do NOT inline the params. The whole point of the seed is that the values come from one source. Never expand
```
{ type: "spring", stiffness: 300, damping: 18 }
```
into the JSX — always spread the recipe.
Respect
prefers-reduced-motion
in long-running surfaces. For one-off interactions (hover/press), framer-motion already throttles. For mount/exit/layout sequences in a long-lived page, import
```
usePrefersReducedMotion
```
and
```
REDUCED_TRANSITION
```
from
```
@engine/motion
```
and override the transition when reduced motion is on.
Validate by re-reading the file and confirming the JSX still parses (matching brackets, motion tag closed, AnimatePresence in place if
```
exit
```
was used).
Tell the user which seed and context you applied, and offer one related context they might want next ("Want
```
press
```
too so it feels clickable?").

动效种子：$0 · 上下文：$1 · 目标：$ARGUMENTS

读取目标文件：根据给定路径读取文件（若未提供路径，请询问用户具体文件）。定位用户提及的JSX元素——通常是
```
<button>
```
、
```
<div>
```
、
```
<Card>
```
等。
确认导入路径：组件文件必须能够导入：
- 从
```
"framer-motion"
```
  导入
```
motion
```
  （以及用于
```
exit
```
  效果的
```
AnimatePresence
```
  ）
- 从
```
"@engine/motion"
```
  导入所选的动效种子——若项目未使用
```
@engine/*
```
  别名，请使用相对路径指向
```
engine/motion
```

将目标标签替换为
<motion.X>
并展开种子配方：

tsx

// 悬停示例
<motion.button {...spring.hover}>保存</motion.button>

// 点击+悬停组合效果
<motion.button {...spring.press} {...spring.hover}>保存</motion.button>

// 入场（挂载）
<motion.div {...silk.entrance}>...</motion.div>

// 退场（需在上级树中添加<AnimatePresence>包装）
<AnimatePresence>
  {open && <motion.div {...silk.entrance} {...silk.exit} />}
</AnimatePresence>

// 布局变化（FLIP）
<motion.div {...snap.layout}>...</motion.div>

请勿内联参数。动效种子的核心价值在于参数来自单一可信源。切勿将
```
{ type: "spring", stiffness: 300, damping: 18 }
```
展开到JSX中——始终使用展开配方的方式。
尊重
prefers-reduced-motion
设置。对于长期运行的界面，若用户开启了减少动效设置，需适配。对于一次性交互（悬停/点击），framer-motion已自动处理。对于长期页面中的挂载/退场/布局序列，请从
```
@engine/motion
```
导入
```
usePrefersReducedMotion
```
和
```
REDUCED_TRANSITION
```
，并在开启减少动效时覆盖过渡效果。
验证：重新读取文件，确认JSX仍可正常解析（括号匹配、motion标签闭合、若使用
```
exit
```
则已添加AnimatePresence）。
告知用户你所应用的动效种子和上下文，并提供一个相关的后续建议（例如“是否需要添加
```
press
```
效果让按钮更有点击感？”）。

Defaults if the user is vague

用户需求模糊时的默认规则

No file given → ask "which file?"
No vibe word → ask "any vibe word, brand, or seed name?"
Vibe is "natural" or "feel like a real app" → default to Silk (the safest of the five)
Element is a CTA button → also apply
```
press
```

未提供文件路径 → 询问“请指定文件路径？”
未提及氛围感描述 → 询问“是否有氛围感描述、品牌或种子名称？”
氛围感描述为“自然”或“像真实应用” → 默认使用Silk（五种种子中最稳妥的选择）
元素为CTA按钮 → 同时应用
```
press
```
效果

Forbidden

禁止操作

Do not invent new seed names. There are exactly five.
Do not edit
```
engine/motion/seeds/*.ts
```
from this skill — those are calibrated by hand. Add a new seed only via a separate, explicit ask.
Do not introduce a third-party animation lib (gsap, anime.js). StyleSeed targets framer-motion exclusively.
Do not add scroll-linked, parallax, or infinite animations via this skill — it does per-component seeds/moves. (Scroll-linked/parallax/3D ARE allowed on a marketing/landing/brand page per DESIGN-LANGUAGE §43 Cinematic tier — build those directly with a scroll lib; on app/data surfaces they stay forbidden.) Infinite loops remain banned everywhere except skeleton pulse.

请勿自创新的种子名称。仅允许使用五种现有种子。
请勿通过本工具编辑
```
engine/motion/seeds/*.ts
```
文件——这些文件是手动校准的。如需添加新种子，请单独提交明确的需求。
请勿引入第三方动画库（gsap、anime.js）。StyleSeed仅针对framer-motion。
请勿通过本工具添加滚动关联、视差或无限循环动画——本工具仅处理单组件的种子/动效。（滚动关联/视差/3D效果在营销/落地/品牌页面中是允许的，参考DESIGN-LANGUAGE §43 电影级规范——请直接使用滚动库构建；在应用/数据类界面中，此类效果仍被禁止。无限循环动画除骨架屏脉冲外，其他场景均被禁止。）