🎉 feat: animation

Author: SaltyAom

docs/components/fern/animate.ts

@@ -1,11 +1,11 @@
-import { computed, type ComputedRef } from 'vue'
+import { computed, type Ref } from 'vue'
 import { cubicBezier } from 'motion-v'
 
 const easeOutExpo = cubicBezier(0.16, 1, 0.3, 1)
 
-export function useFlyIn(isInView: ComputedRef<boolean>) {
-    return computed(() => (delay: number) => ({
-        initial: { translateY: '1.5rem', opacity: 0 },
+export function useFlyIn(isInView: Ref<boolean>) {
+    return computed(() => (delay = 0) => ({
+        initial: { translateY: '1.75rem', opacity: 0 },
         animate: isInView.value ? 'inView' : 'initial',
         variants: {
             inView: {
@@ -21,8 +21,8 @@ export function useFlyIn(isInView: ComputedRef<boolean>) {
     }))
 }
 
-export function useFadeIn(isInView: ComputedRef<boolean>) {
-    return computed(() => (delay: number) => ({
+export function useFadeIn(isInView: Ref<boolean>) {
+    return computed(() => (delay = 0) => ({
         initial: { opacity: 0 },
         animate: isInView.value ? 'inView' : 'initial',
         variants: {
@@ -38,8 +38,8 @@ export function useFadeIn(isInView: ComputedRef<boolean>) {
     }))
 }
 
-export function useExpandWidth(isInView: ComputedRef<boolean>) {
-    return computed(() => (width:number, delay: number) => ({
+export function useExpandWidth(isInView: Ref<boolean>) {
+    return computed(() => (width: number, delay = 0) => ({
         initial: { width: 0, opacity: 0 },
         animate: isInView.value ? 'inView' : 'initial',
         variants: {

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 -40% 0px'
+    margin: '0px 0px -35% 0px'
 })
 const flyIn = useFlyIn(isInView)
 const fadeIn = useFadeIn(isInView)
@@ -47,15 +47,16 @@ const expand = useExpandWidth(isInView)
                     <motion.h6 v-bind="flyIn(0.3)">
                         <span
                             class="!text-xl !font-semibold !text-transparent !ml-0 text-gradient from-violet-500 to-sky-500"
-                            >Elysia</span
                         >
-                        <span>Bun</span>
+                            Elysia
+                        </span>
+                        <span> Bun</span>
                     </motion.h6>
                     <motion.div
                         v-bind="expand(72, 0.4)"
                         class="bg-gradient-to-r from-violet-500 to-fuchsia-400 !text-white"
                     >
-                        <span> 2,454,631 reqs/s </span>
+                        <span>2,454,631 reqs/s</span>
                     </motion.div>
                 </li>
                 <li>

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 -40% 0px'
+    margin: '0px 0px -35% 0px'
 })
 const flyIn = useFlyIn(isInView)
 

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

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 -40% 0px'
+    margin: '0px 0px -35% 0px'
 })
 const flyIn = useFlyIn(isInView)
 </script>
@@ -41,11 +41,12 @@ const flyIn = useFlyIn(isInView)
                     A framework that feels
                     <span
                         class="text-gradient from-violet-500 to-sky-500 font-semibold"
-                        >just like JavaScript</span
                     >
+                        just like JavaScript
+                    </span>
                 </motion.p>
             </header>
-            <motion.section class="showcase" v-bind="flyIn(0.5)">
+            <motion.section class="showcase" v-bind="flyIn(0.3)">
                 <slot />
             </motion.section>
         </div>

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 -40% 0px'
+    margin: '0px 0px -35% 0px'
 })
 const flyIn = useFlyIn(isInView)
 </script>

docs/components/fern/future.vue

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

docs/components/fern/sponsor.vue

@@ -1,5 +1,8 @@
 <template>
-    <section class="flex flex-col w-full max-w-5xl mx-auto mt-4 fern-gap" ref="scope">
+    <section
+        class="flex flex-col w-full max-w-5xl mx-auto mt-4 fern-gap"
+        ref="scope"
+    >
         <motion.h2
             class="text-5xl lg:text-6xl !leading-[4rem] sm:text-center font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-tl from-rose-400 to-fuchsia-400"
             v-bind="flyIn()"
@@ -237,7 +240,7 @@ import { data, type Sponsor } from './sponsor.data'
 const scope = ref(null)
 const isInView = useInView(scope, {
     once: true,
-    margin: '0px 0px -40% 0px'
+    margin: '0px 0px -35% 0px'
 })
 const flyIn = useFlyIn(isInView)
 

docs/components/fern/test.vue

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