diff --git a/common/config/rush/pnpm-config.json b/common/config/rush/pnpm-config.json
index 333d8ab6..5a53c52b 100644
--- a/common/config/rush/pnpm-config.json
+++ b/common/config/rush/pnpm-config.json
@@ -89,10 +89,10 @@
    * PNPM documentation: https://pnpm.io/package_json#pnpmoverrides
    */
   "globalOverrides": {
-    "@visactor/vrender": "0.19.20-alpha.2",
-    "@visactor/vrender-core": "0.19.20-alpha.2",
-    "@visactor/vrender-kits": "0.19.20-alpha.2",
-    "@visactor/vrender-components": "0.19.20-alpha.2"
+    "@visactor/vrender": "0.19.20-alpha.3",
+    "@visactor/vrender-core": "0.19.20-alpha.3",
+    "@visactor/vrender-kits": "0.19.20-alpha.3",
+    "@visactor/vrender-components": "0.19.20-alpha.3"
     // "example2": "npm:@company/example2@^1.0.0"
   },
 
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index 0d83d6f4..b5647dd8 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -1,10 +1,10 @@
 lockfileVersion: 5.4
 
 overrides:
-  '@visactor/vrender': 0.19.20-alpha.2
-  '@visactor/vrender-core': 0.19.20-alpha.2
-  '@visactor/vrender-kits': 0.19.20-alpha.2
-  '@visactor/vrender-components': 0.19.20-alpha.2
+  '@visactor/vrender': 0.19.20-alpha.3
+  '@visactor/vrender-core': 0.19.20-alpha.3
+  '@visactor/vrender-kits': 0.19.20-alpha.3
+  '@visactor/vrender-components': 0.19.20-alpha.3
 
 importers:
 
@@ -76,10 +76,10 @@ importers:
       '@types/react': ^18.0.0
       '@types/react-dom': ^18.0.0
       '@visactor/vchart': 1.11.5
-      '@visactor/vrender': 0.19.20-alpha.2
-      '@visactor/vrender-components': 0.19.20-alpha.2
-      '@visactor/vrender-core': 0.19.20-alpha.2
-      '@visactor/vrender-kits': 0.19.20-alpha.2
+      '@visactor/vrender': 0.19.20-alpha.3
+      '@visactor/vrender-components': 0.19.20-alpha.3
+      '@visactor/vrender-core': 0.19.20-alpha.3
+      '@visactor/vrender-kits': 0.19.20-alpha.3
       '@visactor/vutils': ~0.18.4
       '@vitejs/plugin-react': 3.1.0
       canvas: 2.11.2
@@ -96,10 +96,10 @@ importers:
       vite: 3.2.6
     dependencies:
       '@visactor/vchart': 1.11.5
-      '@visactor/vrender': 0.19.20-alpha.2
-      '@visactor/vrender-components': 0.19.20-alpha.2
-      '@visactor/vrender-core': 0.19.20-alpha.2
-      '@visactor/vrender-kits': 0.19.20-alpha.2
+      '@visactor/vrender': 0.19.20-alpha.3
+      '@visactor/vrender-components': 0.19.20-alpha.3
+      '@visactor/vrender-core': 0.19.20-alpha.3
+      '@visactor/vrender-kits': 0.19.20-alpha.3
       '@visactor/vutils': 0.18.8
     devDependencies:
       '@douyinfe/semi-ui': 2.62.1_nnrd3gsncyragczmpvfhocinkq
@@ -1971,6 +1971,7 @@ packages:
       - supports-color
       - ts-node
       - utf-8-validate
+    dev: true
 
   /@jest/core/26.6.3_canvas@2.11.2:
     resolution: {integrity: sha512-xvV1kKbhfUqFVuZ8Cyo+JPpipAHHAV3kcDBftiduK8EICXmTFddryy3P7NfZt8Pv37rA9nEJBKCCkglCPt/Xjw==}
@@ -2010,7 +2011,6 @@ packages:
       - supports-color
       - ts-node
       - utf-8-validate
-    dev: true
 
   /@jest/environment/24.9.0:
     resolution: {integrity: sha512-5A1QluTPhvdIPFYnO3sZC3smkNeXPVELz7ikPbhUj0bQjB07EoE9qtLrem14ZUYWdVayYbsjVwIiL4WBIMV4aQ==}
@@ -2156,6 +2156,7 @@ packages:
       - supports-color
       - ts-node
       - utf-8-validate
+    dev: true
 
   /@jest/test-sequencer/26.6.3_canvas@2.11.2:
     resolution: {integrity: sha512-YHlVIjP5nfEyjlrSr8t/YdNfU/1XEt7c5b4OxcXCjyRhjzLYu/rO69/WHPuYcbCWkz8kAeZVZp2N2+IOLLEPGw==}
@@ -2172,7 +2173,6 @@ packages:
       - supports-color
       - ts-node
       - utf-8-validate
-    dev: true
 
   /@jest/transform/24.9.0:
     resolution: {integrity: sha512-TcQUmyNRxV94S0QpMOnZl0++6RMiqpbH/ZMccFB/amku6Uwvyb1cjYX7xkp5nGNkbX4QPH/FcB6q1HBTHynLmQ==}
@@ -2293,7 +2293,6 @@ packages:
     transitivePeerDependencies:
       - encoding
       - supports-color
-    dev: true
 
   /@mdx-js/mdx/3.0.1:
     resolution: {integrity: sha512-eIQ4QTrOWyL3LWEe/bu6Taqzq2HQvHcyTMaOrI95P2/LmJE7AsfPfgJGuFLPVqBUE1BC1rik3VIhU+s9u72arA==}
@@ -3224,9 +3223,9 @@ packages:
       '@visactor/vgrammar-venn': 0.13.10
       '@visactor/vgrammar-wordcloud': 0.13.10
       '@visactor/vgrammar-wordcloud-shape': 0.13.10
-      '@visactor/vrender-components': 0.19.20-alpha.2
-      '@visactor/vrender-core': 0.19.20-alpha.2
-      '@visactor/vrender-kits': 0.19.20-alpha.2
+      '@visactor/vrender-components': 0.19.20-alpha.3
+      '@visactor/vrender-core': 0.19.20-alpha.3
+      '@visactor/vrender-kits': 0.19.20-alpha.3
       '@visactor/vscale': 0.18.9
       '@visactor/vutils': 0.18.9
       '@visactor/vutils-extension': 1.11.5
@@ -3267,9 +3266,9 @@ packages:
       '@visactor/vdataset': 0.18.9
       '@visactor/vgrammar-coordinate': 0.13.10
       '@visactor/vgrammar-util': 0.13.10
-      '@visactor/vrender-components': 0.19.20-alpha.2
-      '@visactor/vrender-core': 0.19.20-alpha.2
-      '@visactor/vrender-kits': 0.19.20-alpha.2
+      '@visactor/vrender-components': 0.19.20-alpha.3
+      '@visactor/vrender-core': 0.19.20-alpha.3
+      '@visactor/vrender-kits': 0.19.20-alpha.3
       '@visactor/vscale': 0.18.9
       '@visactor/vutils': 0.18.9
     dev: false
@@ -3279,8 +3278,8 @@ packages:
     dependencies:
       '@visactor/vgrammar-core': 0.13.10
       '@visactor/vgrammar-util': 0.13.10
