メニュー
A soft light rotates around a pill/button border — a gentle animated outline for a single CTA. One per view; keep it slow and low-contrast. Pure CSS; static border under prefers-reduced-motion.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/nexu-io/motion-anything --skill star-borderコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Fade Big — a composable AnimXYZ entrance via the xyz="fade big-50%" attribute. Declarative: mix fade + move + scale + rotate without writing keyframes. MIT. Honors prefers-reduced-motion.
Fade Down — a composable AnimXYZ entrance via the xyz="fade down-3" attribute. Declarative: mix fade + move + scale + rotate without writing keyframes. MIT. Honors prefers-reduced-motion.
Fade Left — a composable AnimXYZ entrance via the xyz="fade left-3" attribute. Declarative: mix fade + move + scale + rotate without writing keyframes. MIT. Honors prefers-reduced-motion.
SOC 職業分類に基づく
SKILL.md を表示中
| name | star-border |
| description | A soft light rotates around a pill/button border — a gentle animated outline for a single CTA. One per view; keep it slow and low-contrast. Pure CSS; static border under prefers-reduced-motion. |
| triggers | ["star border","animated outline button","gradient border","星光边框","渐变描边按钮"] |
| od | {"mode":"prototype","surface":"web","platform":"desktop","category":"animation-motion","upstream":"https://reactbits.dev/animations/star-border","preview":{"type":"html"},"design_system":{"requires":false}} |
A light that circles a button's border. Dependency-free, reduced-motion safe.
Copy star-border.css; <button class="star">Get started</button>. Tune --star-color, --star-w, duration.
