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

example-signals-animation

Learn how to use Helios Signals for high-performance, fine-grained reactivity. Use for complex dependency graphs or when optimizing performance.

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

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

실행 점수 미검증

설치 방법 보기

포함된 파일(1)

  • SKILL.md1.6 KB

SKILL.md(원문)

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

Signals Animation

Helios exposes a Signal-based reactivity system (similar to SolidJS or Preact Signals) for managing state efficiently.

Quick Start

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

const helios = new Helios({ duration: 10, fps: 60 });

// Access signals directly
const frame = helios.currentFrame; // ReadonlySignal<number>

// Create computed values
const rotation = computed(() => {
  return (frame.value / 60) * 360; // Rotate 360 deg per second
});

// React to changes
effect(() => {
  const div = document.getElementById('box');
  div.style.transform = `rotate(${rotation.value}deg)`;
});

Key Patterns

Derived State

Use computed() to create state that depends on other signals. It only re-evaluates when dependencies change.

const progress = computed(() => helios.currentFrame.value / (helios.duration * helios.fps));
const width = computed(() => progress.value * 100 + '%');

Side Effects

Use effect() to perform DOM updates or rendering logic. Effects run immediately and re-run whenever any signal accessed inside them changes.

Performance

Signals are more efficient than helios.subscribe() for complex graphs because they update fine-grained dependencies rather than the entire state tree.

Source

  • Example: examples/signals-animation/
  • API: packages/core/src/signals.ts

리뷰

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

댓글

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

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

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. 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의 스킬 모두 보기

이 스킬의 문제 신고