Fix homepage animation (#5015)

docs/.vitepress/theme/components/base/FakeInput.vue

@@ -27,7 +27,7 @@ defineProps({
 
 <style scoped>
 .fake-input {
-  background: var(--vp-c-bg-soft);
+  background: var(--vp-c-bg-alt);
   border-radius: 8px;
   color: var(--vp-c-text-2);
   padding: 11px 16px;

docs/.vitepress/theme/components/home/HomeHeroIconsAnimation.vue

@@ -56,7 +56,6 @@ const scaleDownVariants: Variants = {
   riseUp: {
     x: 0.5,
     y: -0.5,
-    animationName: 'riseUp',
     scale: 1,
     transition: {
       delay: 0.5,
@@ -68,7 +67,6 @@ const scaleDownVariants: Variants = {
     x: -10.5,
     y: -10.5,
     scale: 0.1,
-    animationName: 'small',
     transition: {
       delay: 1,
       duration: 1,
@@ -84,7 +82,6 @@ const drawAnimation = ref('visible');
 const draw: Variants = {
   hidden: { pathLength: 0, opacity: 0 },
   visible: {
-    animationName: 'visible',
     pathLength: 1.02,
     opacity: 1,
     transition: {
@@ -93,7 +90,6 @@ const draw: Variants = {
     },
   },
   exit: (path) => ({
-    animationName: 'exit',
     stroke: path ? 'var(--vp-c-text-1)' : 'var(--vp-c-brand)',
     pathLength: 1.02,
     opacity: 1,
@@ -103,25 +99,26 @@ const draw: Variants = {
   }),
 };
 
-const onAnimationComplete = (item) => {
-  if (item.animationName === 'visible') {
+// motion-v passes the variant label that finished, not the resolved variant
+const onAnimationComplete = (variant: unknown) => {
+  if (variant === 'visible') {
     drawAnimation.value = 'exit';
     return;
   }
-  if (item.animationName === 'exit') {
+  if (variant === 'exit') {
     showHandles.value = false;
     scaleDownAnimation.value = 'small';
   }
-  if (item.animationName === 'small') {
+  if (variant === 'small') {
     iconGridAnimation.value = 'showIcons';
   }
-  if (item.animationName === 'riseUp') {
+  if (variant === 'riseUp') {
     scaleDownAnimation.value = 'small';
   }
-  if (item.animationName === 'showIcons') {
+  if (variant === 'showIcons') {
     shrinkIconAnimation.value = 'shrinkIcons';
   }
-  if (item.animationName === 'shrinkIcons') {
+  if (variant === 'shrinkIcons') {
     iconGridAnimation.value = 'initial';
 
     setTimeout(() => {
@@ -134,14 +131,12 @@ const randomIndex = ref(Math.floor(Math.random() * 64));
 
 const iconAnimationVariants: Variants = {
   initial: {
-    animationName: 'end',
     opacity: 0,
     x: 0,
     y: 0,
     transition: { duration: 1, delay: 1, ease: 'easeInOut' },
   },
   showIcons: (index) => ({
-    animationName: 'showIcons',
     opacity: [0, 1, 1],
     x: [0.5, 0, 0],
     y: [-0.5, 0, 0],
@@ -155,7 +150,6 @@ const shrinkIconAnimation = ref('initial');
 const shrinkIconVariants: Variants = {
   initial: { strokeWidth: 2 },
   shrinkIcons: (index) => ({
-    animationName: 'shrinkIcons',
     opacity: 1,
     strokeWidth: 0,
     transition: { delay: 1.8, duration: 1.5, ease: 'easeInOut' },
@@ -257,7 +251,7 @@ const shrinkIconVariants: Variants = {
         </motion.g>
         <motion.g
           class="svg-preview-control-path-marker-group"
-          stroke="#fff"
+          :style="{ stroke: 'var(--vp-c-text-1)' }"
           stroke-width="0.125"
           :initial="{ opacity: 1 }"
           :animate="showHandles ? { opacity: 1 } : { opacity: 0 }"

docs/.vitepress/theme/components/home/HomeHeroInfoBefore.vue

@@ -11,18 +11,6 @@ import RocketDuotoneIcon from './RocketDuotoneIcon.ts';
     <Badge :href="`https://github.com/lucide-icons/lucide/releases/tag/${data.version}`">
       v{{ data.version }}
     </Badge>
-    <Badge
-      class="badge-special confetti-button animate"
-      href="/guide/version-1"
-    >
-      <Icon :iconNode="RocketDuotoneIcon" name="rocket-duotone" />
-      Version 1
-      <Icon
-        :iconNode="moveRight"
-        name="move-right"
-        class=""
-      />
-    </Badge>
   </div>
 </template>
 
@@ -45,22 +33,6 @@ import RocketDuotoneIcon from './RocketDuotoneIcon.ts';
   gap: 8px;
   padding: 4px 8px;
 }
-
-.badge-special {
-  font-weight: 500;
-  color: var(--vp-c-brand-1);
-  text-underline-offset: 2px;
-  align-items: center;
-}
-
-.badge-special::before,
-.badge-special::after {
-  animation-delay: 0.5s !important;
-  animation-duration: 5s !important;
-  animation-iteration-count: infinite !important;
-  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
-  transform: translateX(32px);
-}
 </style>
 
 <style>