ss-motion

Name: ss-motion
Author: bitjaru

810stars73forks

How to install ss-motion?

bitjaru/styleseed/ss-motion

$npx -y skills add bitjaru/styleseed --skill ss-motion

Installs into the current project.

Summary

Apply a named StyleSeed motion to a component — either one of the 5 personality seeds (Spring/Silk/Snap/Float/Pulse × entrance/exit/hover/press/layout) or a distinctive keyword move from the motion library (toggle-flip, toggle-curtain, reveal-blur, pop-in, shimmer, …). Translates

Files · 1

View on GitHub

SKILL.md

1	# Motion Seed Applier
2
3	## When NOT to use
4
5	- For general framer-motion docs or learning → use the framer-motion site
6	- For non-React motion (CSS-only transitions, GSAP) — this skill targets `motion.X` JSX only
7	- For full scroll-linked timelines or parallax — out of scope for this skill (it does per-component
8	seeds/moves). Note these ARE allowed on a marketing/landing/brand page (DESIGN-LANGUAGE §43
9	Cinematic tier); just build them with a scroll library, not this skill. On app/data surfaces they
10	stay banned.
11	- For tweaking the existing FadeIn/FadeUp/Stagger wrappers — edit `engine/components/ui/motion.tsx` directly
12
13	## Vibe → Seed mapping
14
15	Translate the user's prompt to one of the five seeds before applying. Use this lookup table from `engine/motion/index.ts`:
16
17	\| Words the user might say \| Seed \|
18	\|---\|---\|
19	\| bouncy, springy, playful, energetic, alive \| Spring \|
20	\| smooth, silky, fluid, elegant, composed, continuous \| Silk \|
21	\| snappy, quick, instant, decisive, sharp, precise \| Snap \|
22	\| floaty, gentle, weightless, dreamy, ambient, drifting \| Float \|
23	\| rhythmic, punchy, pulsing, heartbeat, beat \| Pulse \|
24	\| "Toss style", "Arc style" \| Spring (per brand default) \|
25	\| "Stripe style", "Notion style" \| Silk \|
26	\| "Linear style", "Raycast style", "Vercel style" \| Snap \|
27
28	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.
29
30	## Recommend mode — use-case → motion (when the user describes the moment, not the vibe)
31
32	If the user describes what the thing is ("a like button", "a modal", "the loading
33	state", "items in a feed") rather than a feeling, recommend from the use-case map
34	(`MOTION_BY_USECASE` in `engine/motion/library.ts`, exported from `@engine/motion`):
35
36	\| Use case \| Reach for \| Why \|
37	\|---\|---\|---\|
38	\| Primary button / CTA press \| `spring · press` \| tactile, confident — the press should "give" \|
39	\| Modal / dialog / sheet enter \| `silk · entrance` \| smooth; never bounce serious/destructive content \|
40	\| Dropdown / popover / menu \| `snap · entrance` \| instant, precise — frequent UI shouldn't wait \|
41	\| Toast / inline notification \| `spring · entrance` \| small friendly arrival, non-blocking \|
42	\| List / feed items appearing \| `stagger-cascade` \| choreograph order, gently \|
43	\| Feature / marketing card hover \| `tilt-3d` \| depth/flair OK on content-light marketing \|
44	\| Dashboard / data card hover \| `snap · hover` \| a subtle lift only — keep dense UI calm \|
45	\| Like / favorite / reaction \| `like-burst` \| a celebratory one-shot; reward the tap \|
46	\| Live / online / recording dot \| `pulse-beat` \| looping heartbeat = "alive" \|
47	\| Loading / skeleton \| `shimmer` \| calm directional progress \|
48	\| Success / confirmation \| `pop-in` \| positive little "done" \|
49	\| Toggle / tab / segment switch \| `toggle-flip` \| distinctive, recognizable switch \|
50	\| Page / route transition \| `silk · entrance` \| smooth, minimal, get out of the way \|
51	\| Number / balance / KPI / price reveal \| none \| don't animate the payload — it must read instantly \|
52
53	Two anti-rules override the table (state them if you deviate):
54	1. One seed per product. If the project already uses a seed, match it — don't introduce a second personality.
55	2. Never delay the payload. Don't animate a balance, price, or search result into view; motion is for affordance, not content.
56
57	## Named motion keywords (distinctive moves)
58
59	Seeds set a personality (how a fade/scale feels). The motion library in
60	`engine/motion/library.ts` adds distinctive moves — a flip, a curtain wipe, a
61	morph — each behind a unique keyword. Prefer a keyword when the user wants a
62	specific, recognizable motion rather than a generic feel.
63
64	`engine/motion/library.ts` (exported as `MOTION_LIBRARY` / `MOTION_BY_KEY` from
65	`@engine/motion`) is the single source of truth — every keyword carries its
66	own runnable `snippet`. Pull the snippet from there; never hand-write the params.
67
68	\| Keyword \| Move \| Say it when the user wants… \|
69	\|---\|---\|---\|
70	\| `toggle-flip` \| 3D Y-axis card flip \| a switch/toggle to flip between two faces \|
71	\| `toggle-slide` \| slide-stack swap \| a value to slide out and the next to slide in \|
72	\| `toggle-morph` \| pill ⇄ circle morph \| a control to change shape on toggle \|
73	\| `toggle-curtain` \| top→bottom clip-path wipe \| a panel to reveal like a curtain \|
74	\| `reveal-blur` \| blur(12px)→0 focus-in \| content to focus-pull into place \|
75	\| `reveal-rise` \| ma

People who liked this also viewed

6 picks

Type

ss-motion

810stars73forks

View on GitHub

How to install ss-motion?

bitjaru/styleseed/ss-motion

$npx -y skills add bitjaru/styleseed --skill ss-motion

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Motion Seed Applier
2
3	## When NOT to use
4
5	- For general framer-motion docs or learning → use the framer-motion site
6	- For non-React motion (CSS-only transitions, GSAP) — this skill targets `motion.X` JSX only
7	- For full scroll-linked timelines or parallax — out of scope for this skill (it does per-component
8	seeds/moves). Note these ARE allowed on a marketing/landing/brand page (DESIGN-LANGUAGE §43
9	Cinematic tier); just build them with a scroll library, not this skill. On app/data surfaces they
10	stay banned.
11	- For tweaking the existing FadeIn/FadeUp/Stagger wrappers — edit `engine/components/ui/motion.tsx` directly
12
13	## Vibe → Seed mapping
14
15	Translate the user's prompt to one of the five seeds before applying. Use this lookup table from `engine/motion/index.ts`:
16
17	\| Words the user might say \| Seed \|
18	\|---\|---\|
19	\| bouncy, springy, playful, energetic, alive \| Spring \|
20	\| smooth, silky, fluid, elegant, composed, continuous \| Silk \|
21	\| snappy, quick, instant, decisive, sharp, precise \| Snap \|
22	\| floaty, gentle, weightless, dreamy, ambient, drifting \| Float \|
23	\| rhythmic, punchy, pulsing, heartbeat, beat \| Pulse \|
24	\| "Toss style", "Arc style" \| Spring (per brand default) \|
25	\| "Stripe style", "Notion style" \| Silk \|
26	\| "Linear style", "Raycast style", "Vercel style" \| Snap \|
27
28	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.
29
30	## Recommend mode — use-case → motion (when the user describes the moment, not the vibe)
31
32	If the user describes what the thing is ("a like button", "a modal", "the loading
33	state", "items in a feed") rather than a feeling, recommend from the use-case map
34	(`MOTION_BY_USECASE` in `engine/motion/library.ts`, exported from `@engine/motion`):
35
36	\| Use case \| Reach for \| Why \|
37	\|---\|---\|---\|
38	\| Primary button / CTA press \| `spring · press` \| tactile, confident — the press should "give" \|
39	\| Modal / dialog / sheet enter \| `silk · entrance` \| smooth; never bounce serious/destructive content \|
40	\| Dropdown / popover / menu \| `snap · entrance` \| instant, precise — frequent UI shouldn't wait \|
41	\| Toast / inline notification \| `spring · entrance` \| small friendly arrival, non-blocking \|
42	\| List / feed items appearing \| `stagger-cascade` \| choreograph order, gently \|
43	\| Feature / marketing card hover \| `tilt-3d` \| depth/flair OK on content-light marketing \|
44	\| Dashboard / data card hover \| `snap · hover` \| a subtle lift only — keep dense UI calm \|
45	\| Like / favorite / reaction \| `like-burst` \| a celebratory one-shot; reward the tap \|
46	\| Live / online / recording dot \| `pulse-beat` \| looping heartbeat = "alive" \|
47	\| Loading / skeleton \| `shimmer` \| calm directional progress \|
48	\| Success / confirmation \| `pop-in` \| positive little "done" \|
49	\| Toggle / tab / segment switch \| `toggle-flip` \| distinctive, recognizable switch \|
50	\| Page / route transition \| `silk · entrance` \| smooth, minimal, get out of the way \|
51	\| Number / balance / KPI / price reveal \| none \| don't animate the payload — it must read instantly \|
52
53	Two anti-rules override the table (state them if you deviate):
54	1. One seed per product. If the project already uses a seed, match it — don't introduce a second personality.
55	2. Never delay the payload. Don't animate a balance, price, or search result into view; motion is for affordance, not content.
56
57	## Named motion keywords (distinctive moves)
58
59	Seeds set a personality (how a fade/scale feels). The motion library in
60	`engine/motion/library.ts` adds distinctive moves — a flip, a curtain wipe, a
61	morph — each behind a unique keyword. Prefer a keyword when the user wants a
62	specific, recognizable motion rather than a generic feel.
63
64	`engine/motion/library.ts` (exported as `MOTION_LIBRARY` / `MOTION_BY_KEY` from
65	`@engine/motion`) is the single source of truth — every keyword carries its
66	own runnable `snippet`. Pull the snippet from there; never hand-write the params.
67
68	\| Keyword \| Move \| Say it when the user wants… \|
69	\|---\|---\|---\|
70	\| `toggle-flip` \| 3D Y-axis card flip \| a switch/toggle to flip between two faces \|
71	\| `toggle-slide` \| slide-stack swap \| a value to slide out and the next to slide in \|
72	\| `toggle-morph` \| pill ⇄ circle morph \| a control to change shape on toggle \|
73	\| `toggle-curtain` \| top→bottom clip-path wipe \| a panel to reveal like a curtain \|
74	\| `reveal-blur` \| blur(12px)→0 focus-in \| content to focus-pull into place \|
75	\| `reveal-rise` \| ma

People who liked this also viewed

6 picks

Type