diff --git a/voicevox-remotion-template/src/lib/VQRemotionLib/avatarAnimations.ts b/voicevox-remotion-template/src/lib/VQRemotionLib/avatarAnimations.ts
new file mode 100644
index 0000000..28cd78c
--- /dev/null
+++ b/voicevox-remotion-template/src/lib/VQRemotionLib/avatarAnimations.ts
@@ -0,0 +1,34 @@
+import type {
+  VQAvatarAnimation,
+  VQAvatarAnimationContext,
+  VQIdleAvatarAnimationType,
+  VQSpeakingAvatarAnimationType,
+} from "./types";
+
+const gentleBobAmplitude = ({focused}: VQAvatarAnimationContext) =>
+  focused ? 10 : 3.5;
+
+export const vqIdleAvatarAnimations: Record<
+  VQIdleAvatarAnimationType,
+  VQAvatarAnimation
+> = {
+  none: () => 0,
+  gentleBob: (context) =>
+    Math.sin((context.frame / context.fps) * Math.PI * 2) *
+    gentleBobAmplitude(context),
+};
+
+export const vqSpeakingAvatarAnimations: Record<
+  VQSpeakingAvatarAnimationType,
+  VQAvatarAnimation
+> = {
+  none: () => 0,
+  rhubarbLipSync: () => 0,
+  gentleBob: vqIdleAvatarAnimations.gentleBob,
+  quickHop: ({frame, fps}) => {
+    const cycleFrames = Math.max(1, Math.round(fps * 0.25));
+    const progress = (frame % cycleFrames) / cycleFrames;
+
+    return -Math.sin(progress * Math.PI) * 7;
+  },
+};
diff --git a/voicevox-remotion-template/src/lib/VQRemotionLib/components/VQCaptionOverlay.tsx b/voicevox-remotion-template/src/lib/VQRemotionLib/components/VQCaptionOverlay.tsx
new file mode 100644
index 0000000..ba0bb33
--- /dev/null
+++ b/voicevox-remotion-template/src/lib/VQRemotionLib/components/VQCaptionOverlay.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import {spring, useCurrentFrame, useVideoConfig} from "remotion";
+import {
+  VQSpeechSubtitle,
+  type VQSpeechSubtitleStyleOptions,
+} from "./VQSpeechSubtitle";
+
+export type VQCaptionOverlayProps = Readonly<{
+  text?: string;
+  speakerName?: string;
+  accentColor?: string;
+  subtitleOptions?: VQSpeechSubtitleStyleOptions;
+  containerStyle?: React.CSSProperties;
+}>;
+
+const defaultOverlayStyle: React.CSSProperties = {
+  position: "absolute",
+  bottom: 40,
+  left: 0,
+  right: 0,
+  display: "flex",
+  justifyContent: "center",
+};
+
+export const VQCaptionOverlay: React.FC<VQCaptionOverlayProps> = ({
+  text,
+  speakerName,
+  accentColor,
+  subtitleOptions,
+  containerStyle,
+}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+  const subtitleProgress = spring({
+    frame,
+    fps,
+    config: {damping: 20, mass: 0.7},
+  });
+
+  if (!text) {
+    return null;
+  }
+
+  return (
+    <div style={{...defaultOverlayStyle, ...containerStyle}}>
+      <VQSpeechSubtitle
+        text={text}
+        progress={subtitleProgress}
+        speakerName={speakerName}
+        accentColor={accentColor}
+        {...subtitleOptions}
+      />
+    </div>
+  );
+};
diff --git a/voicevox-remotion-template/src/lib/VQRemotionLib/components/VQCharacterAvatar.tsx b/voicevox-remotion-template/src/lib/VQRemotionLib/components/VQCharacterAvatar.tsx
new file mode 100644
index 0000000..9d25e82
--- /dev/null
+++ b/voicevox-remotion-template/src/lib/VQRemotionLib/components/VQCharacterAvatar.tsx
@@ -0,0 +1,154 @@
+import React from "react";
+import {vqIdleAvatarAnimations, vqSpeakingAvatarAnimations} from "../avatarAnimations";
+import type {
+  VQCharacterDefinition,
+  VQMouthResolver,
+  VQMouthShape,
+} from "../types";
+import {VQLipSyncedStandeeImage} from "./VQLipSyncedStandeeImage";
+
+export type VQCharacterAvatarProps<CharacterId extends string = string> =
+  Readonly<{
+    characterId: CharacterId;
+    character: VQCharacterDefinition;
+    focused: boolean;
+    hasMultipleCharacters: boolean;
+    frame: number;
+    fps: number;
+    isSpeaking: boolean;
+    speakingSpeechId?: string;
+    speakingLocalFrame: number;
+    resolveMouth?: VQMouthResolver<CharacterId>;
+    fontFamily?: string;
+    imageFilter?: string;
+  }>;
+
+const mouthForAvatar = <CharacterId extends string,>({
+  characterId,
+  character,
+  isSpeaking,
+  speakingSpeechId,
+  speakingLocalFrame,
+  fps,
+  resolveMouth,
+}: Readonly<{
+  characterId: CharacterId;
+  character: VQCharacterDefinition;
+  isSpeaking: boolean;
+  speakingSpeechId?: string;
+  speakingLocalFrame: number;
+  fps: number;
+  resolveMouth?: VQMouthResolver<CharacterId>;
+}>): VQMouthShape => {
+  const speakingAnimationType =
+    character.avatar.speakingAnimationType ?? "gentleBob";
+
+  if (!isSpeaking || speakingAnimationType !== "rhubarbLipSync") {
+    return "rest";
+  }
+
+  return (
+    resolveMouth?.({
+      characterId,
+      character,
+      speechId: speakingSpeechId,
+      speakingLocalFrame,
+      fps,
+      speakingAnimationType,
+    }) ?? "rest"
+  );
+};
+
+export const VQCharacterAvatar = <CharacterId extends string,>({
+  characterId,
+  character,
+  focused,
+  hasMultipleCharacters,
+  frame,
+  fps,
+  isSpeaking,
+  speakingSpeechId,
+  speakingLocalFrame,
+  resolveMouth,
+  fontFamily = "system-ui, sans-serif",
+  imageFilter = "drop-shadow(0 18px 40px rgba(31, 42, 68, 0.22))",
+}: VQCharacterAvatarProps<CharacterId>) => {
+  const {avatar} = character;
+  const scale = hasMultipleCharacters ? 0.82 : focused ? 0.94 : 0.9;
+  const opacity = focused || !hasMultipleCharacters ? 1 : 0.72;
+  const idleAnimationType = avatar.idleAnimationType ?? "gentleBob";
+  const speakingAnimationType = avatar.speakingAnimationType ?? "gentleBob";
+  const translateY = isSpeaking
+    ? vqSpeakingAvatarAnimations[speakingAnimationType]({
+        frame,
+        fps,
+        focused,
+        hasMultipleCharacters,
+      })
+    : vqIdleAvatarAnimations[idleAnimationType]({
+        frame,
+        fps,
+        focused,
+        hasMultipleCharacters,
+      });
+  const imageTranslateY = avatar.imageLayout?.translateY ?? 0;
+  const imageScaleX = avatar.imageLayout?.flipX ? -1 : 1;
+  const imageTransform = `translateY(${imageTranslateY}px) scaleX(${imageScaleX})`;
+  const nameplatePosition = avatar.nameplatePosition ?? "bottom";
+  const showNameplate = nameplatePosition !== "none";
+  const mouth = mouthForAvatar({
+    characterId,
+    character,
+    isSpeaking,
+    speakingSpeechId,
+    speakingLocalFrame,
+    fps,
+    resolveMouth,
+  });
+
+  const nameplate = (
+    <div
+      style={{
+        position: "relative",
+        zIndex: 2,
+        fontFamily,
+        fontSize: 24,
+        fontWeight: 700,
+        color: "#ffffff",
+        backgroundColor: avatar.accentColor,
+        padding: "6px 18px",
+        borderRadius: 999,
+        boxShadow: "0 8px 20px rgba(31, 42, 68, 0.14)",
+      }}
+    >
+      {character.displayName}
+    </div>
+  );
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 16,
+        opacity,
+        position: "relative",
+        transform: `translateY(${translateY}px) scale(${scale})`,
+      }}
+    >
+      {showNameplate && nameplatePosition === "top" ? nameplate : null}
+      <VQLipSyncedStandeeImage
+        imagePath={avatar.imagePath}
+        mouthImageDir={avatar.mouthImageDir}
+        mouth={mouth}
+        width={avatar.imageLayout?.width ?? 320}
+        height={avatar.imageLayout?.height}
+        maxHeight={avatar.imageLayout?.maxHeight ?? 360}
+        filter={imageFilter}
+        transform={imageTransform}
+      />
+      {showNameplate && nameplatePosition === "bottom" ? nameplate : null}
+    </div>
+  );
+};
diff --git a/voicevox-remotion-template/src/lib/VQRemotionLib/components/VQCharacterStage.tsx b/voicevox-remotion-template/src/lib/VQRemotionLib/components/VQCharacterStage.tsx
new file mode 100644
index 0000000..2d15440
--- /dev/null
+++ b/voicevox-remotion-template/src/lib/VQRemotionLib/components/VQCharacterStage.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import type {VQCharacterDefinition, VQMouthResolver} from "../types";
+import {VQCharacterAvatar} from "./VQCharacterAvatar";
+
+export type VQCharacterStageProps<CharacterId extends string = string> =
+  Readonly<{
+    characters: Readonly<Record<CharacterId, VQCharacterDefinition>>;
+    visibleCharacters: readonly CharacterId[];
+    focusedCharacter?: CharacterId;
+    speakingCharacter?: CharacterId;
+    speakingSpeechId?: string;
+    speakingLocalFrame: number;
+    frame: number;
+    fps: number;
+    resolveMouth?: VQMouthResolver<CharacterId>;
+    fontFamily?: string;
+    stageStyle?: React.CSSProperties;
+    avatarImageFilter?: string;
+  }>;
+
+export const VQCharacterStage = <CharacterId extends string,>({
+  characters,
+  visibleCharacters,
+  focusedCharacter,
+  speakingCharacter,
+  speakingSpeechId,
+  speakingLocalFrame,
+  frame,
+  fps,
+  resolveMouth,
+  fontFamily,
+  stageStyle,
+  avatarImageFilter,
+}: VQCharacterStageProps<CharacterId>) => {
+  const hasMultipleCharacters = visibleCharacters.length > 1;
+
+  return (
+    <div
+      style={{
+        flex: 1,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: hasMultipleCharacters ? 130 : 0,
+        width: "100%",
+        paddingBottom: 0,
+        ...stageStyle,
+      }}
+    >
+      {visibleCharacters.map((characterId) => (
+        <VQCharacterAvatar
+          key={characterId}
+          characterId={characterId}
+          character={characters[characterId]}
+          focused={focusedCharacter === characterId}
+          hasMultipleCharacters={hasMultipleCharacters}
+          frame={frame}
+          fps={fps}
+          isSpeaking={speakingCharacter === characterId}
+          speakingSpeechId={speakingSpeechId}
+          speakingLocalFrame={speakingLocalFrame}
+          resolveMouth={resolveMouth}
+          fontFamily={fontFamily}
+          imageFilter={avatarImageFilter}
+        />
+      ))}
+    </div>
+  );
+};
diff --git a/voicevox-remotion-template/src/lib/VQRemotionLib/components/VQLipSyncedStandeeImage.tsx b/voicevox-remotion-template/src/lib/VQRemotionLib/components/VQLipSyncedStandeeImage.tsx
new file mode 100644
index 0000000..32d421b
--- /dev/null
+++ b/voicevox-remotion-template/src/lib/VQRemotionLib/components/VQLipSyncedStandeeImage.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+import {Img, staticFile} from "remotion";
+import type {VQMouthShape} from "../types";
+
+export type VQLipSyncedStandeeImageProps = Readonly<{
+  imagePath: string;
+  mouthImageDir: string;
+  mouth: VQMouthShape;
+  width: number | string;
+  maxHeight: number | string;
+  height?: number | string;
+  transform?: string;
+  filter?: string;
+}>;
+
+export const VQLipSyncedStandeeImage: React.FC<
+  VQLipSyncedStandeeImageProps
+> = ({
+  imagePath,
+  mouthImageDir,
+  mouth,
+  width,
+  maxHeight,
+  height,
+  transform,
+  filter,
+}) => {
+  return (
+    <div
+      style={{
+        position: "relative",
+        zIndex: 1,
+        width,
+        height,
+        maxHeight,
+        lineHeight: 0,
+        transform,
+      }}
+    >
+      <Img
+        src={staticFile(imagePath)}
+        style={{
+          width: "100%",
+          height: height ? "100%" : undefined,
+          maxHeight,
+          objectFit: "contain",
+          filter,
+        }}
+      />
+      <Img
+        src={staticFile(`${mouthImageDir}/${mouth}.png`)}
+        style={{
+          position: "absolute",
+          inset: 0,
+          width: "100%",
+          height: "100%",
+          objectFit: "contain",
+          pointerEvents: "none",
+        }}
+      />
+    </div>
+  );
+};
diff --git a/voicevox-remotion-template/src/lib/VQRemotionLib/components/VQSpeechOverlay.tsx b/voicevox-remotion-template/src/lib/VQRemotionLib/components/VQSpeechOverlay.tsx
new file mode 100644
index 0000000..9e4c4f4
--- /dev/null
+++ b/voicevox-remotion-template/src/lib/VQRemotionLib/components/VQSpeechOverlay.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+import {Audio} from "@remotion/media";
+import {spring, staticFile, useCurrentFrame, useVideoConfig} from "remotion";
+import type {VQSpeechEventLike} from "../types";
+import {
+  VQSpeechSubtitle,
+  type VQSpeechSubtitleStyleOptions,
+} from "./VQSpeechSubtitle";
+
+export type VQSpeechOverlayProps<Speech extends VQSpeechEventLike> =
+  Readonly<{
+    speech: Speech;
+    speakerName?: string;
+    accentColor?: string;
+    hasAudio?: (speech: Speech) => boolean;
+    getAudioPath?: (speech: Speech) => string;
+    subtitleOptions?: VQSpeechSubtitleStyleOptions;
+    containerStyle?: React.CSSProperties;
+  }>;
+
+const defaultOverlayStyle: React.CSSProperties = {
+  position: "absolute",
+  bottom: 40,
+  left: 0,
+  right: 0,
+  display: "flex",
+  justifyContent: "center",
+};
+
+export const VQSpeechOverlay = <Speech extends VQSpeechEventLike,>({
+  speech,
+  speakerName,
+  accentColor,
+  hasAudio,
+  getAudioPath,
+  subtitleOptions,
+  containerStyle,
+}: VQSpeechOverlayProps<Speech>) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+  const subtitleProgress = spring({
+    frame,
+    fps,
+    config: {damping: 20, mass: 0.7},
+  });
+  const text = speech.subtitle ?? speech.text;
+  const shouldPlayAudio = hasAudio && getAudioPath && hasAudio(speech);
+
+  return (
+    <>
+      {text ? (
+        <div style={{...defaultOverlayStyle, ...containerStyle}}>
+          <VQSpeechSubtitle
+            text={text}
+            progress={subtitleProgress}
+            speakerName={speakerName}
+            accentColor={accentColor}
+            {...subtitleOptions}
+          />
+        </div>
+      ) : null}
+      {shouldPlayAudio ? <Audio src={staticFile(getAudioPath(speech))} /> : null}
+    </>
+  );
+};
diff --git a/voicevox-remotion-template/src/lib/VQRemotionLib/components/VQSpeechSubtitle.tsx b/voicevox-remotion-template/src/lib/VQRemotionLib/components/VQSpeechSubtitle.tsx
new file mode 100644
index 0000000..b90a239
--- /dev/null
+++ b/voicevox-remotion-template/src/lib/VQRemotionLib/components/VQSpeechSubtitle.tsx
@@ -0,0 +1,95 @@
+import React from "react";
+import {interpolate} from "remotion";
+
+const clampInterpolation = {
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp",
+} as const;
+
+export type VQSpeechSubtitleStyleOptions = Readonly<{
+  fontFamily?: string;
+  fontSize?: number;
+  fontWeight?: React.CSSProperties["fontWeight"];
+  color?: string;
+  lineHeight?: number;
+  padding?: string;
+  backgroundColor?: string;
+  borderRadius?: number;
+  boxShadow?: string;
+  maxWidth?: number;
+  speakerLabelFontSize?: number;
+  containerStyle?: React.CSSProperties;
+  speakerLabelStyle?: React.CSSProperties;
+  textStyle?: React.CSSProperties;
+}>;
+
+export type VQSpeechSubtitleProps = VQSpeechSubtitleStyleOptions &
+  Readonly<{
+    text: string;
+    progress: number;
+    speakerName?: string;
+    accentColor?: string;
+  }>;
+
+export const VQSpeechSubtitle: React.FC<VQSpeechSubtitleProps> = ({
+  text,
+  progress,
+  speakerName,
+  accentColor = "#1f2a44",
+  fontFamily = "system-ui, sans-serif",
+  fontSize = 36,
+  fontWeight = 700,
+  color = "#1a1a1a",
+  lineHeight = 1.4,
+  padding = "18px 28px",
+  backgroundColor = "rgba(255, 255, 255, 0.88)",
+  borderRadius = 18,
+  boxShadow = "0 10px 30px rgba(31, 42, 68, 0.15)",
+  maxWidth = 980,
+  speakerLabelFontSize = 20,
+  containerStyle,
+  speakerLabelStyle,
+  textStyle,
+}) => {
+  const opacity = interpolate(progress, [0, 1], [0, 1], clampInterpolation);
+  const translateY = interpolate(progress, [0, 1], [16, 0], clampInterpolation);
+
+  return (
+    <div
+      style={{
+        fontFamily,
+        fontSize,
+        fontWeight,
+        color,
+        lineHeight,
+        padding,
+        backgroundColor,
+        borderRadius,
+        border: `2px solid ${accentColor}33`,
+        boxShadow,
+        maxWidth,
+        opacity,
+        transform: `translateY(${translateY}px)`,
+        ...containerStyle,
+      }}
+    >
+      {speakerName ? (
+        <div
+          style={{
+            display: "inline-block",
+            fontSize: speakerLabelFontSize,
+            color: "#ffffff",
+            backgroundColor: accentColor,
+            borderRadius: 999,
+            padding: "4px 14px",
+            marginBottom: 8,
+            ...speakerLabelStyle,
+          }}
+        >
+          {speakerName}
+        </div>
+      ) : null}
+      <div style={textStyle}>{text}</div>
+    </div>
+  );
+};
diff --git a/voicevox-remotion-template/src/lib/VQRemotionLib/components/VQWarmGradientBackground.tsx b/voicevox-remotion-template/src/lib/VQRemotionLib/components/VQWarmGradientBackground.tsx
new file mode 100644
index 0000000..5187381
--- /dev/null
+++ b/voicevox-remotion-template/src/lib/VQRemotionLib/components/VQWarmGradientBackground.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import {AbsoluteFill} from "remotion";
+
+export const VQWarmGradientBackground: React.FC = () => (
+  <>
+    <AbsoluteFill
+      style={{
+        background:
+          "radial-gradient(circle at top, #ffe8c7 0%, #ffd3b4 45%, #ffb6b6 100%)",
+      }}
+    />
+    <AbsoluteFill
+      style={{
+        backgroundImage:
+          "radial-gradient(circle at 20% 20%, rgba(255,255,255,0.6) 0, rgba(255,255,255,0) 40%), radial-gradient(circle at 80% 30%, rgba(255,255,255,0.5) 0, rgba(255,255,255,0) 45%), radial-gradient(circle at 30% 80%, rgba(255,255,255,0.4) 0, rgba(255,255,255,0) 50%)",
+        opacity: 0.8,
+      }}
+    />
+  </>
+);
diff --git a/voicevox-remotion-template/src/lib/VQRemotionLib/index.ts b/voicevox-remotion-template/src/lib/VQRemotionLib/index.ts
new file mode 100644
index 0000000..1bff466
--- /dev/null
+++ b/voicevox-remotion-template/src/lib/VQRemotionLib/index.ts
@@ -0,0 +1,9 @@
+export * from "./types";
+export * from "./avatarAnimations";
+export * from "./components/VQCaptionOverlay";
+export * from "./components/VQCharacterAvatar";
+export * from "./components/VQCharacterStage";
+export * from "./components/VQLipSyncedStandeeImage";
+export * from "./components/VQSpeechOverlay";
+export * from "./components/VQSpeechSubtitle";
+export * from "./components/VQWarmGradientBackground";
diff --git a/voicevox-remotion-template/src/lib/VQRemotionLib/types.ts b/voicevox-remotion-template/src/lib/VQRemotionLib/types.ts
new file mode 100644
index 0000000..11dcaa0
--- /dev/null
+++ b/voicevox-remotion-template/src/lib/VQRemotionLib/types.ts
@@ -0,0 +1,70 @@
+export type VQMouthShape =
+  | "a"
+  | "i"
+  | "u"
+  | "e"
+  | "o"
+  | "closed"
+  | "rest";
+
+export type VQAvatarAnimationContext = Readonly<{
+  frame: number;
+  fps: number;
+  focused: boolean;
+  hasMultipleCharacters: boolean;
+}>;
+
+export type VQAvatarAnimation = (context: VQAvatarAnimationContext) => number;
+
+export type VQIdleAvatarAnimationType = "none" | "gentleBob";
+
+export type VQSpeakingAvatarAnimationType =
+  | "none"
+  | "rhubarbLipSync"
+  | "gentleBob"
+  | "quickHop";
+
+export type VQAvatarNameplatePosition = "top" | "bottom" | "none";
+
+export type VQAvatarImageLayout = Readonly<{
+  width?: number | string;
+  maxHeight?: number | string;
+  height?: number | string;
+  translateY?: number;
+  flipX?: boolean;
+}>;
+
+export type VQAvatarDefinition = Readonly<{
+  kind?: string;
+  imagePath: string;
+  mouthImageDir: string;
+  imageLayout?: VQAvatarImageLayout;
+  accentColor: string;
+  nameplatePosition?: VQAvatarNameplatePosition;
+  idleAnimationType?: VQIdleAvatarAnimationType;
+  speakingAnimationType?: VQSpeakingAvatarAnimationType;
+}>;
+
+export type VQCharacterDefinition = Readonly<{
+  displayName: string;
+  avatar: VQAvatarDefinition;
+}>;
+
+export type VQSpeechEventLike = Readonly<{
+  text: string;
+  subtitle?: string;
+}>;
+
+export type VQMouthResolverContext<CharacterId extends string = string> =
+  Readonly<{
+    characterId: CharacterId;
+    character: VQCharacterDefinition;
+    speechId?: string;
+    speakingLocalFrame: number;
+    fps: number;
+    speakingAnimationType: VQSpeakingAvatarAnimationType;
+  }>;
+
+export type VQMouthResolver<CharacterId extends string = string> = (
+  context: VQMouthResolverContext<CharacterId>
+) => VQMouthShape;
diff --git a/voicevox-remotion-template/src/pizza-kiln-composition.tsx b/voicevox-remotion-template/src/pizza-kiln-composition.tsx
index 4389e1c..19d7ab4 100644
--- a/voicevox-remotion-template/src/pizza-kiln-composition.tsx
+++ b/voicevox-remotion-template/src/pizza-kiln-composition.tsx
@@ -1,10 +1,8 @@
 import React from "react";
