All motion keywords

Flairgradient-sweep

Gradient sweep

Animated gradient flows through text or a surface.

Gradienttap / hover to play

<motion.span
  animate={{ backgroundPosition: ["0% 50%", "100% 50%"] }}
  transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
  style={{
    backgroundImage: "linear-gradient(90deg,#6C5CE7,#FF6B6B,#FFD93D,#6C5CE7)",
    backgroundSize: "300% 100%",
    WebkitBackgroundClip: "text",
    WebkitTextFillColor: "transparent",
  }}
>
  Gradient
</motion.span>

How to use it

Copy-paste

Grab the code above and drop it onto any motion.* element.

Or name it

In Claude Code / Cursor, run /ss-motion gradient-sweep and the recipe lands in your code.

Personality

Pairs naturally with the silk seed (smooth, elegant).

Related Flair moves

Card tilts in 3D toward the cursor — depth on hover

Button drifts toward the cursor, springs back on leave

Breathing neon glow — draws the eye to a hot CTA

Organic shape endlessly morphs — living background blob

20+ named motion moves

All copy-paste, all in StyleSeed’s design engine. MIT.

Browse the gallery Star