Libs — the vocabulary under the templates

import { interpolate, spring, stagger, Easing, SPRING_CRISP } from "@/vanillasky/react-animations/animation-utils";

function Card({ progress, index, total }: { progress: number; index: number; total: number }) {
  // Each card gets its own 0→1 window carved out of the shared progress.
  const local = stagger(progress, index, total);

  // Springs land with a little overshoot; interpolate is linear-with-easing.
  const y = interpolate(spring(local, SPRING_CRISP), [0, 1], [64, 0]);
  const opacity = interpolate(local, [0, 0.35], [0, 1], {
    easing: Easing.out(Easing.cubic),
    extrapolateRight: "clamp",
  });

  return <div style={{ transform: `translateY(${y}px)`, opacity }} />;
}

import { fitTextSize, formatCompact } from "@/vanillasky/scene-templates/text-utils";

const CARD_W = 880;

function StatCard({ label, value }: { label: string; value: number }) {
  // Shrink only as far as it takes — never below half the base size.
  const size = fitTextSize(label, 72, CARD_W, { minScale: 0.5 });

  return (
    <div style={{ width: CARD_W }}>
      <div style={{ fontSize: 120 }}>{formatCompact(value)}</div>
      <div style={{ fontSize: size, whiteSpace: "nowrap" }}>{label}</div>
    </div>
  );
}

import { resolveTokens } from "@/vanillasky/scene-templates/tokens";

function Scene({ style, width, height }: SceneTemplateProps) {
  const { accent, content, muted, font, preset } = resolveTokens(style);

  // preset.type is NOT css — it's deltas the text layer applies on top of a
  // computed size/weight: { weightDelta, trackingDeltaEm, sizeScale, ... }.
  const base = { size: 72, weight: 600 };
  const fontSize = base.size * preset.type.sizeScale;
  const fontWeight = Math.min(900, Math.max(100, base.weight + preset.type.weightDelta));

  return (
    <div style={{ width, height, fontFamily: font, color: content }}>
      <h1 style={{ color: accent, fontSize, fontWeight, textTransform: preset.type.transform }}>
        Ship it
      </h1>
      <p style={{ color: muted }}>Every value here came from one resolver.</p>
    </div>
  );
}

import { typewriter, punch } from "@/vanillasky/vibecode/motion-stdlib";

function Component({ progress, variables }: { progress: number; variables: Record<string, unknown> }) {
  // Note the argument order: text first, then progress.
  const { text, cursorOn } = typewriter(String(variables.texts ?? ""), progress, {
    range: [0, 0.6],   // type over the first 60% of the scene
  });

  // A momentary scale bump centred at 80%, returning to 1 either side.
  const scale = punch(progress, { at: 0.8, width: 0.25, amount: 0.12 });

  return (
    <div style={{ transform: `scale(${scale})` }}>
      {text}
      {cursorOn && <span>|</span>}
    </div>
  );
}

import {
  renderArchetype, minDurationFor, canFit,
} from "@/vanillasky/scene-templates/text-archetypes";

const headline = "Ship your launch video in one prompt";

// Does this copy physically fit a 3s scene as a typewriter? (It does not —
// minDurationFor scales with character count.)
const needs = minDurationFor("typewriter", headline);   // > 3
const ok = canFit([{ archetype: "typewriter", text: headline }], 3);

function Headline({ progress, scale }: { progress: number; scale: number }) {
  const r = renderArchetype("wordStagger", progress, scale, headline, 4);
  if (r.kind !== "words") return null;
  // Each word carries its own BlockStyle under .style — the block-level
  // opacity/transform sit on the wrapper.
  return (
    <div style={{ opacity: r.blockOpacity, transform: r.blockTransform }}>
      {r.words.map((w, i) => (
        <span key={i} style={{ opacity: w.style.opacity, transform: w.style.transform }}>{w.text} </span>
      ))}
    </div>
  );
}

import { gradientBackground, autoTextColor } from "@/vanillasky/scene-templates/color-utils";
import { resolveTokens } from "@/vanillasky/scene-templates/tokens";

function Backdrop({ style, progress, width, height }: SceneTemplateProps) {
  const { accent, secondary, preset } = resolveTokens(style);

  const background = gradientBackground({
    colorA: accent,
    colorB: secondary,
    solidBg: style.brandKit?.bg,   // when set, collapses to a flat color
    progress,
    sceneDuration: 4,
    seed: 7,                        // same seed + progress = same pixels
    family: preset.background,      // mesh | wash | spotlight
  });

  return (
    <div style={{ width, height, background, color: autoTextColor(accent) }} />
  );
}

import { getBackgroundTransform } from "@/vanillasky/scene-templates/background-effect";

function MediaBackdrop({ url, effect, progress, sceneIndex, width, height }) {
  // sceneIndex rotates the pan direction so consecutive scenes don't all
  // drift the same way.
  const { transform, transformOrigin } = getBackgroundTransform(effect, progress, 0, sceneIndex);

  return (
    <div style={{ width, height, overflow: "hidden" }}>
      <img src={url} style={{ width: "100%", height: "100%", objectFit: "cover", transform, transformOrigin }} />
    </div>
  );
}