Claude Chat

1"use client";
2 
3import { loadFont as loadBodyFont } from "@remotion/google-fonts/Inter";
4import {
5  AbsoluteFill,
6  interpolate,
7  spring,
8  useCurrentFrame,
9  useVideoConfig,
10} from "remotion";
11import { Caret } from "@/components/remocn/caret";
12import { useTypewriter } from "@/lib/remocn-ui";
13 
14const { fontFamily: SANS_FAMILY } = loadBodyFont();
15 
16export interface ClaudeChatProps {
17  greeting?: string;
18  placeholder?: string;
19  prompt?: string;
20  modelName?: string;
21  modelTier?: string;
22  accentColor?: string;
23  speed?: number;
24}
25 
26interface Theme {
27  page: string;
28  cardBg: string;
29  cardBorder: string;
30  fg: string;
31  fgMuted: string;
32  placeholder: string;
33  iconBtnBorder: string;
34}
35 
36export const THEMES: Record<"light" | "dark", Theme> = {
37  light: {
38    page: "#F5F4EF",
39    cardBg: "#FFFFFF",
40    cardBorder: "#E8E5DD",
41    fg: "#1F1E1D",
42    fgMuted: "#73726C",
43    placeholder: "#A3A097",
44    iconBtnBorder: "#E0DDD4",
45  },
46  dark: {
47    page: "#262624",
48    cardBg: "#1F1E1D",
49    cardBorder: "#3A3936",
50    fg: "#F0EEE6",
51    fgMuted: "#9B9892",
52    placeholder: "#73726C",
53    iconBtnBorder: "#3A3936",
54  },
55};
56 
57export const TYPING_START_FRAME = 42;
58 
59export const TYPING_CPS = 22;
60 
61export function morphProgressAt(
62  frame: number,
63  opts: { startFrame?: number; fps: number; speed: number },
64): number {
65  const startFrame = opts.startFrame ?? TYPING_START_FRAME;
66  const value = spring({
67    fps: opts.fps,
68    frame: frame * opts.speed - startFrame,
69    config: { damping: 14, stiffness: 200, mass: 0.6 },
70  });
71  return Math.max(0, Math.min(value, 1));
72}
73 
74export function introBounceIn(
75  frame: number,
76  fps: number,
77): { translateY: number; scale: number } {
78  const s = spring({
79    fps,
80    frame,
81    config: { damping: 14, stiffness: 110, mass: 0.7 },
82  });
83  const translateY = interpolate(s, [0, 1], [28, 0]);
84  const scale = interpolate(s, [0, 1], [0.97, 1]);
85  return { translateY, scale };
86}
87 
88export function fadeUpAt(
89  frame: number,
90  range: [number, number],
91): { opacity: number; translateY: number } {
92  const opts = {
93    extrapolateLeft: "clamp" as const,
94    extrapolateRight: "clamp" as const,
95  };
96  return {
97    opacity: interpolate(frame, range, [0, 1], opts),
98    translateY: interpolate(frame, range, [12, 0], opts),
99  };
100}
101 
102function ChevronDown({ size, color }: { size: number; color: string }) {
103  return (
104    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
105      <title>Expand</title>
106      <path
107        d="M6 9l6 6 6-6"
108// … truncated