메뉴
Give one card or CTA a lively accent: a small bright comet of light travels around its border. Brighter/livelier than shine-border — use for a single "new"/"featured" element, one per view. Pure CSS; fully static 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 border-beam명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SOC 직업 분류 기준
SKILL.md 표시 중
| name | border-beam |
| description | Give one card or CTA a lively accent: a small bright comet of light travels around its border. Brighter/livelier than shine-border — use for a single "new"/"featured" element, one per view. Pure CSS; fully static under prefers-reduced-motion. |
| triggers | ["border beam","traveling light border","comet border","animated outline accent","边框光点","环绕流光"] |
| od | {"mode":"prototype","surface":"web","platform":"desktop","category":"animation-motion","upstream":"https://magicui.design/docs/components/border-beam","preview":{"type":"html"},"design_system":{"requires":false},"example_prompt":"Use border-beam on the \"New\" feature card: a small bright comet travels the border. Just that one\ncard; static under reduced-motion.\n"} |
A bright comet that travels an element's border. Part of
motion-anything; obeys MOTION-SPEC.md. Technique
popularized by Magic UI, reimplemented dependency-free (pure CSS).
border-beam.css into the project and link it.<div class="beam"> … </div>
--beam-color, --beam-size, and the animation duration (default 3s).prefers-reduced-motion the beam stops; a plain static border remains.@property --beam-angle) — compositor-friendly.--beam-* per component.