diff --git a/CHANGELOG.md b/CHANGELOG.md
index d1ebd91f9..638a0690b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,12 @@
 - 主版本号：含有破坏性更新和新特性，不在发布周期内。
 
 ---
+## 1.1.1
+
+`2023-12-14`
+
+- Fix: Error about delay and disappear in pre-comp item. [#38](https://github.com/galacean/effects-runtime/pull/38) @RGCHN
+
 ## 1.1.0
 
 `2023-12-11`
diff --git a/README-zh_CN.md b/README-zh_CN.md
new file mode 100644
index 000000000..214c0a9d4
--- /dev/null
+++ b/README-zh_CN.md
@@ -0,0 +1,56 @@
+<div align="center"><a name="readme-top"></a>
+
+<h1>Galacean Effects</h1>
+
+加载并渲染酷炫的动效，通过 effects-core 提供的 APIs 也可以让你的引擎使用动效产物，快速的接入图层、粒子等动画效果。
+
+![GitHub release (with filter)](https://img.shields.io/github/v/release/galacean/effects-runtime)
+![GitHub License](https://img.shields.io/github/license/galacean/effects-runtime)
+![GitHub top language](https://img.shields.io/github/languages/top/galacean/effects-runtime)
+
+[更新日志](./CHANGELOG.md) · [报告问题][github-issues-url] · [特性需求][github-issues-url] · [English](./README.md) · 中文
+
+![](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)
+
+[github-issues-url]: https://github.com/galacean/effects-runtime/issues
+</div>
+
+## 安装
+
+``` bash
+npm install @galacean/effects --save
+```
+
+``` bash
+pnpm add @galacean/effects
+```
+
+## 示例
+
+``` html
+<div id="J-Container"></div>
+```
+
+``` ts
+import { Player } from '@galacean/effects';
+
+// 1. 实例化一个播放器
+const player = new Player({
+  container: document.getElementById('J-Container'),
+});
+
+// 2. 加载并播放动效资源
+player.loadScene('./demo.json');
+```
+
+> 通过 [Galacean Effects](https://galacean.antgroup.com/effects/) 编辑器获取 `demo.json` 产物
+
+## 相关文档
+
+- [开发文档](https://galacean.antgroup.com/effects/#/user/dgmswcgk63yfngku)
+- [接入指南](https://galacean.antgroup.com/effects/#/user/ti4f2yx1rot4hs1n)
+- [API 文档](https://galacean.antgroup.com/effects/#/api)
+- 其他链接:
+  - [本地开发](docs/developing.md)
+
+
diff --git a/README.md b/README.md
index d47046252..7a4bf968c 100644
--- a/README.md
+++ b/README.md
@@ -1,85 +1,56 @@
-# Galacean Effects Runtime
+<div align="center"><a name="readme-top"></a>
+
+<h1>Galacean Effects</h1>
+
+It can load and render cool animation effects, The APIs provided by effects-core allow your engine to quickly access animation data such as layer and particle animation.
 
 ![GitHub release (with filter)](https://img.shields.io/github/v/release/galacean/effects-runtime)
 ![GitHub License](https://img.shields.io/github/license/galacean/effects-runtime)
 ![GitHub top language](https://img.shields.io/github/languages/top/galacean/effects-runtime)
 
-Galacean Effects runtime, It can load and render cool animation effects, The APIs provided by effects-core allow your engine to quickly access animation data such as layer and particle animation.
-
-## [Integration Guide](https://galacean.antgroup.com/effects/#/user/ti4f2yx1rot4hs1n)
-
-## [API Documentation](https://galacean.antgroup.com/effects/#/api)
+[Changelog](./CHANGELOG.md) · [Report Bug][github-issues-url] · [Request Feature][github-issues-url] · English · [中文](./README-zh_CN.md)
 
-## Development
+![](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)
 
-### Environment Setup
+[github-issues-url]: https://github.com/galacean/effects-runtime/issues
+</div>
 
-- Node.js `>= 16.0.0`
-- [Pnpm](https://pnpm.io/)  `latest`
-  - Install:
-    - `npm install -g pnpm`
-  - Upgrade：
-    - `pnpm install -g pnpm`
-
-### Getting Started
+## Install
 
 ``` bash
-# 1. Install dependencies (first time)
-pnpm install
-# 2. Start the demo
-pnpm dev
+npm install @galacean/effects
 ```
 
-> Open in browser: http://localhost:8080/
-
-## Plugin Example
-
 ``` bash
-# demo
-pnpm --filter @galacean/xxx dev
+pnpm add @galacean/effects
 ```
 
-> Open in browser: http://localhost:8081/demo/
-
-### Low-End Device Testing
+## Usage
 
-``` bash
-# Run the legacy version of the demo
-pnpm preview
+``` html
+<div id="J-Container"></div>
 ```
 
-## Testing
+``` ts
+import { Player } from '@galacean/effects';
 
-``` bash
-pnpm test
+// 1. Instantiate a player
+const player = new Player({
+  container: document.getElementById('J-Container'),
+});
+
+// 2. Load and play the animation resource
+player.loadScene('./demo.json');
 ```
 
-> Open in browser: http://localhost:9090/
+> Get the `demo.json` by using the [Galacean Effects](https://galacean.antgroup.com/effects/) editor.
 
-### Installing Single Packages
+## Documentation
 
-``` bash
-# Install to the root directory
-pnpm add ajv@^6.5.3 -w -D
-# Install to a specific package
-pnpm add ajv@^6.5.3 --filter @galacean/effects-core
-```
+- [Development Documentation](https://galacean.antgroup.com/effects/#/user/dgmswcgk63yfngku)
+- [Integration Guide](https://galacean.antgroup.com/effects/#/user/ti4f2yx1rot4hs1n)
+- [API Documentation](https://galacean.antgroup.com/effects/#/api)
+- Useful Links:
+  - [Developing](docs/developing.md)
 
-## Other Commands
 
-``` bash
-# lint
-pnpm lint
-# Type checking
-pnpm check:ts
-# Clean all ignore files
-pnpm clean:all
-# Build packages
-pnpm build
-# Build plugins
-pnpm build:plugins
-# Generate API documentation
-pnpm build:docs
-# Build a specific package
-pnpm --filter @galacean/xxx build
-```
diff --git a/docs/developing.md b/docs/developing.md
new file mode 100644
index 000000000..7f4d6a46c
--- /dev/null
+++ b/docs/developing.md
@@ -0,0 +1,81 @@
+# How to build Galacean Effects and the examples
+
+## Prerequisites
+
+- Node.js `>= 16.0.0`
+- [Pnpm](https://pnpm.io/)  `latest`
+  - Install:
+    - `npm install -g pnpm`
+  - Upgrade：
+    - `pnpm install -g pnpm`
+
+## Quick Start
+
+``` bash
+# 1. clone from github
+git clone https://github.com/galacean/effects-runtime \
+  && cd effects-runtime
+# 2. Install dependencies (first time)
+pnpm install
+# 3. Start the demo
+pnpm dev
+```
+
+> Open in browser: http://localhost:8080/
+
+## Build
+
+``` bash
+# Build packages
+pnpm build
+# Build plugins
+pnpm build:plugins
+```
+
+## Plugin Example
+
+``` bash
+# demo
+pnpm --filter @galacean/xxx dev
+```
+
+> Open in browser: http://localhost:8081/demo/
+
+## Testing
+
+``` bash
+pnpm test
+```
+
+> Open in browser: http://localhost:9090/
+
+### Low-End Device Testing
+
+``` bash
+# Run the legacy version of the demo
+pnpm preview
+```
+
+## Other Commands
+
+``` bash
+# lint
+pnpm lint
+# Type checking
+pnpm check:ts
+# Clean all ignore files
+pnpm clean:all
+# Generate API documentation
+pnpm build:docs
+# Build a specific package
+pnpm --filter @galacean/xxx build
+```
+
+Installing Single Packages:
+
+``` bash
+# Install to the root directory
+pnpm add ajv@^6.5.3 -w -D
+# Install to a specific package
+pnpm add ajv@^6.5.3 --filter @galacean/effects-core
+```
diff --git a/packages/effects-core/package.json b/packages/effects-core/package.json
index 212a4109a..7b0e8cf14 100644
--- a/packages/effects-core/package.json
+++ b/packages/effects-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@galacean/effects-core",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Galacean Effects runtime core for the web",
   "module": "./dist/index.mjs",
   "main": "./dist/index.js",
diff --git a/packages/effects-core/src/comp-vfx-item.ts b/packages/effects-core/src/comp-vfx-item.ts
index 243984539..c12f0453f 100644
--- a/packages/effects-core/src/comp-vfx-item.ts
+++ b/packages/effects-core/src/comp-vfx-item.ts
@@ -88,6 +88,7 @@ export class CompVFXItem extends VFXItem<void | CalculateItem> {
           item = new CompVFXItem({
             ...props,
             refId,
+            delay: itemProps.delay,
             id: itemProps.id,
             name: itemProps.name,
             duration: itemProps.duration,
diff --git a/packages/effects-core/src/plugins/particle/particle-vfx-item.ts b/packages/effects-core/src/plugins/particle/particle-vfx-item.ts
index 1700c6fb2..5e950aa56 100644
--- a/packages/effects-core/src/plugins/particle/particle-vfx-item.ts
+++ b/packages/effects-core/src/plugins/particle/particle-vfx-item.ts
@@ -18,10 +18,6 @@ export class ParticleVFXItem extends VFXItem<ParticleSystem> {
     return spec.ItemType.particle;
   }
 
-  override get contentVisible () {
-    return !this.destroyed;
-  }
-
   override onConstructed (props: spec.ParticleItem) {
     this.particle = props.content as unknown as ParticleSystemProps;
   }
@@ -40,7 +36,8 @@ export class ParticleVFXItem extends VFXItem<ParticleSystem> {
 
   override onItemUpdate (dt: number, lifetime: number) {
     if (this.content) {
-      let hide = !this.visible;
+      let hide = !this.contentVisible;
+
       const parentItem = this.parentId && this.composition?.getItemByID(this.parentId);
 
       if (!hide && parentItem) {
diff --git a/packages/effects-core/src/vfx-item.ts b/packages/effects-core/src/vfx-item.ts
index 3c0691bc7..ab6bb9ed7 100644
--- a/packages/effects-core/src/vfx-item.ts
+++ b/packages/effects-core/src/vfx-item.ts
@@ -402,6 +402,12 @@ export abstract class VFXItem<T extends VFXItemContent> implements Disposable {
               }
             } else if (this.endBehavior === spec.END_BEHAVIOR_DESTROY) {
               this._contentVisible = false;
+
+              // 预合成配置 reusable 且销毁时， 需要隐藏其中的元素
+              if ((this.type as spec.ItemType) === spec.ItemType.composition) {
+                this.handleVisibleChanged(false);
+                this.onItemUpdate(0, lifetime);
+              }
             }
             lifetime = Math.min(lifetime, 1);
           } else {
@@ -679,6 +685,7 @@ export abstract class VFXItem<T extends VFXItemContent> implements Disposable {
       this.reset();
       this.onUpdate = () => -1;
       this.composition = null;
+      this._contentVisible = false;
       this.transform.setValid(false);
     }
   }
diff --git a/packages/effects-helper/package.json b/packages/effects-helper/package.json
index b5dd79ec8..f427948e7 100644
--- a/packages/effects-helper/package.json
+++ b/packages/effects-helper/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@galacean/effects-helper",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Galacean Effects runtime helper for the web",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
diff --git a/packages/effects-threejs/package.json b/packages/effects-threejs/package.json
index 23f34e7a7..e219086d6 100644
--- a/packages/effects-threejs/package.json
+++ b/packages/effects-threejs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@galacean/effects-threejs",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Galacean Effects runtime threejs plugin for the web",
   "module": "./dist/index.mjs",
   "main": "./dist/index.js",
diff --git a/packages/effects-webgl/package.json b/packages/effects-webgl/package.json
index 764839a8b..1a7aa8fd5 100644
--- a/packages/effects-webgl/package.json
+++ b/packages/effects-webgl/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@galacean/effects-webgl",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Galacean Effects runtime webgl for the web",
   "types": "./dist/index.d.ts",
   "files": [
diff --git a/packages/effects/package.json b/packages/effects/package.json
index 842dbcc6e..1b6ae1385 100644
--- a/packages/effects/package.json
+++ b/packages/effects/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@galacean/effects",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Galacean Effects runtime player for the web",
   "module": "./dist/index.mjs",
   "main": "./dist/index.js",
diff --git a/plugin-packages/alipay-downgrade/package.json b/plugin-packages/alipay-downgrade/package.json
index e5e0f4776..afb94de97 100644
--- a/plugin-packages/alipay-downgrade/package.json
+++ b/plugin-packages/alipay-downgrade/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@galacean/effects-plugin-alipay-downgrade",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Galacean Effects player downgrade plugin for Alipay",
   "module": "./dist/index.mjs",
   "main": "./dist/index.js",
diff --git a/plugin-packages/editor-gizmo/package.json b/plugin-packages/editor-gizmo/package.json
index 45400cf67..574340029 100644
--- a/plugin-packages/editor-gizmo/package.json
+++ b/plugin-packages/editor-gizmo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@galacean/effects-plugin-editor-gizmo",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Galacean Effects player editor gizmo plugin",
   "module": "./dist/index.mjs",
   "main": "./dist/index.js",
diff --git a/plugin-packages/model/package.json b/plugin-packages/model/package.json
index 904c96b6c..2c9871212 100644
--- a/plugin-packages/model/package.json
+++ b/plugin-packages/model/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@galacean/effects-plugin-model",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Galacean Effects player model plugin",
   "module": "./dist/index.mjs",
   "main": "./dist/index.js",
diff --git a/plugin-packages/orientation-transformer/package.json b/plugin-packages/orientation-transformer/package.json
index 7431bf1ec..270e65084 100644
--- a/plugin-packages/orientation-transformer/package.json
+++ b/plugin-packages/orientation-transformer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@galacean/effects-plugin-orientation-transformer",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Galacean Effects player orientation transformer plugin",
   "module": "./dist/index.mjs",
   "main": "./dist/index.js",
diff --git a/plugin-packages/spine/package.json b/plugin-packages/spine/package.json
index a5a14c6d4..19a68fa83 100644
--- a/plugin-packages/spine/package.json
+++ b/plugin-packages/spine/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@galacean/effects-plugin-spine",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Galacean Effects player spine plugin",
   "module": "./dist/index.mjs",
   "main": "./dist/index.js",