-import {Audio, Video} from "@remotion/media";
+import {Video} from "@remotion/media";
 import {
   AbsoluteFill,
-  interpolate,
   Sequence,
-  spring,
   staticFile,
   useCurrentFrame,
   useVideoConfig,
@@ -19,16 +17,16 @@
 import {
   characters,
   timeline,
-  type CharacterDefinition,
   type SpeechEvent,
 } from "./data/pizza-kiln/script";
 import {roundedFontFamily} from "./fonts";
-import {speakingAvatarAnimations} from "./avatar-animations";
-import {getMouthForSpeechFrame} from "./lipsync/manifest";
 import {
-  defaultMouthImageDir,
-  LipSyncedStandeeImage,
-} from "./lipsync/LipSyncedStandeeImage";
+  VQLipSyncedStandeeImage,
+  VQSpeechOverlay,
+  VQWarmGradientBackground,
+  vqSpeakingAvatarAnimations,
+} from "./lib/VQRemotionLib";
+import {getMouthForSpeechFrame} from "./lipsync/manifest";
 
 const BACKGROUND_VIDEO_PATH = "video/pizza-kiln-background.mp4";
 const STAGE_STANDEE_WIDTH = 610;
@@ -40,76 +38,13 @@
 const CORNER_IMAGE_WIDTH = 470;
 const CORNER_IMAGE_HEIGHT = 705;
 
