From 242f20b6ad696c17f1bac5a057b314550ca2cfef Mon Sep 17 00:00:00 2001
From: Jeremy Butler <jeremy@littlefox.studio>
Date: Wed, 15 May 2024 21:13:02 +1000
Subject: [PATCH] Add a module for the animateText function

---
 nuxt-web/assets/css/_animations.css           | 13 ++++++
 nuxt-web/assets/css/main.css                  |  1 +
 .../content/animators/animateText.vue         | 43 +++++++++++++++++++
 nuxt-web/pages/index.vue                      | 12 ------
 src/animations.ts                             |  2 +-
 5 files changed, 58 insertions(+), 13 deletions(-)
 create mode 100644 nuxt-web/assets/css/_animations.css
 create mode 100644 nuxt-web/components/content/animators/animateText.vue

diff --git a/nuxt-web/assets/css/_animations.css b/nuxt-web/assets/css/_animations.css
new file mode 100644
index 00000000..8a560a84
--- /dev/null
+++ b/nuxt-web/assets/css/_animations.css
@@ -0,0 +1,13 @@
+.animate-fade-in-up {
+    @apply relative translate-y-full opacity-0;
+    animation: fadeUp 1.5s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
+
+    @keyframes fadeUp {
+    100% {
+        opacity: 1;
+        transform: translateY(0%);
+    }
+  }
+}
+
+  
\ No newline at end of file
diff --git a/nuxt-web/assets/css/main.css b/nuxt-web/assets/css/main.css
index 4b5f24ca..8794e4a2 100644
--- a/nuxt-web/assets/css/main.css
+++ b/nuxt-web/assets/css/main.css
@@ -1,6 +1,7 @@
 /* Components */
 @import '_scrollbar.css';
 @import '_content.css';
+@import '_animations.css';
 
 /* Utilities */
 @tailwind base;
diff --git a/nuxt-web/components/content/animators/animateText.vue b/nuxt-web/components/content/animators/animateText.vue
new file mode 100644
index 00000000..a5335ad0
--- /dev/null
+++ b/nuxt-web/components/content/animators/animateText.vue
@@ -0,0 +1,43 @@
+<template>
+  <Example class="flex">
+    <ExampleInputs class="flex flex-col">
+    <div class="flex gap-4">
+        <FormInput v-model="value" label="Title" />
+        <FormSelect v-model="splitBy" label="Select" name="select" placeholder="Select an option">
+            <option value="word">Word</option>
+            <option value="character">Character</option>
+        </FormSelect>
+      </div>
+      <div class="flex gap-4">
+      <FormInput v-model="time" label="Time" type="number" name="time" value="100" placeholder="Time" />
+      <FormSelect v-model="unit" label="Unit" name="unit" placeholder="Select an option">
+        <option value="ms">ms</option>
+        <option value="s">s</option>
+      </FormSelect>
+      </div>
+      <FormInput v-model="className" label="Classes" type="text" name="classes" placeholder="Classes" />
+    </ExampleInputs>
+    <ExampleResult>
+      <h1 :key="animationKey" v-html="animated" class="text-balance text-center font-bold leading-[1.25em] text-4xl text-gray-900 dark:text-white"></h1>
+    </ExampleResult>
+  </Example>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+
+const value = ref('Zippy little utils for your JavaScript projects.');
+const splitBy = ref('word');
+const time = ref(100);
+const unit = ref('ms');
+const className = ref('animate-fade-in-up');
+const animationKey = ref(0);
+
+const animated = computed(() => {
+  return animateText(value.value, { splitBy: splitBy.value, time: time.value, unit: unit.value, class: className.value });
+});
+
+watch([value, splitBy, time, unit, className], () => {
+  animationKey.value += 1;
+});
+</script>
diff --git a/nuxt-web/pages/index.vue b/nuxt-web/pages/index.vue
index 90d9d1d7..791c4748 100644
--- a/nuxt-web/pages/index.vue
+++ b/nuxt-web/pages/index.vue
@@ -64,16 +64,4 @@
     background: radial-gradient(50% 50% at 50% 50%, #2a2a2a 0%, rgba(24, 24, 27, 0) 100%);
     background: radial-gradient(50% 50% at 50% 50%, color(display-p3 0.165 0.165 0.165) 0%, color(display-p3 0.094 0.094 0.106 / 0) 100%);
   }
-
-  :deep(.animate-fade-in-up) {
-    @apply relative translate-y-full opacity-0;
-    animation: fadeUp 1.5s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
-  }
-
-  @keyframes fadeUp {
-    100% {
-      opacity: 1;
-      transform: translateY(0%);
-    }
-  }
 </style>
diff --git a/src/animations.ts b/src/animations.ts
index f4cf5277..0780d6dc 100644
--- a/src/animations.ts
+++ b/src/animations.ts
@@ -1,5 +1,5 @@
 // title: Animators
-// description: Pixar without the budget or talent
+// description: Pixar without the budget or talent. Watch this page, there's more opinionated animations coming soon.
 // lead: Ruthlessly animate everything
 
 /**