Vibe-code your own motion
You don’t pick easing curves and spring constants anymore — you name a feeling. This guide shows how StyleSeed’s two motion layers combine, and gives you copy-paste prompts so Claude Code or Cursor produces consistent, original animation instead of another default fade.
Two layers: personality × move
Every StyleSeed motion is one of two things. Knowing which you want is the whole skill.
How any motion feels. 5 named seeds — Spring (bouncy), Silk (smooth), Snap (instant), Float (dreamy), Pulse (rhythmic) — each in 5 contexts (entrance / exit / hover / press / layout).
{...spring.hover}A specific, recognizable motion behind one handle — toggle-flip, reveal-blur, tilt-3d, glow-pulse, confetti-pop… Say the keyword, get that exact recipe.
/ss-motion toggle-flipThe magic is combining them: a move rendered with a personality. A toggle-flip can feel bouncy (Spring) or instant (Snap) — same move, different soul.
Apply one in seconds
Seeds are spreadable recipes. Import one and spread it onto any motion.* element — combine contexts freely:
import { spring } from "@engine/motion";
// hover + press compose cleanly
<motion.button {...spring.hover} {...spring.press}>
Save
</motion.button>For a keyword move, grab the snippet from the gallery (each card has a Copy button) — or just ask your AI by name (next section).
Prompts that just work
Paste any of these into Claude Code or Cursor. Because the keywords map to one registry, the AI resolves them to real framer-motion code — the same every time.
“Make this CTA button magnetic and give it a glow-pulse so it draws the eye.”
→ resolves to magnetic + glow-pulse
“Tilt this pricing card in 3D on hover (tilt-3d) with a spotlight that follows the cursor.”
→ resolves to tilt-3d + spotlight
“Reveal the feature list with stagger-cascade, each item using the silk seed.”
→ resolves to stagger-cascade + silk
“When the form is invalid, wiggle the field and squish the submit button on tap.”
→ resolves to wiggle + press-squish
“Flip this toggle in 3D (toggle-flip) using the spring seed, and pop a confetti-pop when it turns on.”
→ resolves to toggle-flip + spring + confetti-pop
“Decode the hero headline with a text-scramble on load.”
→ resolves to text-scramble
Make your own move
The seeds and keywords are a starting grammar, not a cage. To invent a motion, start from a seed’s recipe and add one transform. Here’s a mischievous “wobble” built on Spring’s hover:
// spring.hover gives the bouncy lift — add a tilt for character
<motion.div
whileHover={{ scale: 1.04, rotate: -3 }}
transition={{ type: "spring", stiffness: 300, damping: 12 }}
/>Then ask your AI to formalize it so it’s reusable across your app:
“Take the spring seed's hover and add a -3deg rotate so it feels playful. Save it in our motion library as a new keyword `wobble-hover` and use it on the avatar.”
→ resolves to new keyword from a seed
Rule of thumb: one move per element. Pick a personality for the page, reach for a keyword when a specific element should stand out, and let prefers-reduced-motion (handled automatically) quiet it all down when a user asks.