fix: clean up code formatting and improve hover effect styling

src/demo/Components/BounceCardsDemo.vue

@@ -1,4 +1,3 @@
-
 <template>
   <TabbedLayout>
     <template #preview>
@@ -18,26 +17,11 @@
       </div>
 
       <Customize>
-        <PreviewSwitch
-          title="Enable Hover Effect"
-          v-model="enableHover"
-        />
+        <PreviewSwitch title="Enable Hover Effect" v-model="enableHover" />
 
-        <PreviewSlider
-          title="Animation Delay"
-          v-model="animationDelay"
-          :min="0.1"
-          :max="2"
-          :step="0.1"
-        />
+        <PreviewSlider title="Animation Delay" v-model="animationDelay" :min="0.1" :max="2" :step="0.1" />
 
-        <PreviewSlider
-          title="Animation Stagger"
-          v-model="animationStagger"
-          :min="0"
-          :max="0.3"
-          :step="0.01"
-        />
+        <PreviewSlider title="Animation Stagger" v-model="animationStagger" :min="0" :max="0.3" :step="0.01" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -76,11 +60,11 @@ const animationStagger = ref(0.08);
 const { rerenderKey, forceRerender } = useForceRerender();
 
 const images = ref([
-  'https://picsum.photos/400/400?grayscale',
-  'https://picsum.photos/500/500?grayscale',
-  'https://picsum.photos/600/600?grayscale',
-  'https://picsum.photos/700/700?grayscale',
-  'https://picsum.photos/300/300?grayscale'
+  'https://picsum.photos/id/287/300/300?grayscale',
+  'https://picsum.photos/id/1001/300/300?grayscale',
+  'https://picsum.photos/id/1027/300/300?grayscale',
+  'https://picsum.photos/id/1025/300/300?grayscale',
+  'https://picsum.photos/id/1026/300/300?grayscale'
 ]);
 
 const transformStyles = ref([
@@ -126,7 +110,7 @@ const propData = [
     name: 'animationStagger',
     type: 'number',
     default: '-',
-    description: 'Time (in seconds) between each card\'s animation.'
+    description: "Time (in seconds) between each card's animation."
   },
   {
     name: 'easeType',
@@ -144,7 +128,7 @@ const propData = [
     name: 'enableHover',
     type: 'boolean',
     default: 'false',
-    description: 'If true, hovering pushes siblings aside and flattens the hovered card\'s rotation.'
+    description: "If true, hovering pushes siblings aside and flattens the hovered card's rotation."
   }
 ];
 </script>

src/demo/TextAnimations/VariableProximityDemo.vue

@@ -17,13 +17,7 @@
       </div>
 
       <Customize>
-        <PreviewSlider
-          title="Radius"
-          v-model="radius"
-          :min="50"
-          :max="300"
-          :step="10"
-        />
+        <PreviewSlider title="Radius" v-model="radius" :min="50" :max="300" :step="10" />
 
         <div class="flex gap-2 flex-wrap">
           <button
@@ -80,13 +74,13 @@ const propData = [
   {
     name: 'fromFontVariationSettings',
     type: 'string',
-    default: '"\'wght\' 400, \'opsz\' 9"',
+    default: "\"'wght' 400, 'opsz' 9\"",
     description: 'The starting variation settings.'
   },
   {
     name: 'toFontVariationSettings',
     type: 'string',
-    default: '"\'wght\' 800, \'opsz\' 40"',
+    default: "\"'wght' 800, 'opsz' 40\"",
     description: 'The variation settings to reach at cursor proximity.'
   },
   {
@@ -128,5 +122,5 @@ const propData = [
 ];
 </script>
 <style scoped>
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');
 </style>