diff --git a/packages/webgal/index.html b/packages/webgal/index.html
index cf2a219b6..ffbd40bb9 100644
--- a/packages/webgal/index.html
+++ b/packages/webgal/index.html
@@ -199,8 +199,8 @@
 </script>
 <script type="module" src="/src/main.tsx"></script>
 <!--<script type="module" src="/src/Core/util/resize.ts"></script>-->
-<!--<script src="/src/assets/lib/l2d.js"></script>-->
-<!--<script src="/src/assets/lib/live2dcubismcore.min.js"></script>-->
+<!--<script src="lib/live2d.min.js"></script>-->
+<!--<script src="lib/live2dcubismcore.min.js"></script>-->
 <script>
   let enterPromise = new Promise(res => window.enterPromise = res);
   let renderPromise = new Promise(res => window.renderPromise = res);
diff --git a/packages/webgal/package.json b/packages/webgal/package.json
index ba2cca176..590859c20 100644
--- a/packages/webgal/package.json
+++ b/packages/webgal/package.json
@@ -1,7 +1,7 @@
 {
   "name": "webgal",
   "private": true,
-  "version": "4.4.5",
+  "version": "4.4.6",
   "scripts": {
     "dev": "vite --host --port 3000",
     "build": "cross-env NODE_ENV=production tsc && vite build --base=./",
diff --git a/packages/webgal/public/game/config.txt b/packages/webgal/public/game/config.txt
index 31fef4854..70a7b9664 100644
--- a/packages/webgal/public/game/config.txt
+++ b/packages/webgal/public/game/config.txt
@@ -3,3 +3,4 @@ Game_key:0f86dstRf;
 Title_img:WebGAL_New_Enter_Image.png;
 Title_bgm:s_Title.mp3;
 Game_Logo:WebGalEnter.png;
+Textbox_theme:imss;
diff --git a/packages/webgal/public/game/scene/demo_var.txt b/packages/webgal/public/game/scene/demo_var.txt
new file mode 100644
index 000000000..dd8a6351a
--- /dev/null
+++ b/packages/webgal/public/game/scene/demo_var.txt
@@ -0,0 +1,11 @@
+setVar:bg=bg.png;
+changeBg:{bg} -next;
+setVar:speaker=WebGAL;
+{speaker}:Background now is {bg}.;
+{speaker}:\{bg\} is not use interpolation.;
+setVar:a=3;
+setVar:bg=bg1.png -when=a>2;
+changeBg:{bg} -next;
+setVar:func=variable interpolation;
+{speaker}:Bg changed! Welcome to {speaker} {func}!;
+end;
diff --git a/packages/webgal/public/game/scene/demo_zh_cn.txt b/packages/webgal/public/game/scene/demo_zh_cn.txt
index f18f3cec2..a19396eb6 100644
--- a/packages/webgal/public/game/scene/demo_zh_cn.txt
+++ b/packages/webgal/public/game/scene/demo_zh_cn.txt
@@ -1,48 +1,48 @@
 bgm:s_Title.mp3 -volume=80 -enter=3000;
 unlockBgm:s_Title.mp3 -name=雲を追いかけて;
-intro:你好|欢迎来到 WebGAL 的世界;
+intro:你好|欢迎来到 {egine} 的世界;
 changeBg:bg.png -next;
 unlockCg:bg.png -name=良夜; // 解锁CG并赋予名称
 changeFigure:stand.png -left -enter=enter-from-left -next;
-:你好|欢迎来到 WebGAL 的世界;
+:你好|欢迎来到 {egine} 的世界;
 miniAvatar:miniavatar.png;
-WebGAL:欢迎使用 WebGAL！这是一款全新的网页端视觉小说引擎。 -v1.wav;
+{heroine}:欢迎使用 {egine}！这是一款全新的网页端视觉小说引擎。 -v1.wav;
 changeFigure:stand2.png -right -next;
-WebGAL 是使用 Web 技术开发的引擎，因此在网页端有良好的表现。 -v2.wav;
-由于这个特性，如果你将 WebGAL 部署到服务器或网页托管平台上，玩家只需要一串链接就可以开始游玩！ -v3.wav;
+{egine} 是使用 Web 技术开发的引擎，因此在网页端有良好的表现。 -v2.wav;
+由于这个特性，如果你将 {egine} 部署到服务器或网页托管平台上，玩家只需要一串链接就可以开始游玩！ -v3.wav;
 setAnimation:move-front-and-back -target=fig-left -next;
 听起来是不是非常吸引人？ -v4.wav;
 changeFigure:none -right -next;
 setTransform:{"position": {"x": 500,"y": 0}} -target=fig-left -next;
-WebGAL 引擎也具有动画系统和特效系统，使用 WebGAL 开发的游戏可以拥有很好的表现效果。 -v5.wav;
+{egine} 引擎也具有动画系统和特效系统，使用 {egine} 开发的游戏可以拥有很好的表现效果。 -v5.wav;
 pixiInit;
 pixiPerform:snow;
 比如，这个下起小雪的特效。 -v6.wav;
 除此以外，分支选择的功能也必不可少。 -v7.wav;
-你可以通过以下两个分支了解 WebGAL 的更多故事。 -v8.wav;
+你可以通过以下两个分支了解 {egine} 的更多故事。 -v8.wav;
 pixiInit;
-choose:WebGAL 发展历程:choose1|WebGAL 冷知识:choose2;
+choose:{egine} 发展历程:choose1|{egine} 冷知识:choose2;
 
 ;分支1
 label:choose1;
-WebGAL 的开发初衷是能够让更多人可以更方便地制作属于自己的视觉小说。 -v9.wav;
-在一开始，WebGAL 只具备很少的功能，仅仅能支持立绘和背景的显示、语音播放和分支选择。 -v10.wav;
+{egine} 的开发初衷是能够让更多人可以更方便地制作属于自己的视觉小说。 -v9.wav;
+在一开始，{egine} 只具备很少的功能，仅仅能支持立绘和背景的显示、语音播放和分支选择。 -v10.wav;
 setAnimation:move-front-and-back -target=fig-left -next;
 在经历一年的发展后，现在已经是支持了很多优秀的表现效果的引擎了！ -v11.wav;
-除此以外，WebGAL 编辑器的加入也使得制作和导出一个游戏更加方便快捷。 -v12.wav;
+除此以外，{egine} 编辑器的加入也使得制作和导出一个游戏更加方便快捷。 -v12.wav;
 jumpLabel:end;
 
 ;分支2
 label:choose2;
 这个演示游戏使用的素材是 AI 生成的。 -v13.wav;
-WebGAL 项目只用了一年不到就在 GitHub 获得了 1000 星标！ -v14.wav;
-WebGAL 的开发历程，是一个在开发中学习开发的过程。因此她经历了3次重构，并且每次几乎都是推倒重来式的。 -v15.wav;
-WebGAL 的脚本语言是为了简化制作难度而全新设计的！ -v16.wav;
+{egine} 项目只用了一年不到就在 GitHub 获得了 1000 星标！ -v14.wav;
+{egine} 的开发历程，是一个在开发中学习开发的过程。因此她经历了3次重构，并且每次几乎都是推倒重来式的。 -v15.wav;
+{egine} 的脚本语言是为了简化制作难度而全新设计的！ -v16.wav;
 ;
 ;l2d
 ;label:l2d;
 ;changeFigure:hiyori/hiyori_pro_t11.model3.json -left -motion=Idle -next;
-;WebGAL 项目现在也开始尝试实验性支持 live2D！今后可能会成为一个正式功能！
+;{egine} 项目现在也开始尝试实验性支持 live2D！今后可能会成为一个正式功能！
 ;
 ;结束分支
 label:end;
@@ -54,6 +54,6 @@ label:end;
 setTempAnimation:[{"position": {"x": 500,"y": 0},"duration": 0},{"position": {"x": 400,"y": 0},"duration": 250},{"position": {"x": 600,"y": 0},"duration": 500},{"position": {"x": 500,"y": 0},"duration": 250}] -target=fig-left -next;
 当然，这不算什么，因为大多数成熟的引擎都有这些功能。但是在 Web 端，这却是很少见的。 -v20.wav;
 我们为可能初次开发游戏的开发者提供了美观的通用 UI 和丰富的预设功能与动画。所以你可以没有顾虑地快速开始制作游戏。 -v21.wav;
-WebGAL 项目组期待你的作品能够在 WebGAL 上呈现！只需要一个链接就可以让万千用户立刻开始享受你的作品。 -v22.wav;
-感谢你关注 WebGAL 项目！ -v23.wav;
+{egine} 项目组期待你的作品能够在 {egine} 上呈现！只需要一个链接就可以让万千用户立刻开始享受你的作品。 -v22.wav;
+感谢你关注 {egine} 项目！ -v23.wav;
 end;
diff --git a/packages/webgal/public/game/scene/start.txt b/packages/webgal/public/game/scene/start.txt
index 3daddd54a..642f0a686 100644
--- a/packages/webgal/public/game/scene/start.txt
+++ b/packages/webgal/public/game/scene/start.txt
@@ -1 +1,3 @@
-choose:简体中文:demo_zh_cn.txt|日本語:demo_ja.txt|English:demo_en.txt|Lip Sync Animation Test:demo_animation.txt;
+setVar:heroine=WebGAL;
+setVar:egine=WebGAL;
+choose:简体中文:demo_zh_cn.txt|日本語:demo_ja.txt|English:demo_en.txt|Lip Sync Animation Test:demo_animation.txt | Variable interpolation test:demo_var.txt;
diff --git a/packages/webgal/src/Components/Stage/MainStage/useSetFigure.ts b/packages/webgal/src/Components/Stage/MainStage/useSetFigure.ts
index f487a1291..5dfbd4ef7 100644
--- a/packages/webgal/src/Components/Stage/MainStage/useSetFigure.ts
+++ b/packages/webgal/src/Components/Stage/MainStage/useSetFigure.ts
@@ -9,7 +9,25 @@ import { getEnterExitAnimation } from '@/Core/Modules/animationFunctions';
 import { WebGAL } from '@/Core/WebGAL';
 
 export function useSetFigure(stageState: IStageState) {
-  const { figNameLeft, figName, figNameRight, freeFigure, live2dMotion } = stageState;
+  const { figNameLeft, figName, figNameRight, freeFigure, live2dMotion, live2dExpression } = stageState;
+
+  /**
+   * 同步 motion
+   */
+  useEffect(() => {
+    for (const motion of live2dMotion) {
+      WebGAL.gameplay.pixiStage?.changeModelMotionByKey(motion.target, motion.motion);
+    }
+  }, [live2dMotion]);
+
+  /**
+   * 同步 expression
+   */
+  useEffect(() => {
+    for (const expression of live2dExpression) {
+      WebGAL.gameplay.pixiStage?.changeModelExpressionByKey(expression.target, expression.expression);
+    }
+  }, [live2dExpression]);
 
   /**
    * 设置立绘
@@ -222,5 +240,5 @@ function removeFig(figObj: IStageObject, enterTikerKey: string, effects: IEffect
  * @param args
  */
 function addLive2dFigure(...args: any[]) {
-  // return WebGAL.gameplay.pixiStage?.addLive2dFigure.apply(args);
+  // return WebGAL.gameplay.pixiStage?.addLive2dFigure(...args);
 }
diff --git a/packages/webgal/src/Components/Stage/Stage.tsx b/packages/webgal/src/Components/Stage/Stage.tsx
index fa19f7345..8af439617 100644
--- a/packages/webgal/src/Components/Stage/Stage.tsx
+++ b/packages/webgal/src/Components/Stage/Stage.tsx
@@ -13,6 +13,7 @@ import { useHotkey } from '@/hooks/useHotkey';
 import { MainStage } from '@/Components/Stage/MainStage/MainStage';
 import IntroContainer from '@/Components/Stage/introContainer/IntroContainer';
 import { isIOS } from '@/Core/initializeScript';
+import { WebGAL } from '@/Core/WebGAL';
 // import OldStage from '@/Components/Stage/OldStage/OldStage';
 
 export const Stage: FC = () => {
@@ -42,6 +43,9 @@ export const Stage: FC = () => {
           stopAll();
           nextSentence();
         }}
+        onDoubleClick={() => {
+          WebGAL.eventBus.emit('fullscreen-dbclick');
+        }}
         id="FullScreenClick"
         style={{ width: '100%', height: '100%', position: 'absolute', zIndex: '12', top: '0' }}
       />
diff --git a/packages/webgal/src/Components/Stage/TextBox/TextBox.tsx b/packages/webgal/src/Components/Stage/TextBox/TextBox.tsx
index 684a1f2a6..a05d1b38a 100644
--- a/packages/webgal/src/Components/Stage/TextBox/TextBox.tsx
+++ b/packages/webgal/src/Components/Stage/TextBox/TextBox.tsx
@@ -1,13 +1,27 @@
-import styles from './textbox.module.scss';
-import { useEffect } from 'react';
+import { FC, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { RootState } from '@/store/store';
 import { useFontFamily } from '@/hooks/useFontFamily';
 import { useTextAnimationDuration, useTextDelay } from '@/hooks/useTextOptions';
 import { getTextSize } from '@/Components/UI/getTextSize';
+import StandardTextbox, { ITextboxProps } from '@/Components/Stage/TextBox/themes/standard/StandardTextbox';
+import IMSSTextbox from '@/Components/Stage/TextBox/themes/imss/IMSSTextbox';
+import { IWebGalTextBoxTheme } from '@/Components/themeInterface';
+import { textSize } from '@/store/userDataInterface';
 
 const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
+function getTextboxByTheme(theme: IWebGalTextBoxTheme): FC<ITextboxProps> {
+  switch (theme) {
+    case 'standard':
+      return StandardTextbox;
+    case 'imss':
+      return IMSSTextbox;
+    default:
+      return StandardTextbox;
+  }
+}
+
 export const TextBox = () => {
   const stageState = useSelector((state: RootState) => state.stage);
   const userDataState = useSelector((state: RootState) => state.userData);
@@ -17,103 +31,39 @@ export const TextBox = () => {
   let size = getTextSize(userDataState.optionData.textSize) + '%';
   const font = useFontFamily();
   const isText = stageState.showText !== '' || stageState.showName !== '';
+  let textSizeState = userDataState.optionData.textSize;
   if (isText && stageState.showTextSize !== -1) {
     size = getTextSize(stageState.showTextSize) + '%';
+    textSizeState = stageState.showTextSize;
   }
   // 拆字
   const textArray: Array<string> = splitChars(stageState.showText);
-  const textElementList = textArray.map((e, index) => {
-    if (e === '<br />') {
-      return <br key={`br${index}`} />;
-    }
-    let delay = index * textDelay;
-    let prevLength = stageState.currentConcatDialogPrev.length;
-    if (stageState.currentConcatDialogPrev !== '' && index >= prevLength) {
-      delay = delay - prevLength * textDelay;
-    }
-    if (index < prevLength) {
-      return (
-        <span
-          data-text={e}
-          id={`${delay}`}
-          className={styles.TextBox_textElement_Settled}
-          key={stageState.currentDialogKey + index}
-          style={{ animationDelay: `${delay}ms`, animationDuration: `${textDuration}ms` }}
-        >
-          <span className={styles.zhanwei}>
-            {e}
-            <span className={styles.outer}>{e}</span>
-            <span className={styles.inner}>{e}</span>
-          </span>
-        </span>
-      );
-    }
-    return (
-      <span
-        data-text={e}
-        id={`${delay}`}
-        className={styles.TextBox_textElement_start}
-        key={stageState.currentDialogKey + index}
-        style={{ animationDelay: `${delay}ms`, position: 'relative' }}
-      >
-        <span className={styles.zhanwei}>
-          {e}
-          <span className={styles.outer}>{e}</span>
-          <span className={styles.inner}>{e}</span>
-        </span>
-      </span>
-    );
-  });
+  const showName = stageState.showName;
+  const currentConcatDialogPrev = stageState.currentConcatDialogPrev;
+  const currentDialogKey = stageState.currentDialogKey;
+  const miniAvatar = stageState.miniAvatar;
+  const theme = useSelector((state: RootState) => state.GUI.theme);
+  const Textbox = getTextboxByTheme(theme.textbox);
   return (
-    <>
-      {isText && (
-        <div
-          id="textBoxMain"
-          className={styles.TextBox_main}
-          style={{ fontFamily: font, left: stageState.miniAvatar === '' ? 25 : undefined }}
-        >
-          {/* <div className={styles.nameContainer}>{stageState.showName !== ''}</div> */}
-          <div id="miniAvatar" className={styles.miniAvatarContainer}>
-            {stageState.miniAvatar !== '' && (
-              <img className={styles.miniAvatarImg} alt="miniAvatar" src={stageState.miniAvatar} />
-            )}
-          </div>
-          {stageState.showName !== '' && (
-            <div key={stageState.showName} className={styles.TextBox_showName} style={{ fontSize: '200%' }}>
-              {stageState.showName.split('').map((e, i) => {
-                return (
-                  <span key={e + i} style={{ position: 'relative' }}>
-                    <span className={styles.zhanwei}>
-                      {e}
-                      <span className={styles.outerName}>{e}</span>
-                      <span className={styles.innerName}>{e}</span>
-                    </span>
-                  </span>
-                );
-              })}
-            </div>
-          )}
-          <div
-            className={styles.text}
-            style={{
-              fontSize: size,
-              wordBreak: isSafari ? 'break-word' : undefined,
-              overflow: 'hidden',
-              paddingLeft: '0.1em',
-            }}
-          >
-            {textElementList}
-          </div>
-        </div>
-      )}
-    </>
+    <Textbox
+      textArray={textArray}
+      isText={isText}
+      textDelay={textDelay}
+      showName={showName}
+      currentConcatDialogPrev={currentConcatDialogPrev}
+      fontSize={size}
+      currentDialogKey={currentDialogKey}
+      isSafari={isSafari}
+      miniAvatar={miniAvatar}
+      textDuration={textDuration}
+      font={font}
+      textSizeState={textSizeState}
+    />
   );
 };
 
 function isCJK(character: string) {
-  if (character.match(/[\u4e00-\u9fa5]|[\u0800-\u4e00]|[\uac00-\ud7ff]/)) {
-    return true;
-  } else return false;
+  return !!character.match(/[\u4e00-\u9fa5]|[\u0800-\u4e00]|[\uac00-\ud7ff]/);
 }
 
 export function splitChars(sentence: string) {
diff --git a/packages/webgal/src/Components/Stage/TextBox/themes/imss/IMSSTextbox.tsx b/packages/webgal/src/Components/Stage/TextBox/themes/imss/IMSSTextbox.tsx
new file mode 100644
index 000000000..60e8821be
--- /dev/null
+++ b/packages/webgal/src/Components/Stage/TextBox/themes/imss/IMSSTextbox.tsx
@@ -0,0 +1,132 @@
+import styles from './imss.module.scss';
+import { useEffect } from 'react';
+import { WebGAL } from '@/Core/WebGAL';
+
+export interface ITextboxProps {
+  textArray: string[];
+  textDelay: number;
+  currentConcatDialogPrev: string;
+  currentDialogKey: string;
+  isText: boolean;
+  isSafari: boolean;
+  fontSize: string;
+  miniAvatar: string;
+  showName: string;
+  font: string;
+  textDuration: number;
+}
+
+export default function IMSSTextbox(props: ITextboxProps) {
+  const {
+    textArray,
+    textDelay,
+    currentConcatDialogPrev,
+    currentDialogKey,
+    isText,
+    isSafari,
+    fontSize,
+    miniAvatar,
+    showName,
+    font,
+    textDuration,
+  } = props;
+
+  useEffect(() => {
+    function settleText() {
+      const textElements = document.querySelectorAll('.Textelement_start');
+      const textArray = [...textElements];
+      textArray.forEach((e) => {
+        e.className = styles.TextBox_textElement_Settled;
+      });
+    }
+    WebGAL.eventBus.on('text-settle', settleText);
+    return () => {
+      WebGAL.eventBus.off('text-settle', settleText);
+    };
+  }, []);
+
+  const textElementList = textArray.map((e, index) => {
+    if (e === '<br />') {
+      return <br key={`br${index}`} />;
+    }
+    let delay = index * textDelay;
+    let prevLength = currentConcatDialogPrev.length;
+    if (currentConcatDialogPrev !== '' && index >= prevLength) {
+      delay = delay - prevLength * textDelay;
+    }
+    if (index < prevLength) {
+      return (
+        <span
+          data-text={e}
+          id={`${delay}`}
+          className={styles.TextBox_textElement_Settled}
+          key={currentDialogKey + index}
+          style={{ animationDelay: `${delay}ms`, animationDuration: `${textDuration}ms` }}
+        >
+          <span className={styles.zhanwei}>
+            {e}
+            <span className={styles.outer}>{e}</span>
+            <span className={styles.inner}>{e}</span>
+          </span>
+        </span>
+      );
+    }
+    return (
+      <span
+        data-text={e}
+        id={`${delay}`}
+        className={`${styles.TextBox_textElement_start} Textelement_start`}
+        key={currentDialogKey + index}
+        style={{ animationDelay: `${delay}ms`, position: 'relative' }}
+      >
+        <span className={styles.zhanwei}>
+          {e}
+          <span className={styles.outer}>{e}</span>
+          <span className={styles.inner}>{e}</span>
+        </span>
+      </span>
+    );
+  });
+  return (
+    <>
+      {isText && (
+        <div
+          id="textBoxMain"
+          className={styles.TextBox_main}
+          style={{ fontFamily: font, left: miniAvatar === '' ? 25 : undefined }}
+        >
+          {/* <div className={styles.nameContainer}>{stageState.showName !== ''}</div> */}
+          <div id="miniAvatar" className={styles.miniAvatarContainer}>
+            {miniAvatar !== '' && <img className={styles.miniAvatarImg} alt="miniAvatar" src={miniAvatar} />}
+          </div>
+          {showName !== '' && (
+            <div key={showName} className={styles.TextBox_showName} style={{ fontSize: '200%' }}>
+              {showName.split('').map((e, i) => {
+                return (
+                  <span key={e + i} style={{ position: 'relative' }}>
+                    <span className={styles.zhanwei}>
+                      {e}
+                      <span className={styles.outerName}>{e}</span>
+                      <span className={styles.innerName}>{e}</span>
+                    </span>
+                  </span>
+                );
+              })}
+            </div>
+          )}
+          <div
+            className={styles.text}
+            style={{
+              fontSize,
+              wordBreak: isSafari ? 'break-word' : undefined,
+              overflow: 'hidden',
+              paddingLeft: '0.1em',
+            }}
+          >
+            {textElementList}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/packages/webgal/src/Components/Stage/TextBox/themes/imss/imss.module.scss b/packages/webgal/src/Components/Stage/TextBox/themes/imss/imss.module.scss
new file mode 100644
index 000000000..b7de847ef
--- /dev/null
+++ b/packages/webgal/src/Components/Stage/TextBox/themes/imss/imss.module.scss
@@ -0,0 +1,197 @@
+.TextBox_EventHandler {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 6;
+  top: 0;
+}
+
+@mixin text_shadow_textElement {
+  //text-shadow: 0 0 3px rgba(81,168,221,1);
+}
+
+$height: 330px;
+
+.TextBox_main {
+  position: absolute;
+  z-index: 6;
+  right: 25px;
+  min-height: $height;
+  max-height: $height;
+  background-image: linear-gradient(rgba(245, 247, 250, 0.8) 0%, rgba(189, 198, 222, 0.8) 100%);
+  background-blend-mode: darken;
+  //background: white;
+  border-radius: calc($height / 2) 20px 20px calc($height / 2);
+  bottom: 20px;
+  left: 275px;
+  font-weight: bold;
+  color: white;
+  padding: 1em 50px 70px 200px;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column;
+  align-items: flex-start;
+  animation: showSoftly 0.7s ease-out forwards;
+  letter-spacing: 0.2em;
+  backdrop-filter: blur(5px);
+  transition: left 0.33s;
+}
+
+@keyframes showSoftly {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+//.TextBox_textElement {
+//  opacity: 0;
+//  animation: showSoftly 1000ms forwards;
+//}
+
+
+.TextBox_textElement_start {
+  @include text_shadow_textElement;
+  position: relative;
+  animation: TextDelayShow 1000ms ease-out forwards;
+  opacity: 0;
+}
+
+.outer {
+  position: absolute;
+  white-space: nowrap;
+  left: 0;
+  top: 0;
+  //background-image: linear-gradient(rgba(255, 255, 255, 1) 0%, rgb(225, 237, 255) 100%);
+  background-image: linear-gradient(
+      #0B346E 0%,
+      //#f5f7fa 45%,
+      #141423 100%
+  );
+  //background: rgba(255, 255, 255, 1);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  z-index: 2;
+}
+
+.inner {
+  white-space: nowrap;
+  position: absolute;
+  left: 0;
+  top: 0;
+  -webkit-text-stroke: 0.1em rgba(255, 255, 255, 1);
+  z-index: 1;
+  //text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.75);
+}
+
+.zhanwei {
+  color: transparent;
+  white-space: nowrap;
+}
+
+//
+//.TextBox_textElement_start::before{
+//  animation: TextDelayShow 700ms ease-out forwards;
+//  opacity: 0;
+//  content:attr(data-text);
+//  position: absolute;
+//}
+
+.TextBox_textElement_Settled {
+  position: relative;
+  @include text_shadow_textElement;
+  opacity: 1;
+}
+
+//
+//.TextBox_textElement_Settled::before{
+//  content:attr(data-text);
+//  position: absolute;
+//  opacity: 1;
+//  -webkit-text-stroke: 1px red;
+//  z-index: 1;
+//}
+
+.TextBox_showName {
+  @include text_shadow_textElement;
+  font-size: 85%;
+  //border-bottom: 3px solid rgb(176, 176, 176);
+  //min-width: 25%;
+  padding: 0 2em 0 2em;
+  //margin: 0 0 0 0;
+  position: absolute;
+  left: 150px;
+  top: -68px;
+  height: 80px;
+  line-height: 68px;
+  //display: flex;
+  //align-items: center;
+  background: rgba(11, 52, 110, 0.9);
+  border-radius: 40px;
+  border: 4px solid rgba(255, 255, 255, 0.75);
+  box-shadow: 3px 3px 10px rgba(100, 100, 100, 0.5);
+}
+
+@keyframes TextDelayShow {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.miniAvatarContainer {
+  position: absolute;
+  height: 450px;
+  width: 450px;
+  bottom: 0;
+  left: -250px;
+  border-radius: 100% 0 0 100%;
+  overflow: hidden;
+}
+
+.miniAvatarImg {
+  max-height: 100%;
+  max-width: 100%;
+  position: absolute;
+  bottom: 0;
+  filter: drop-shadow(15px 0 3px rgba(0, 0, 0, 0.5));
+}
+
+.nameContainer {
+  position: absolute;
+  left: 2em;
+  top: -3.5em;
+}
+
+.outerName {
+  position: absolute;
+  left: 0;
+  top: 0;
+  //background-image: linear-gradient(rgba(255, 255, 255, 1) 0%, rgb(225, 237, 255) 100%);
+  //background-image: linear-gradient(
+  //    #bfd8ff 0%,
+  //    //#f5f7fa 45%,
+  //    #bfbfc7 100%
+  //);
+  background: linear-gradient(150deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 35%, rgb(165, 212, 228) 100%);
+  //background: rgba(255, 255, 255, 1);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  z-index: 2;
+}
+
+.innerName {
+  position: absolute;
+  left: 0;
+  top: 0;
+  //-webkit-text-stroke: 0.1em rgba(0, 0, 0, 0.25);
+  //-webkit-text-stroke: 0.1em rgba(255, 255, 255, 1);
+  z-index: 1;
+  //text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.75);
+}
diff --git a/packages/webgal/src/Components/Stage/TextBox/themes/standard/StandardTextbox.tsx b/packages/webgal/src/Components/Stage/TextBox/themes/standard/StandardTextbox.tsx
new file mode 100644
index 000000000..295a318cf
--- /dev/null
+++ b/packages/webgal/src/Components/Stage/TextBox/themes/standard/StandardTextbox.tsx
@@ -0,0 +1,145 @@
+import styles from './standard.module.scss';
+import { textSize } from '@/store/userDataInterface';
+import { useEffect } from 'react';
+import { WebGAL } from '@/Core/WebGAL';
+
+export interface ITextboxProps {
+  textArray: string[];
+  textDelay: number;
+  currentConcatDialogPrev: string;
+  currentDialogKey: string;
+  isText: boolean;
+  isSafari: boolean;
+  fontSize: string;
+  miniAvatar: string;
+  showName: string;
+  font: string;
+  textDuration: number;
+  textSizeState: number;
+}
+
+export default function StandardTextbox(props: ITextboxProps) {
+  const {
+    textArray,
+    textDelay,
+    currentConcatDialogPrev,
+    currentDialogKey,
+    isText,
+    isSafari,
+    fontSize,
+    miniAvatar,
+    showName,
+    font,
+    textDuration,
+    textSizeState,
+  } = props;
+
+  const isHasMiniAvatar = miniAvatar !== '';
+
+  useEffect(() => {
+    function settleText() {
+      const textElements = document.querySelectorAll('.Textelement_start');
+      const textArray = [...textElements];
+      textArray.forEach((e) => {
+        e.className = styles.TextBox_textElement_Settled;
+      });
+    }
+    WebGAL.eventBus.on('text-settle', settleText);
+    return () => {
+      WebGAL.eventBus.off('text-settle', settleText);
+    };
+  }, []);
+
+  const textElementList = textArray.map((e, index) => {
+    if (e === '<br />') {
+      return <br key={`br${index}`} />;
+    }
+    let delay = index * textDelay;
+    let prevLength = currentConcatDialogPrev.length;
+    if (currentConcatDialogPrev !== '' && index >= prevLength) {
+      delay = delay - prevLength * textDelay;
+    }
+    if (index < prevLength) {
+      return (
+        <span
+          data-text={e}
+          id={`${delay}`}
+          className={styles.TextBox_textElement_Settled}
+          key={currentDialogKey + index}
+          style={{ animationDelay: `${delay}ms`, animationDuration: `${textDuration}ms` }}
+        >
+          <span className={styles.zhanwei}>
+            {e}
+            <span className={styles.outer}>{e}</span>
+            <span className={styles.inner}>{e}</span>
+          </span>
+        </span>
+      );
+    }
+    return (
+      <span
+        data-text={e}
+        id={`${delay}`}
+        className={`${styles.TextBox_textElement_start} Textelement_start`}
+        key={currentDialogKey + index}
+        style={{ animationDelay: `${delay}ms`, position: 'relative' }}
+      >
+        <span className={styles.zhanwei}>
+          {e}
+          <span className={styles.outer}>{e}</span>
+          <span className={styles.inner}>{e}</span>
+        </span>
+      </span>
+    );
+  });
+
+  const padding = isHasMiniAvatar ? 500 : undefined;
+  const isHasName = showName !== '';
+  let paddingTop = isHasName ? undefined : 15;
+  if (textSizeState === textSize.small && !isHasName) {
+    paddingTop = 35;
+  }
+
+  return (
+    <>
+      {isText && (
+        <div
+          id="textBoxMain"
+          className={styles.TextBox_main}
+          style={{ fontFamily: font, paddingLeft: padding, paddingTop }}
+        >
+          {/* <div className={styles.nameContainer}>{stageState.showName !== ''}</div> */}
+          <div id="miniAvatar" className={styles.miniAvatarContainer}>
+            {miniAvatar !== '' && <img className={styles.miniAvatarImg} alt="miniAvatar" src={miniAvatar} />}
+          </div>
+          {showName !== '' && (
+            <div key={showName} className={styles.TextBox_showName} style={{ fontSize: '170%', left: padding }}>
+              {showName.split('').map((e, i) => {
+                return (
+                  <span key={e + i} style={{ position: 'relative' }}>
+                    <span className={styles.zhanwei}>
+                      {e}
+                      <span className={styles.outer}>{e}</span>
+                      <span className={styles.inner}>{e}</span>
+                    </span>
+                  </span>
+                );
+              })}
+            </div>
+          )}
+          <div
+            className={styles.text}
+            style={{
+              fontSize,
+              wordBreak: isSafari ? 'break-word' : undefined,
+              overflow: 'hidden',
+              paddingLeft: '0.1em',
+            }}
+          >
+            {textElementList}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/packages/webgal/src/Components/Stage/TextBox/themes/standard/standard.module.scss b/packages/webgal/src/Components/Stage/TextBox/themes/standard/standard.module.scss
new file mode 100644
index 000000000..50dae3a2a
--- /dev/null
+++ b/packages/webgal/src/Components/Stage/TextBox/themes/standard/standard.module.scss
@@ -0,0 +1,154 @@
+.TextBox_EventHandler {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 6;
+  top: 0;
+}
+
+@mixin text_shadow_textElement {
+  //text-shadow: 0 0 3px rgba(81,168,221,1);
+}
+
+$height: 430px;
+
+.TextBox_main {
+  position: absolute;
+  z-index: 6;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  min-height: $height;
+  max-height: $height;
+  background: linear-gradient(
+      rgba(0, 0, 0, 0.1) 20%,
+      rgba(0, 0, 0, .85));
+  background-blend-mode: darken;
+  font-weight: bold;
+  padding: 30px 50px 100px 200px;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column;
+  align-items: flex-start;
+  animation: showSoftly 0.7s ease-out forwards;
+  letter-spacing: 0.2em;
+  backdrop-filter: blur(5px);
+  transition: left 0.33s, padding-left 0.33s;
+}
+
+.TextBox_showName {
+  @include text_shadow_textElement;
+  font-size: 85%;
+  min-width: 25%;
+  height: 70px;
+  display: flex;
+  align-items: center;
+  transition: left 0.33s;
+  border-bottom: 3px solid rgba(255,255,255,0.8);
+}
+
+@keyframes showSoftly {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.TextBox_textElement_start {
+  @include text_shadow_textElement;
+  position: relative;
+  animation: TextDelayShow 1000ms ease-out forwards;
+  opacity: 0;
+}
+
+.outer {
+  position: absolute;
+  white-space: nowrap;
+  left: 0;
+  top: 0;
+  background-image: linear-gradient(
+    //135deg,
+      #ffffff 0%,
+      #f5f7fa 45%,
+      #c3cfe2 100%
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  z-index: 2;
+}
+
+.inner {
+  white-space: nowrap;
+  position: absolute;
+  left: 0;
+  top: 0;
+  -webkit-text-stroke: 0.085em rgba(0, 0, 0, 0.35);
+  z-index: 1;
+}
+
+.zhanwei {
+  color: transparent;
+  white-space: nowrap;
+}
+
+
+
+.TextBox_textElement_Settled {
+  position: relative;
+  @include text_shadow_textElement;
+  opacity: 1;
+}
+
+@keyframes TextDelayShow {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.miniAvatarContainer {
+  position: absolute;
+  height: 450px;
+  width: 450px;
+  bottom: 0;
+  left: 0;
+  //border-radius: 100% 0 0 100%;
+  overflow: hidden;
+}
+
+.miniAvatarImg {
+  max-height: 100%;
+  max-width: 100%;
+  position: absolute;
+  bottom: 0;
+  filter: drop-shadow(15px 0 3px rgba(0, 0, 0, 0.5));
+}
+
+.nameContainer {
+  position: absolute;
+  left: 2em;
+  top: -3.5em;
+}
+
+.outerName {
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: linear-gradient(150deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 35%, rgb(165, 212, 228) 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  z-index: 2;
+}
+
+.innerName {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+}
diff --git a/packages/webgal/src/Components/UI/Menu/Options/Display/Display.tsx b/packages/webgal/src/Components/UI/Menu/Options/Display/Display.tsx
index 6d4d6e1d2..bef041f67 100644
--- a/packages/webgal/src/Components/UI/Menu/Options/Display/Display.tsx
+++ b/packages/webgal/src/Components/UI/Menu/Options/Display/Display.tsx
@@ -58,7 +58,7 @@ export function Display() {
       </NormalOption>
       <NormalOption key="option2" title={t('textFont.title')}>
         <NormalButton
-          textList={t('textFont.options.siYuanSimSun', 'textFont.options.SimHei')}
+          textList={t('textFont.options.siYuanSimSun', 'textFont.options.SimHei', 'textFont.options.lxgw')}
           functionList={[
             () => {
               dispatch(setOptionData({ key: 'textboxFont', value: textFont.song }));
@@ -68,6 +68,10 @@ export function Display() {
               dispatch(setOptionData({ key: 'textboxFont', value: textFont.hei }));
               setStorage();
             },
+            () => {
+              dispatch(setOptionData({ key: 'textboxFont', value: textFont.lxgw }));
+              setStorage();
+            },
           ]}
           currentChecked={userDataState.optionData.textboxFont}
         />
diff --git a/packages/webgal/src/Components/UI/Menu/Options/System/System.tsx b/packages/webgal/src/Components/UI/Menu/Options/System/System.tsx
index 483c7f6dd..f1819a047 100644
--- a/packages/webgal/src/Components/UI/Menu/Options/System/System.tsx
+++ b/packages/webgal/src/Components/UI/Menu/Options/System/System.tsx
@@ -170,9 +170,9 @@ export function System() {
               currentChecked={2}
             />
           </NormalOption>
-          <NormalOption key="option4" title={t('about.title')}>
-            <NormalButton textList={[t('about.title')]} functionList={[toggleAbout]} currentChecked={3} />
-          </NormalOption>
+          <div className={styles.About_title_text} onClick={toggleAbout}>
+            <span className={styles.About_text}>{t('about.title')}</span>
+          </div>
         </>
       )}
     </div>
diff --git a/packages/webgal/src/Components/UI/Menu/Options/options.module.scss b/packages/webgal/src/Components/UI/Menu/Options/options.module.scss
index 87ded94fb..ed97b0a21 100644
--- a/packages/webgal/src/Components/UI/Menu/Options/options.module.scss
+++ b/packages/webgal/src/Components/UI/Menu/Options/options.module.scss
@@ -73,6 +73,24 @@
   padding: 0 1em 0 1em;
 }
 
+.About_title_text {
+  margin: 0.2em 1em 0.2em 1em;
+  padding: 0.2em 0.2em 0.2em 0.2em;
+  width: 100%;
+  animation: Elements_in ease-out 0.7s forwards;
+  cursor: pointer;
+}
+
+.About_text{
+  font-weight: bold;
+  color: transparent;
+  background: linear-gradient(to left, rgba(34, 125, 81, 0.65), rgba(81, 110, 65, 0.65));
+  -webkit-background-clip: text;
+  font-size: 135%;
+  text-decoration: underline;
+
+}
+
 @keyframes Elements_in {
   0% {
     opacity: 0;
diff --git a/packages/webgal/src/Components/themeInterface.ts b/packages/webgal/src/Components/themeInterface.ts
new file mode 100644
index 000000000..f3e8d8733
--- /dev/null
+++ b/packages/webgal/src/Components/themeInterface.ts
@@ -0,0 +1 @@
+export type IWebGalTextBoxTheme = 'standard' | 'imss';
diff --git a/packages/webgal/src/Core/Modules/backlog.ts b/packages/webgal/src/Core/Modules/backlog.ts
index 0605509d6..42e6281c2 100644
--- a/packages/webgal/src/Core/Modules/backlog.ts
+++ b/packages/webgal/src/Core/Modules/backlog.ts
@@ -1,7 +1,7 @@
 /**
  * 当前的backlog
  */
-import { IStageState } from '@/store/stageInterface';
+import { IEffect, IStageState } from '@/store/stageInterface';
 import { webgalStore } from '@/store/store';
 import { ISaveScene } from '@/store/userDataInterface';
 import cloneDeep from 'lodash/cloneDeep';
@@ -27,6 +27,11 @@ export class BacklogManager {
   public getBacklog() {
     return this.backlog;
   }
+
+  public editLastBacklogItemEffect(effects: IEffect[]) {
+    this.backlog[this.backlog.length - 1].currentStageState.effects = effects;
+  }
+
   public makeBacklogEmpty() {
     this.backlog.splice(0, this.backlog.length); // 清空backlog
   }
diff --git a/packages/webgal/src/Core/Modules/perform/performController.ts b/packages/webgal/src/Core/Modules/perform/performController.ts
index 780c13c0d..b26f55d9d 100644
--- a/packages/webgal/src/Core/Modules/perform/performController.ts
+++ b/packages/webgal/src/Core/Modules/perform/performController.ts
@@ -2,7 +2,7 @@ import { IPerform } from '@/Core/Modules/perform/performInterface';
 import { ISentence } from '@/Core/controller/scene/sceneInterface';
 import { webgalStore } from '@/store/store';
 import cloneDeep from 'lodash/cloneDeep';
-import { resetStageState } from '@/store/stageReducer';
+import { resetStageState, stageActions } from '@/store/stageReducer';
 import { nextSentence } from '@/Core/controller/gamePlay/nextSentence';
 import { IRunPerform } from '@/store/stageInterface';
 
@@ -24,10 +24,8 @@ export class PerformController {
     }
     // 同步演出状态
     if (syncPerformState) {
-      const stageState = webgalStore.getState().stage;
-      const newStageState = cloneDeep(stageState);
-      newStageState.PerformList.push({ id: perform.performName, isHoldOn: perform.isHoldOn, script: script });
-      webgalStore.dispatch(resetStageState(newStageState));
+      const performToAdd = { id: perform.performName, isHoldOn: perform.isHoldOn, script: script };
+      webgalStore.dispatch(stageActions.addPerform(performToAdd));
     }
 
     // 时间到后自动清理演出
@@ -76,16 +74,7 @@ export class PerformController {
   }
 
   public erasePerformFromState(name: string) {
-    const stageState = webgalStore.getState().stage;
-    const newStageState = cloneDeep(stageState);
-    for (let i = 0; i < newStageState.PerformList.length; i++) {
-      const e2: IRunPerform = newStageState.PerformList[i];
-      if (e2.id === name) {
-        newStageState.PerformList.splice(i, 1);
-        i--;
-      }
-    }
-    webgalStore.dispatch(resetStageState(newStageState));
+    webgalStore.dispatch(stageActions.removePerformByName(name));
   }
 
   public removeAllPerform() {
diff --git a/packages/webgal/src/Core/controller/gamePlay/scriptExecutor.ts b/packages/webgal/src/Core/controller/gamePlay/scriptExecutor.ts
index ea332604a..6e702bcb4 100644
--- a/packages/webgal/src/Core/controller/gamePlay/scriptExecutor.ts
+++ b/packages/webgal/src/Core/controller/gamePlay/scriptExecutor.ts
@@ -33,6 +33,36 @@ export const scriptExecutor = () => {
   }
   const currentScript: ISentence =
     WebGAL.sceneManager.sceneData.currentScene.sentenceList[WebGAL.sceneManager.sceneData.currentSentenceId];
+
+  const interpolationOneItem = (content: string): string => {
+    let retContent = content;
+    const contentExp = retContent.match(/(?<!\\)\{(.*?)\}/g);
+
+    if (contentExp !== null) {
+      contentExp.forEach((e) => {
+        const contentVarValue = getValueFromState(e.replace(/(?<!\\)\{(.*)\}/, '$1'));
+        retContent = retContent.replace(e, contentVarValue ? contentVarValue.toString() : e);
+      });
+    }
+    retContent = retContent.replace(/\\{/g, '{').replace(/\\}/g, '}');
+    return retContent;
+  };
+
+  /**
+   * Variable interpolation
+   */
+  const variableInterpolation = () => {
+    currentScript.content = interpolationOneItem(currentScript.content);
+
+    currentScript.args.forEach((arg) => {
+      if (arg.value && typeof arg.value === 'string') {
+        arg.value = interpolationOneItem(arg.value);
+      }
+    });
+  };
+
+  variableInterpolation();
+
   // 判断这个脚本要不要执行
   let runThis: number | boolean = true;
   let isHasWhenArg = false;
@@ -59,6 +89,7 @@ export const scriptExecutor = () => {
       .reduce((pre, curr) => pre + curr, '');
     runThis = strIf(valExp);
   }
+
   // 执行语句
   if (!runThis) {
     logger.warn('不满足条件，跳过本句！');
diff --git a/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts b/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts
index e1d46afdc..486964918 100644
--- a/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts
+++ b/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts
@@ -1,12 +1,14 @@
 import * as PIXI from 'pixi.js';
 import { v4 as uuid } from 'uuid';
 import { webgalStore } from '@/store/store';
-import { setStage } from '@/store/stageReducer';
+import { setStage, stageActions } from '@/store/stageReducer';
 import cloneDeep from 'lodash/cloneDeep';
 import { IEffect, IFigureAssociatedAnimation } from '@/store/stageInterface';
 import { logger } from '@/Core/util/etc/logger';
 import { isIOS } from '@/Core/initializeScript';
 import { WebGALPixiContainer } from '@/Core/controller/stage/pixi/WebGALPixiContainer';
+import { WebGAL } from '@/Core/WebGAL';
+// import { figureCash } from '@/Core/gameScripts/function/conentsCash'; // 如果要使用 Live2D，取消这里的注释
 // import { Live2DModel, SoundManager } from 'pixi-live2d-display'; // 如果要使用 Live2D，取消这里的注释
 
 export interface IAnimationObject {
@@ -36,6 +38,12 @@ export interface IStageObject {
   sourceUrl: string;
 }
 
+export interface ILive2DRecord {
+  target: string;
+  motion: string;
+  expression: string;
+}
+
 // export interface IRegisterTickerOpr {
 //   tickerGeneratorFn: (targetKey: string, duration: number) => PIXI.TickerCallback<number>;
 //   key: string;
@@ -53,6 +61,7 @@ export default class PixiStage {
   public currentApp: PIXI.Application | null = null;
   public readonly effectsContainer: PIXI.Container;
   public frameDuration = 16.67;
+  public notUpdateBacklogEffects = false;
   private readonly figureContainer: PIXI.Container;
   private figureObjects: Array<IStageObject> = [];
   private readonly backgroundContainer: PIXI.Container;
@@ -62,6 +71,7 @@ export default class PixiStage {
   private stageAnimations: Array<IStageAnimationObject> = [];
   private assetLoader = new PIXI.Loader();
   private loadQueue: { url: string; callback: () => void }[] = [];
+  private live2dFigureRecorder: Array<ILive2DRecord> = [];
 
   // 锁定变换对象（对象可能正在执行动画，不能应用变换）
   private lockTransformTarget: Array<string> = [];
@@ -229,21 +239,12 @@ export default class PixiStage {
             blur: target.pixiContainer.blur,
             ...webgalFilters,
           };
-          const prevEffects = webgalStore.getState().stage.effects;
-          const newEffects = cloneDeep(prevEffects);
           let effect: IEffect = {
             target: thisTickerFunc.targetKey,
             transform: targetTransform,
           };
-          const index = newEffects.findIndex((e) => e.target === thisTickerFunc.targetKey);
-          if (index >= 0) {
-            effect = newEffects[index];
-            effect.transform = targetTransform;
-            newEffects[index] = effect;
-          } else {
-            newEffects.push(effect);
-          }
-          updateCurrentEffects(newEffects);
+          webgalStore.dispatch(stageActions.updateEffect(effect));
+          // if (!this.notUpdateBacklogEffects) updateCurrentBacklogEffects(webgalStore.getState().stage.effects);
         }
       }
       this.stageAnimations.splice(index, 1);
@@ -527,12 +528,17 @@ export default class PixiStage {
   //
   //   // 挂载
   //   this.figureContainer.addChild(thisFigureContainer);
-  //   this.figureObjects.push({ uuid: uuid(), key: key, pixiContainer: thisFigureContainer, sourceUrl: jsonPath });
+  //   this.figureObjects.push({
+  //     uuid: uuid(),
+  //     key: key,
+  //     pixiContainer: thisFigureContainer,
+  //     sourceUrl: jsonPath,
+  //   });
   //
   //   const setup = () => {
   //     if (thisFigureContainer) {
   //       (async function () {
-  //         const models = await Promise.all([Live2DModel.from(jsonPath)]);
+  //         const models = await Promise.all([Live2DModel.from(jsonPath, { autoInteract: false })]);
   //
   //         models.forEach((model) => {
   //           const scaleX = stageWidth / model.width;
@@ -582,6 +588,41 @@ export default class PixiStage {
   //   }
   // }
 
+  public changeModelMotionByKey(key: string, motion: string) {
+    // logger.debug(`Applying motion ${motion} to ${key}`);
+    const target = this.figureObjects.find((e) => e.key === key);
+    const figureRecordTarget = this.live2dFigureRecorder.find((e) => e.target === key);
+    if (target && figureRecordTarget?.motion !== motion) {
+      const container = target.pixiContainer;
+      const children = container.children;
+      for (const model of children) {
+        let category_name = motion;
+        let animation_index = 0;
+        let priority_number = 3; // @ts-ignore
+        const internalModel = model?.internalModel ?? undefined; // 安全访问
+        internalModel?.motionManager?.stopAllMotions?.();
+        // @ts-ignore
+        model.motion(category_name, animation_index, priority_number);
+      }
+      this.updateL2dMotionByKey(key, motion);
+    }
+  }
+
+  public changeModelExpressionByKey(key: string, expression: string) {
+    // logger.debug(`Applying expression ${expression} to ${key}`);
+    const target = this.figureObjects.find((e) => e.key === key);
+    const figureRecordTarget = this.live2dFigureRecorder.find((e) => e.target === key);
+    if (target && figureRecordTarget?.expression !== expression) {
+      const container = target.pixiContainer;
+      const children = container.children;
+      for (const model of children) {
+        // @ts-ignore
+        model.expression(expression);
+      }
+      this.updateL2dExpressionByKey(key, expression);
+    }
+  }
+
   /**
    * 根据 key 获取舞台上的对象
    * @param key
@@ -633,6 +674,24 @@ export default class PixiStage {
     PIXI.utils.clearTextureCache();
   }
 
+  private updateL2dMotionByKey(target: string, motion: string) {
+    const figureTargetIndex = this.live2dFigureRecorder.findIndex((e) => e.target === target);
+    if (figureTargetIndex >= 0) {
+      this.live2dFigureRecorder[figureTargetIndex].motion = motion;
+    } else {
+      this.live2dFigureRecorder.push({ target, motion, expression: '' });
+    }
+  }
+
+  private updateL2dExpressionByKey(target: string, expression: string) {
+    const figureTargetIndex = this.live2dFigureRecorder.findIndex((e) => e.target === target);
+    if (figureTargetIndex >= 0) {
+      this.live2dFigureRecorder[figureTargetIndex].expression = expression;
+    } else {
+      this.live2dFigureRecorder.push({ target, motion: '', expression });
+    }
+  }
+
   private loadAsset(url: string, callback: () => void) {
     /**
      * Loader 复用疑似有问题，转而采用先前的单独方式
@@ -685,24 +744,13 @@ export default class PixiStage {
   }
 }
 
-export function updateCurrentEffects(newEffects: IEffect[]) {
-  // /**
-  //  * 更新当前 backlog 条目的 effects 记录
-  //  */
-  // if (!notUpdateBacklogEffects)
-  //   setTimeout(() => {
-  //     const backlog = RUNTIME_CURRENT_BACKLOG[RUNTIME_CURRENT_BACKLOG.length - 1];
-  //     if (backlog) {
-  //       const newBacklogItem = cloneDeep(backlog);
-  //       const backlog_effects = newBacklogItem.currentStageState.effects;
-  //       while (backlog_effects.length > 0) {
-  //         backlog_effects.pop();
-  //       }
-  //       backlog_effects.push(...newEffects);
-  //       RUNTIME_CURRENT_BACKLOG.pop();
-  //       RUNTIME_CURRENT_BACKLOG.push(newBacklogItem);
-  //     }
-  //   }, 50);
+function updateCurrentBacklogEffects(newEffects: IEffect[]) {
+  /**
+   * 更新当前 backlog 条目的 effects 记录
+   */
+  setTimeout(() => {
+    WebGAL.backlogManager.editLastBacklogItemEffect(cloneDeep(newEffects));
+  }, 50);
 
   webgalStore.dispatch(setStage({ key: 'effects', value: newEffects }));
 }
diff --git a/packages/webgal/src/Core/controller/stage/pixi/animations/timeline.ts b/packages/webgal/src/Core/controller/stage/pixi/animations/timeline.ts
index 3d024eaf4..c5c830edc 100644
--- a/packages/webgal/src/Core/controller/stage/pixi/animations/timeline.ts
+++ b/packages/webgal/src/Core/controller/stage/pixi/animations/timeline.ts
@@ -1,6 +1,8 @@
 import { ITransform } from '@/store/stageInterface';
 import { gsap } from 'gsap';
 import { WebGAL } from '@/Core/WebGAL';
+import { webgalStore } from '@/store/store';
+import { stageActions } from '@/store/stageReducer';
 
 /**
  * 动画创建模板
@@ -48,6 +50,9 @@ export function generateTimelineObj(
     }
   }
 
+  const { duration: sliceDuration, ...endState } = getEndStateEffect();
+  webgalStore.dispatch(stageActions.updateEffect({ target: targetKey, transform: endState }));
+
   /**
    * 在此书写为动画设置初态的操作
    */
@@ -82,6 +87,10 @@ export function generateTimelineObj(
     return rest;
   }
 
+  function getEndStateEffect() {
+    return timeline[timeline.length - 1];
+  }
+
   return {
     setStartState,
     setEndState,
diff --git a/packages/webgal/src/Core/gameScripts/changeBg.ts b/packages/webgal/src/Core/gameScripts/changeBg.ts
index ba774253f..cf41292a5 100644
--- a/packages/webgal/src/Core/gameScripts/changeBg.ts
+++ b/packages/webgal/src/Core/gameScripts/changeBg.ts
@@ -3,14 +3,13 @@ import { IPerform } from '@/Core/Modules/perform/performInterface';
 // import {getRandomPerformName} from '../../../util/getRandomPerformName';
 import styles from '../../Components/Stage/stage.module.scss';
 import { webgalStore } from '@/store/store';
-import { setStage } from '@/store/stageReducer';
+import { setStage, stageActions } from '@/store/stageReducer';
 import { getSentenceArgByKey } from '@/Core/util/getSentenceArg';
 import { unlockCgInUserData } from '@/store/userDataReducer';
 import { logger } from '@/Core/util/etc/logger';
 import { ITransform } from '@/store/stageInterface';
 import { generateTransformAnimationObj } from '@/Core/gameScripts/function/generateTransformAnimationObj';
 import { IUserAnimation } from '@/Core/Modules/animations';
-import { updateCurrentEffects } from '../controller/stage/pixi/PixiController';
 import cloneDeep from 'lodash/cloneDeep';
 import { getAnimateDuration } from '@/Core/Modules/animationFunctions';
 import { WebGAL } from '@/Core/WebGAL';
@@ -39,13 +38,7 @@ export const changeBg = (sentence: ISentence): IPerform => {
   /**
    * 删掉相关 Effects，因为已经移除了
    */
-  const prevEffects = webgalStore.getState().stage.effects;
-  const newEffects = cloneDeep(prevEffects);
-  const index = newEffects.findIndex((e) => e.target === `bg-main`);
-  if (index >= 0) {
-    newEffects.splice(index, 1);
-  }
-  updateCurrentEffects(newEffects);
+  dispatch(stageActions.removeEffectByTargetId(`bg-main`));
 
   // 处理 transform 和 默认 transform
   const transformString = getSentenceArgByKey(sentence, 'transform');
diff --git a/packages/webgal/src/Core/gameScripts/changeFigure.ts b/packages/webgal/src/Core/gameScripts/changeFigure.ts
index 443f8cbbd..5b2911b17 100644
--- a/packages/webgal/src/Core/gameScripts/changeFigure.ts
+++ b/packages/webgal/src/Core/gameScripts/changeFigure.ts
@@ -1,11 +1,10 @@
 import { ISentence } from '@/Core/controller/scene/sceneInterface';
 import { IPerform } from '@/Core/Modules/perform/performInterface';
 import { webgalStore } from '@/store/store';
-import { setStage } from '@/store/stageReducer';
-import { updateCurrentEffects } from '../controller/stage/pixi/PixiController';
+import { setStage, stageActions } from '@/store/stageReducer';
 import cloneDeep from 'lodash/cloneDeep';
 import { getSentenceArgByKey } from '@/Core/util/getSentenceArg';
-import { IStageState, ITransform } from '@/store/stageInterface';
+import { IFreeFigure, IStageState, ITransform } from '@/store/stageInterface';
 import { IUserAnimation } from '@/Core/Modules/animations';
 import { generateTransformAnimationObj } from '@/Core/gameScripts/function/generateTransformAnimationObj';
 import { assetSetter, fileType } from '@/Core/util/gameAssetsAccess/assetSetter';
@@ -16,12 +15,14 @@ import { WebGAL } from '@/Core/WebGAL';
  * 更改立绘
  * @param sentence 语句
  */
-export const changeFigure = (sentence: ISentence): IPerform => {
+// eslint-disable-next-line complexity
+export function changeFigure(sentence: ISentence): IPerform {
   // 根据参数设置指定位置
   let pos: 'center' | 'left' | 'right' = 'center';
   let content = sentence.content;
   let isFreeFigure = false;
   let motion = '';
+  let expression = '';
   let key = '';
   let duration = 500;
   let mouthOpen = '';
@@ -62,6 +63,9 @@ export const changeFigure = (sentence: ISentence): IPerform => {
       case 'motion':
         motion = e.value.toString();
         break;
+      case 'expression':
+        expression = e.value.toString();
+        break;
       case 'mouthOpen':
         mouthOpen = e.value.toString();
         mouthOpen = assetSetter(mouthOpen, fileType.figure);
@@ -114,15 +118,42 @@ export const changeFigure = (sentence: ISentence): IPerform => {
   dispatch(setStage({ key: 'figureAssociatedAnimation', value: filteredFigureAssociatedAnimation }));
 
   /**
-   * 删掉相关 Effects，因为已经移除了
+   * 如果 url 没变，不移除
    */
-  const prevEffects = webgalStore.getState().stage.effects;
-  const newEffects = cloneDeep(prevEffects);
-  const index = newEffects.findIndex((e) => e.target === `fig-${pos}` || e.target === `${key}`);
-  if (index >= 0) {
-    newEffects.splice(index, 1);
+  let isRemoveEffects = true;
+  if (key !== '') {
+    const figWithKey = webgalStore.getState().stage.freeFigure.find((e) => e.key === key);
+    if (figWithKey) {
+      if (figWithKey.name === sentence.content) {
+        isRemoveEffects = false;
+      }
+    }
+  } else {
+    if (pos === 'center') {
+      if (webgalStore.getState().stage.figName === sentence.content) {
+        isRemoveEffects = false;
+      }
+    }
+    if (pos === 'left') {
+      if (webgalStore.getState().stage.figNameLeft === sentence.content) {
+        isRemoveEffects = false;
+      }
+    }
+    if (pos === 'right') {
+      if (webgalStore.getState().stage.figNameRight === sentence.content) {
+        isRemoveEffects = false;
+      }
+    }
+  }
+  /**
+   * 处理 Effects
+   */
+  if (isRemoveEffects) {
+    const deleteKey = `fig-${pos}`;
+    const deleteKey2 = `${key}`;
+    webgalStore.dispatch(stageActions.removeEffectByTargetId(deleteKey));
+    webgalStore.dispatch(stageActions.removeEffectByTargetId(deleteKey2));
   }
-  updateCurrentEffects(newEffects);
   const setAnimationNames = (key: string, sentence: ISentence) => {
     // 处理 transform 和 默认 transform
     const transformString = getSentenceArgByKey(sentence, 'transform');
@@ -182,24 +213,22 @@ export const changeFigure = (sentence: ISentence): IPerform => {
     /**
      * 重设
      */
-    const index = currentFreeFigures.findIndex((figure) => figure.key === key);
-    const newFreeFigure = cloneDeep(currentFreeFigures);
-    if (index >= 0) {
-      newFreeFigure[index].basePosition = pos;
-      newFreeFigure[index].name = content;
-    } else {
-      // 新加
-      if (content !== '') newFreeFigure.push({ key, name: content, basePosition: pos });
-    }
+    const freeFigureItem: IFreeFigure = { key, name: content, basePosition: pos };
     setAnimationNames(key, sentence);
-    dispatch(setStage({ key: 'freeFigure', value: newFreeFigure }));
+    if (motion) {
+      dispatch(stageActions.setLive2dMotion({ target: key, motion }));
+    }
+    if (expression) {
+      dispatch(stageActions.setLive2dExpression({ target: 'live2dExpression', expression }));
+    }
+    dispatch(stageActions.setFreeFigureByKey(freeFigureItem));
   } else {
     const positionMap = {
       center: 'fig-center',
       left: 'fig-left',
       right: 'fig-right',
     };
-    const dispatchMap = {
+    const dispatchMap: Record<string, keyof IStageState> = {
       center: 'figName',
       left: 'figNameLeft',
       right: 'figNameRight',
@@ -207,21 +236,15 @@ export const changeFigure = (sentence: ISentence): IPerform => {
 
     key = positionMap[pos];
     setAnimationNames(key, sentence);
-    dispatch(setStage({ key: dispatchMap[pos] as keyof IStageState, value: content }));
-  }
-  if (motion) {
-    const index = webgalStore.getState().stage.live2dMotion.findIndex((e) => e.target === key);
-    let motionArr = webgalStore.getState().stage.live2dMotion;
-    if (index <= 0) {
-      // 应用一个新的 motion
-      motionArr = [...webgalStore.getState().stage.live2dMotion, { target: key, motion }];
-    } else {
-      motionArr[index].motion = motion;
-      // deep clone
-      motionArr = [...motionArr];
+    if (motion) {
+      dispatch(stageActions.setLive2dMotion({ target: key, motion }));
     }
-    dispatch(setStage({ key: 'live2dMotion', value: motionArr }));
+    if (expression) {
+      dispatch(stageActions.setLive2dExpression({ target: key, expression }));
+    }
+    dispatch(setStage({ key: dispatchMap[pos], value: content }));
   }
+
   return {
     performName: 'none',
     duration,
@@ -231,4 +254,4 @@ export const changeFigure = (sentence: ISentence): IPerform => {
     blockingAuto: () => false,
     stopTimeout: undefined, // 暂时不用，后面会交给自动清除
   };
-};
+}
diff --git a/packages/webgal/src/Core/gameScripts/pixiInit.ts b/packages/webgal/src/Core/gameScripts/pixiInit.ts
index ad7395b78..c7b7d2856 100644
--- a/packages/webgal/src/Core/gameScripts/pixiInit.ts
+++ b/packages/webgal/src/Core/gameScripts/pixiInit.ts
@@ -2,7 +2,7 @@ import { commandType, ISentence } from '@/Core/controller/scene/sceneInterface';
 import { IPerform } from '@/Core/Modules/perform/performInterface';
 import { logger } from '@/Core/util/etc/logger';
 import { webgalStore } from '@/store/store';
-import { resetStageState } from '@/store/stageReducer';
+import { resetStageState, stageActions } from '@/store/stageReducer';
 import cloneDeep from 'lodash/cloneDeep';
 
 import { WebGAL } from '@/Core/WebGAL';
@@ -31,16 +31,7 @@ export const pixiInit = (sentence: ISentence): IPerform => {
       /**
        * 从状态表里清除演出
        */
-      const stageState = webgalStore.getState().stage;
-      const newStageState = cloneDeep(stageState);
-      for (let i = 0; i < newStageState.PerformList.length; i++) {
-        const e2: IRunPerform = newStageState.PerformList[i];
-        if (e2.script.command === commandType.pixi) {
-          newStageState.PerformList.splice(i, 1);
-          i--;
-        }
-      }
-      webgalStore.dispatch(resetStageState(newStageState));
+      webgalStore.dispatch(stageActions.removeAllPixiPerforms());
     }
   });
   return {
diff --git a/packages/webgal/src/Core/gameScripts/playVideo.tsx b/packages/webgal/src/Core/gameScripts/playVideo.tsx
index 402d87790..8937a87f0 100644
--- a/packages/webgal/src/Core/gameScripts/playVideo.tsx
+++ b/packages/webgal/src/Core/gameScripts/playVideo.tsx
@@ -6,15 +6,24 @@ import styles from '../../Components/Stage/FullScreenPerform/fullScreenPerform.m
 import { webgalStore } from '@/store/store';
 import { nextSentence } from '@/Core/controller/gamePlay/nextSentence';
 import { getRandomPerformName, PerformController } from '@/Core/Modules/perform/performController';
-
+import { getSentenceArgByKey } from '@/Core/util/getSentenceArg';
 import { WebGAL } from '@/Core/WebGAL';
-
 /**
- * 播放一段视频
- * @param sentence
+ * 播放一段视频 * @param sentence
  */
 export const playVideo = (sentence: ISentence): IPerform => {
+  const userDataState = webgalStore.getState().userData;
+  const mainVol = userDataState.optionData.volumeMain;
+  const vocalVol = mainVol * 0.01 * userDataState.optionData.vocalVolume * 0.01;
+  const bgmVol = mainVol * 0.01 * userDataState.optionData.bgmVolume * 0.01;
   const performInitName: string = getRandomPerformName();
+
+  let blockingNext = getSentenceArgByKey(sentence, 'skipOff');
+  let blockingNextFlag = false;
+  if (blockingNext) {
+    blockingNextFlag = true;
+  }
+
   ReactDOM.render(
     <div className={styles.videoContainer}>
       <video className={styles.fullScreen_video} id="playVideoElement" src={sentence.content} autoPlay={true} />
@@ -27,7 +36,7 @@ export const playVideo = (sentence: ISentence): IPerform => {
     duration: 0,
     isHoldOn: false,
     stopFunction: () => {},
-    blockingNext: () => false,
+    blockingNext: () => blockingNextFlag,
     blockingAuto: () => true,
     stopTimeout: undefined, // 暂时不用，后面会交给自动清除
     arrangePerformPromise: new Promise<IPerform>((resolve) => {
@@ -38,6 +47,24 @@ export const playVideo = (sentence: ISentence): IPerform => {
         let VocalControl: any = document.getElementById('playVideoElement');
         if (VocalControl !== null) {
           VocalControl.currentTime = 0;
+          VocalControl.volume = bgmVol;
+          const endPerform = () => {
+            for (const e of WebGAL.gameplay.performController.performList) {
+              if (e.performName === performInitName) {
+                isOver = true;
+                e.stopFunction();
+                WebGAL.gameplay.performController.unmountPerform(e.performName);
+                nextSentence();
+              }
+            }
+          };
+          const skipVideo = () => {
+            endPerform();
+          };
+          // 双击可跳过视频
+          WebGAL.eventBus.on('fullscreen-dbclick', () => {
+            skipVideo();
+          });
           // 播放并作为一个特别演出加入
           const perform = {
             performName: performInitName,
@@ -52,10 +79,6 @@ export const playVideo = (sentence: ISentence): IPerform => {
               /**
                * 恢复音量
                */
-              const userDataState = webgalStore.getState().userData;
-              const mainVol = userDataState.optionData.volumeMain;
-              const vocalVol = mainVol * 0.01 * userDataState.optionData.vocalVolume * 0.01;
-              const bgmVol = mainVol * 0.01 * userDataState.optionData.bgmVolume * 0.01;
               const bgmElement: any = document.getElementById('currentBgm');
               if (bgmElement) {
                 bgmElement.volume = bgmVol.toString();
@@ -66,7 +89,7 @@ export const playVideo = (sentence: ISentence): IPerform => {
               }
               ReactDOM.render(<div />, document.getElementById('videoContainer'));
             },
-            blockingNext: () => false,
+            blockingNext: () => blockingNextFlag,
             blockingAuto: () => {
               return !isOver;
             },
@@ -92,14 +115,7 @@ export const playVideo = (sentence: ISentence): IPerform => {
             VocalControl?.play();
           };
           VocalControl.onended = () => {
-            for (const e of WebGAL.gameplay.performController.performList) {
-              if (e.performName === performInitName) {
-                isOver = true;
-                e.stopFunction();
-                WebGAL.gameplay.performController.unmountPerform(e.performName);
-                nextSentence();
-              }
-            }
+            endPerform();
           };
         }
       }, 1);
diff --git a/packages/webgal/src/Core/gameScripts/say.ts b/packages/webgal/src/Core/gameScripts/say.ts
index 92f1c7019..eb2171ac3 100644
--- a/packages/webgal/src/Core/gameScripts/say.ts
+++ b/packages/webgal/src/Core/gameScripts/say.ts
@@ -1,7 +1,5 @@
 import { ISentence } from '@/Core/controller/scene/sceneInterface';
 import { IPerform } from '@/Core/Modules/perform/performInterface';
-import styles1 from '../../Components/Stage/TextBox/textbox.module.scss';
-import styles2 from '../../Components/Stage/TextBox/textboxFilm.module.scss';
 import { playVocal } from './playVocal';
 import { webgalStore } from '@/store/store';
 import { setStage } from '@/store/stageReducer';
@@ -18,7 +16,6 @@ import { WebGAL } from '@/Core/WebGAL';
  */
 export const say = (sentence: ISentence): IPerform => {
   const stageState = webgalStore.getState().stage;
-  const styles = stageState.enableFilm === '' ? styles1 : styles2;
   const userDataState = webgalStore.getState().userData;
   const dispatch = webgalStore.dispatch;
   let dialogKey = Math.random().toString(); // 生成一个随机的key
@@ -96,11 +93,7 @@ export const say = (sentence: ISentence): IPerform => {
     duration: sentenceDelay + endDelay,
     isHoldOn: false,
     stopFunction: () => {
-      const textElements = document.querySelectorAll('.' + styles.TextBox_textElement_start);
-      const textArray = [...textElements];
-      textArray.forEach((e) => {
-        e.className = styles.TextBox_textElement_Settled;
-      });
+      WebGAL.eventBus.emit('text-settle');
     },
     blockingNext: () => false,
     blockingAuto: () => true,
diff --git a/packages/webgal/src/Core/gameScripts/setTransition.ts b/packages/webgal/src/Core/gameScripts/setTransition.ts
index e5d2c238f..a4a348b6c 100644
--- a/packages/webgal/src/Core/gameScripts/setTransition.ts
+++ b/packages/webgal/src/Core/gameScripts/setTransition.ts
@@ -2,7 +2,6 @@ import { ISentence } from '@/Core/controller/scene/sceneInterface';
 import { IPerform } from '@/Core/Modules/perform/performInterface';
 import { webgalStore } from '@/store/store';
 import cloneDeep from 'lodash/cloneDeep';
-import { updateCurrentEffects } from '@/Core/controller/stage/pixi/PixiController';
 import { getSentenceArgByKey } from '@/Core/util/getSentenceArg';
 import { setStage } from '@/store/stageReducer';
 import { WebGAL } from '@/Core/WebGAL';
diff --git a/packages/webgal/src/Core/gameScripts/showVars.ts b/packages/webgal/src/Core/gameScripts/showVars.ts
index 89c53412a..72b5e5ed7 100644
--- a/packages/webgal/src/Core/gameScripts/showVars.ts
+++ b/packages/webgal/src/Core/gameScripts/showVars.ts
@@ -1,11 +1,11 @@
 import { ISentence } from '@/Core/controller/scene/sceneInterface';
 import { IPerform } from '@/Core/Modules/perform/performInterface';
-import styles from '../../Components/Stage/TextBox/textbox.module.scss';
 import { webgalStore } from '@/store/store';
 import { setStage } from '@/store/stageReducer';
 import { logger } from '@/Core/util/etc/logger';
 import { getRandomPerformName } from '@/Core/Modules/perform/performController';
 import { PERFORM_CONFIG } from '@/Core/config/config';
+import { WebGAL } from '@/Core/WebGAL';
 
 /**
  * 进行普通对话的显示
@@ -21,11 +21,7 @@ export const showVars = (sentence: ISentence): IPerform => {
   dispatch(setStage({ key: 'showName', value: '展示变量' }));
   logger.debug('展示变量：', stageState.GameVar);
   setTimeout(() => {
-    const textElements = document.querySelectorAll('.' + styles.TextBox_textElement_start);
-    const textArray = [...textElements];
-    textArray.forEach((e) => {
-      e.className = styles.TextBox_textElement;
-    });
+    WebGAL.eventBus.emit('text-settle');
   }, 0);
   const performInitName: string = getRandomPerformName();
   const textDelay = PERFORM_CONFIG.textInitialDelay - 20 * userDataState.optionData.textSpeed;
@@ -35,11 +31,7 @@ export const showVars = (sentence: ISentence): IPerform => {
     duration: sentence.content.length * textDelay + endDelay,
     isHoldOn: false,
     stopFunction: () => {
-      const textElements = document.querySelectorAll('.' + styles.TextBox_textElement);
-      const textArray = [...textElements];
-      textArray.forEach((e) => {
-        e.className = styles.TextBox_textElement_Settled;
-      });
+      WebGAL.eventBus.emit('text-settle');
     },
     blockingNext: () => false,
     blockingAuto: () => true,
diff --git a/packages/webgal/src/Core/util/coreInitialFunction/infoFetcher.ts b/packages/webgal/src/Core/util/coreInitialFunction/infoFetcher.ts
index affa1136e..e5bfdb9e0 100644
--- a/packages/webgal/src/Core/util/coreInitialFunction/infoFetcher.ts
+++ b/packages/webgal/src/Core/util/coreInitialFunction/infoFetcher.ts
@@ -3,7 +3,7 @@ import { logger } from '../etc/logger';
 import { assetSetter, fileType } from '../gameAssetsAccess/assetSetter';
 import { getStorage } from '../../controller/storage/storageController';
 import { webgalStore } from '@/store/store';
-import { setGuiAsset, setLogoImage } from '@/store/GUIReducer';
+import { setGuiAsset, setLogoImage, setThemeConfigItem } from '@/store/GUIReducer';
 import { setEbg } from '@/Core/util/setEbg';
 import { setLogo } from '@/Core/util/setLogo';
 import { initKey } from '@/Core/controller/storage/fastSaveLoad';
@@ -62,6 +62,10 @@ export const infoFetcher = (url: string) => {
             getStorage();
             break;
           }
+
+          case 'Textbox_theme': {
+            dispatch(setThemeConfigItem({ key: 'textbox', value: args[0] }));
+          }
         }
       });
     }
diff --git a/packages/webgal/src/Core/util/syncWithEditor/syncWithOrigine.ts b/packages/webgal/src/Core/util/syncWithEditor/syncWithOrigine.ts
index 6871ebcee..3989e8ad7 100644
--- a/packages/webgal/src/Core/util/syncWithEditor/syncWithOrigine.ts
+++ b/packages/webgal/src/Core/util/syncWithEditor/syncWithOrigine.ts
@@ -33,7 +33,7 @@ export function syncFast(sentenceId: number, currentSceneName: string) {
     WebGAL.sceneManager.sceneData.currentScene.sceneName === currentSceneName
   ) {
     nextSentence();
-    setTimeout(() => syncFast(sentenceId, currentSceneName), 2);
+    setTimeout(() => syncFast(sentenceId, currentSceneName), 50);
   } else {
     WebGAL.gameplay.isFast = false;
   }
diff --git a/packages/webgal/src/Core/util/syncWithEditor/webSocketFunc.ts b/packages/webgal/src/Core/util/syncWithEditor/webSocketFunc.ts
index fa75eaf35..0539d52a3 100644
--- a/packages/webgal/src/Core/util/syncWithEditor/webSocketFunc.ts
+++ b/packages/webgal/src/Core/util/syncWithEditor/webSocketFunc.ts
@@ -28,13 +28,13 @@ export const webSocketFunc = () => {
         stageSyncMsg: webgalStore.getState().stage,
       };
       socket.send(JSON.stringify(message));
-      logger.debug('传送信息', message);
+      // logger.debug('传送信息', message);
       setTimeout(sendStageSyncMessage, 1000);
     }
     sendStageSyncMessage();
   };
   socket.onmessage = (e) => {
-    logger.info('收到信息', e.data);
+    // logger.info('收到信息', e.data);
     const str: string = e.data;
     const message: IDebugMessage = JSON.parse(str);
     if (message.command === DebugCommand.JUMP) {
diff --git a/packages/webgal/src/config/info.ts b/packages/webgal/src/config/info.ts
index d7d4afe20..03494ee68 100644
--- a/packages/webgal/src/config/info.ts
+++ b/packages/webgal/src/config/info.ts
@@ -1,5 +1,5 @@
 export const __INFO = {
-  version: 'WebGAL 4.4.5.3',
+  version: 'WebGAL 4.4.6',
   contributors: [
     { username: 'Mahiru', link: 'https://github.com/MakinoharaShoko' },
     { username: 'Hoshinokinya', link: 'https://github.com/hshqwq' },
diff --git a/packages/webgal/src/hooks/useFontFamily.ts b/packages/webgal/src/hooks/useFontFamily.ts
index 5d8a90370..53544e044 100644
--- a/packages/webgal/src/hooks/useFontFamily.ts
+++ b/packages/webgal/src/hooks/useFontFamily.ts
@@ -1,12 +1,17 @@
 import { useSelector } from 'react-redux';
 import { RootState } from '@/store/store';
 import { textFont } from '@/store/userDataInterface';
+import { match } from '@/Core/util/match';
 
 export function useFontFamily() {
   const fontFamily = useSelector((state: RootState) => state.userData.optionData.textboxFont);
 
   function getFont() {
-    return fontFamily === textFont.song ? '"思源宋体", serif' : '"WebgalUI", serif';
+    return match(fontFamily)
+      ._(textFont.song, () => '"思源宋体", serif')
+      ._(textFont.lxgw, () => '"LXGW", serif')
+      ._(textFont.hei, () => '"WebgalUI", serif')
+      .default(() => '"WebgalUI", serif');
   }
 
   return getFont();
diff --git a/packages/webgal/src/index.css b/packages/webgal/src/index.css
index 97dd33ac8..5c2a936d0 100644
--- a/packages/webgal/src/index.css
+++ b/packages/webgal/src/index.css
@@ -3,6 +3,12 @@
 @font-face {
   font-family: "思源宋体";
   /*noinspection CssUnknownTarget*/
+  src: url("assets/fonts/SourceHanSerifCN-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "LXGW";
+  /*noinspection CssUnknownTarget*/
   src: url("assets/fonts/LXGWWenKai-Regular.ttf") format("truetype");
 }
 
diff --git a/packages/webgal/src/store/GUIReducer.ts b/packages/webgal/src/store/GUIReducer.ts
index 37143ab88..0c2a60354 100644
--- a/packages/webgal/src/store/GUIReducer.ts
+++ b/packages/webgal/src/store/GUIReducer.ts
@@ -3,8 +3,9 @@
  * @author Mahiru
  */
 import { getStorage } from '@/Core/controller/storage/storageController';
-import { GuiAsset, IGuiState, MenuPanelTag, setAssetPayload, setVisibilityPayload } from '@/store/guiInterface';
+import { GuiAsset, IGuiState, ITheme, MenuPanelTag, setAssetPayload, setVisibilityPayload } from '@/store/guiInterface';
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { key } from 'localforage';
 
 /**
  * 初始GUI状态表
@@ -23,6 +24,9 @@ const initState: IGuiState = {
   showGlobalDialog: false,
   showPanicOverlay: false,
   isEnterGame: false,
+  theme: {
+    textbox: 'standard',
+  },
 };
 
 /**
@@ -63,10 +67,13 @@ const GUISlice = createSlice({
     setLogoImage: (state, action: PayloadAction<string[]>) => {
       state.logoImage = [...action.payload];
     },
+    setThemeConfigItem: (state, action: PayloadAction<{ key: keyof ITheme; value: string }>) => {
+      state.theme[action.payload.key] = action.payload.value as any;
+    },
   },
 });
 
-export const { setVisibility, setMenuPanelTag, setGuiAsset, setLogoImage } = GUISlice.actions;
+export const { setThemeConfigItem, setVisibility, setMenuPanelTag, setGuiAsset, setLogoImage } = GUISlice.actions;
 export default GUISlice.reducer;
 
 // export function GuiStateStore(): GuiStore {
diff --git a/packages/webgal/src/store/guiInterface.ts b/packages/webgal/src/store/guiInterface.ts
index 8805e9114..a8f877c35 100644
--- a/packages/webgal/src/store/guiInterface.ts
+++ b/packages/webgal/src/store/guiInterface.ts
@@ -1,3 +1,5 @@
+import { IWebGalTextBoxTheme } from '@/Components/themeInterface';
+
 /**
  * 当前Menu页面显示的Tag
  */
@@ -7,6 +9,10 @@ export enum MenuPanelTag {
   Option, // “设置”选项卡
 }
 
+export interface ITheme {
+  textbox: IWebGalTextBoxTheme;
+}
+
 /**
  * @interface IGuiState GUI状态接口
  */
@@ -24,11 +30,12 @@ export interface IGuiState {
   showGlobalDialog: boolean;
   showPanicOverlay: boolean;
   isEnterGame: boolean;
+  theme: ITheme;
 }
 
 export type componentsVisibility = Pick<
   IGuiState,
-  Exclude<keyof IGuiState, 'currentMenuTag' | 'titleBg' | 'titleBgm' | 'logoImage'>
+  Exclude<keyof IGuiState, 'currentMenuTag' | 'titleBg' | 'titleBgm' | 'logoImage' | 'theme'>
 >;
 // 标题资源
 export type GuiAsset = Pick<IGuiState, 'titleBgm' | 'titleBg'>;
diff --git a/packages/webgal/src/store/stageInterface.ts b/packages/webgal/src/store/stageInterface.ts
index 9a73de8f5..dfebf3e71 100644
--- a/packages/webgal/src/store/stageInterface.ts
+++ b/packages/webgal/src/store/stageInterface.ts
@@ -105,6 +105,16 @@ export interface IRunPerform {
   script: ISentence; // 演出脚本
 }
 
+export interface ILive2DMotion {
+  target: string;
+  motion: string;
+}
+
+export interface ILive2DExpression {
+  target: string;
+  expression: string;
+}
+
 /**
  * @interface IStageState 游戏舞台数据接口
  */
@@ -138,7 +148,8 @@ export interface IStageState {
   bgFilter: string;
   PerformList: Array<IRunPerform>; // 要启动的演出列表
   currentDialogKey: string; // 当前对话的key
-  live2dMotion: { target: string; motion: string }[];
+  live2dMotion: ILive2DMotion[];
+  live2dExpression: ILive2DExpression[];
   // 当前演出的延迟，用于做对话插演出！
   // currentPerformDelay:number
   currentConcatDialogPrev: string;
diff --git a/packages/webgal/src/store/stageReducer.ts b/packages/webgal/src/store/stageReducer.ts
index 52c6b54b2..db5b44200 100644
--- a/packages/webgal/src/store/stageReducer.ts
+++ b/packages/webgal/src/store/stageReducer.ts
@@ -3,9 +3,19 @@
  * 舞台状态是演出结束后的“终态”，在读档时不发生演出，只是将舞台状态替换为读取的状态。
  */
 
-import { ISetGameVar, ISetStagePayload, IStageState } from '@/store/stageInterface';
+import {
+  IEffect,
+  IFreeFigure,
+  ILive2DExpression,
+  ILive2DMotion,
+  IRunPerform,
+  ISetGameVar,
+  ISetStagePayload,
+  IStageState,
+} from '@/store/stageInterface';
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import cloneDeep from 'lodash/cloneDeep';
+import { commandType } from '@/Core/controller/scene/sceneInterface';
 
 // 初始化舞台数据
 
@@ -39,6 +49,7 @@ export const initState: IStageState = {
   PerformList: [], // 要启动的演出列表
   currentDialogKey: 'initial',
   live2dMotion: [],
+  live2dExpression: [],
   // currentPerformDelay: 0
   currentConcatDialogPrev: '',
   enableFilm: '',
@@ -77,10 +88,91 @@ const stageSlice = createSlice({
     setStageVar: (state, action: PayloadAction<ISetGameVar>) => {
       state.GameVar[action.payload.key] = action.payload.value;
     },
+    updateEffect: (state, action: PayloadAction<IEffect>) => {
+      const { target, transform } = action.payload;
+      // 尝试找到待修改的 Effect
+      const effectIndex = state.effects.findIndex((e) => e.target === target);
+      if (effectIndex >= 0) {
+        // Update the existing effect
+        state.effects[effectIndex].transform = transform;
+      } else {
+        // Add a new effect
+        state.effects.push({
+          target,
+          transform,
+        });
+      }
+    },
+    removeEffectByTargetId: (state, action: PayloadAction<string>) => {
+      const index = state.effects.findIndex((e) => e.target === action.payload);
+      if (index >= 0) {
+        state.effects.splice(index, 1);
+      }
+    },
+    addPerform: (state, action: PayloadAction<IRunPerform>) => {
+      state.PerformList.push(action.payload);
+    },
+    removePerformByName: (state, action: PayloadAction<string>) => {
+      for (let i = 0; i < state.PerformList.length; i++) {
+        const performItem: IRunPerform = state.PerformList[i];
+        if (performItem.id === action.payload) {
+          state.PerformList.splice(i, 1);
+          i--;
+        }
+      }
+    },
+    removeAllPixiPerforms: (state, action: PayloadAction<undefined>) => {
+      for (let i = 0; i < state.PerformList.length; i++) {
+        const performItem: IRunPerform = state.PerformList[i];
+        if (performItem.script.command === commandType.pixi) {
+          state.PerformList.splice(i, 1);
+          i--;
+        }
+      }
+    },
+    setFreeFigureByKey: (state, action: PayloadAction<IFreeFigure>) => {
+      const currentFreeFigures = state.freeFigure;
+      const newFigure = action.payload;
+      const index = currentFreeFigures.findIndex((figure) => figure.key === newFigure.key);
+      if (index >= 0) {
+        currentFreeFigures[index].basePosition = newFigure.basePosition;
+        currentFreeFigures[index].name = newFigure.name;
+      } else {
+        // 新加
+        if (newFigure.name !== '') currentFreeFigures.push(newFigure);
+      }
+    },
+    setLive2dMotion: (state, action: PayloadAction<ILive2DMotion>) => {
+      const { target, motion } = action.payload;
+
+      const index = state.live2dMotion.findIndex((e) => e.target === target);
+
+      if (index < 0) {
+        // Add a new motion
+        state.live2dMotion.push({ target, motion });
+      } else {
+        // Update the existing motion
+        state.live2dMotion[index].motion = motion;
+      }
+    },
+    setLive2dExpression: (state, action: PayloadAction<ILive2DExpression>) => {
+      const { target, expression } = action.payload;
+
+      const index = state.live2dExpression.findIndex((e) => e.target === target);
+
+      if (index < 0) {
+        // Add a new expression
+        state.live2dExpression.push({ target, expression });
+      } else {
+        // Update the existing expression
+        state.live2dExpression[index].expression = expression;
+      }
+    },
   },
 });
 
 export const { resetStageState, setStage, setStageVar } = stageSlice.actions;
+export const stageActions = stageSlice.actions;
 export default stageSlice.reducer;
 
 // /**
diff --git a/packages/webgal/src/store/userDataInterface.ts b/packages/webgal/src/store/userDataInterface.ts
index 76de77adc..02085d3f2 100644
--- a/packages/webgal/src/store/userDataInterface.ts
+++ b/packages/webgal/src/store/userDataInterface.ts
@@ -21,6 +21,7 @@ export enum textSize {
 export enum textFont {
   song,
   hei,
+  lxgw,
 }
 
 /**
diff --git a/packages/webgal/src/translations/en.ts b/packages/webgal/src/translations/en.ts
index 654c1ad44..a4773fc51 100644
--- a/packages/webgal/src/translations/en.ts
+++ b/packages/webgal/src/translations/en.ts
@@ -82,8 +82,9 @@ const en = {
             textFont: {
               title: 'Text Font',
               options: {
-                siYuanSimSun: 'LXGW WenKai',
+                siYuanSimSun: 'Source Han Serif',
                 SimHei: 'Sans',
+                lxgw: 'LXGW WenKai',
               },
             },
             textPreview: {
diff --git a/packages/webgal/src/translations/fr.ts b/packages/webgal/src/translations/fr.ts
index 09b635163..43077f1e3 100644
--- a/packages/webgal/src/translations/fr.ts
+++ b/packages/webgal/src/translations/fr.ts
@@ -82,8 +82,9 @@ const fr = {
             textFont: {
               title: 'Police du texte',
               options: {
-                siYuanSimSun: 'LXGW WenKai',
+                siYuanSimSun: 'Source Han Serif',
                 SimHei: 'Sans',
+                lxgw: 'LXGW WenKai',
               },
             },
             textPreview: {
diff --git a/packages/webgal/src/translations/jp.ts b/packages/webgal/src/translations/jp.ts
index 27fee82e1..c7cbb946c 100644
--- a/packages/webgal/src/translations/jp.ts
+++ b/packages/webgal/src/translations/jp.ts
@@ -82,8 +82,9 @@ const jp = {
             textFont: {
               title: 'フォント',
               options: {
-                siYuanSimSun: '霞鹜文楷',
+                siYuanSimSun: '源ノ明朝',
                 SimHei: '黒体',
+                lxgw: '霞鴎文隷',
               },
             },
             textPreview: {
diff --git a/packages/webgal/src/translations/zh-cn.ts b/packages/webgal/src/translations/zh-cn.ts
index 4c5636241..bc4176fd7 100644
--- a/packages/webgal/src/translations/zh-cn.ts
+++ b/packages/webgal/src/translations/zh-cn.ts
@@ -82,8 +82,9 @@ const zhCn = {
             textFont: {
               title: '文本字体',
               options: {
-                siYuanSimSun: '霞鹜文楷',
+                siYuanSimSun: '思源宋体',
                 SimHei: '黑体',
+                lxgw: '霞鹜文楷',
               },
             },
             textPreview: {
diff --git a/releasenote.md b/releasenote.md
index c1989a430..0997384d0 100644
--- a/releasenote.md
+++ b/releasenote.md
@@ -8,91 +8,94 @@
 
 #### 新功能
 
-添加唇形同步和眨眼动画
+文本框主题选择
 
-添加启动图
+视频禁止跳过的选项
 
-#### 修复
+变量插值
 
-iOS 设备上无法正常进行游戏的异常
+Live2D 的表情和动作设置
 
-文本框在遇到特殊符号时的换行异常
+#### 修复
 
-解析器解析 `say` 指令时出现的异常
+立绘或背景变换没有正确同步的异常
 
-解析器解析音频文件路径时出现的异常
+其他已知问题
 
 <!-- English Translation -->
 ## Release Notes
 
-**This repository only releases source code**
+**Only source code is released in this repository**
 
-**If you want to create, produce, and preview WebGAL games conveniently with a graphical editor, please [download the WebGAL Graphical Editor](https://github.com/MakinoharaShoko/WebGAL_Terre/releases)**
+**If you want to experience creating, making, and real-time previewing WebGAL games using a user-friendly graphical editor, please [download the WebGAL graphical editor](https://github.com/MakinoharaShoko/WebGAL_Terre/releases)**
 
-### In This Version
+### In this version
 
 #### New Features
 
-Added lip sync and blinking animations
+Textbox theme selection
 
-Added startup image
+Option to prohibit skipping videos
 
-#### Fixes
+Variable interpolation
 
-Resolved issues with game not working properly on iOS devices
+Live2D expression and motion settings
 
-Fixed text box line breaks when encountering special characters
+#### Fixes
+
+The issue where the standing picture or background transformation was not correctly synchronized
 
-Resolved exceptions when parser parses `say` commands
+Other known issues
 
-Resolved exceptions when parser parses audio file paths
 
 <!-- Japanese Translation -->
 ## リリースノート
 
-**このリポジトリはソースコードのみをリリースします**
+**このリポジトリではソースコードのみを公開しています**
 
-**WebGAL ゲームを便利なグラフィカルエディタで作成、制作、そしてリアルタイムでプレビューしたい場合は、[WebGAL グラフィカルエディタをダウンロードしてください](https://github.com/MakinoharaShoko/WebGAL_Terre/releases)**
+**ユーザーフレンドリーなグラフィックエディタを使用してWebGALゲームの作成、制作、リアルタイムプレビューを体験したい場合は、[WebGALグラフィックエディタをダウンロードしてください](https://github.com/MakinoharaShoko/WebGAL_Terre/releases)**
 
-### このバージョンで
+### このバージョンでは
 
 #### 新機能
 
-リップシンクとまばたきアニメーションを追加
+テキストボックスのテーマ選択
 
-起動画像を追加
+ビデオのスキップ禁止オプション
 
-#### 修正
+変数の補間
 
-iOS デバイスでゲームが正常に動作しない問題を修正
+Live2Dの表情とモーションの設定
 
-特殊文字に遭遇した際のテキストボックスの改行問題を修正
+#### 修正
+
+立ち絵や背景の変形が正しく同期されなかった問題
 
-パーサが `say` コマンドを解析する際の例外を修正
+その他の既知の問題
 
-パーサがオーディオファイルパスを解析する際の例外を修正
 
 <!-- French Translation -->
 ## Notes de version
 
-**Ce dépôt ne publie que du code source**
+**Seul le code source est publié dans ce dépôt**
 
-**Si vous souhaitez créer, produire et prévisualiser des jeux WebGAL de manière pratique avec un éditeur graphique, veuillez [télécharger l'Éditeur Graphique WebGAL](https://github.com/MakinoharaShoko/WebGAL_Terre/releases)**
+**Si vous souhaitez expérimenter la création, la fabrication et la prévisualisation en temps réel des jeux WebGAL à l'aide d'un éditeur graphique convivial, veuillez [télécharger l'éditeur graphique WebGAL](https://github.com/MakinoharaShoko/WebGAL_Terre/releases)**
 
 ### Dans cette version
 
 #### Nouvelles fonctionnalités
 
-Ajout de la synchronisation labiale et des animations de clignement
+Sélection du thème de la boîte de texte
 
-Ajout d'une image de démarrage
+Option pour interdire le saut des vidéos
 
-#### Corrections
+Interpolation des variables
 
-Résolution des problèmes de jeu ne fonctionnant pas correctement sur les appareils iOS
+Paramètres d'expression et de mouvement Live2D
+
+#### Corrections
 
-Correction des retours à la ligne dans la zone de texte lors de la rencontre de caractères spéciaux
+Le problème où la transformation de l'image debout ou de l'arrière-plan n'était pas correctement synchronisée
 
-Résolution des exceptions lorsque le parseur analyse les commandes `say`
+Autres problèmes connus
 
-Résolution des exceptions lorsque le parseur analyse les chemins de fichiers audio