-      '@visactor/vrender-core': 0.19.20-alpha.2
-      '@visactor/vrender-kits': 0.19.20-alpha.2
+      '@visactor/vrender-core': 0.19.20-alpha.3
+      '@visactor/vrender-kits': 0.19.20-alpha.3
       '@visactor/vutils': 0.18.9
     dev: false
 
@@ -3298,8 +3297,8 @@ packages:
     dependencies:
       '@visactor/vgrammar-core': 0.13.10
       '@visactor/vgrammar-util': 0.13.10
-      '@visactor/vrender-core': 0.19.20-alpha.2
-      '@visactor/vrender-kits': 0.19.20-alpha.2
+      '@visactor/vrender-core': 0.19.20-alpha.3
+      '@visactor/vrender-kits': 0.19.20-alpha.3
       '@visactor/vutils': 0.18.9
     dev: false
 
@@ -3314,8 +3313,8 @@ packages:
     dependencies:
       '@visactor/vgrammar-core': 0.13.10
       '@visactor/vgrammar-util': 0.13.10
-      '@visactor/vrender-core': 0.19.20-alpha.2
-      '@visactor/vrender-kits': 0.19.20-alpha.2
+      '@visactor/vrender-core': 0.19.20-alpha.3
+      '@visactor/vrender-kits': 0.19.20-alpha.3
       '@visactor/vutils': 0.18.9
     dev: false
 
@@ -3324,8 +3323,8 @@ packages:
     dependencies:
       '@visactor/vgrammar-core': 0.13.10
       '@visactor/vgrammar-util': 0.13.10
-      '@visactor/vrender-core': 0.19.20-alpha.2
-      '@visactor/vrender-kits': 0.19.20-alpha.2
+      '@visactor/vrender-core': 0.19.20-alpha.3
+      '@visactor/vrender-kits': 0.19.20-alpha.3
       '@visactor/vscale': 0.18.9
       '@visactor/vutils': 0.18.9
     dev: false
@@ -3335,41 +3334,41 @@ packages:
     dependencies:
       '@visactor/vgrammar-core': 0.13.10
       '@visactor/vgrammar-util': 0.13.10
-      '@visactor/vrender-core': 0.19.20-alpha.2
-      '@visactor/vrender-kits': 0.19.20-alpha.2
+      '@visactor/vrender-core': 0.19.20-alpha.3
+      '@visactor/vrender-kits': 0.19.20-alpha.3
       '@visactor/vutils': 0.18.9
     dev: false
 
-  /@visactor/vrender-components/0.19.20-alpha.2:
-    resolution: {integrity: sha512-Clk9lFbdMDF1vOAyf4S/MBjCzLKurYSZZZLAzzTqRIimjFoaiZ0EqsspID4lscmmlBn4ENv396cusw4Aeoi3Kw==}
+  /@visactor/vrender-components/0.19.20-alpha.3:
+    resolution: {integrity: sha512-Fl7o5EwRBZOSQYOwW/WkojlUrEjnThKWI3LSzQL6F5zDyhmdp77aFLrmd6ZRD/nNFlr/vDjwQHwWXZwJhIDzyg==}
     dependencies:
-      '@visactor/vrender-core': 0.19.20-alpha.2
-      '@visactor/vrender-kits': 0.19.20-alpha.2
+      '@visactor/vrender-core': 0.19.20-alpha.3
+      '@visactor/vrender-kits': 0.19.20-alpha.3
       '@visactor/vscale': 0.18.9
       '@visactor/vutils': 0.18.12
     dev: false
 
-  /@visactor/vrender-core/0.19.20-alpha.2:
-    resolution: {integrity: sha512-N0SN+lW5pFtBrUIl74n6VK//poLw4pdKga4EHsAJpPwDZUHLQdHG/69sMx9BMt60vKXgD5EnagH5uoh3DiJPkA==}
+  /@visactor/vrender-core/0.19.20-alpha.3:
+    resolution: {integrity: sha512-4tOkbKWeVZ8D+PHjc4ZUriQslz6uWMycTpdp0UfFSv9r7F7hAoVrEMk7bXM3YMG6pgxaPM8ZkX9p3KpQF04yKQ==}
     dependencies:
       '@visactor/vutils': 0.18.12
       color-convert: 2.0.1
     dev: false
 
-  /@visactor/vrender-kits/0.19.20-alpha.2:
-    resolution: {integrity: sha512-Jg7r1ebMHjDWRaSJTneZBtNHkk9vVZp2YWtPbsLEmgrNso0bdSnA9O5RVooQ47UPhNjcdr4PnN+DApHcezFULA==}
+  /@visactor/vrender-kits/0.19.20-alpha.3:
+    resolution: {integrity: sha512-YUvR0DSYALGB35cBiNA4trd7u0HEi2AXkCcXZkoCFSLcUeQDqPHPsLFRRyKjR6BvEyhB+Jg/hKdw95r9b2myjw==}
     dependencies:
       '@resvg/resvg-js': 2.4.1
-      '@visactor/vrender-core': 0.19.20-alpha.2
+      '@visactor/vrender-core': 0.19.20-alpha.3
       '@visactor/vutils': 0.18.12
       roughjs: 4.5.2
     dev: false
 
-  /@visactor/vrender/0.19.20-alpha.2:
-    resolution: {integrity: sha512-FdBRAbs5ibctEzvMJnY3VK+IopHaJ0iF/gdktCXCISKuaVESke3L8GVPkZ0+CD7LA5ZPryf61KgYDKaJGPPE1g==}
+  /@visactor/vrender/0.19.20-alpha.3:
+    resolution: {integrity: sha512-c3G8nroyRzozSQ4MxTBgR5k3um0pKskZ3CZN4vex/rIoFL2kQWFK6ABMiG1wJZb2ZaGa1jEtb0HMdQte/KT5TA==}
     dependencies:
-      '@visactor/vrender-core': 0.19.20-alpha.2
-      '@visactor/vrender-kits': 0.19.20-alpha.2
+      '@visactor/vrender-core': 0.19.20-alpha.3
+      '@visactor/vrender-kits': 0.19.20-alpha.3
     dev: false
 
   /@visactor/vscale/0.18.9:
@@ -3470,7 +3469,6 @@ packages:
 
   /abbrev/1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
-    dev: true
 
   /abs-svg-path/0.1.1:
     resolution: {integrity: sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA==}
@@ -3644,7 +3642,6 @@ packages:
 
   /aproba/2.0.0:
     resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==}
-    dev: true
 
   /archy/1.0.0:
     resolution: {integrity: sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw==}
@@ -3657,7 +3654,6 @@ packages:
     dependencies:
       delegates: 1.0.0
       readable-stream: 3.6.2
-    dev: true
 
   /arg/4.1.3:
     resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
@@ -4323,7 +4319,6 @@ packages:
     transitivePeerDependencies:
       - encoding
       - supports-color
-    dev: true
 
   /capture-exit/2.0.0:
     resolution: {integrity: sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==}
@@ -4438,7 +4433,6 @@ packages:
   /chownr/2.0.0:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
     engines: {node: '>=10'}
-    dev: true
 
   /ci-info/2.0.0:
     resolution: {integrity: sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==}
