본문으로 건너뛰기
cccskills
무료GitHub에 공개

example-vanilla

Patterns for using Helios with Vanilla JavaScript/TypeScript. Use when building compositions without a framework, or for simple DOM/Canvas manipulations.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

BintzGavin/helios스타 123(GitHub 123 + cccskills 0)

실행 점수 미검증

설치 방법 보기

포함된 파일(1)

  • SKILL.md2.1 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Vanilla JS Composition Patterns

Integrate Helios into standard HTML/JS applications using direct DOM manipulation and subscriptions.

Quick Start

1. Setup

Initialize Helios and bind to the document timeline.

import { Helios } from '@helios-project/core';

// 1. Initialize Helios
const helios = new Helios({
  duration: 10,
  fps: 30,
  width: 1920,
  height: 1080,
  autoSyncAnimations: true // Sync WAAPI/CSS animations
});

// 2. Expose for Player/Studio
(window as any).helios = helios;

// 3. Bind to external timeline (important for Renderer/Studio)
helios.bindToDocumentTimeline();

2. Subscribe to Updates

Use subscribe to update the DOM or Canvas on every frame.

const box = document.getElementById('box');

helios.subscribe((state) => {
  if (!box) return;

  const { currentFrame, fps } = state;
  const time = currentFrame / fps;

  // Animate based on time
  const x = time * 100;
  box.style.transform = `translateX(${x}px)`;

  // Update text
  box.textContent = `Frame: ${currentFrame}`;
});

3. Captions Example

Driven by SRT content.

const captionBox = document.getElementById('captions');

helios.subscribe((state) => {
  if (!captionBox) return;

  const activeCues = state.activeCaptions;

  if (activeCues.length > 0) {
    captionBox.innerText = activeCues.map(c => c.text).join('\n');
    captionBox.style.opacity = '1';
  } else {
    captionBox.innerText = '';
    captionBox.style.opacity = '0';
  }
});

Key Concepts

  • Direct DOM Manipulation: Use style.transform, textContent, etc., inside the subscribe callback.
  • bindToDocumentTimeline: Crucial for allowing the HeliosPlayer or Renderer to drive the animation.
  • Performance: Avoid expensive layout thrashing (reading offsets then writing styles) inside the loop.

Source Files

  • Example: examples/vanilla-captions-animation/
  • Example: examples/simple-canvas-animation/

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 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의 스킬 모두 보기

이 스킬의 문제 신고