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

blur-text

Words resolve from a soft blur, one after another — a calm, premium headline entrance. One headline per view; not body copy. Under prefers-reduced-motion it appears instantly and sharp.

インストール方法を見る

含まれるファイル(5)

  • SKILL.md687 B
  • blur-text.css496 B
  • blur-text.js1.1 KB
  • preview.html888 B
  • recipe.motion.yaml1.1 KB

SKILL.md(原文)

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

blur-text

A headline that resolves from blur, word by word. Dependency-free, reduced-motion safe.

How to apply

Copy css+js; <h1 data-blur-text>Your headline</h1>.

レビュー

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

同じリポジトリのスキル

概要と使いどころ

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-anything8572026年7月7日 更新

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-anything8572026年7月7日 更新

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-anything8572026年7月7日 更新

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-anything8572026年7月7日 更新

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-anything8572026年7月7日 更新

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-anything8572026年7月7日 更新

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

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