Skip to content
cccskills
FreePublished on GitHub

example-react

Patterns for using Helios with React. Use when building compositions in a React environment.

The English summary is being prepared. Showing the original description.

BintzGavin/helios123 stars(GitHub 123 + cccskills 0)

Run score Not tested

See how to install

Files included (1)

  • SKILL.md2.4 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

React Composition Patterns

Integrate Helios into React components using hooks for state management and Refs for canvas access.

Quick Start

1. Create useVideoFrame Hook

This hook subscribes to Helios and returns the current frame, triggering re-renders.

// hooks/useVideoFrame.js
import { useState, useEffect } from 'react';

export function useVideoFrame(helios) {
  const [frame, setFrame] = useState(helios.currentFrame.peek());

  useEffect(() => {
    // Subscribe to updates
    const unsubscribe = helios.subscribe((state) => {
      setFrame(state.currentFrame);
    });
    return unsubscribe;
  }, [helios]);

  return frame;
}

2. Create Composition Component

// App.jsx
import React, { useRef, useEffect } from 'react';
import { Helios } from '@helios-project/core';
import { useVideoFrame } from './hooks/useVideoFrame';

// Initialize Singleton (outside component to persist across re-renders)
const helios = new Helios({
  duration: 10,
  fps: 30
});
helios.bindToDocumentTimeline();

// Expose for Renderer/Player
if (typeof window !== 'undefined') window.helios = helios;

export default function App() {
  const canvasRef = useRef(null);
  const frame = useVideoFrame(helios);

  useEffect(() => {
    const ctx = canvasRef.current?.getContext('2d');
    if (!ctx) return;

    const { width, height } = canvasRef.current;

    // Clear
    ctx.clearRect(0, 0, width, height);

    // Draw based on frame
    const progress = frame / (helios.duration * helios.fps);
    ctx.fillStyle = '#61dafb';
    ctx.fillRect(progress * width, height / 2 - 50, 100, 100);

  }, [frame]); // Re-run draw when frame changes

  return <canvas ref={canvasRef} width={1920} height={1080} />;
}

Optimization

For complex scenes, avoid React state updates for every frame (which triggers full component re-render). Instead, use a useRef to hold the frame and an animation loop, or update the canvas imperatively inside subscribe.

Imperative Pattern (High Performance)

useEffect(() => {
  const ctx = canvasRef.current.getContext('2d');

  const unsubscribe = helios.subscribe((state) => {
    // Draw directly without triggering React render
    drawScene(ctx, state.currentFrame);
  });

  return unsubscribe;
}, []);

Source Files

  • Example: examples/react-canvas-animation/

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

animated-video-philosophy

Free

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.

The English summary is being prepared. Showing the original description.

BintzGavin/helios123Updated Oct 26, 2026

archive-broll

Free

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.

The English summary is being prepared. Showing the original description.

BintzGavin/helios123Updated Oct 26, 2026

cinematic-product-promo-plan

Free

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.

The English summary is being prepared. Showing the original description.

BintzGavin/helios123Updated Oct 26, 2026

create-composition

Free

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

The English summary is being prepared. Showing the original description.

BintzGavin/helios123Updated Oct 26, 2026

example-canvas

Free

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

The English summary is being prepared. Showing the original description.

BintzGavin/helios123Updated Oct 26, 2026

example-chartjs

Free

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

The English summary is being prepared. Showing the original description.

BintzGavin/helios123Updated Oct 26, 2026

See all skills by BintzGavin

Report a problem with this skill