ai-composer-utils

1import type { CSSProperties } from "react";
2import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
3 
4/** Frame the prompt starts typing in the chat-style composers. */
5export const AI_TYPING_START = 42;
6/** Frame the prompt starts typing in the terminal-style composers. */
7export const AI_TYPING_START_TUI = 48;
8/** Characters per second for the chat-style composers. */
9export const AI_TYPING_CPS = 22;
10 
11export function stageScale(
12  width: number,
13  height: number,
14  refW = 1280,
15  refH = 720,
16): number {
17  return Math.min(width / refW, height / refH);
18}
19 
20export interface TypewriterOptions {
21  cps?: number;
22  speed?: number;
23  startFrame?: number;
24}
25 
26export interface TypewriterState {
27  text: string;
28  count: number;
29  done: boolean;
30  typing: boolean;
31}
32 
33/**
34 * Character-by-character reveal. `typing` is false both before the first
35 * character and after the last one, so a caret bound to `!typing` blinks while
36 * idle and holds solid while text is being revealed.
37 */
38export function useTypewriter(
39  full: string,
40  options: TypewriterOptions = {},
41): TypewriterState {
42  const {
43    cps = AI_TYPING_CPS,
44    speed = 1,
45    startFrame = AI_TYPING_START,
46  } = options;
47  const frame = useCurrentFrame();
48  const { fps } = useVideoConfig();
49  const local = frame * speed - startFrame;
50  const over = (full.length / cps) * fps;
51  const count =
52    local <= 0
53      ? 0
54      : over <= 0
55        ? full.length
56        : Math.max(0, Math.min(full.length, Math.floor((local / over) * full.length)));
57 
58  return {
59    text: full.slice(0, count),
60    count,
61    done: count >= full.length,
62    typing: count > 0 && count < full.length,
63  };
64}
65 
66/** Spring that drives the mic/waveform → send button morph. */
67export function morphProgressAt(
68  frame: number,
69  opts: { startFrame?: number; fps: number; speed?: number },
70): number {
71  const { startFrame = AI_TYPING_START, fps, speed = 1 } = opts;
72  const value = spring({
73    fps,
74    frame: frame * speed - startFrame,
75    config: { damping: 14, stiffness: 200, mass: 0.6 },
76  });
77  return Math.max(0, Math.min(value, 1));
78}
79 
80export function introBounceIn(
81  frame: number,
82  fps: number,
83): { translateY: number; scale: number } {
84  const s = spring({
85    fps,
86    frame,
87    config: { damping: 14, stiffness: 110, mass: 0.7 },
88  });
89  return {
90    translateY: interpolate(s, [0, 1], [28, 0]),
91    scale: interpolate(s, [0, 1], [0.97, 1]),
92  };
93}
94 
95export function fadeUpAt(
96  frame: number,
97// … truncated