Animation

import { Ease } from "textalive-app-api";

// Mimics Adobe Flash/Animate -100 to 100 easing.
// amount: -1 (ease in) to 1 (ease out)
const easeOut = Ease.get(0.8);

// Configurable power — getPowIn, getPowOut, getPowInOut
const quartic = Ease.getPowIn(4);

// Configurable back ease — getBackIn, getBackOut, getBackInOut
const springyBack = Ease.getBackOut(2.5);

// Configurable elastic — getElasticIn, getElasticOut, getElasticInOut
// amplitude: wave height, period: oscillation period
const elastic = Ease.getElasticOut(1, 0.3);

onTimeUpdate(position: number) {
  const char = player.video?.findChar(position);
  if (!char) return;

  // Raw linear progress [0, 1]
  const raw = char.progress(position);

  // Apply easing
  const t = Ease.cubicOut(raw);

  // Use t to drive your animation
  element.style.transform = `scale(${0.5 + t * 0.5})`;
  element.style.opacity = String(t);
}

import { Player, IPlayerApp, Ease } from "textalive-app-api";

const el = document.querySelector<HTMLDivElement>("#char")!;
let currentPosition = 0;

const player = new Player({
  app: { token: "your-app-token" },
  mediaElement: document.querySelector("#media")!,
});

player.addListener({
  onAppReady(app: IPlayerApp) {
    if (!app.managed) {
      player.createFromSongUrl("https://piapro.jp/t/hZ35/20240130103028");
    }
  },

  onTimeUpdate(position: number) {
    currentPosition = position;

    const char = player.video?.findChar(position);
    const beat = player.findBeat(position);

    if (!char || !beat) {
      el.style.transform = "scale(1)";
      return;
    }

    // Char fades in linearly
    const charT = Ease.cubicOut(char.progress(position));

    // Beat pulses with a bounce
    const beatT = Ease.bounceOut(beat.progress(position));
    const scale = 1 + beatT * 0.3;

    el.textContent = char.text;
    el.style.opacity = String(charT);
    el.style.transform = `scale(${scale})`;
  },
});

[ a  c  tx
  b  d  ty
  0  0  1  ]

import { Matrix2D } from "textalive-app-api";

// Identity matrix (no transformation)
const m = new Matrix2D();

// Initialize with specific values
m.setValues(a, b, c, d, tx, ty);

const m = new Matrix2D()
  .translate(100, 50)   // move 100px right, 50px down
  .rotate(45)           // rotate 45 degrees clockwise
  .scale(2, 2);         // scale up 2×

const props = m.decompose();
// props: { x, y, scaleX, scaleY, skewX, skewY, rotation }
console.log(props.rotation); // degrees

import { Color } from "textalive-app-api";

// From a CSS hex string
const red = new Color("#ff0000");

// From a 32-bit ARGB integer
const blue = new Color(0xff0000ff);

// From another IColor
const copy = new Color(existingColor);

color.eq(other);                 // true if all channels match
color.toString();                // hex RGB string
color.toString(true);           // hex RGBA string
color.from("#ff0000");          // set from string, number, or IColor
color.fromString("#aabbcc");    // set from hex string
color.fromNumber(0xffaabbcc, true); // set from 32-bit ARGB number

onTimeUpdate(position: number) {
  const char = player.video?.findChar(position);
  if (!char) return;

  const t = char.progress(position);
  const c = new Color();
  // Fade from white to red over the character's duration
  c.r = 255;
  c.g = Math.round(255 * (1 - t));
  c.b = Math.round(255 * (1 - t));
  c.a = 255;

  char.color = c;
}

import { Point } from "textalive-app-api";

const p = new Point(100, 200);
console.log(p.x, p.y); // 100 200

// Copy from another point
const q = p.clone();

// Update in place
p.setValues(50, 75);

// Copy values from another point into this one
p.copy(q);