feat: make magic move duration configurable (#2339)

Author: QuentinRoy

packages/client/builtin/ShikiMagicMove.vue

@@ -34,6 +34,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  duration: {
+    type: Number,
+    default: configs.magicMoveDuration,
+  },
 })
 
 const steps = JSON.parse(lz.decompressFromBase64(props.stepsLz)) as KeyedTokensInfo[]
@@ -158,8 +162,7 @@ onMounted(() => {
       :animate="!isPrintMode"
       :options="{
         globalScale: scale * zoom,
-        // TODO: make this configurable later
-        duration: 800,
+        duration: $props.duration,
         stagger: 1,
       }"
     />

packages/client/constants.ts

@@ -86,4 +86,5 @@ export const HEADMATTER_FIELDS = [
   'wakeLock',
   'seoMeta',
   'notesAutoRuby',
+  'magicMoveDuration',
 ]

packages/parser/src/config.ts

@@ -50,6 +50,7 @@ export function getDefaultConfig(): SlidevConfig {
     notesAutoRuby: {},
     duration: '30min',
     timer: 'stopwatch',
+    magicMoveDuration: 800,
   }
 }
 

packages/types/src/frontmatter.ts

@@ -305,6 +305,12 @@ export interface HeadmatterConfig extends TransitionOptions {
    * @default 'stopwatch'
    */
   timer?: 'stopwatch' | 'countdown'
+  /**
+   * Duration for shiki magic move transitions in milliseconds
+   *
+   * @default 800
+   */
+  magicMoveDuration?: number
 }
 
 export interface Frontmatter extends TransitionOptions {

packages/vscode/schema/headmatter.json

@@ -545,6 +545,12 @@
           "markdownDescription": "Timer mode",
           "default": "stopwatch"
         },
+        "magicMoveDuration": {
+          "type": "number",
+          "description": "Duration for shiki magic move transitions in milliseconds",
+          "markdownDescription": "Duration for shiki magic move transitions in milliseconds",
+          "default": 800
+        },
         "defaults": {
           "$ref": "#/definitions/Frontmatter",
           "description": "Default frontmatter options applied to all slides",