@@ -4690,7 +4684,6 @@ packages:
 
   /console-control-strings/1.1.0:
     resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
-    dev: true
 
   /convert-source-map/1.9.0:
     resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
@@ -4948,7 +4941,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       mimic-response: 2.1.0
-    dev: true
 
   /deep-eql/4.1.3:
     resolution: {integrity: sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==}
@@ -5026,7 +5018,6 @@ packages:
 
   /delegates/1.0.0:
     resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
-    dev: true
 
   /dequal/2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
@@ -5041,7 +5032,6 @@ packages:
   /detect-libc/2.0.3:
     resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
     engines: {node: '>=8'}
-    dev: true
 
   /detect-newline/2.1.0:
     resolution: {integrity: sha512-CwffZFvlJffUg9zZA0uqrjQayUTC8ob94pnr5sFwaVv3IOmkfUHcWH+jXaQK3askE51Cqe8/9Ql/0uXNwqZ8Zg==}
@@ -6270,7 +6260,6 @@ packages:
     engines: {node: '>= 8'}
     dependencies:
       minipass: 3.3.6
-    dev: true
 
   /fs-mkdirp-stream/1.0.0:
     resolution: {integrity: sha512-+vSd9frUnapVC2RZYfL3FCB2p3g4TBhaUmrsWlSudsGdnxIuUvBB2QM1VZeBtc49QFwrp+wQLrDs3+xxDgI5gQ==}
@@ -6333,7 +6322,6 @@ packages:
       string-width: 4.2.3
       strip-ansi: 6.0.1
       wide-align: 1.1.5
-    dev: true
 
   /gensync/1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
@@ -6767,7 +6755,6 @@ packages:
 
   /has-unicode/2.0.1:
     resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==}
-    dev: true
 
   /has-value/0.3.1:
     resolution: {integrity: sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q==}
@@ -7497,6 +7484,7 @@ packages:
       - supports-color
       - ts-node
       - utf-8-validate
+    dev: true
 
   /jest-cli/26.6.3_canvas@2.11.2:
     resolution: {integrity: sha512-GF9noBSa9t08pSyl3CY4frMrqp+aQXFGFkf5hEPbh/pIUFYWMK6ZLTfbmadxJVcJrdRoChlWQsA2VkJcDFK8hg==}
@@ -7522,7 +7510,6 @@ packages:
       - supports-color
       - ts-node
       - utf-8-validate
-    dev: true
 
   /jest-config/24.9.0:
     resolution: {integrity: sha512-RATtQJtVYQrp7fvWg6f5y3pEFj9I+H8sWw4aKxnDZ96mob5i5SD6ZEGWgMLXQ4LE8UurrjbdlLWdUeo+28QpfQ==}
@@ -7581,6 +7568,7 @@ packages:
       - canvas
       - supports-color
       - utf-8-validate
+    dev: true
 
   /jest-config/26.6.3_canvas@2.11.2:
     resolution: {integrity: sha512-t5qdIj/bCj2j7NFVHb2nFB4aUdfucDn3JRKgrZnplb8nieAirAzRSHP8uDEd+qV6ygzg9Pz4YG7UTJf94LPSyg==}
@@ -7614,7 +7602,6 @@ packages:
       - canvas
       - supports-color
       - utf-8-validate
-    dev: true
 
   /jest-diff/24.9.0:
     resolution: {integrity: sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==}
@@ -7729,6 +7716,7 @@ packages:
       - canvas
       - supports-color
       - utf-8-validate
+    dev: true
 
   /jest-environment-jsdom/26.6.2_canvas@2.11.2:
     resolution: {integrity: sha512-jgPqCruTlt3Kwqg5/WVFyHIOJHsiAvhcp2qiR2QQstuG9yWox5+iHpU3ZrcBxW14T4fe5Z68jAfLRh7joCSP2Q==}
@@ -7746,7 +7734,6 @@ packages:
       - canvas
       - supports-color
       - utf-8-validate
-    dev: true
 
   /jest-environment-node/24.9.0:
     resolution: {integrity: sha512-6d4V2f4nxzIzwendo27Tr0aFm+IXWa0XEUnaH6nU0FMaozxovt+sfRvh4J47wL1OvF83I3SSTu0XK+i4Bqe7uA==}
@@ -7887,6 +7874,7 @@ packages:
       - supports-color
       - ts-node
       - utf-8-validate
+    dev: true
 
   /jest-jasmine2/26.6.3_canvas@2.11.2:
     resolution: {integrity: sha512-kPKUrQtc8aYwBV7CqBg5pu+tmYXlvFlSFYn18ev4gPFtrRzB15N2gW/Roew3187q2w2eHuu0MU9TJz6w0/nPEg==}
@@ -7916,7 +7904,6 @@ packages:
       - supports-color
       - ts-node
       - utf-8-validate
-    dev: true
 
   /jest-leak-detector/24.9.0:
     resolution: {integrity: sha512-tYkFIDsiKTGwb2FG1w8hX9V0aUb2ot8zY/2nFg087dUageonw1zrLMP4W6zsRO59dPkTSKie+D4rhMuP9nRmrA==}
@@ -8125,6 +8112,7 @@ packages:
       - supports-color
       - ts-node
       - utf-8-validate
+    dev: true
 
   /jest-runner/26.6.3_canvas@2.11.2:
     resolution: {integrity: sha512-atgKpRHnaA2OvByG/HpGA4g6CSPS/1LK0jK3gATJAoptC1ojltpmVlYC3TYgdmGp+GLuhzpH30Gvs36szSL2JQ==}
@@ -8156,7 +8144,6 @@ packages:
       - supports-color
       - ts-node
       - utf-8-validate
-    dev: true
 
   /jest-runtime/24.9.0:
     resolution: {integrity: sha512-8oNqgnmF3v2J6PVRM2Jfuj8oX3syKmaynlDMMKQ4iyzbQzIG6th5ub/lM2bCMTmoTKM3ykcUYI2Pw9xwNtjMnw==}
@@ -8228,6 +8215,7 @@ packages:
       - supports-color
       - ts-node
       - utf-8-validate
+    dev: true
 
   /jest-runtime/26.6.3_canvas@2.11.2:
     resolution: {integrity: sha512-lrzyR3N8sacTAMeonbqpnSka1dHNux2uk0qqDXVkMv2c/A3wYnvQ4EXuI013Y6+gSKSCxdaczvf4HF0mVXHRdw==}
@@ -8267,7 +8255,6 @@ packages:
       - supports-color
       - ts-node
       - utf-8-validate
-    dev: true
 
   /jest-serializer/24.9.0:
     resolution: {integrity: sha512-DxYipDr8OvfrKH3Kel6NdED3OXxjvxXZ1uIY2I9OFbGg+vUkkg7AGvi65qbhbWNPvDckXmzMPbK3u3HaDO49bQ==}
@@ -8415,6 +8402,7 @@ packages:
       - supports-color
       - ts-node
       - utf-8-validate
+    dev: true
 
   /jest/26.6.3_canvas@2.11.2:
     resolution: {integrity: sha512-lGS5PXGAzR4RF7V5+XObhqz2KZIDUA1yD0DG6pBVmy10eh0ZIXQImRuzocsI/N2XZ1GrLFwTS27In2i2jlpq1Q==}
@@ -8430,7 +8418,6 @@ packages:
       - supports-color
       - ts-node
       - utf-8-validate
