🎉 feat: animation

Author: SaltyAom

docs/components/fern/benchmark.vue

@@ -6,7 +6,7 @@ import { useFlyIn, useFadeIn, useExpandWidth } from './animate'
 const scope = ref(null)
 const isInView = useInView(scope, {
     once: true,
-    margin: '0px 0px -50% 0px',
+    margin: '0px 0px -40% 0px'
 })
 const flyIn = useFlyIn(isInView)
 const fadeIn = useFadeIn(isInView)

docs/components/fern/beyond.vue

@@ -155,7 +155,7 @@ import { useFlyIn } from './animate'
 const scope = ref(null)
 const isInView = useInView(scope, {
     once: true,
-    margin: '0px 0px -50% 0px',
+    margin: '0px 0px -40% 0px'
 })
 const flyIn = useFlyIn(isInView)
 

docs/components/fern/easy.vue

@@ -6,7 +6,7 @@ import { useFlyIn } from './animate'
 const scope = ref(null)
 const isInView = useInView(scope, {
     once: true,
-    margin: '0px 0px -50% 0px',
+    margin: '0px 0px -40% 0px'
 })
 const flyIn = useFlyIn(isInView)
 </script>

docs/components/fern/features.vue

@@ -6,7 +6,7 @@ import { useFlyIn } from './animate'
 const scope = ref(null)
 const isInView = useInView(scope, {
     once: true,
-    margin: '0px 0px -50% 0px',
+    margin: '0px 0px -40% 0px'
 })
 const flyIn = useFlyIn(isInView)
 </script>

docs/components/fern/sponsor.vue

@@ -49,9 +49,10 @@
             </a>
         </motion.div>
         <section v-if="goldSponsors.length">
-            <header class="mt-4 text-center" v-bind="flyIn(0.4)">
+            <header class="mt-4 text-center" v-bind="flyIn(0.3)">
                 <motion.h4
                     class="text-4xl text-center font-semibold text-gradient from-sky-500 to-violet-500"
+                    v-bind="flyIn(0.4)"
                 >
                     Gold Sponsors <span class="text-pink-400 ml-0.5">💖</span>
                 </motion.h4>
@@ -247,7 +248,7 @@ import { data, type Sponsor } from './sponsor.data'
 const scope = ref(null)
 const isInView = useInView(scope, {
     once: true,
-    margin: '0px 0px -50% 0px',
+    margin: '0px 0px -40% 0px'
 })
 const flyIn = useFlyIn(isInView)
 

docs/components/fern/test.vue

@@ -6,8 +6,7 @@ import { useFlyIn } from './animate'
 const scope = ref(null)
 const isInView = useInView(scope, {
     once: true,
-    margin: '-300px',
-    amount: 'some'
+    margin: '0px 0px -40% 0px'
 })
 const flyIn = useFlyIn(isInView)
 </script>

docs/components/fern/tweets.vue

@@ -126,7 +126,7 @@ import { useFlyIn } from './animate'
 const scope = ref(null)
 const isInView = useInView(scope, {
     once: true,
-    margin: '0px 0px -50% 0px',
+    margin: '0px 0px -40% 0px'
 })
 const flyIn = useFlyIn(isInView)
 </script>