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

example-pixi

PixiJS integration patterns for Helios. Use when creating high-performance WebGL 2D animations with PixiJS.

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

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

실행 점수 미검증

설치 방법 보기

포함된 파일(1)

  • SKILL.md1.8 KB

SKILL.md(원문)

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

PixiJS + Helios

Integrate Helios with PixiJS by driving the Pixi scene properties from the Helios subscription loop.

Quick Start

import { Helios } from '@helios-project/core';
import { Application, Graphics } from 'pixi.js';

// 1. Initialize Pixi
const app = new Application();
await app.init({ resizeTo: window });
document.body.appendChild(app.canvas);

// 2. Initialize Helios
const helios = new Helios({ fps: 30, duration: 5 });

// 3. Create Scene
const rect = new Graphics().rect(0, 0, 100, 100).fill(0xff0000);
rect.pivot.set(50, 50);
rect.position.set(app.screen.width / 2, app.screen.height / 2);
app.stage.addChild(rect);

// 4. Bind Timeline (Crucial for Renderer)
helios.bindToDocumentTimeline();

// 5. Drive Animation
helios.subscribe((state) => {
  const t = state.currentTime;

  // Update properties based on time
  rect.rotation = t * 1.5;
  rect.x = (app.screen.width / 2) + Math.sin(t) * 100;
});

Key Patterns

Bind to Document Timeline

PixiJS and other WebGL libraries often have their own internal tickers. To ensure frame-perfect rendering during export (via Renderer), you must bind Helios to the document.timeline.

helios.bindToDocumentTimeline();

This allows the Renderer (via CdpTimeDriver) to control the global clock, which PixiJS respects if properly synchronized.

Disable Internal Ticker (Optional but Recommended)

If you are strictly driving the scene via helios.subscribe(), you might not need Pixi's internal ticker for animation logic, though Pixi still needs to render. The standard pattern is to let Pixi render naturally but update state in the Helios subscriber.

Source Files

  • Example: examples/pixi-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의 스킬 모두 보기

이 스킬의 문제 신고