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

example-tailwind-animation

Learn how to use Tailwind CSS with Helios. Use for styling compositions and animating with utility classes.

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

BintzGavin/heliosスター 123(GitHub 123 + cccskills 0)

実行スコア 未検証

インストール方法を見る

含まれるファイル（1）

  • SKILL.md1.5 KB

SKILL.md（原文）

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

Tailwind CSS Animation

Use Tailwind CSS to style and animate Helios compositions. Combine standard Tailwind utility classes with Helios's autoSyncAnimations feature.

Quick Start

  1. Configure Helios:

    const helios = new Helios({
  // ...
  autoSyncAnimations: true, // Enable CSS synchronization
  animationScope: document.getElementById('app')
});

  2. Use Tailwind Classes:

    <div class="w-full h-full bg-slate-900 flex items-center justify-center">
  <div class="animate-bounce text-6xl text-white font-bold">
    Hello Helios
  </div>
</div>

  3. Custom Keyframes (tailwind.config.js):

    module.exports = {
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 3s linear infinite',
      }
    }
  }
}

Key Patterns

Scoped Styles

When working in a monorepo or example folder, ensure your tailwind.config.js content array correctly targets your files to avoid global style leakage or missing styles.

Auto-Sync

With autoSyncAnimations: true, standard CSS animations (like animate-bounce, animate-spin) are automatically hijacked by Helios. helios.seek() will scrub the CSS animation to the correct point in time.

Source

  • Example: examples/tailwind-animation/

レビュー

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

コメント

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

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

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

0 / 1000 文字

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

同じリポジトリのスキル

animated-video-philosophy

無料

Story-first motion design philosophy for animated video: motion must earn its place; arc (establish, complicate, resolve); show vs tell; shots as units of thought; quiet vs loud motion; Disney principles with restraint; timing heuristics; composition; grammar by medium (product demos, logos, data viz, explainers); technical commitments (deterministic time, scrubbability, refs); cutting discipline; explicit anti-patterns. Use when planning, storyboarding, critiquing, or implementing programmatic or motion-driven video (Helios, Remotion, explainers, loops, UI capture, logo reveals), or when the user asks for motion direction, pacing, or visual-story structure.

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

BintzGavin/helios1232026年10月26日 更新

archive-broll

無料

Find, preview, cut and credit archival B-roll from the Internet Archive (archive.org) for a Helios video — public-domain, CC BY and CC BY-SA film plus Prelinger Archives. Use when a Helios composition needs real footage as a plate, cutaway, masked fill or texture. Not for generating footage or editing the user's own camera video.

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

BintzGavin/helios1232026年10月26日 更新

cinematic-product-promo-plan

無料

End-to-end production plan template for feeling-first cinematic product promos: brief interrogation, 45s beat structure (cold open through brand), hero-element metaphor, storyboard fidelity ladder, visual system (palette, type, camera, texture), motion mix and easing vocabulary, audio and captions, tooling (animatic through HTML or AE), deliverables matrix, accessibility, review milestones, and compromises to accept or refuse. Use when planning, pitching, storyboarding, or producing polished brand films for any SaaS or consumer product—not category-specific; pair with skills/design/animated-video-philosophy for broader motion principles.

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

BintzGavin/helios1232026年10月26日 更新

create-composition

無料

Workflow for creating a new Helios composition. Use when building a new animation project or converting an existing animation to run in Helios.

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

BintzGavin/helios1232026年10月26日 更新

example-canvas

無料

Patterns for using Helios with Vanilla Canvas API. Use when building high-performance 2D/3D animations without frameworks.

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

BintzGavin/helios1232026年10月26日 更新

example-chartjs

無料

Chart.js integration patterns for Helios. Use when creating animated data visualizations with Chart.js.

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

BintzGavin/helios1232026年10月26日 更新

BintzGavin のスキルをすべて見る

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