-    dev: true
 
   /js-string-escape/1.0.1:
     resolution: {integrity: sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==}
@@ -8528,6 +8515,7 @@ packages:
       - bufferutil
       - supports-color
       - utf-8-validate
+    dev: true
 
   /jsdom/16.7.0_canvas@2.11.2:
     resolution: {integrity: sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==}
@@ -8570,7 +8558,6 @@ packages:
       - bufferutil
       - supports-color
       - utf-8-validate
-    dev: true
 
   /jsesc/0.5.0:
     resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==}
@@ -9613,7 +9600,6 @@ packages:
   /mimic-response/2.1.0:
     resolution: {integrity: sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==}
     engines: {node: '>=8'}
-    dev: true
 
   /minimatch/3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
@@ -9643,12 +9629,10 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       yallist: 4.0.0
-    dev: true
 
   /minipass/5.0.0:
     resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==}
     engines: {node: '>=8'}
-    dev: true
 
   /minizlib/2.1.2:
     resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
@@ -9656,7 +9640,6 @@ packages:
     dependencies:
       minipass: 3.3.6
       yallist: 4.0.0
-    dev: true
 
   /mixin-deep/1.3.2:
     resolution: {integrity: sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==}
@@ -9766,7 +9749,6 @@ packages:
         optional: true
     dependencies:
       whatwg-url: 5.0.0
-    dev: true
 
   /node-int64/0.4.0:
     resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==}
@@ -9792,7 +9774,6 @@ packages:
     hasBin: true
     dependencies:
       abbrev: 1.1.1
-    dev: true
 
   /normalize-package-data/2.5.0:
     resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
@@ -9858,7 +9839,6 @@ packages:
       console-control-strings: 1.1.0
       gauge: 3.0.2
       set-blocking: 2.0.0
-    dev: true
 
   /number-is-nan/1.0.1:
     resolution: {integrity: sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==}
@@ -11399,7 +11379,6 @@ packages:
 
   /simple-concat/1.0.1:
     resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==}
-    dev: true
 
   /simple-get/3.1.1:
     resolution: {integrity: sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==}
@@ -11407,7 +11386,6 @@ packages:
       decompress-response: 4.2.1
       once: 1.4.0
       simple-concat: 1.0.1
-    dev: true
 
   /simple-statistics/7.8.3:
     resolution: {integrity: sha512-JFvMY00t6SBGtwMuJ+nqgsx9ylkMiJ5JlK9bkj8AdvniIe5615wWQYkKHXe84XtSuc40G/tlrPu0A5/NlJvv8A==}
@@ -11863,7 +11841,6 @@ packages:
       minizlib: 2.1.2
       mkdirp: 1.0.4
       yallist: 4.0.0
-    dev: true
 
   /terminal-link/2.1.1:
     resolution: {integrity: sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==}
@@ -12075,7 +12052,6 @@ packages:
 
   /tr46/0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
-    dev: true
 
   /tr46/1.0.1:
     resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
@@ -12108,7 +12084,7 @@ packages:
       bs-logger: 0.2.6
       buffer-from: 1.1.2
       fast-json-stable-stringify: 2.1.0
-      jest: 26.6.3
+      jest: 26.6.3_canvas@2.11.2
       jest-util: 26.6.2
       json5: 2.2.3
       lodash: 4.17.21
@@ -12826,7 +12802,6 @@ packages:
 
   /webidl-conversions/3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
-    dev: true
 
   /webidl-conversions/4.0.2:
     resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
@@ -12858,7 +12833,6 @@ packages:
     dependencies:
       tr46: 0.0.3
       webidl-conversions: 3.0.1
-    dev: true
 
   /whatwg-url/6.5.0:
     resolution: {integrity: sha512-rhRZRqx/TLJQWUpQ6bmrt2UV4f0HCQ463yQuONJqC6fO2VoEb1pTYddbe59SkYq87aoM5A3bdhMZiUiVws+fzQ==}
@@ -12936,7 +12910,6 @@ packages:
     resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==}
     dependencies:
       string-width: 4.2.3
-    dev: true
 
   /word-wrap/1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
diff --git a/packages/vstory/demo/src/demos/BaseComponent.tsx b/packages/vstory/demo/src/demos/BaseComponent.tsx
index b1b855df..17121157 100644
--- a/packages/vstory/demo/src/demos/BaseComponent.tsx
+++ b/packages/vstory/demo/src/demos/BaseComponent.tsx
@@ -34,6 +34,31 @@ export const BaseComponent = () => {
               }
             }
           };
+        }),
+        ...new Array(3).fill(0).map((_, i) => {
+          return {
+            type: 'Line',
+            id: 'line' + i,
+            zIndex: 10,
+            position: {
+              top: 80,
+              left: 20 + i * 50,
+              width: 30,
+              height: 30
+            },
+            options: {
+              graphic: {
+                stroke: 'red',
+                lineWith: 10,
+                points: [
+                  { x: 0, y: 0 },
+                  { x: 30, y: 30 }
+                ]
+                // background: '/assets/scene4/matrix.png',
+                // stroke: false
+              }
+            }
+          };
         })
       ],
       acts: [
@@ -59,6 +84,23 @@ export const BaseComponent = () => {
                       }
                     ]
                   };
+                }),
+                ...new Array(3).fill(0).map((_, i) => {
+                  return {
+                    characterId: 'line' + i,
+                    characterActions: [
+                      {
+                        startTime: i * 1000,
+                        action: 'appear',
+                        payload: {
+                          animation: {
+                            duration: 700,
+                            effect: ['fadeIn', 'scaleIn', 'wipeIn'][i]
+                          }
+                        }
+                      }
+                    ]
+                  };
                 })
               ]
             }
