本文へ移動
cccskills
無料GitHub で公開

spotlight-card

Give feature/pricing cards a premium feel: a soft radial spotlight follows the cursor across the card and lifts its border. Keep the glow subtle and low-contrast. Falls back to a plain static border under prefers-reduced-motion and on touch. Do not use on text-dense reading surfaces.

nexu-io/motion-anything
インストール方法を見る

含まれるファイル（5）

  • SKILL.md2.0 KB
  • preview.html1.6 KB
  • recipe.motion.yaml1.8 KB
  • spotlight-card.css1.0 KB
  • spotlight-card.js1.3 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

spotlight-card

A radial spotlight that follows the cursor across a card. Part of motion-anything; obeys MOTION-SPEC.md. Technique popularized by Aceternity UI, reimplemented dependency-free.

When to use it

  • Feature cards, pricing tiles, or a card grid where one should light up under the pointer.

When NOT to use it (restraint)

  • Text-dense reading surfaces — the glow distracts. Keep it low-contrast and subtle.
  • Touch-only contexts — there is no cursor; it falls back to a static border automatically.

How to apply

  1. Copy spotlight-card.css and spotlight-card.js into the project, and link them.
  2. Mark the card: 
    <div class="spotlight"> … </div>
  3. Auto-attaches to .spotlight. JS writes --mx/--my; the CSS paints the glow there.

Accessibility & performance

  • Disabled under prefers-reduced-motion and on (hover: none) touch devices (static border stays).
  • Paints a radial-gradient only — no layout thrash.

Framework notes

  • React: call attachSpotlight(ref.current) in useEffect, guarded by the same checks.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

anim-backindown

無料

Back In Down — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/motion-anything8592026年7月7日 更新

anim-backinleft

無料

Back In Left — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/motion-anything8592026年7月7日 更新

anim-backinright

無料

Back In Right — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/motion-anything8592026年7月7日 更新

anim-backinup

無料

Back In Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/motion-anything8592026年7月7日 更新

anim-backoutdown

無料

Back Out Down — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/motion-anything8592026年7月7日 更新

anim-backoutleft

無料

Back Out Left — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/motion-anything8592026年7月7日 更新

nexu-io のスキルをすべて見る

このスキルの問題を報告する