Merge branch 'main' into feat/true-focus

src/constants/Categories.ts

@@ -19,7 +19,8 @@ export const CATEGORIES = [
       'Falling Text',
       'Text Cursor',
       'Decrypted Text',
-      'True Focus'
+      'True Focus',
+      'Scroll Float',
     ]
   },
   {
@@ -60,6 +61,7 @@ export const CATEGORIES = [
     name: 'Backgrounds',
     subcategories: [
       'Aurora',
+      'Beams',
       'Dot Grid',
       'Silk',
       'Lightning',
@@ -71,4 +73,4 @@ export const CATEGORIES = [
       'Threads',
     ],
   }
-];
+];

src/constants/Components.ts

@@ -24,6 +24,7 @@ const textAnimations = {
   'text-cursor': () => import("../demo/TextAnimations/TextCursorDemo.vue"),
   'decrypted-text': () => import("../demo/TextAnimations/DecryptedTextDemo.vue"),
   'true-focus': () => import("../demo/TextAnimations/TrueFocusDemo.vue"),
+  'scroll-float': () => import("../demo/TextAnimations/ScrollFloatDemo.vue"),
 };
 
 const components = {
@@ -55,6 +56,7 @@ const backgrounds = {
   'iridescence': () => import("../demo/Backgrounds/IridescenceDemo.vue"),
   'threads': () => import("../demo/Backgrounds/ThreadsDemo.vue"),
   'aurora': () => import("../demo/Backgrounds/AuroraDemo.vue"),
+  'beams': () => import("../demo/Backgrounds/BeamsDemo.vue"),
 };
 
 export const componentMap = {

src/constants/code/Backgrounds/beamsCode.ts

@@ -0,0 +1,36 @@
+import code from '@content/Backgrounds/Beams/Beams.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const beams: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Beams`,
+  installation: `npm install three`,
+  usage: `<template>
+  <div class="beams-container">
+    <Beams
+      :beam-width="2"
+      :beam-height="15"
+      :beam-number="12"
+      :light-color="'#ffffff'"
+      :speed="2"
+      :noise-intensity="1.75"
+      :scale="0.2"
+      :rotation="0"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Beams from "./Beams.vue";
+</script>
+
+<style scoped>
+  .beams-container {
+    width: 100%;
+    height: 500px;
+    position: relative;
+    overflow: hidden;
+    background: #000;
+  }
+</style>`,
+  code
+}

src/constants/code/TextAnimations/scrollFloatCode.ts

@@ -0,0 +1,25 @@
+import code from '@content/TextAnimations/ScrollFloat/ScrollFloat.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const scrollFloatCode: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrollFloat`,
+  usage: `<template>
+  <ScrollFloat
+    :children="scrollText"
+    :animation-duration="animationDuration"
+    :ease="ease"
+    :scroll-start="scrollStart"
+    :scroll-end="scrollEnd"
+    :stagger="stagger"
+    :container-class-name="containerClassName"
+    :text-class-name="textClassName"
+    :scroll-container-ref="{ current: containerRef }"
+    :key="rerenderKey"
+  />
+</template>
+
+<script setup lang="ts">
+  import ScrollFloat from "./ScrollFloat.vue";
+</script>`,
+  code
+}