HW

hw-ts-parametric-sequencer

A framework-agnostic TypeScript library for creating parametric animation sequences, with separate implementations for 2D and 3D scene animations.

Features

  • Parametric Animations: Define animations with relative timing dependencies
  • 2D & 3D Support: Separate implementations optimized for each dimension
  • Camera Control: Animate camera properties (2D: pan/zoom/rotation, 3D: rotation/zoom/target)
  • Relative Positioning: Use markers for relative positioning (2D: simple offsets, 3D: hierarchical transforms)
  • Smooth Interpolation: Linear interpolation for positions, SLERP for 3D rotations, shortest-arc for 2D angles
  • Time Reconciliation: Resolves complex relative timing dependencies
  • Framework Agnostic: Pure TypeScript with no framework dependencies
  • Tree-Shakeable: Import only what you need - 2D and 3D codebases are completely separate

Quick Start

import { reconcileScene, reconcile_animationState, NodeMain, Vector3, Euler, SceneObject } from 'hw-ts-parametric-sequencer/3d';

// Create scene object
const object1 = new SceneObject('object1', {});

// Define scene
const scene = [
  new NodeMain({
    name: 'move-object',
    chapter: 'intro',
    sceneObject: object1,
    time: { type: 'absolute', value: 0 },
    duration: 2,
    position: { type: 'absolute', value: new Vector3(1, 0, 0) }
  })
];

// Reconcile once
const reconciled = reconcileScene(scene);

// Your animation loop
let startTime = Date.now();
function animate() {
  requestAnimationFrame(animate);
  const currentTime = (Date.now() - startTime) / 1000;
  const state = reconcile_animationState(reconciled, currentTime);
  
  // Update your 3D scene
  state.models.forEach((modelState, modelID) => {
    updateModel(modelID, modelState);
  });
  updateCamera(state.camera);
}
animate();

Documentation