-const clampInterpolation = {
-  extrapolateLeft: "clamp",
-  extrapolateRight: "clamp",
+const pizzaSubtitleOptions = {
+  fontFamily: roundedFontFamily,
+  fontSize: 34,
+  lineHeight: 1.45,
+  backgroundColor: "rgba(255, 255, 255, 0.9)",
 } as const;
 
-const UsualBackground: React.FC = () => (
-  <>
-    <AbsoluteFill
-      style={{
-        background:
-          "radial-gradient(circle at top, #ffe8c7 0%, #ffd3b4 45%, #ffb6b6 100%)",
-      }}
-    />
-    <AbsoluteFill
-      style={{
-        backgroundImage:
-          "radial-gradient(circle at 20% 20%, rgba(255,255,255,0.6) 0, rgba(255,255,255,0) 40%), radial-gradient(circle at 80% 30%, rgba(255,255,255,0.5) 0, rgba(255,255,255,0) 45%), radial-gradient(circle at 30% 80%, rgba(255,255,255,0.4) 0, rgba(255,255,255,0) 50%)",
-        opacity: 0.8,
-      }}
-    />
-  </>
-);
-
-const Subtitle: React.FC<
-  Readonly<{
-    text: string;
-    progress: number;
-    speakerName: string;
-    accentColor: string;
-  }>
-> = ({text, progress, speakerName, accentColor}) => {
-  const opacity = interpolate(progress, [0, 1], [0, 1], clampInterpolation);
-  const translateY = interpolate(progress, [0, 1], [16, 0], clampInterpolation);
-
-  return (
-    <div
-      style={{
-        fontFamily: roundedFontFamily,
-        fontSize: 34,
-        fontWeight: 700,
-        color: "#1a1a1a",
-        lineHeight: 1.45,
-        padding: "18px 28px",
-        backgroundColor: "rgba(255, 255, 255, 0.9)",
-        borderRadius: 18,
-        border: `2px solid ${accentColor}33`,
-        boxShadow: "0 10px 30px rgba(31, 42, 68, 0.15)",
-        maxWidth: 980,
-        opacity,
-        transform: `translateY(${translateY}px)`,
-      }}
-    >
-      <div
-        style={{
-          display: "inline-block",
-          fontSize: 20,
-          color: "#ffffff",
-          backgroundColor: accentColor,
-          borderRadius: 999,
-          padding: "4px 14px",
-          marginBottom: 8,
-        }}
-      >
-        {speakerName}
-      </div>
-      <div>{text}</div>
-    </div>
-  );
-};
-
 const SayoStandee: React.FC<
   Readonly<{
     mode: "stage" | "corner";
@@ -119,10 +54,10 @@
     speechId?: string;
   }>
 > = ({mode, speaking, localFrame, fps, speechId}) => {
-  const {avatar}: {avatar: CharacterDefinition["avatar"]} = characters.sayo;
+  const {avatar} = characters.sayo;
   const speakingAnimationType = avatar.speakingAnimationType ?? "none";
   const translateY = speaking
-    ? speakingAvatarAnimations[speakingAnimationType]({
+    ? vqSpeakingAvatarAnimations[speakingAnimationType]({
         frame: localFrame,
         fps,
         focused: true,
@@ -153,11 +88,9 @@
         zIndex: 3,
       }}
     >
-      <LipSyncedStandeeImage
+      <VQLipSyncedStandeeImage
         imagePath={avatar.imagePath}
-        mouthImageDir={
-          avatar.mouthImageDir ?? defaultMouthImageDir(avatar.kind)
-        }
+        mouthImageDir={avatar.mouthImageDir}
         mouth={mouth}
         width={isCorner ? CORNER_IMAGE_WIDTH : "100%"}
         height={isCorner ? CORNER_IMAGE_HEIGHT : "100%"}
@@ -173,39 +106,18 @@
 };
 
 const SpeechOverlay: React.FC<Readonly<{speech: SpeechEvent}>> = ({speech}) => {
-  const frame = useCurrentFrame();
-  const {fps} = useVideoConfig();
   const character = characters[speech.character];
-  const subtitleProgress = spring({
-    frame,
-    fps,
-    config: {damping: 20, mass: 0.7},
-  });
 
   return (
-    <>
-      <div
-        style={{
-          position: "absolute",
-          bottom: 40,
-          left: 0,
-          right: 0,
-          display: "flex",
-          justifyContent: "center",
-          zIndex: 4,
-        }}
-      >
-        <Subtitle
-          text={speech.subtitle ?? speech.text}
-          progress={subtitleProgress}
-          speakerName={character.displayName}
-          accentColor={character.avatar.accentColor}
-        />
-      </div>
-      {hasAudioForSpeech(speech) ? (
-        <Audio src={staticFile(audioFileForSpeech(speech))} />
-      ) : null}
-    </>
+    <VQSpeechOverlay
+      speech={speech}
+      speakerName={character.displayName}
+      accentColor={character.avatar.accentColor}
+      hasAudio={hasAudioForSpeech}
+      getAudioPath={audioFileForSpeech}
+      subtitleOptions={pizzaSubtitleOptions}
+      containerStyle={{zIndex: 4}}
+    />
   );
 };
 
@@ -227,7 +139,7 @@
 
   return (
     <AbsoluteFill style={{backgroundColor: "#1a1a1a"}}>
-      <UsualBackground />
+      <VQWarmGradientBackground />
       <Sequence
         from={videoFrom}
         durationInFrames={PIZZA_KILN_VIDEO_FRAMES}
diff --git a/voicevox-remotion-template/src/standee-sets.ts b/voicevox-remotion-template/src/standee-sets.ts
index 2b4e997..22017fc 100644
--- a/voicevox-remotion-template/src/standee-sets.ts
+++ b/voicevox-remotion-template/src/standee-sets.ts
@@ -1,7 +1,7 @@
 import type {
-  IdleAvatarAnimationType,
-  SpeakingAvatarAnimationType,
-} from "./avatar-animations";
+  VQIdleAvatarAnimationType as IdleAvatarAnimationType,
+  VQSpeakingAvatarAnimationType as SpeakingAvatarAnimationType,
+} from "./lib/VQRemotionLib";
 
 export type AvatarKind = "zundamon" | "sayo";
 
diff --git a/voicevox-remotion-template/src/yukkuri-composition.tsx b/voicevox-remotion-template/src/yukkuri-composition.tsx
index a2cf21e..312557b 100644
--- a/voicevox-remotion-template/src/yukkuri-composition.tsx
+++ b/voicevox-remotion-template/src/yukkuri-composition.tsx
@@ -1,11 +1,9 @@
 import React from "react";
-import {Audio} from "@remotion/media";
 import {
   AbsoluteFill,
   interpolate,
   Sequence,
   spring,
-  staticFile,
   useCurrentFrame,
   useVideoConfig,
 } from "remotion";
@@ -16,11 +14,6 @@
   type CharacterId,
   type TimelineEvent,
 } from "./data/script";
-import type {AvatarDefinition} from "./standee-sets";
-import {
-  idleAvatarAnimations,
-  speakingAvatarAnimations,
-} from "./avatar-animations";
 import {
   audioFileForSpeech,
   GAP_FRAMES,
@@ -28,11 +21,14 @@
   hasAudioForSpeech,
 } from "./data/timing";
 import {roundedFontFamily} from "./fonts";
-import {getMouthForSpeechFrame} from "./lipsync/manifest";
 import {
-  defaultMouthImageDir,
-  LipSyncedStandeeImage,
-} from "./lipsync/LipSyncedStandeeImage";
+  VQCaptionOverlay,
+  VQCharacterStage,
+  VQSpeechOverlay,
+  VQWarmGradientBackground,
+  type VQMouthResolver,
+} from "./lib/VQRemotionLib";
+import {getMouthForSpeechFrame} from "./lipsync/manifest";
 
 type ScheduledTimelineEvent = Readonly<{
   event: TimelineEvent;
@@ -89,22 +85,18 @@
   extrapolateRight: "clamp",
 } as const;
 
-const mouthForSpeechFrame = ({
-  isSpeaking,
-  speakingAnimationType,
+const yukkuriSubtitleOptions = {
+  fontFamily: roundedFontFamily,
+  fontSize: 36,
+  lineHeight: 1.4,
+  backgroundColor: "rgba(255, 255, 255, 0.88)",
+} as const;
+
+const resolveMouth: VQMouthResolver<CharacterId> = ({
   speechId,
   speakingLocalFrame,
   fps,
-}: Readonly<{
-  isSpeaking: boolean;
-  speakingAnimationType: string;
-  speechId?: string;
-  speakingLocalFrame: number;
-  fps: number;
-}>) =>
-  isSpeaking && speakingAnimationType === "rhubarbLipSync"
-    ? getMouthForSpeechFrame(speechId, speakingLocalFrame, fps)
-    : "rest";
+}) => getMouthForSpeechFrame(speechId, speakingLocalFrame, fps);
 
 const Title: React.FC<Readonly<{progress: number}>> = ({progress}) => {
   const opacity = interpolate(progress, [0, 1], [0, 1], clampInterpolation);
@@ -130,483 +122,27 @@
   );
 };
 
