🎉 feat: animation

Author: SaltyAom

docs/components/fern/benchmark.vue

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

docs/components/fern/beyond.vue

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

docs/components/fern/doc.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 -50% 0px'
 })
 const flyIn = useFlyIn(isInView)
 </script>

docs/components/fern/easy.vue

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

docs/components/fern/features.vue

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

docs/components/fern/sponsor.vue

@@ -247,8 +247,7 @@ import { data, type Sponsor } from './sponsor.data'
 const scope = ref(null)
 const isInView = useInView(scope, {
     once: true,
-    margin: '100px',
-    amount: 'all'
+    margin: '0px 0px -50% 0px',
 })
 const flyIn = useFlyIn(isInView)
 

docs/components/fern/tweets.vue

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

docs/components/fern/type-integrity.vue

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