UPD: Animate drag

src/components/config/ConfigPane.vue

@@ -6,8 +6,8 @@
         v-model="configPage"
         :options="configPages"
         class="p-2 border solid border-b">
-        <template v-for="(page, key) in configPages" #[key]>
-          {{ $t(page.titleKey) }}
+        <template v-for="(page, key) in configPages" #[key] :key="key">
+          <ScrambleText ref="title" :text="$t(page.titleKey)" />
         </template>
       </TabSelect>
       <div class="grow overflow-y-auto">

src/components/config/keys/KeyFeedbackConfig.vue

@@ -41,7 +41,7 @@
 <script setup>
 import { AudioLines, AudioWaveform, GaugeCircle } from 'lucide-vue-next'
 import ConfigSection from '@/components/common/ConfigSection.vue'
-import Color from 'color'
+import { Separator } from '@/components/ui/separator'
 import { ref } from 'vue'
 import TabSelect from '@/components/common/TabSelect.vue'
 import FdIcon from '@/assets/icons/iconFineDetents.svg'

src/components/config/knob/KnobFeedbackConfig.vue

@@ -48,6 +48,7 @@ import CdIcon from '@/assets/icons/iconCoarseDetents.svg'
 import VfIcon from '@/assets/icons/iconViscousRotation.svg'
 import RcIcon from '@/assets/icons/iconReturnToCenter.svg'
 import SteppedSlider from '@/components/common/SteppedSlider.vue'
+import { Separator } from '@/components/ui/separator'
 
 const feedbackType = ref('fineDetents') // TODO: replace with actual value