免费在 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（原文）

安装前可以查看交给 AI 代理的指令内容。

Tailwind CSS Animation

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

Quick Start

Configure Helios:

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

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>

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/

评价

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

同一仓库的技能

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.

中文简介正在准备中。当前显示原文说明。