diff --git a/packages/vstory/package.json b/packages/vstory/package.json
index d0625f66..f44b1c9e 100644
--- a/packages/vstory/package.json
+++ b/packages/vstory/package.json
@@ -25,10 +25,10 @@
   },
   "dependencies": {
     "@visactor/vchart": "1.11.5",
-    "@visactor/vrender": "0.19.20-alpha.2",
-    "@visactor/vrender-core": "0.19.20-alpha.2",
-    "@visactor/vrender-kits": "0.19.20-alpha.2",
-    "@visactor/vrender-components": "0.19.20-alpha.2",
+    "@visactor/vrender": "0.19.20-alpha.3",
+    "@visactor/vrender-core": "0.19.20-alpha.3",
+    "@visactor/vrender-kits": "0.19.20-alpha.3",
+    "@visactor/vrender-components": "0.19.20-alpha.3",
     "@visactor/vutils": "~0.18.4"
   },
   "devDependencies": {
diff --git a/packages/vstory/src/animate/wipeIn.ts b/packages/vstory/src/animate/wipeIn.ts
index 050f14b4..011369a9 100644
--- a/packages/vstory/src/animate/wipeIn.ts
+++ b/packages/vstory/src/animate/wipeIn.ts
@@ -1,183 +1,87 @@
-import { ACustomAnimate } from '@visactor/vrender';
-import type { EasingType, ILinearGradient } from '@visactor/vrender';
+// import { ACustomAnimate } from '@visactor/vrender';
+// import type { EasingType, ILinearGradient } from '@visactor/vrender';
 
-export enum Direction {
-  LEFT_TO_RIGHT = 0,
-  RIGHT_TO_LEFT = 1,
-  TOP_TO_BOTTOM = 2,
-  BOTTOM_TO_TOP = 3,
-  STROKE = 4
-}
+// export enum Direction {
+//   LEFT_TO_RIGHT = 0,
+//   RIGHT_TO_LEFT = 1,
+//   TOP_TO_BOTTOM = 2,
+//   BOTTOM_TO_TOP = 3
+// }
 
-export class Wipe extends ACustomAnimate<any> {
-  declare direction: number;
-  declare toFill: string;
-  declare toStroke: string;
-  declare fillGradient: ILinearGradient;
-  declare strokeGradient: ILinearGradient;
-  declare fill: boolean;
-  declare stroke: boolean;
-  constructor(
-    from: any,
-    to: any,
-    duration: number,
-    easing: EasingType,
-    params?: { direction?: number; fill?: boolean; stroke?: boolean }
-  ) {
-    super(from, to, duration, easing, params);
-    const { direction = Direction.LEFT_TO_RIGHT, fill = true, stroke = true } = params || {};
-    this.direction = direction;
-    this.fill = fill;
-    this.stroke = stroke;
-    this.fillGradient = {
-      gradient: 'linear',
-      stops: []
-    };
-    this.strokeGradient = {
-      gradient: 'linear',
-      stops: []
-    };
-  }
+// export class Wipe extends ACustomAnimate<any> {
+//   declare direction: number;
 
-  getEndProps(): Record<string, any> {
-    return {
-      fill: this.toFill,
-      stroke: this.toStroke
-    };
-  }
+//   constructor(
+//     from: any,
+//     to: any,
+//     duration: number,
+//     easing: EasingType,
+//     params?: { direction?: number; fill?: boolean; stroke?: boolean }
+//   ) {
+//     super(from, to, duration, easing, params);
+//     const { direction = Direction.LEFT_TO_RIGHT, fill = true, stroke = true } = params || {};
+//     this.direction = direction;
 
-  onBind(): void {
-    this.toFill = this.target.getComputedAttribute('fill');
-    this.toStroke = this.target.getComputedAttribute('stroke');
-  }
+//   }
 
-  onEnd(): void {
-    return;
-  }
+//   getEndProps(): Record<string, any> {
+//     return {
+//     };
+//   }
 
-  onUpdate(end: boolean, ratio: number, out: Record<string, any>): void {
-    if (!this.toFill) {
-      return;
-    }
-    if (!this.toStroke) {
-      return;
-    }
-    switch (this.direction) {
-      case Direction.RIGHT_TO_LEFT:
-        this.rightToLeft(end, ratio, out);
-        break;
-      case Direction.TOP_TO_BOTTOM:
-        this.topToBottom(end, ratio, out);
-        break;
-      case Direction.BOTTOM_TO_TOP:
-        this.bottomToTop(end, ratio, out);
-        break;
-      case Direction.STROKE:
-        this.strokePath(end, ratio, out);
-        break;
-      default:
-        this.leftToRight(end, ratio, out);
-        break;
-    }
+//   onBind(): void {
 
-    if (end) {
-      out.fill = this.toFill;
-      out.stroke = this.toStroke;
-    } else {
-      if (this.fill) {
-        const toFillColor = this.toFill;
-        this.fillGradient.stops = [
-          { offset: 0, color: toFillColor },
-          { offset: ratio, color: toFillColor },
-          { offset: Math.min(1, ratio * 2), color: 'white' }
-        ];
-        out.fill = this.fillGradient;
-      }
+//   }
 
-      if (this.stroke) {
-        const toStrokeColor = this.toStroke;
-        this.strokeGradient.stops = [
-          { offset: 0, color: toStrokeColor },
-          { offset: ratio, color: toStrokeColor },
-          { offset: Math.min(1, ratio * 2), color: 'white' }
-        ];
-        out.stroke = this.strokeGradient;
-      }
-    }
-  }
+//   onEnd(): void {
+//     return;
+//   }
 
-  leftToRight(end: boolean, ratio: number, out: Record<string, any>) {
-    if (this.fill) {
-      this.fillGradient.x0 = 0;
-      this.fillGradient.y0 = 0;
-      this.fillGradient.x1 = 1;
-      this.fillGradient.y1 = 0;
-    }
-    if (this.stroke) {
-      this.strokeGradient.x0 = 0;
-      this.strokeGradient.y0 = 0;
-      this.strokeGradient.x1 = 1;
-      this.strokeGradient.y1 = 0;
-    }
-  }
+//   onUpdate(end: boolean, ratio: number, out: Record<string, any>): void {
+//     console.log('onUpdate');
 
-  strokePath(end: boolean, ratio: number, out: Record<string, any>) {
-    if (this.fill) {
-      this.fillGradient.x0 = 0;
-      this.fillGradient.y0 = 0;
-      this.fillGradient.x1 = 1;
-      this.fillGradient.y1 = 0;
-    }
-    if (this.stroke) {
-      const dashLen = 300;
-      const offset = ratio * dashLen;
-      out.lineDash = [offset, dashLen - offset];
-    }
-    return;
-  }
+//     switch (this.direction) {
+//       case Direction.RIGHT_TO_LEFT:
+//         this.rightToLeft(end, ratio, out);
+//         break;
+//       case Direction.TOP_TO_BOTTOM:
+//         this.topToBottom(end, ratio, out);
+//         break;
+//       case Direction.BOTTOM_TO_TOP:
+//         this.bottomToTop(end, ratio, out);
+//         break;
+//       case Direction.STROKE:
+//         this.strokePath(end, ratio, out);
+//         break;
+//       default:
+//         this.leftToRight(end, ratio, out);
+//         break;
+//     }
 
-  rightToLeft(end: boolean, ratio: number, out: Record<string, any>) {
-    if (this.fill) {
-      this.fillGradient.x0 = 1;
-      this.fillGradient.y0 = 0;
-      this.fillGradient.x1 = 0;
-      this.fillGradient.y1 = 0;
-    }
-    if (this.stroke) {
-      this.strokeGradient.x0 = 1;
-      this.strokeGradient.y0 = 0;
-      this.strokeGradient.x1 = 0;
-      this.strokeGradient.y1 = 0;
-    }
-  }
+//     if (end) {
+//       out.fill = this.toFill;
+//       out.stroke = this.toStroke;
+//     } else {
+//       if (this.fill && this.toFill) {
+//         const toFillColor = this.toFill;
+//         this.fillGradient.stops = [
+//           { offset: 0, color: toFillColor },
+//           { offset: ratio, color: toFillColor },
+//           { offset: Math.min(1, ratio * 2), color: 'white' }
+//         ];
+//         out.fill = this.fillGradient;
+//       }
 
-  topToBottom(end: boolean, ratio: number, out: Record<string, any>) {
-    if (this.fill) {
-      this.fillGradient.x0 = 0;
-      this.fillGradient.y0 = 0;
-      this.fillGradient.x1 = 0;
-      this.fillGradient.y1 = 1;
-    }
-    if (this.stroke) {
-      this.strokeGradient.x0 = 0;
-      this.strokeGradient.y0 = 0;
-      this.strokeGradient.x1 = 0;
-      this.strokeGradient.y1 = 1;
-    }
-  }
+//       if (this.stroke && this.toStroke) {
+//         const toStrokeColor = this.toStroke;
+//         this.strokeGradient.stops = [
+//           { offset: 0, color: toStrokeColor },
+//           { offset: ratio, color: toStrokeColor },
+//           { offset: Math.min(1, ratio * 2), color: 'white' }
+//         ];
+//         out.stroke = this.strokeGradient;
+//       }
+//     }
+//   }
 
-  bottomToTop(end: boolean, ratio: number, out: Record<string, any>) {
-    if (this.fill) {
-      this.fillGradient.x0 = 0;
-      this.fillGradient.y0 = 1;
-      this.fillGradient.x1 = 0;
-      this.fillGradient.y1 = 0;
-    }
-    if (this.stroke) {
-      this.strokeGradient.x0 = 0;
-      this.strokeGradient.y0 = 1;
-      this.strokeGradient.x1 = 0;
-      this.strokeGradient.y1 = 0;
-    }
-  }
-}
+// }
diff --git a/packages/vstory/src/constants/config.ts b/packages/vstory/src/constants/config.ts
new file mode 100644
index 00000000..2a40cee4
--- /dev/null
+++ b/packages/vstory/src/constants/config.ts
@@ -0,0 +1,6 @@
+export enum Direction {
+  LEFT_TO_RIGHT = 0,
+  RIGHT_TO_LEFT = 1,
+  TOP_TO_BOTTOM = 2,
+  BOTTOM_TO_TOP = 3
+}
diff --git a/packages/vstory/src/player/player.ts b/packages/vstory/src/player/player.ts
index 57a98188..9bb3f37c 100644
--- a/packages/vstory/src/player/player.ts
+++ b/packages/vstory/src/player/player.ts
@@ -57,6 +57,7 @@ export class Player implements IPlayer {
   // 清除当前状态，一般用于回放操作
   reset() {
     this._scheduler.clearState();
+    this._story.canvas.getStage().getTimeline().clear();
     return;
   }
 
@@ -68,9 +69,14 @@ export class Player implements IPlayer {
       t -= totalTime;
     }
     if (lastTime > t) {
-      this.reset();
-      this._currTime = 0;
-      this.tickTo(0);
+      // 先结束这一块内容，设置到totalTime，让动画结束
+      if (lastTime < totalTime) {
+        t = totalTime + 0.01;
+      } else {
+        this.reset();
+        this._currTime = 0;
+        this.tickTo(0);
+      }
     }
 
     const actions = this._scheduler.getActionsInRange(lastTime, t);
diff --git a/packages/vstory/src/player/processor/component/common-component.ts b/packages/vstory/src/player/processor/component/common-component.ts
index 16a3365a..79ddcbf9 100644
--- a/packages/vstory/src/player/processor/component/common-component.ts
+++ b/packages/vstory/src/player/processor/component/common-component.ts
@@ -6,7 +6,7 @@ import { ActionProcessorItem } from '../processor-item';
 import type { EasingType, IGraphic } from '@visactor/vrender-core';
 import type { IFadeInParams, IScaleInParams, IWipeInParams } from '../interface/appear-action';
 import { canDoGraphicAnimation } from './utils';
-import { Wipe } from '../../../animate/wipeIn';
+// import { Wipe } from '../../../animate/wipeIn';
 
 // export const appearEffectMap = {
 //   fade: fadeIn,
@@ -15,7 +15,12 @@ import { Wipe } from '../../../animate/wipeIn';
 //   wipe: wipeIn
 // };
 
-export function fadeIn(graphic: IGraphic, params: IFadeInParams): boolean {
+function fadeIn(character: ICharacter, animation: IFadeInParams, effect: string) {
+  const graphics = getCharacterByEffect(character, effect) as IGraphic[];
+  graphics.forEach(graphic => _fadeIn(graphic, animation as any));
+}
+
+function _fadeIn(graphic: IGraphic, params: IFadeInParams): boolean {
   if (!canDoGraphicAnimation(graphic, params)) {
     return false;
   }
@@ -35,7 +40,12 @@ export function fadeIn(graphic: IGraphic, params: IFadeInParams): boolean {
   return true;
 }
 
-export function scaleIn(graphic: IGraphic, params: IScaleInParams): boolean {
+function scaleIn(character: ICharacter, animation: IFadeInParams, effect: string) {
+  const graphics = getCharacterByEffect(character, effect) as IGraphic[];
+  graphics.forEach(graphic => _scaleIn(graphic, animation as any));
+}
+
+function _scaleIn(graphic: IGraphic, params: IScaleInParams): boolean {
   if (!canDoGraphicAnimation(graphic, params)) {
     return false;
   }
@@ -53,34 +63,37 @@ export function scaleIn(graphic: IGraphic, params: IScaleInParams): boolean {
   return true;
 }
 
-const Direction = {
-  left: 0,
-  right: 1,
+const Direction: any = {
+  right: 0,
+  left: 1,
   top: 2,
-  bottom: 3,
-  stroke: 4
+  bottom: 3
 };
 
-export function wipeIn(graphic: IGraphic, params: IWipeInParams) {
+function wipeIn(character: ICharacter, animation: IFadeInParams, effect: string) {
+  const graphic = getCharacterParentGraphic(character);
+  _wipeIn(graphic, animation as any);
+}
+function _wipeIn(graphic: IGraphic, params: IWipeInParams) {
   if (!canDoGraphicAnimation(graphic, params)) {
     return false;
   }
 
   const { wipe = {} } = params;
-  const from = wipe.from ?? params.from ?? 'left';
+  const from = wipe.from ?? params.from ?? 'right';
   const duration = wipe.duration ?? params.duration;
   const easing = wipe.easing ?? params.easing;
 
-  const { fill } = graphic.attribute;
-  if (isString(fill)) {
-    graphic.animate().play(
-      new Wipe({}, {}, duration, easing as EasingType, {
-        direction: Direction[from]
-      })
-    );
-  } else if (isObject(fill)) {
-    // 渐变色支持
-  }
+  graphic.setAttributes({
+    wipeDirection: Direction[from],
+    wipeRatio: 0
+  } as any);
+  graphic
+    .animate()
+    .to({ wipeRatio: 1 }, duration, easing)
+    .onEnd(() => {
+      graphic.setAttributes({ wipeRatio: 1 } as any);
+    });
   return true;
 }
 
@@ -116,27 +129,28 @@ export class CommonAppearActionProcessor extends ActionProcessorItem {
         effectFunc = wipeIn;
         break;
     }
+    effectFunc(character, animation as any, effect);
     // 获取相关图形
-    const graphics = this.getCharacterByEffect(character, effect);
+    // const graphics = this.getCharacterByEffect(character, effect);
     // 执行appearEffect
-    graphics.forEach(graphic => effectFunc(graphic, animation as any));
+    // graphics.forEach(graphic => effectFunc(graphic, animation as any));
   }
+}
 
-  protected getCharacterParentGraphic(character: ICharacter) {
-    return character.getGraphicParent();
-  }
+function getCharacterParentGraphic(character: ICharacter) {
+  return character.getGraphicParent();
+}
 
-  protected getCharacterGraphic(character: ICharacter) {
-    return character.getGraphicParent().getChildren() as IGraphic[];
-  }
+function getCharacterGraphic(character: ICharacter) {
+  return character.getGraphicParent().getChildren() as IGraphic[];
+}
 
-  protected getCharacterByEffect(character: ICharacter, effect: 'move' | string) {
-    // 图表仅操作父节点.
-    // @ts-ignore
-    if (character._graphic.type === 'chart') {
-      return [this.getCharacterParentGraphic(character)];
-    }
-    // move效果, 一定是对parent的操作
-    return effect === 'move' ? [this.getCharacterParentGraphic(character)] : this.getCharacterGraphic(character);
+function getCharacterByEffect(character: ICharacter, effect: 'move' | string) {
+  // 图表仅操作父节点.
+  // @ts-ignore
+  if (character._graphic.type === 'chart') {
+    return [getCharacterParentGraphic(character)];
   }
+  // move效果, 一定是对parent的操作
+  return effect === 'move' ? [getCharacterParentGraphic(character)] : getCharacterGraphic(character);
 }
diff --git a/packages/vstory/src/player/processor/component/line/line-appear.ts b/packages/vstory/src/player/processor/component/line/line-appear.ts
new file mode 100644
index 00000000..44dc6474
--- /dev/null
+++ b/packages/vstory/src/player/processor/component/line/line-appear.ts
@@ -0,0 +1,8 @@
+import { CommonAppearActionProcessor } from '../common-component';
+
+export class LineAppearActionProcessor extends CommonAppearActionProcessor {
+  name: 'appear';
+  constructor() {
+    super();
+  }
+}
diff --git a/packages/vstory/src/player/processor/component/rect/rect.ts b/packages/vstory/src/player/processor/component/rect/rect-appear.ts
similarity index 100%
rename from packages/vstory/src/player/processor/component/rect/rect.ts
rename to packages/vstory/src/player/processor/component/rect/rect-appear.ts
diff --git a/packages/vstory/src/player/processor/processor.ts b/packages/vstory/src/player/processor/processor.ts
index ce0c3254..74c931bb 100644
--- a/packages/vstory/src/player/processor/processor.ts
+++ b/packages/vstory/src/player/processor/processor.ts
@@ -58,7 +58,9 @@ export class ActionProcessor implements IActionProcessor {
 
     const processor = this.getProcessor(character.spec.type, action.action);
 
-    logger('error', `获取processor失败，请检查 ${character.spec.type} 是否支持 ${action.action}`);
+    if (!processor) {
+      logger('error', `获取processor失败，请检查 ${character.spec.type} 是否支持 ${action.action}`);
+    }
     return processor.getStartTimeAndDuration(action);
 
     // characterActions.forEach(action => {
diff --git a/packages/vstory/src/player/processor/processorMap.ts b/packages/vstory/src/player/processor/processorMap.ts
index c91a3e33..aa5b0156 100644
--- a/packages/vstory/src/player/processor/processorMap.ts
+++ b/packages/vstory/src/player/processor/processorMap.ts
@@ -1,7 +1,8 @@
 import { ACTION_TYPE } from '../../constants/action';
 import { StoryChartType, StoryComponentType } from '../../constants/character';
 import { VChartAppearActionProcessor } from './chart/vchart';
-import { RectAppearActionProcessor } from './component/rect/rect';
+import { LineAppearActionProcessor } from './component/line/line-appear';
+import { RectAppearActionProcessor } from './component/rect/rect-appear';
 
 export const processorChartMap = {
   [StoryChartType.VCHART]: {
@@ -12,6 +13,9 @@ export const processorChartMap = {
 export const processorComponentMap = {
   [StoryComponentType.RECT]: {
     [ACTION_TYPE.APPEAR]: new RectAppearActionProcessor()
+  },
+  [StoryComponentType.LINE]: {
+    [ACTION_TYPE.APPEAR]: new LineAppearActionProcessor()
   }
 };
 
diff --git a/packages/vstory/src/story/character-tree/character-tree.ts b/packages/vstory/src/story/character-tree/character-tree.ts
index 4ea8bf73..1a279025 100644
--- a/packages/vstory/src/story/character-tree/character-tree.ts
+++ b/packages/vstory/src/story/character-tree/character-tree.ts
@@ -45,7 +45,7 @@ export class CharacterTree implements ICharacterTree {
         if (!this._characters[(<ICharacterSpec>spec).id]) {
           this._characters[(<ICharacterSpec>spec).id] = StoryFactory.createCharacter(<ICharacterSpec>spec, option);
         }
-        return this._characters[(<ICharacterSpec>spec).id];
+        // return this._characters[(<ICharacterSpec>spec).id];
       }
     });
   }
diff --git a/packages/vstory/src/story/character/component/character-group/component-group-graphic-picker.ts b/packages/vstory/src/story/character/component/character-group/component-group-graphic-picker.ts
new file mode 100644
index 00000000..70d21a66
--- /dev/null
+++ b/packages/vstory/src/story/character/component/character-group/component-group-graphic-picker.ts
@@ -0,0 +1,36 @@
+// import type { IPoint } from '@visactor/vutils';
+// import { inject, injectable, getTheme, CircleRender, getScaledStroke, CIRCLE_NUMBER_TYPE } from '@visactor/vrender';
+// import type {
+//   IGraphicAttribute,
+//   ICircle,
+//   IContext2d,
+//   IMarkAttribute,
+//   IThemeAttribute,
+//   IGraphicPicker,
+//   IGraphicRender,
+//   IPickParams
+// } from '@visactor/vrender';
+// import { CHART_NUMBER_TYPE } from './component-group-graphic';
+
+// @injectable()
+// export class VChartPicker extends DefaultCanvasGroupPicker implements IGraphicPicker {
+//   type = 'vstory-component-group';
+//   numberType: number = CHART_NUMBER_TYPE;
+
+//   contains(chart: any, point: any, params?: IPickParams): boolean | any {
+//     const vChart = (chart as Chart).vchart;
+//     const chartStage = vChart.getStage();
+//     // @ts-ignore
+//     chartStage._editor_needRender = true;
+//     const matrix = chart.globalTransMatrix.clone();
+//     const stageMatrix = chart.stage.window.getViewBoxTransform();
+//     matrix.multiply(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f);
+//     chartStage.window.setViewBoxTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
+//     chartStage.dirtyBounds?.clear();
+//     const nextP = { x: 0, y: 0 };
+//     matrix.transformPoint(point, nextP);
+//     const graphic = chartStage.pick(nextP.x, nextP.y);
+
+//     return graphic;
+//   }
+// }
diff --git a/packages/vstory/src/story/character/component/character-group/component-group-graphic-render.ts b/packages/vstory/src/story/character/component/character-group/component-group-graphic-render.ts
new file mode 100644
index 00000000..6b52dae6
--- /dev/null
+++ b/packages/vstory/src/story/character/component/character-group/component-group-graphic-render.ts
@@ -0,0 +1,70 @@
+import type {
+  IContext2d,
+  IDrawContext,
+  IGraphicAttribute,
+  IGraphicRender,
+  IGraphicRenderDrawParams,
+  IMarkAttribute,
+  IRenderService,
+  IThemeAttribute,
+  IGraphic,
+  IGroup
+} from '@visactor/vrender';
+import { injectable, DefaultCanvasGroupRender } from '@visactor/vrender';
+import { CHART_NUMBER_TYPE } from './component-group-graphic';
+import { Direction } from '../../../../constants/config';
+
+export const ChartRender = Symbol.for('ChartRender');
+export const ChartRenderContribution = Symbol.for('ChartRenderContribution');
+
+@injectable()
+export class ComponentGroupRender extends DefaultCanvasGroupRender implements IGraphicRender {
+  type: any = 'vstory-component-group';
+  numberType: number = CHART_NUMBER_TYPE;
+
+  draw(group: IGroup, renderService: IRenderService, drawContext: IDrawContext, params?: IGraphicRenderDrawParams) {
+    const { context } = drawContext;
+    if (!context) {
+      return;
+    }
+    const { wipeDirection, wipeRatio, wipeColor, wipeBlur } = group.attribute as any;
+    const drawWipe = isFinite(wipeRatio);
+    let x1;
+    let y1;
+    let x2;
+    let y2;
+    if (drawWipe) {
+      const b = group.AABBBounds;
+      if (wipeDirection === Direction.LEFT_TO_RIGHT) {
+        x1 = b.x1;
+        y1 = b.y1;
+        x2 = x1 + b.width() * wipeRatio;
+        y2 = b.height() + y1;
+      } else if (wipeDirection === Direction.RIGHT_TO_LEFT) {
+        x2 = b.x1;
+        y1 = b.y1;
+        x1 = x2 - b.width() * wipeRatio;
+        y2 = b.height() + y1;
+      } else if (wipeDirection === Direction.TOP_TO_BOTTOM) {
+        x1 = b.x1;
+        y1 = b.y1;
+        x2 = x1 + b.width();
+        y2 = b.height() * wipeRatio + y1;
+      } else if (wipeDirection === Direction.BOTTOM_TO_TOP) {
+        x1 = b.x1;
+        y2 = b.y1;
+        x2 = x1 + b.width();
+        y1 = y2 - b.height() * wipeRatio;
+      }
+      context.save();
+      context.setTransformForCurrent();
+      context.beginPath();
+      context.rect(x1, y1, x2 - x1, y2 - y1);
+      context.clip();
+    }
+    super.draw(group, renderService, drawContext, params);
+    if (drawWipe) {
+      context.restore();
+    }
+  }
+}
diff --git a/packages/vstory/src/story/character/component/character-group/component-group-graphic.ts b/packages/vstory/src/story/character/component/character-group/component-group-graphic.ts
new file mode 100644
index 00000000..b9c214db
--- /dev/null
+++ b/packages/vstory/src/story/character/component/character-group/component-group-graphic.ts
@@ -0,0 +1,31 @@
+import type { IVisactorGraphic } from '../../visactor/interface';
+import type { IBoundsLike } from '@visactor/vutils';
+import type { ISpec, IVChart } from '@visactor/vchart';
+import type { GraphicType, IGroupGraphicAttribute, ITicker } from '@visactor/vrender';
+import { genNumberType, Group } from '@visactor/vrender';
+
+export interface IChartGraphicAttribute extends IGroupGraphicAttribute {
+  renderCanvas: HTMLCanvasElement;
+  spec: any;
+  ClassType: any;
+  vchart: IVChart;
+  mode: string;
+  modeParams?: any;
+  dpr: number;
+  interactive: boolean;
+  animation: boolean;
+  disableTriggerEvent: boolean;
+  disableDirtyBounds: boolean;
+  viewBox: IBoundsLike;
+  ticker?: ITicker;
+  autoRender?: boolean;
+  chartInitOptions?: any;
+}
+
+export const CHART_NUMBER_TYPE = genNumberType();
+
+// @ts-ignore
+export class ComponentGroup extends Group implements IVisactorGraphic {
+  type: GraphicType = 'vstory-component-group' as any;
+  numberType: number = CHART_NUMBER_TYPE;
+}
diff --git a/packages/vstory/src/story/character/component/character.ts b/packages/vstory/src/story/character/component/character.ts
index 5ae3240c..8ae0463b 100644
--- a/packages/vstory/src/story/character/component/character.ts
+++ b/packages/vstory/src/story/character/component/character.ts
@@ -7,6 +7,7 @@ import type { Graphic } from './graphic/graphic';
 import { getLayoutFromWidget } from '../../utils/layout';
 import type { StoryEvent } from '../../interface/runtime-interface';
 import type { ICharacterPickInfo } from '../runtime-interface';
+import { ComponentGroup } from './character-group/component-group-graphic';
 
 export abstract class CharacterComponent extends CharacterBase {
   protected declare _spec: IComponentCharacterSpec;
@@ -34,7 +35,7 @@ export abstract class CharacterComponent extends CharacterBase {
   }
 
   protected _initGraphics(): void {
-    this._group = createGroup({
+    this._group = new ComponentGroup({
       ...getLayoutFromWidget(this._spec.position),
       angle: this._spec.options.angle,
       zIndex: this._spec.zIndex
diff --git a/packages/vstory/src/story/character/runtime-interface.ts b/packages/vstory/src/story/character/runtime-interface.ts
index 61409fe9..9623c054 100644
--- a/packages/vstory/src/story/character/runtime-interface.ts
+++ b/packages/vstory/src/story/character/runtime-interface.ts
@@ -3,6 +3,7 @@ import type { IPointLike } from '@visactor/vutils';
 import type { StoryCanvas } from '../canvas/canvas';
 import type { IStory, IStoryCanvas, StoryEvent } from '../interface/runtime-interface';
 import type { ICharacterSpec } from './dsl-interface';
+import type { Graphic } from './component/graphic/graphic';
 
 export interface ICharacterPickInfo {
   part: string;
@@ -17,7 +18,7 @@ export interface ICharacter {
   show: () => void;
   hide: () => void;
   getGraphicParent: () => IGroup;
-  graphic: IGroup;
+  graphic: Graphic | IGroup;
   tickTo: (t: number) => void;
 
   checkEvent: (event: StoryEvent) => false | (ICharacterPickInfo & any);
diff --git a/packages/vstory/src/story/index.ts b/packages/vstory/src/story/index.ts
index e46e35df..86e70883 100644
--- a/packages/vstory/src/story/index.ts
+++ b/packages/vstory/src/story/index.ts
@@ -12,14 +12,19 @@ import { CharacterComponentLine } from './character/component/characters/charact
 import { CharacterComponentImage } from './character/component/characters/character-image';
 import { CharacterComponentShape } from './character/component/characters/character-shape';
 import { VChartCharacter } from './character/chart/characters/vchart';
+import { ComponentGroupRender } from './character/component/character-group/component-group-graphic-render';
 
-const splitModule = new ContainerModule((bind: any) => {
+const splitModule = new ContainerModule(bind => {
   // chart渲染器注入
   bind(VChartRender).toSelf().inSingletonScope();
   bind(ChartRender).toService(VChartRender);
   bind(GraphicRender).toService(ChartRender);
   bind(VChartPicker).to(VChartPicker).inSingletonScope();
   bind(CanvasPickerContribution).toService(VChartPicker);
+
+  // component渲染器注入
+  bind(ComponentGroupRender).toSelf().inSingletonScope();
+  bind(GraphicRender).toService(ComponentGroupRender);
 });
 
 let _register = false;