diff --git a/README-cn.md b/README-cn.md
index 39acd46..0aff2a2 100644
--- a/README-cn.md
+++ b/README-cn.md
@@ -8,7 +8,13 @@ Slidev-theme-rich
   
 一个Slidev主题，提供丰富的UI组件和令人惊叹的视觉效果。
 
-  
+
+![](https://images.jieyu.ai/images/2024/07/cover.gif)
+![alt text](https://images.jieyu.ai/images/2024/07/mockup-device.gif)
+![](https://images.jieyu.ai/images/2024/07/markmap.gif)
+![](https://images.jieyu.ai/images/2024/07/soartext.gif)
+![](https://images.jieyu.ai/images/2024/07/timeline.gif)
+
 关于Slidev，请参考[Slidev](https://github.com/slidevjs/slidev).
 
  🛠 安装
@@ -47,7 +53,7 @@ Slidev-theme-rich
 
 ###  Device
 
-![alt text](public/device-mockup.png)
+![alt text](https://images.jieyu.ai/images/2024/07/mockup-device.gif)
 
   
 由 Devices.css 提供支持，支持 10 多种设备，包括 iPhone、Macbook、iMac、Galaxy、Google Pixels、Apple-Watch 等。
@@ -66,7 +72,7 @@ Slidev-theme-rich
   
 更多设备名请参考devices.css的文档
 
-####  样式
+####  Styling
 
   
 您可以向组件添加 unocss 指令，即类似 `class="absolute left-50px"` 的指令来调整位置和大小。
@@ -88,7 +94,7 @@ Slidev-theme-rich
   
 您还可以添加特定的样式，就像第 3 行那样。
 
-**请注意，这里我们使用了 `abs` 而不是 `absolute` 。这是一个与后者相同的类。**
+**请注意，这里我们使用了 `abs` 而不是 `absolute` 。这是一个与后者完全相同的类，但书写起来更简洁**
 
 ####  用法示例
 
@@ -109,68 +115,6 @@ Slidev-theme-rich
 
 在示例中，我们只是将视频放入设备的屏幕中。但实际上，任何有效的 html/markdown 内容都可以。
 
-###  Audio
-
-提供带有音量控制、基本淡入、淡出、延迟控制和预定义音频流集合的音频播放。
-
-  
-以下屏幕截图显示了内置音频列表：
-
-![alt text](public/audio.png)
-
-####  props
-
- 
-| name    | type   | default | description                                                                                           |
-| ------- | ------ | ------- | ----------------------------------------------------------------------------------------------------- |
-| at      | number | -1      | controls when the audio is played. It can be overridden by add `controls` attribute on the component. |
-| name    | string | None    | required. The name of predefined audio, or the src url of the audio.                                  |
-| fadeOut | number | 0       | fadeOut time in milliseconds                                                                          |
-| fadeIn  | number | 0       | fadeIn time in milliseconds                                                                           |
-| volume  | number | 1       | the volume of the audio                                                                               |
-| delay   | number | 0       | delay time in milliseconds                                                                            |
-
-
-####  样式
-
-  
-不需要任何样式设计。默认情况下，当 `$slidev.nav.clicks` 等于 `:at` 时，Audio 组件将在后台自动播放，因此没有附加 UI。您可以将 `controls` 添加到其中，如下所示：
-
-```vue
-    <Audio name="wechat-huwo" controls />
-```
-
-  
-这将显示一个播放控制器。
-
-####  用法示例
-
-```html
-    <Audio name="wechat-dingdong" controls />
-    <Audio name="giggling1" :at=0 :delay=3000 :fadeOut=1000/>
-    <Audio name="https://.../*.wav"/>
-```
-
-###  视频
-
-  
-html 视频标签的简单包装。
-
-####  props
-
-  
-name|type|default|description at|number|-1|控制何时显示视频。 -1 表示始终显示，只要页面存在，就始终显示。否则，仅当 `$slidev.nav.clicks` 等于 `at` 时才显示视频。 muted|boolean|false|控制视频是否静音 src|string|None|视频的 src
-
-####  样式
-
-  
-使用通用 unocss 指令来控制视频的位置和大小。
-
-####  用法示例
-
-```html
-    <Video src="https://cdn.pixabay.com/video/2016/09/21/5373-183629075_medium.mp4" class="abs top-100px left-100px w-400px h-400px" />
-```
 
 ###  Card
 
@@ -196,7 +140,7 @@ name|type|default|description at|number|-1|控制何时显示视频。 -1 表示
 | color         | string  | rgb(223,248,251) | the title's background color                           |
 | titleFont     | string  | 20px             | font size of the title                                 |
 
-####  样式
+#### Styling
 
   
 使用通用 unocss 指令来控制组件的位置和大小。
@@ -222,7 +166,7 @@ name|type|default|description at|number|-1|控制何时显示视频。 -1 表示
     </Card>
 ```
 
-###  轮廓
+###  Profile
 
 ![alt text](public/profile.png)
 
@@ -242,7 +186,7 @@ name|type|default|description at|number|-1|控制何时显示视频。 -1 表示
 | seq       | string | 1       | 序列号。如果头像存在则将被忽略。 |
 
 
-####  样式
+#### Styling
 
   
 使用通用 unocss 指令来控制组件的位置和大小。
@@ -278,7 +222,7 @@ Card变体的另一个例子。背景和正文被S型曲线分开。
 | background    | 字符串 | ""    | 背景。如果未提供，则将按主题的primary/third 颜色来进行计算 |
 
 
-####  样式
+#### Styling
 
   
 除了 props 中列出的之外，其他部分可以通过通用 unocss 指令指定。
@@ -301,7 +245,32 @@ Card变体的另一个例子。背景和正文被S型曲线分开。
     </Scard>
 ```
 
-###  标记图
+### Anime
+
+Animate.css提供了几十种简单但常用的动画。但直接使用它并不方便，比如需要额外引入css文件，样式声明较长、不易记；如果是退出效果，动画在退出动作执行完之后，仍然会回到原始状态等等。
+
+我们提供Anime这个组件，以便可以更容易地使用Animate.css。
+
+#### props
+
+| name   | type                  | default | description                                              |
+| ------ | --------------------- | ------- | -------------------------------------------------------- |
+| action | String                | ''      | 必须提供，动画名称                                       |
+| dur    | String                | 1s      | 动画持续时间                                             |
+| delay  | String                | 0ms     | 允许实现延迟加载                                         |
+| at     | Number, Array[Number] | -1      | 只在at指定的$clicks时加显示本组件。-1意味着与$clicks无关 |
+
+#### Style
+无特殊样式。调用者传入的样式会绑定到组件上。
+
+#### 用法示例
+
+```
+<Anime class="abs w-full h-full left-20%">Bounce me</Anime>
+```
+
+
+###  Markmap
 
   
 以交互方式显示演示文稿的议程和目录。
@@ -321,7 +290,7 @@ Card变体的另一个例子。背景和正文被S型曲线分开。
 | pan              | boolean | true | 显示控制面板                       |
 
 
-####  样式
+#### Styling
 
   
 使用通用 unocss 指令来控制组件的位置和大小。
@@ -342,6 +311,136 @@ Card变体的另一个例子。背景和正文被S型曲线分开。
   
 确保将您的内容封装到一对“\`\`\`”（三个backtits）指令中。
 
+### Timeline
+
+Timeline是故事叙述的好帮手。
+
+![](https://images.jieyu.ai/images/2024/07/timeline.gif)
+
+您通过yaml语法来定义时间轴。其语法是：
+
+```yaml
+
+- event: 1606年
+  img: https://*.jpg w=150 roundCorner="50%" shadow="0 2px 5px rgba(0, 0, 0, 0.5)"
+  title: 第一张股票
+  text: 1606年，荷兰东印度公司发行了人类第一张股票
+```
+
+每一项都有event,img, title,subtitle,text来组成。subtitle和text可以省略。
+
+img字段允许添加参数以指定大小、是否圆角和添加阴影。
+
+使用方法：
+
+```md
+<Timeline class="abs h-full w-full">
+
+your yaml content here
+</Timeline>
+```
+
+### SoarText
+
+如果你只有很少几张图，要通过slidev录制一个好的视频，SoarText将是好帮手。它通过把字幕动画化，弥补了视觉元素的不足。
+
+使用方法：
+
+```md
+<SoarText class="abs top-150px w-80% h-80%  left-50px" :offsetY=200 colorMix="None">
+
+your subtitles here
+</SoarText>
+```
+
+SoarText的内容通过markdown来指定：
+
+```md
+
+Nature’s first green is gold<bg>https://images.unsplash.com/photo-1555465910-31f7f20a184d?q=80&w=600
+
+Her hardest hue to hold
+
+Her early leaf’s a flower<bg>https://images.unsplash.com/photo-1478217655296-6ca53ca4b677?w=800
+
+But only so an hour
+
+Then leaf subsides to leaf
+
+So Eden sank to grief
+
+So dawn goes down to day
+
+Nothing gold can stay
+```
+
+每一行将在屏幕上作为一个独立的显示部分，当文本较多时，自动缩小字体，反之，自动放大字体。它由文本及背景指标组成。背景可以指定为一张图片。它与显示文本间通过<bg>来分隔。
+
+
+
+###  Audio
+
+提供带有音量控制、基本淡入、淡出、延迟控制和预定义音频流集合的音频播放。
+
+  
+以下屏幕截图显示了内置音频列表：
+
+![alt text](public/audio.png)
+
+####  props
+
+ 
+| name    | type   | default | description                                                                                           |
+| ------- | ------ | ------- | ----------------------------------------------------------------------------------------------------- |
+| at      | number | -1      | controls when the audio is played. It can be overridden by add `controls` attribute on the component. |
+| name    | string | None    | required. The name of predefined audio, or the src url of the audio.                                  |
+| fadeOut | number | 0       | fadeOut time in milliseconds                                                                          |
+| fadeIn  | number | 0       | fadeIn time in milliseconds                                                                           |
+| volume  | number | 1       | the volume of the audio                                                                               |
+| delay   | number | 0       | delay time in milliseconds                                                                            |
+
+
+#### Styling
+
+  
+不需要任何样式设计。默认情况下，当 `$slidev.nav.clicks` 等于 `:at` 时，Audio 组件将在后台自动播放，因此没有附加 UI。您可以将 `controls` 添加到其中，如下所示：
+
+```vue
+    <Audio name="wechat-huwo" controls />
+```
+
+  
+这将显示一个播放控制器。
+
+####  用法示例
+
+```html
+    <Audio name="wechat-dingdong" controls />
+    <Audio name="giggling1" :at=0 :delay=3000 :fadeOut=1000/>
+    <Audio name="https://.../*.wav"/>
+```
+
+###  Video
+
+  
+html 视频标签的简单包装。
+
+####  props
+
+  
+name|type|default|description at|number|-1|控制何时显示视频。 -1 表示始终显示，只要页面存在，就始终显示。否则，仅当 `$slidev.nav.clicks` 等于 `at` 时才显示视频。 muted|boolean|false|控制视频是否静音 src|string|None|视频的 src
+
+#### Styling
+
+  
+使用通用 unocss 指令来控制视频的位置和大小。
+
+####  用法示例
+
+```html
+    <Video src="https://cdn.pixabay.com/video/2016/09/21/5373-183629075_medium.mp4" class="abs top-100px left-100px w-400px h-400px" />
+```
+
  🔌 插件
 ------
 
diff --git a/components/Anime.vue b/components/Anime.vue
new file mode 100644
index 0000000..4bf3a46
--- /dev/null
+++ b/components/Anime.vue
@@ -0,0 +1,40 @@
+<script setup>
+import { isShow } from '../utils'
+import { computed, useAttrs } from 'vue'
+
+const props = defineProps({
+    at: {
+        type: [Number, Array],
+        default: -1
+    },
+    action: {
+        type: String,
+        required: true
+    },
+    dur: {
+        type: String,
+        default: "1s"
+    },
+    delay: {
+        type: String,
+        default: "0ms"
+    }
+})
+
+
+const animations = computed(() => {
+    return {
+        "animation": props.action,
+        "animation-duration": props.dur,
+        "animation-delay": props.delay,
+        "animation-fill-mode": "forwards",
+    }
+})
+</script>
+<template>
+    <div v-if="isShow(props.at, $clicks)" v-motion v-bind="$attrs">
+        <div :style="animations">
+            <slot />
+        </div>
+    </div>
+</template>
diff --git a/components/Markmap.vue b/components/Markmap.vue
index 3ba31f3..4d9600f 100644
--- a/components/Markmap.vue
+++ b/components/Markmap.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { Transformer } from 'markmap-lib';
 import { Markmap, deriveOptions } from 'markmap-view';
-import { computed, onMounted, onUpdated, ref } from 'vue';
+import { nextTick, onMounted, onUpdated, ref } from 'vue';
 
 const data = ref('')
 const transformer = new Transformer();
@@ -44,7 +44,11 @@ const update = () => {
 
 onUpdated(update);
 
-onMounted(() => {
+onMounted(async () => {
+    if ($renderContext.value !== 'slide') {
+        return
+    }
+
     // 初始化markmap思维导图
     const options = deriveOptions({
         "colorFreezeLevel": props.colorFreezeLevel,
@@ -55,9 +59,9 @@ onMounted(() => {
         "pan": props.pan,
     });
     mm.value = Markmap.create(svgRef.value, options);
+    await nextTick();
 
-
-    setTimeout(update, 500)
+    update();
 })
 </script>
 
diff --git a/components/SoarText.vue b/components/SoarText.vue
new file mode 100644
index 0000000..76e6a21
--- /dev/null
+++ b/components/SoarText.vue
@@ -0,0 +1,255 @@
+<script setup>
+import { onMounted, watchEffect, ref, reactive, nextTick, onUnmounted } from 'vue';
+import Anime from './Anime.vue';
+import tinycolor from 'tinycolor2';
+
+const text = ref(null)
+const lines = ref([])
+const animes = reactive([])
+let rendered = {}
+const container = ref(null)
+const backgrounds = {}
+const view = ref([])
+let observer
+
+const props = defineProps({
+    maxLines: {
+        type: Number,
+        default: 3
+    },
+    enter: {
+        type: Array,
+        default: [
+            'bounceIn',
+            'bounceInDown',
+            'bounceInLeft',
+            'bounceInRight',
+            'bounceInUp',
+            'fadeIn',
+            'fadeInDown',
+            'fadeInDownBig',
+            'fadeInLeft',
+            'fadeInLeftBig',
+            'fadeInRight',
+            'fadeInRightBig',
+            'fadeInUp',
+            'fadeInUpBig',
+            'fadeInTopLeft',
+            'fadeInTopRight',
+            'fadeInBottomLeft',
+            'fadeInBottomRight',
+            'flipInX',
+            'flipInY',
+            'lightSpeedInLeft',
+            'lightSpeedRight',
+            'rotateIn',
+            'rotateInDownLeft',
+            'rotateInDownRight',
+            'rotateInUpLeft',
+            'rotateInUpRight',
+            'rollIn',
+            'zoomIn',
+            'zoomInDown',
+            'zoomInLeft',
+            'zoomInRight',
+            'zoomInUp',
+            'slideInDown',
+            'slideInLeft',
+            'slideInRight',
+            'slideInUp',
+        ]
+    },
+    exit: {
+        type: Array,
+        default: [
+            'backOutDown',
+            'backOutUp',
+            'backOutLeft',
+            'backOutRight',
+            'bounceOut',
+            'bounceOutDown',
+            'bounceOutLeft',
+            'bounceOutRight',
+            'bounceOutUp',
+            'fadeOut',
+            'fadeOutDown',
+            'fadeOutDownBig',
+            'fadeOutLeft',
+            'fadeOutLeftBig',
+            'fadeOutRight',
+            'fadeOutRightBig',
+            'fadeOutUp',
+            'fadeOutUpBig',
+            'fadeOutTopLeft',
+            'fadeOutTopRight',
+            'fadeOutBottomLeft',
+            'fadeOutBottomRight',
+            'flipOutX',
+            'flipOutY',
+            'lightSpeedOutRight',
+            'lightSpeedOutLeft',
+            'rotateOut',
+            'rotateOutDownLeft',
+            'rotateOutDownRight',
+            'rotateOutUpLeft',
+            'rotateOutUpRight',
+            'rollOut',
+            'slideOutUp',
+            'slideOutDown',
+            'slideOutLeft',
+            'slideOutRight',
+            'zoomOut',
+            'zoomOutDown',
+            'zoomOutLeft',
+            'zoomOutRight',
+            'zoomOutUp',
+        ]
+    },
+    offsetY: {// The distance between the text appearance and the bottom
+        type: Number,
+        default: 0
+    },
+    colorMix: {//Text and background color blend mode
+        type: String,
+        default: "difference"
+    }
+})
+
+onUnmounted(() => {
+    if (observer && container.value) {
+        observer.unobserve(container.value);
+    }
+});
+
+onMounted(async () => {
+    if (text.value !== null && $renderContext.value === 'slide') {
+        animes.values = []
+        rendered = {}
+
+        text.value.textContent.split("\n").forEach(function (line) {
+            if (line === "")
+                return
+
+            let [subtitle, background] = line.split("<bg>")
+            lines.value.push(subtitle)
+            if (background) {
+                console.log(background)
+                backgrounds[lines.value.length - 1] = background
+            }
+        })
+    }
+
+    await nextTick()
+    observer = new ResizeObserver(entries => {
+        for (let entry of entries) {
+            const { width, height, top, left } = entry.contentRect;
+            if (width > 0 || height > 0) {
+                view.value = {
+                    "x": left,
+                    "y": top,
+                    "width": width,
+                    "height": height
+                }
+
+                console.log("size changed", view.value)
+            }
+        }
+    })
+
+    if (container.value) {
+        observer.observe(container.value);
+    }
+});
+
+function randomColor() {
+    let hue = Math.floor(Math.random() * 360);
+    let saturation = Math.floor(Math.random() * 30) + 70;
+    let lightness = Math.random() * 30 + 30;
+    let color = tinycolor({ h: hue, s: saturation, l: lightness })
+    return color
+}
+
+watchEffect(() => {
+    if ($renderContext.value !== 'slide' || !view.value.width || !view.value.height)
+        return
+
+    if ($clicks.value === 0) {
+        animes.splice(0);
+        rendered = {}
+    }
+
+    // set background
+    let img = backgrounds[$clicks.value]
+    if (img !== undefined) {
+        container.value.style.background = `rgba(0,0,0, 0.2) url("${img}") no-repeat center / cover`
+    }
+
+    let text = lines.value[$clicks.value]
+    if (text === undefined || text in rendered) {
+        //already rendered
+        return
+    }
+
+    let fontSize = Math.floor(view.value.width / text.length)
+    let enter_action = Math.floor(Math.random() * props.enter.length)
+    let color = randomColor(props.lightness)
+    let anime = {
+        text: text,
+        action: props.enter[enter_action],
+        style: {
+            left: 0,
+            fontSize: fontSize * 0.9 + "px",
+            textAlign: "center",
+            position: "absolute",
+            width: "100%",
+            lineHeight: fontSize * 1.2 + "px",
+            color: color,
+            "mix-blend-mode": props.colorMix,
+        }
+    }
+    animes.push(anime)
+
+    rendered[text] = {
+        text: text,
+        top: view.value.height - fontSize * 1.2,
+        fontSize: fontSize
+    }
+
+    // when new text is added, adjust old animes's position
+    let cum = 0
+    for (let i = animes.length - 1; i >= 0; i--) {
+        if (animes.length - i === props.maxLines + 1) {
+            // console.log(animes.length, i)
+            let j = Math.floor(Math.random() * props.exit.length);
+            animes[i].action = props.exit[j]
+        }
+
+        if (animes.length - i > props.maxLines + 1) {
+            // console.log(animes.length, i)
+            animes[i].style.display = "none"
+        }
+
+        let item = rendered[animes[i].text];
+        if (item === undefined) {
+            console.warn(`${text} not found in rendered`)
+            continue
+        }
+
+        cum += item.fontSize + 30
+        animes[i].style.top = view.value.height - cum - props.offsetY + "px"
+        console.log("calc top:", animes[i].text, view.value.height - cum - props.offsetY + "px")
+    }
+})
+
+</script>
+
+<template>
+    <div style="display: none" ref="text">
+        <slot />
+    </div>
+    <div v-bind="$attrs" v-motion ref="container">
+        <Anime v-for="(anime, index) in animes" :key="index" :action="anime.action" :style="anime.style">{{ anime.text
+            }}</Anime>
+    </div>
+</template>
+<style scoped></style>
diff --git a/components/Timeline.vue b/components/Timeline.vue
new file mode 100644
index 0000000..107dd2a
--- /dev/null
+++ b/components/Timeline.vue
@@ -0,0 +1,324 @@
+<script setup>
+
+import { ref, onMounted, reactive, watchEffect, nextTick } from 'vue';
+import { Icon } from '@iconify/vue'
+import { buildChatBotClipPath } from '../utils'
+
+import YAML from 'yaml';
+
+const props = defineProps({
+    layout: {
+        type: String,
+        default: "vertical"
+    }
+})
+
+const raw = ref(null)
+const data = reactive([])
+const wrapperBox = ref({})
+const timeline = ref(null)
+const eventBoxes = ref([])
+
+// how to move the timeline
+let offset = 0
+let lastClicks = 0
+
+function parseIconProperties(str) {
+    const parts = str.split(' ');
+    const obj = {};
+
+    obj.name = parts.shift();
+
+    parts.forEach(part => {
+        const [key, value] = part.split('=');
+        switch (key) {
+            case 'w':
+                obj.width = parseInt(value);
+                break;
+            case 'color':
+                obj.color = value;
+                break;
+        }
+    });
+
+    return obj;
+}
+function parseImageProperties(str) {
+    const urlPattern = /https?:\/\/[^\s]+\s/;
+    const widthPattern = /\sw=(\d+)/;
+    const roundCornerPattern = /\sroundCorner="([^"]+)"/;
+    const shadowPattern = /\sshadow="([^"]+)"/;
+
+    const urlMatch = str.match(urlPattern);
+    const url = urlMatch ? urlMatch[0] : '';
+
+    // width
+    const widthMatch = str.match(widthPattern);
+    const width = widthMatch ? parseInt(widthMatch[1], 10) : null;
+
+    // roundCorner
+    const roundCornerMatch = str.match(roundCornerPattern);
+    const roundCorner = roundCornerMatch ? roundCornerMatch[1] : null;
+
+    // shadow
+    const shadowMatch = str.match(shadowPattern);
+    const shadow = shadowMatch ? shadowMatch[1] : null;
+
+    return {
+        url,
+        width,
+        roundCorner,
+        shadow,
+    };
+}
+
+watchEffect(() => {
+    if ($renderContext.value !== 'slide')
+        return
+
+    if (timeline.value === null) {
+        return
+    }
+
+    if (timeline.value.clientWidth > 0) {
+        wrapperBox.value.width = timeline.value.clientWidth
+    }
+
+    if (timeline.value.clientHeight > 0) {
+        wrapperBox.value.height = timeline.value.clientHeight
+    }
+
+    if ($clicks.value !== lastClicks) {
+        offset += (lastClicks - $clicks.value) * 100
+        lastClicks = $clicks.value
+
+        timeline.value.style.transform = `translateY(${offset}px)`;
+    }
+})
+
+onMounted(async () => {
+    if (raw.value === null || $renderContext.value !== 'slide') {
+        return
+    }
+
+    let parsed = YAML.parse(raw.value.textContent)
+    for (let i = 0; i < parsed.length; i++) {
+        let item = parsed[i]
+        if (item.img) {
+            let img = parseImageProperties(item.img)
+            // console.log("img", img)
+            item.img = {
+                url: img.url,
+                style: {
+                    width: img.width + "px",
+                    height: img.width + "px",
+                    "object-fit": "cover",
+                    borderRadius: img.roundCorner,
+                    boxShadow: img.shadow,
+                }
+            }
+        }
+        if (item.icon) {
+            let icon = parseIconProperties(item.icon)
+            item.icon = {
+                name: icon.name,
+                style: {
+                    width: icon.width + "px",
+                    color: icon.color
+                }
+            }
+        }
+
+        if (item.title && !item["titleColor"]) {
+            item["titleColor"] = ""
+        }
+
+        if (item.subtitle && !item["subtitleColor"]) {
+            item["subtitleColor"] = ""
+        }
+
+        if (item.title && !item["textColor"]) {
+            item["textColor"] = ""
+        }
+        data.push(item)
+    }
+
+    // console.log("data", data)
+    await nextTick()
+
+    // 为各事件容器计算clipbox
+    eventBoxes.value.forEach((el, index) => {
+        let side = index % 2 == 0 ? "right" : "left"
+        let clipPath = buildChatBotClipPath(el.clientWidth, el.clientHeight, side, undefined, undefined, `event-box-${index}`)
+        el.style.clipPath = clipPath
+    })
+
+})
+
+const setRefs = (el, index) => {
+    if (!eventBoxes.value[index]) {
+        eventBoxes.value[index] = el;
+    }
+};
+
+</script>
+<style scoped>
+.timeline {
+    font-size: 2.5vw;
+    background: transparent;
+    position: relative;
+    overflow: hidden;
+    transition: transform 0.5s ease;
+    padding: 2em 0;
+}
+
+.timeline:before {
+    content: "";
+    position: absolute;
+    width: 2px;
+    height: 100%;
+    left: 50%;
+    top: 50%;
+    transform: translateY(-50%);
+    background-image: linear-gradient(to bottom,
+            rgba(0, 0, 0, 0),
+            rgba(0, 0, 0, 0.3) 20%,
+            rgba(0, 0, 0, 0.3) 80%,
+            rgba(0, 0, 0, 0));
+}
+
+.timeline-item {
+    position: relative;
+    width: 100%;
+    margin-bottom: 2em;
+}
+
+.timeline-event,
+.timeline-text {
+    flex-basis: calc(50% - 4vw);
+    padding: 0.5em 0;
+}
+
+.timeline-event {
+    background: #fcfcfc;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+
+    p {
+        text-align: center;
+        margin-top: 0.5em;
+    }
+
+    img {
+        display: block;
+    }
+
+    .icon {
+        display: block;
+        width: 100px;
+        height: 100px;
+        margin: 0 auto;
+    }
+}
+
+.timeline-text {
+    font-size: 1em;
+
+    .timeline-title {
+        font-size: 1.6em;
+    }
+
+    .timeline-subtitle {
+        font-size: 1.3em;
+    }
+
+    p {
+        font-size: 1em;
+        line-height: 1.2em;
+    }
+}
+
+.dot {
+    width: 2vw;
+    height: 2vw;
+    border-radius: 50%;
+    background-color: #f0f0f0;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+.timeline-item-even {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    width: 100%;
+    /* background: #fcfcfc; */
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
+}
+
+.timeline-even::after {
+    content: "";
+    display: block;
+    width: 2vw;
+    height: 2vw;
+    background-color: red;
+    border-radius: 50%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateY(-50%);
+    transform: translateX(-50%);
+}
+
+.timeline-item-odd {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    width: 100%;
+    /* background: #fcfcfc; */
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
+}
+</style>
+<template>
+    <div style="display:none" ref="raw">
+        <slot />
+    </div>
+    <div class="timeline" ref="timeline" v-bind="$attrs">
+        <div v-for="(item, index) in  data" :key="index" class="timeline-item">
+            <div v-if="index % 2 === 0" class="timeline-item-even">
+                <div class="timeline-event" :ref="(el) => setRefs(el, index)">
+                    <img v-if="item.img" :src="item.img.url" :style="item.img.style">
+                    <Icon v-if="item.icon" :icon="item.icon.name" class="icon" :style="item.icon.style" />
+                    <p>{{ item.event }}</p>
+                </div>
+                <div class="dot" />
+                <div class="timeline-text">
+                    <div class="timeline-title" v-if="item.title" :style="{ color: item.titleColor }">{{ item.title }}
+                    </div>
+                    <div class="timeline-subtitle" v-if="item.subtitle">{{ item.subtitle }}</div>
+                    <p v-if="item.text">{{ item.text }}</p>
+                </div>
+            </div>
+            <div v-else class="timeline-item-odd">
+                <div class="timeline-text">
+                    <div class="timeline-title" v-if="item.title" :style="{ color: item.titleColor }">{{ item.title }}
+                    </div>
+                    <div class="timeline-subtitle" v-if="item.subtitle" :style="{ color: item.subtitleColor }">{{
+        item.subtitle
+    }}
+                    </div>
+                    <p v-if="item.text" :style="{ color: item.textColor }">{{ item.text }}</p>
+                </div>
+                <div class="dot" />
+                <div class="timeline-event" :ref="(el) => setRefs(el, index)">
+                    <img v-if="item.img" :src="item.img.url" :style="item.img.style">
+                    <Icon v-if="item.icon" :icon="item.icon.name" class="icon" :style="item.icon.style" />
+                    <p>{{ item.event }}</p>
+                </div>
+            </div>
+        </div>
+        <div class="timeline-divider" />
+    </div>
+</template>
diff --git a/example.md b/example.md
index 6c17bae..50eb7f0 100644
--- a/example.md
+++ b/example.md
@@ -1,7 +1,7 @@
 ---
 theme: ./
 title: Quantitative Finance
-subtitle: 24 lessons learned from the market
+subtitle: Quant Finance 24 Lectures
 presenter: Aaron Yang
 brand: 量化风云
 logo: https://images.jieyu.ai/images/hot/lhfy-badge.png
@@ -22,7 +22,8 @@ themeConfig:
 <Device class="abs top-410px left-350px" 
         kind="macbook-pro"
         :scale=0.8>
-<Video src="https://cdn.pixabay.com/video/2016/09/21/5373-183629075_medium.mp4"/>
+        
+![](https://images.jieyu.ai/images/2024/07/24lecture-screenshot.jpg)
 </Device>
 
 <Device class="abs top-150px left-400px" 
@@ -181,6 +182,8 @@ Powered by [Device.css](https://github.com/picturepan2/devices.css) | Video sour
 
 </div>
 
+---
+preload: false
 ---
 
 <h1>Markmap</h1>
@@ -261,8 +264,8 @@ Using the following grammer to render admonition box:
 
 ```md
 
-!!! tip
-    this is a tip admonition!
+!!! attention
+    this is a attention admonition!
 
 !!! quote
     this is a quote/cite
@@ -274,11 +277,11 @@ Using the following grammer to render admonition box:
 
 <div>
 
-!!! example
-    this is an example/snippet
+!!! attention
+    是否应该进行业中性化，学界存在一定的争议。Sina Ehsani[^SEhsani]等人2022年的研究认为，采用多空对冲的投资者需要进行行业中性化，而单纯做多的投资者则应该避免行业中性化。
 
-!!! quote
-    this is a quote/cite
+!!! quote Oppenheimer
+    Algebra is like sheet of music.The important thing isn't can you read music, it's can you hear it.Can you hear the music, Robert?
 
 </div>
 
@@ -302,8 +305,6 @@ Using the following grammer to render admonition box:
 !!! summary
     summary/abstract
 
-
-
 !!! hint
     this is a hint/tip
 
@@ -320,8 +321,8 @@ Using the following grammer to render admonition box:
     a question/help/faq
 
 
-!!! attention
-    an attention
+!!! Example
+    an example
 
 
 !!! caution
@@ -334,23 +335,6 @@ Using the following grammer to render admonition box:
     a danger/error/bug
 </div>
 
----
-
-# Use Icons
-
-- :smile: using icons is very simple, just write `:smile:`
-- :heart: visit https://emojipedia.org/ for more emoji icons
-
-the syntax:
-
-```md
-- :smile: using icons is very simple, just write `:smile:`
-- :heart: visit https://emojipedia.org/ for more emoji icons
-```
-
-!!! Notice
-    Be notified mark before bullet items are removed, so you could use whatever you like as the bullet mark.
-
 ---
 layout: two-cols
 clicks: 1
@@ -453,28 +437,147 @@ Powered by [Animate.css](https://animate.style/)
 </div>
 
 ---
-clicks: 1
+layout: two-cols
+clicks: 3
+---
+
+# Animation III
+
+Builds upon animate.css, Rich Theme offering a more streamlined animation experience.
+
+<Anime :at="[0,1,2]" action="fadeInLeftBig" style="color: red">
+    fade In Left
+</Anime>
+
+<Anime :at="[1,2]" action="jackInTheBox" style="color: blue" dur="3s">
+    jack In The Box
+</Anime>
+
+<Anime :at=2 action="flash" style="color: blue" dur="3s">
+    Flash me
+</Anime>
+
+<Anime :at=3 action="fadeOutRightBig" style="color: orange;font-size:60px" dur="10s">
+    Fade out right big
+</Anime>
+
+::right::
+
+```md
+
+<Anime :at=0 action="fadeInLeftBig">
+    fade In Left
+</Anime>
+
+<Anime :at=1 action="jackInTheBox" 
+       dur="3s">
+    jack In The Box
+</Anime>
+```
+
+---
+clicks: 8
+---
+
+# SoarText
+
+If you have only a few images but a lot to say, this component is for you.
+
+<SoarText class="abs top-150px w-80% h-80%  left-50px" :offsetY=200 colorMix="None">
+
+```md
+
+Nature’s first green is gold<bg>https://images.unsplash.com/photo-1555465910-31f7f20a184d?q=80&w=600
+
+Her hardest hue to hold
+
+Her early leaf’s a flower<bg>https://images.unsplash.com/photo-1478217655296-6ca53ca4b677?w=800
+
+But only so an hour
+
+Then leaf subsides to leaf
+
+So Eden sank to grief
+
+So dawn goes down to day
+
+Nothing gold can stay
+```
+</SoarText>
+
+---
+layout: two-cols
+clicks: 4
+---
+
+# Timeline
+
+Timeline is very important for story telling.
+
+<div class="abs left-50px top-400px">
+
+```yaml
+
+- event: 1606年
+  img: https://*.jpg w=150 roundCorner="50%"
+  title: 第一张股票
+  text: 1606年，荷兰东印度公司发行了人类第一张股票
+```
+</div>
+
+::right::
+
+<Timeline class="abs h-full w-full">
+
+```yaml
+
+- event: 1606年
+  img: https://images.jieyu.ai/images/2024/01/first-security.jpg w=150 roundCorner="50%" shadow="0 2px 5px rgba(0, 0, 0, 0.5)"
+  title: 第一张股票
+  text: 1606年，荷兰东印度公司发行了人类第一张股票
+
+- event: 1900年
+  img: https://images.jieyu.ai/images/2024/01/pricing-the-future.jpg w=150 roundCorner="50%" shadow="0 2px 5px rgba(0, 0, 0, 0.5)"
+  title: 布朗运动
+  text: 1900年，路易斯.巴斯里耶，第一个量化布朗运动的人，建立了数学模型来分析市场涨跌的概率的大小
+
+- event: 1973年
+  img: https://images.jieyu.ai/images/2023/10/Scholes.png w=150 roundCorner="50%" shadow="0 2px 5px rgba(0, 0, 0, 0.5)"
+  title: B-S公式
+  text: 1973年，迈伦.斯科尔斯，与费雪.布莱克一起发表《期权定价和公司债务》，为衍生品定价给出了堪称金融巫师的公式
+
+```
+</Timeline>
+
 ---
 
 # Card and Variants
 
 ## Naive Card
 
-<Card title="Card with header" 
+<Card title="CAPM理论" 
       class="abs top-250px w-300px h-450px"
       :enter="{opacity: 1}"
       :click-1="{opacity: 0}">
 
-this is Card with a Title
+#### 👨🏻‍🏫 威廉.夏普
+
+<p style="font-size: 20px">
+根据 CAPM 理论，资产的收益由无风险利率、市场暴露和 Alpha 共同组成，如果通过对冲将系统性风险进行度量和隔离，就可以获得超额绝对收益。
+</p>
 </Card>
 
 <Card :enter="{opacity: 1}"
-      :click-1="{opacity: 0}"
       class="abs top-250px left-450px w-300px h-450px">
 
-<img src="https://images.jieyu.ai/images/hot/blue-purple-gradient.jpg">
+<img src="https://images.jieyu.ai/images/hot/blue-purple-gradient.jpg"
+    style="border-radius: 50%;box-shadow: 0 2px 5px rgba(0,0,0,0.3);">
+
+## level2 head
+
+<p style="color: grey">
+this is Card without a title</p>
 
-this is Card without a Title
 </Card>
 
 <!--left-->
@@ -500,7 +603,7 @@ v-motion is supported out-of-box.
 # Profile Card
 
 <Profile class="top-250px"
-headerImg="https://images.unsplash.com/photo-1517825729380-9df085a3fbc3?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bW9ybmluZyUyMGNvZmZlZXxlbnwwfDB8MHx8fDA%3D" >
+headerImg="https://images.unsplash.com/photo-1517825729380-9df085a3fbc3?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bW9ybmluZyUyMGNvZmZlZXxlbnwwfDB8MHx8fDA%3D" seq=2>
 
 ### Aaron
 
@@ -519,22 +622,22 @@ headerImg="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=700&au
 
 ```md
 
-<Profile class="top-150px left-250px"
-    headerImg="https://images..jpg" 
-    seq="1">
+<Profile headerImg="https://*.jpg" seq=2>
+
+headerImg is for the background.
 
-Since the avatar is not provided, 
-the content of seq is displayed, 
-which is typically a number.
+Without avatar image, `seq` will be used to
+render the avatar. This can be used for 
+presenting list of things.
 </Profile>
 
 <Profile class="top-150px left-250px"
 headerImg="https://.../*.jpg" 
 avatar="https://.../*.jpg">
 
-### Aaron
+### 宽粉
 
-Course Instructor
+Teaching Assistant
 </Profile>
 ```
 </div>
@@ -579,6 +682,31 @@ Scard is a card variant, which contains a image header and main content area, an
 
 ---
 
+# Use Icons
+
+- :smile: using icons is very simple, just write `:smile:`
+- :heart: visit https://emojipedia.org/ for more emoji icons
+
+the syntax:
+
+```md
+- :smile: using icons is very simple, just write `:smile:`
+- :heart: visit https://emojipedia.org/ for more emoji icons
+```
+
+!!! Notice
+    Be notified mark before bullet items are removed, so you could use whatever you like as the bullet mark.
+
+---
+layout: image-left
+image: https://images.jieyu.ai/images/hot/adventure.jpg
+---
+
+<h1 class="abs top-40%">What is Slidev?</h1>
+
+<p class="abs top-55%">➠➠ Click for more.</p>
+---
+
 # What is Slidev?
 
 Slidev is a slide maker and presentation tool designed for developers. It includes the following features:
@@ -643,3 +771,5 @@ class: "text-center"
 # Learn More
 
 [Documentation](https://sli.dev) / [GitHub Repo](https://github.com/slidevjs/slidev)
+
+[大富翁量化课程](http://www.jieyu.ai/articles/coursea/24lectures/intro/)
diff --git a/package-lock.json b/package-lock.json
index 0a66925..4db4e9c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "slidev-theme-rich",
       "version": "0.1.0",
       "dependencies": {
+        "@iconify/vue": "^4.1.2",
         "@slidev/types": "^0.49.12",
         "animate.css": "^4.1.1",
         "markdown-it-admon": "^1.0.1",
@@ -1095,6 +1096,20 @@
         "mlly": "^1.6.1"
       }
     },
+    "node_modules/@iconify/vue": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmmirror.com/@iconify/vue/-/vue-4.1.2.tgz",
+      "integrity": "sha512-CQnYqLiQD5LOAaXhBrmj1mdL2/NCJvwcC4jtW2Z8ukhThiFkLDkutarTOV2trfc9EXqUqRs0KqXOL9pZ/IyysA==",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
     "node_modules/@iktakahiro/markdown-it-katex": {
       "version": "4.0.1",
       "resolved": "https://registry.npmmirror.com/@iktakahiro/markdown-it-katex/-/markdown-it-katex-4.0.1.tgz",
diff --git a/package.json b/package.json
index bb2151d..b9eedba 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-rich",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "keywords": [
     "slidev-theme",
@@ -23,6 +23,7 @@
     "screenshot": "slidev export example.md --format png"
   },
   "dependencies": {
+    "@iconify/vue": "^4.1.2",
     "@slidev/types": "^0.49.12",
     "animate.css": "^4.1.1",
     "markdown-it-admon": "^1.0.1",
diff --git a/utils.ts b/utils.ts
index ac017dc..4ae6734 100644
--- a/utils.ts
+++ b/utils.ts
@@ -1,3 +1,8 @@
+export function randomString(n=8, prefix=""){
+    const length = n - prefix.length;
+    return Math.random().toString(36).substring(2,2+length);
+}
+
 export function mergeTransform(baseTransform, additionalTransform) {
     // If there's no base transform, just return the additional one.
     if (!baseTransform) return additionalTransform;
@@ -15,3 +20,106 @@ export function mergeTransform(baseTransform, additionalTransform) {
     // Join the array back into a single string and return.
     return transforms.join(' ');
 }
+
+export function isShow(rng, click){
+    if (Array.isArray(rng)) {
+        return rng.includes(click)
+    } else {
+        return [-1, click].includes(rng)
+    }
+}
+
+export function _buildChatBotClipPath(id_, rectWidth, rectHeight, triangleSide, side, borderRadius) {
+    const triangleHeight = triangleSide * Math.sqrt(3) / 2; // 根据正三角形性质计算高度
+
+    let [x0, y0, x1, y1, x2, y2] = [0, 0, 0, 0, 0, 0, 0, 0]
+    let [rx, ry, rw, rh] = [0, 0, rectWidth, rectHeight]
+    if (side === "right"){
+        x0 = x1 = rectWidth - triangleHeight
+        y0 = rectHeight / 2 - triangleSide / 2
+        y1 = rectHeight/2 + triangleSide / 2
+        x2 = rectWidth
+        y2 = rectHeight /2
+
+        //for the rect
+        rx = 0
+        ry = 0
+        rw = rectWidth - triangleHeight
+        rh = rectHeight
+
+    }else if (side === "left"){
+        x0 = x1 = triangleHeight
+        y0 = rectHeight/2 - triangleSide / 2
+        y1 = rectHeight/2 + triangleSide / 2
+        y2 = rectHeight/2
+
+        //for the rect
+        rx = triangleHeight
+        ry = 0
+        rw = rectWidth - triangleHeight
+        rh = rectHeight
+    }else if (side === "top"){
+        x0 = rectWidth/2 - triangleSide / 2
+        x1 = rectWidth/2 + triangleSide / 2
+        y0 = y1 = triangleHeight
+        x2 = rectWidth / 2
+
+        //for the rect
+        rx = triangleHeight
+        ry = 0
+        rw = rectWidth
+        rh = rectHeight - triangleHeight
+    }else{
+        y0 = y1 = rectHeight
+        x0 = rectWidth/2 - triangleSide / 2
+        x1 = rectWidth/2 + triangleSide / 2
+        x2 = rectWidth / 2 
+        y2 = triangleHeight / 2 + rectHeight
+
+        //for the rect
+        rx = 0
+        ry = 0
+        rw = rectWidth
+        rh = rectHeight - triangleHeight
+    }
+
+    const polygonPoints = [
+    `${x0} ${y0}`,
+    `${x1} ${y1}`,
+    `${x2} ${y2}`
+    ].join(', ');
+
+    return `
+    <clipPath id="${id_}">
+        <rect x="${rx}" y="${ry}" width="${rw}" height="${rh}" rx="${borderRadius}" />
+        <polygon points="${polygonPoints}" />
+    </clipPath>
+    `;
+}
+
+//chatbox是指一个矩形，其中一边有三角形凸起。
+
+export function buildChatBotClipPath(rectWidth, rectHeight, side="left", triSideLen=0, borderRadius=10, id_=""){
+    if (!id_){
+        id_ = randomString();
+    }
+
+    if (!triSideLen){
+        if (side in ["left", "right"]){
+            triSideLen = rectHeight / 7
+        }else{
+            triSideLen = rectWidth / 7
+        }
+    }
+    const svgDefs = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svgDefs.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    svgDefs.setAttribute('width', '0');
+    svgDefs.setAttribute('height', '0');
+    let clipPath = _buildChatBotClipPath(id_, rectWidth, rectHeight, triSideLen, side, borderRadius);
+    svgDefs.innerHTML = clipPath
+    document.body.appendChild(svgDefs);
+
+    console.debug("clip path is", clipPath);
+    //返回clipPath, 可以用el.style.clipPath = buildChatBotClipPath()...
+    return `url(#${id_})`;
+}