ss-motion

Featured

Apply a named StyleSeed motion from the five personality seeds or the keyword move library. Use when asked for a specific motion or a vibe word like "springy", "snappy", or "shimmer".

Web & Frontend 966 stars 89 forks Updated today MIT

Install

View on GitHub

Quality Score: 96/100

Stars 20%
99
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Motion Seed Applier ## Registry-first artifact boundary When `.styleseed/project.json` and `.styleseed/artifacts/index.json` exist, resolve the requested artifact ID first, then read only `.styleseed/bundles/<artifact-id>.md` and `.styleseed/manifests/<artifact-id>.json`. Never fall back to the global legacy bundle for a registry project. Legacy projects may use `.styleseed/effective-rules.md` only when no registry exists. ## 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 ## 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** | | rhyt...

Details

Author
bitjaru
Repository
bitjaru/styleseed
Created
5 months ago
Last Updated
today
Language
JavaScript
License
MIT

Integrates with

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

seedance-motion

This skill should be used when the user asks for body action, choreography, physics, object movement, movement timing, action continuity, stunt direction, or motion-reference mapping in Seedance 2.0.

1 Updated 1 weeks ago
durang
Web & Frontend Listed

awesome-motion

Design and implement tasteful, purpose-driven motion and animation using the AwesomeDesignSystem — Motion (React, formerly Framer Motion) and CSS-only recipes. Use when the user asks to "add animation", "make it animate / move", "add transitions", "scroll effects", "page-load reveal", "stagger", "micro-interactions", "hover/press effects", or wants motion that feels considered rather than decorative. Produces working code with chosen easing/durations, reduced-motion fallbacks, and one orchestrated high-impact moment over scattered effects.

2 Updated 1 months ago
Yu-aimaker
Web & Frontend Listed

product-motion

Ways to show the product in a motion-graphics video — composition moves. App icons ring a central hub and connect (integrations orbit), icon bubbles float in space (constellation), a product screenshot rises/tilts in on a gradient (screen reveal), person/logo social-proof chips slide in, and tilted cards fan out in perspective. Use when presenting integrations, an ecosystem, a dashboard/UI screenshot, testimonials, or a set of feature cards. Triggers: "integrations orbit / hub and spoke", "app icons around a logo", "reveal the product screenshot", "avatar chips / social proof", "cards fan out", "show the dashboard".

1 Updated 5 days ago
JagZ999