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

animation-gen

Generate CSS and Framer Motion animations from plain English. Use when you need smooth animations without the math.

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

sundial-org/awesome-openclaw-skillsスター 671(GitHub 671 + cccskills 0)
連携ツールX (Twitter)

実行スコア 未検証

インストール方法を見る

含まれるファイル(1)

  • SKILL.md2.5 KB

SKILL.md(原文)

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

Animation Generator

Describing animations is easy. Writing the keyframes and easing functions is not. Tell this tool what you want to see and it'll give you the CSS or Framer Motion code to make it happen.

One command. Zero config. Just works.

Quick Start

npx ai-animation "fade in from left with bounce"

What It Does

  • Converts plain English descriptions to actual animation code
  • Supports CSS keyframes and Framer Motion variants
  • Handles complex multi-step animations
  • Outputs production-ready code you can drop in

Usage Examples

# Get CSS keyframes
npx ai-animation "pulse glow effect" -f css

# Get Framer Motion variant
npx ai-animation "staggered list entrance" -f framer

# Save to file
npx ai-animation "smooth slide up reveal" -f both -o animations.ts

# Complex animation
npx ai-animation "shake horizontally three times then settle"

Best Practices

  • Be descriptive - "bounce twice then fade" beats "make it move"
  • Mention timing - include "slow", "fast", "0.5s" if timing matters
  • Specify direction - "from left", "upward", "diagonal" helps a lot
  • Test on device - animations feel different on mobile

When to Use This

  • Building landing pages and need attention-grabbing effects
  • Adding micro-interactions to your UI
  • You can picture the animation but can't write the math
  • Prototyping quickly before fine-tuning manually

Part of the LXGIC Dev Toolkit

This is one of 110+ free developer tools built by LXGIC Studios. No paywalls, no sign-ups, no API keys on free tiers. Just tools that work.

Find more:

Requirements

No install needed. Just run with npx. Node.js 18+ recommended. Needs OPENAI_API_KEY environment variable.

npx ai-animation --help

How It Works

Takes your natural language description and translates it into animation primitives. The AI understands common animation terms like "bounce", "ease", "stagger" and converts them to proper timing functions and keyframe values.

License

MIT. Free forever. Use it however you want.


Built by LXGIC Studios

レビュー

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

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

1password

無料

Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.

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

sundial-org/awesome-openclaw-skills6712026年3月7日 更新

A股实时行情与分时量能分析。获取沪深股票实时价格、涨跌、成交量,分析分时量能分布(早盘/尾盘放量)、主力动向(抢筹/出货信号)、涨停封单。支持持仓管理和盈亏分析。Use when: (1) 查询A股实时行情, (2) 分析主力资金动向, (3) 查看分时成交量分布, (4) 管理股票持仓, (5) 分析持仓盈亏。

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

sundial-org/awesome-openclaw-skills6712026年3月7日 更新

Scan HTML and JSX for accessibility issues with AI-powered fix suggestions

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

sundial-org/awesome-openclaw-skills6712026年3月7日 更新

When the user wants to plan, design, or implement an A/B test or experiment. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," or "hypothesis." For tracking implementation, see analytics-tracking.

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

sundial-org/awesome-openclaw-skills6712026年3月7日 更新

Multi-channel ABM automation that turns LinkedIn URLs into coordinated outbound campaigns. Scrapes profiles, enriches with Apollo (email + phone), gets mailing addresses via Skip Trace, then orchestrates email sequences, LinkedIn touches, and handwritten letters via Scribeless. The secret weapon for standing out in crowded inboxes.

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

sundial-org/awesome-openclaw-skills6712026年3月7日 更新

accli

無料

This skill should be used when interacting with Apple Calendar on macOS. Use it for listing calendars, viewing events, creating/updating/deleting calendar events, and checking availability/free-busy times. Triggers on requests like "check my calendar", "schedule a meeting", "what's on my schedule", "am I free tomorrow", or any calendar-related operations.

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

sundial-org/awesome-openclaw-skills6712026年3月7日 更新

sundial-org のスキルをすべて見る

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