-const Subtitle: React.FC<
-  Readonly<{
-    text: string;
-    progress: number;
-    speakerName?: string;
-    accentColor?: string;
-  }>
-> = ({text, progress, speakerName, accentColor = "#1f2a44"}) => {
-  const opacity = interpolate(progress, [0, 1], [0, 1], clampInterpolation);
-  const translateY = interpolate(progress, [0, 1], [16, 0], clampInterpolation);
-
-  return (
-    <div
-      style={{
-        fontFamily: roundedFontFamily,
-        fontSize: 36,
-        fontWeight: 700,
-        color: "#1a1a1a",
-        lineHeight: 1.4,
-        padding: "18px 28px",
-        backgroundColor: "rgba(255, 255, 255, 0.88)",
-        borderRadius: 18,
-        border: `2px solid ${accentColor}33`,
-        boxShadow: "0 10px 30px rgba(31, 42, 68, 0.15)",
-        maxWidth: 980,
-        opacity,
-        transform: `translateY(${translateY}px)`,
-      }}
-    >
-      {speakerName ? (
-        <div
-          style={{
-            display: "inline-block",
-            fontSize: 20,
-            color: "#ffffff",
-            backgroundColor: accentColor,
-            borderRadius: 999,
-            padding: "4px 14px",
-            marginBottom: 8,
-          }}
-        >
-          {speakerName}
-        </div>
-      ) : null}
-      <div>{text}</div>
-    </div>
-  );
-};
-
-const ZundamonAvatar: React.FC = () => {
-  return (
-    <div
-      style={{
-        width: 320,
-        height: 320,
-        borderRadius: "50%",
-        background:
-          "radial-gradient(circle at 30% 30%, #c9f6a5, #79d36f 70%)",
-        border: "6px solid rgba(31, 42, 68, 0.1)",
-        boxShadow: "0 18px 40px rgba(31, 42, 68, 0.2)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        position: "relative",
-      }}
-    >
-      <div
-        style={{
-          position: "absolute",
-          top: -60,
-          left: 40,
-          width: 90,
-          height: 90,
-          background: "#79d36f",
-          borderRadius: "10% 60% 20% 60%",
-          transform: "rotate(-18deg)",
-          border: "6px solid rgba(31, 42, 68, 0.1)",
-        }}
-      />
-      <div
-        style={{
-          position: "absolute",
-          top: -60,
-          right: 40,
-          width: 90,
-          height: 90,
-          background: "#79d36f",
-          borderRadius: "60% 10% 60% 20%",
-          transform: "rotate(18deg)",
-          border: "6px solid rgba(31, 42, 68, 0.1)",
-        }}
-      />
-      <div
-        style={{
-          display: "flex",
-          gap: 36,
-        }}
-      >
-        <div
-          style={{
-            width: 36,
-            height: 46,
-            borderRadius: "50%",
-            background: "#1f2a44",
-          }}
-        />
-        <div
-          style={{
-            width: 36,
-            height: 46,
-            borderRadius: "50%",
-            background: "#1f2a44",
-          }}
-        />
-      </div>
-      <div
-        style={{
-          position: "absolute",
-          bottom: 68,
-          width: 90,
-          height: 38,
-          borderRadius: "0 0 80px 80px",
-          borderBottom: "8px solid #1f2a44",
-        }}
-      />
-    </div>
-  );
-};
-
-const SayoAvatar: React.FC<Readonly<{accentColor: string}>> = ({
-  accentColor,
-}) => {
-  return (
-    <div
-      style={{
-        width: 320,
-        height: 340,
-        position: "relative",
-      }}
-    >
-      <div
-        style={{
-          position: "absolute",
-          left: 58,
-          top: 10,
-          width: 0,
-          height: 0,
-          borderLeft: "42px solid transparent",
-          borderRight: "34px solid transparent",
-          borderBottom: `112px solid ${accentColor}`,
-          transform: "rotate(-22deg)",
-          filter: "drop-shadow(0 8px 14px rgba(31, 42, 68, 0.18))",
-        }}
-      />
-      <div
-        style={{
-          position: "absolute",
-          right: 58,
-          top: 10,
-          width: 0,
-          height: 0,
-          borderLeft: "34px solid transparent",
-          borderRight: "42px solid transparent",
-          borderBottom: `112px solid ${accentColor}`,
-          transform: "rotate(22deg)",
-          filter: "drop-shadow(0 8px 14px rgba(31, 42, 68, 0.18))",
-        }}
-      />
-      <div
-        style={{
-          position: "absolute",
-          left: 78,
-          top: 42,
-          width: 0,
-          height: 0,
-          borderLeft: "24px solid transparent",
-          borderRight: "20px solid transparent",
-          borderBottom: "66px solid #f0bfd4",
-          transform: "rotate(-22deg)",
-        }}
-      />
-      <div
-        style={{
-          position: "absolute",
-          right: 78,
-          top: 42,
-          width: 0,
-          height: 0,
-          borderLeft: "20px solid transparent",
-          borderRight: "24px solid transparent",
-          borderBottom: "66px solid #f0bfd4",
-          transform: "rotate(22deg)",
-        }}
-      />
-      <div
-        style={{
-          position: "absolute",
-          left: 54,
-          top: 72,
-          width: 212,
-          height: 218,
-          borderRadius: "46% 46% 48% 48%",
-          background: "#2f2f42",
-          boxShadow: "0 18px 40px rgba(31, 42, 68, 0.22)",
-        }}
-      />
-      <div
-        style={{
-          position: "absolute",
-          left: 80,
-          top: 100,
-          width: 160,
-          height: 160,
-          borderRadius: "48%",
-          background: "radial-gradient(circle at 36% 28%, #fff4ee, #f5c6b9)",
-          border: "6px solid rgba(31, 42, 68, 0.1)",
-        }}
-      />
-      <div
-        style={{
-          position: "absolute",
-          left: 108,
-          top: 150,
-          display: "flex",
-          gap: 44,
-        }}
-      >
-        <div
-          style={{
-            width: 24,
-            height: 34,
-            borderRadius: "50%",
-            background: "#222236",
-          }}
-        />
-        <div
-          style={{
-            width: 24,
-            height: 34,
-            borderRadius: "50%",
-            background: "#222236",
-          }}
-        />
-      </div>
-      <div
-        style={{
-          position: "absolute",
-          left: 143,
-          top: 194,
-          width: 34,
-          height: 18,
-          borderRadius: "0 0 36px 36px",
-          borderBottom: "5px solid #222236",
-        }}
-      />
-      <div
-        style={{
-          position: "absolute",
-          left: 96,
-          top: 254,
-          width: 128,
-          height: 74,
-          borderRadius: "46px 46px 20px 20px",
-          background: `linear-gradient(160deg, ${accentColor}, #4b4560)`,
-          border: "6px solid rgba(31, 42, 68, 0.1)",
-        }}
-      />
-    </div>
-  );
-};
-
-const CharacterAvatar: React.FC<
-  Readonly<{
-    characterId: CharacterId;
-    focused: boolean;
-    hasMultipleCharacters: boolean;
-    frame: number;
-    fps: number;
-    isSpeaking: boolean;
-    speakingSpeechId?: string;
-    speakingLocalFrame: number;
-  }>
-> = ({
-  characterId,
-  focused,
-  hasMultipleCharacters,
-  frame,
-  fps,
-  isSpeaking,
-  speakingSpeechId,
-  speakingLocalFrame,
-}) => {
-  const character = characters[characterId];
-  const {avatar}: {avatar: AvatarDefinition} = character;
-  const scale = hasMultipleCharacters ? 0.82 : focused ? 0.94 : 0.9;
-  const opacity = focused || !hasMultipleCharacters ? 1 : 0.72;
-  const idleAnimationType = avatar.idleAnimationType ?? "gentleBob";
-  const speakingAnimationType = avatar.speakingAnimationType ?? "gentleBob";
-  const translateY = isSpeaking
-    ? speakingAvatarAnimations[speakingAnimationType]({
-        frame,
-        fps,
-        focused,
-        hasMultipleCharacters,
-      })
-    : idleAvatarAnimations[idleAnimationType]({
-        frame,
-        fps,
-        focused,
-        hasMultipleCharacters,
-      });
-  const imageTranslateY = avatar.imageLayout?.translateY ?? 0;
-  const imageScaleX = avatar.imageLayout?.flipX ? -1 : 1;
-  const imageTransform = `translateY(${imageTranslateY}px) scaleX(${imageScaleX})`;
-  const nameplatePosition = avatar.nameplatePosition ?? "bottom";
-  const showNameplate = nameplatePosition !== "none";
-  const mouth = mouthForSpeechFrame({
-    isSpeaking,
-    speakingAnimationType,
-    speechId: speakingSpeechId,
-    speakingLocalFrame,
-    fps,
-  });
-
-  const nameplate = (
-    <div
-      style={{
-        position: "relative",
-        zIndex: 2,
-        fontFamily: roundedFontFamily,
-        fontSize: 24,
-        fontWeight: 700,
-        color: "#ffffff",
-        backgroundColor: avatar.accentColor,
-        padding: "6px 18px",
-        borderRadius: 999,
-        boxShadow: "0 8px 20px rgba(31, 42, 68, 0.14)",
-      }}
-    >
-      {character.displayName}
-    </div>
-  );
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: 16,
-        opacity,
-        position: "relative",
-        transform: `translateY(${translateY}px) scale(${scale})`,
-      }}
-    >
-      {showNameplate && nameplatePosition === "top" ? nameplate : null}
-      {avatar.imagePath ? (
-        <LipSyncedStandeeImage
-          imagePath={avatar.imagePath}
-          mouthImageDir={avatar.mouthImageDir ?? defaultMouthImageDir(avatar.kind)}
-          mouth={mouth}
-          width={avatar.imageLayout?.width ?? 320}
-          maxHeight={avatar.imageLayout?.maxHeight ?? 360}
-          filter="drop-shadow(0 18px 40px rgba(31, 42, 68, 0.22))"
-          transform={imageTransform}
-        />
-      ) : avatar.kind === "sayo" ? (
-        <div
-          style={{position: "relative", zIndex: 1, transform: imageTransform}}
-        >
-          <SayoAvatar accentColor={avatar.accentColor} />
-        </div>
-      ) : (
-        <div
-          style={{position: "relative", zIndex: 1, transform: imageTransform}}
-        >
-          <ZundamonAvatar />
-        </div>
-      )}
-      {showNameplate && nameplatePosition === "bottom" ? nameplate : null}
-    </div>
-  );
-};
-
-const Stage: React.FC<
-  Readonly<{
-    visibleCharacters: CharacterId[];
-    focusedCharacter?: CharacterId;
-    speakingCharacter?: CharacterId;
-    speakingSpeechId?: string;
-    speakingLocalFrame: number;
-    frame: number;
-    fps: number;
-  }>
-> = ({
-  visibleCharacters,
-  focusedCharacter,
-  speakingCharacter,
-  speakingSpeechId,
-  speakingLocalFrame,
-  frame,
-  fps,
-}) => {
-  const hasMultipleCharacters = visibleCharacters.length > 1;
-
-  return (
-    <div
-      style={{
-        flex: 1,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: hasMultipleCharacters ? 130 : 0,
-        width: "100%",
-        paddingBottom: 0,
-      }}
-    >
-      {visibleCharacters.map((characterId) => (
-        <CharacterAvatar
-          key={characterId}
-          characterId={characterId}
-          focused={focusedCharacter === characterId}
-          hasMultipleCharacters={hasMultipleCharacters}
-          frame={frame}
-          fps={fps}
-          isSpeaking={speakingCharacter === characterId}
-          speakingSpeechId={speakingSpeechId}
-          speakingLocalFrame={speakingLocalFrame}
-        />
-      ))}
-    </div>
-  );
-};
-
 const TimelineOverlay: React.FC<Readonly<{event: TimelineEvent}>> = ({event}) => {
-  const frame = useCurrentFrame();
-  const {fps} = useVideoConfig();
+  if (event.type === "say") {
+    const character = characters[event.character];
 
-  const subtitleProgress = spring({
-    frame,
-    fps,
-    config: {damping: 20, mass: 0.7},
-  });
-
-  const text = event.type === "say" ? event.subtitle ?? event.text : event.caption;
-  if (!text) {
-    return event.type === "say" && hasAudioForSpeech(event) ? (
-      <Audio src={staticFile(audioFileForSpeech(event))} />
-    ) : null;
+    return (
+      <VQSpeechOverlay
+        speech={event}
+        speakerName={character.displayName}
+        accentColor={character.avatar.accentColor}
+        hasAudio={hasAudioForSpeech}
+        getAudioPath={audioFileForSpeech}
+        subtitleOptions={yukkuriSubtitleOptions}
+      />
+    );
   }
 
-  const speech = event.type === "say" ? event : undefined;
-  const character = speech ? characters[speech.character] : undefined;
-
   return (
-    <>
-      <div
-        style={{
-          position: "absolute",
-          bottom: 40,
-          left: 0,
-          right: 0,
-          display: "flex",
-          justifyContent: "center",
-        }}
-      >
-        <Subtitle
-          text={text}
-          progress={subtitleProgress}
-          speakerName={character?.displayName}
-          accentColor={character?.avatar.accentColor}
-        />
-      </div>
-      {speech && hasAudioForSpeech(speech) ? (
-        <Audio src={staticFile(audioFileForSpeech(speech))} />
-      ) : null}
-    </>
+    <VQCaptionOverlay
+      text={event.caption}
+      subtitleOptions={yukkuriSubtitleOptions}
+    />
   );
 };
 
@@ -652,24 +188,15 @@
   return (
     <AbsoluteFill
       style={{
-        background:
-          "radial-gradient(circle at top, #ffe8c7 0%, #ffd3b4 45%, #ffb6b6 100%)",
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
       }}
     >
-      <div
-        style={{
-          position: "absolute",
-          inset: 0,
-          backgroundImage:
-            "radial-gradient(circle at 20% 20%, rgba(255,255,255,0.6) 0, rgba(255,255,255,0) 40%), radial-gradient(circle at 80% 30%, rgba(255,255,255,0.5) 0, rgba(255,255,255,0) 45%), radial-gradient(circle at 30% 80%, rgba(255,255,255,0.4) 0, rgba(255,255,255,0) 50%)",
-          opacity: 0.8,
-        }}
-      />
+      <VQWarmGradientBackground />
       <Title progress={titleProgress} />
-      <Stage
+      <VQCharacterStage
+        characters={characters}
         visibleCharacters={activeSegment.visibleCharacters}
         focusedCharacter={
           isInsideActiveSegment ? activeSegment.focusedCharacter : undefined
@@ -679,6 +206,8 @@
         speakingLocalFrame={speakingLocalFrame}
         frame={frame}
         fps={fps}
+        resolveMouth={resolveMouth}
+        fontFamily={roundedFontFamily}
       />
       {sequences}
     </AbsoluteFill>