Merge branch 'main' into feat/target-cursor

src/components/common/BackgroundContent.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="select-none">
+    <div
+      class="right-6 bottom-0 z-10 absolute opacity-50 hover:opacity-100 transition-opacity duration-300 ease-in-out select-none"
+    >
+      <PreviewSwitch title="Demo Content" v-model="showContent" />
+    </div>
+
+    <template v-if="showContent">
+      <div class="top-[2em] left-0 z-0 absolute w-full h-[60px] pointer-events-none">
+        <div
+          class="flex justify-between items-center bg-[rgba(255,255,255,0.05)] backdrop-filter backdrop-blur-[10px] mx-auto my-0 px-6 py-4 border border-[rgba(255,255,255,0.2)] rounded-[50px] w-[90%] md:w-[60%] h-full"
+          :style="{
+            backdropFilter: 'blur(10px)',
+            WebkitBackdropFilter: 'blur(10px)',
+            boxShadow: '0 4px 30px rgba(0, 0, 0, 0.1)'
+          }"
+        >
+          <img :src="logo" alt="Vue Bits Logo" class="rounded-[50px] h-[24px]" />
+          <div class="md:hidden flex items-center text-white">
+            <i class="pi pi-bars"></i>
+          </div>
+          <div class="hidden md:flex items-center gap-6 font-semibold">
+            <p class="flex items-center text-[14px] text-white">Home</p>
+            <p class="flex items-center text-[14px] text-white">Docs</p>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="top-0 left-0 z-1 absolute flex flex-col justify-center items-center w-full h-full pointer-events-none"
+      >
+        <div
+          class="flex justify-center items-center bg-[rgba(255,244,255,0.05)] backdrop-filter backdrop-blur-[10px] px-4 border border-[rgba(255,255,255,0.2)] rounded-[50px] w-auto h-[34px] font-medium text-[12px] text-white md:text-[14px]"
+          :style="{
+            backdropFilter: 'blur(10px)',
+            WebkitBackdropFilter: 'blur(10px)',
+            boxShadow: '0 4px 30px rgba(0, 0, 0, 0.1)'
+          }"
+        >
+          <span class="flex justify-center items-center" v-html="props.pillIcon"></span>
+          <p class="ml-1">{{ props.pillText }}</p>
+        </div>
+
+        <p
+          class="mt-4 max-w-[18ch] font-bold text-[clamp(2rem,4vw,2.6rem)] text-white text-center leading-[1.2] tracking-[-2px]"
+          :style="{
+            textShadow: '0 0 16px rgba(0, 0, 0, 0.5)'
+          }"
+        >
+          {{ props.headline }}
+        </p>
+
+        <div class="flex items-center gap-4 mt-8">
+          <button
+            class="bg-white hover:bg-gray-100 px-6 md:px-10 py-2 md:py-3 border-none rounded-[50px] font-medium text-[12px] text-black md:text-[14px] transition-all hover:translate-y-[-1px] duration-200 ease-in-out cursor-pointer"
+          >
+            {{ props.mainCtaText }}
+          </button>
+          <button
+            class="bg-white/5 hover:bg-white/10 shadow-md backdrop-blur-md px-6 md:px-10 py-2 md:py-3 border border-white/20 rounded-full font-medium text-[12px] text-white/50 md:text-[14px] transition-all hover:-translate-y-0.5 duration-200 cursor-pointer"
+            :style="{
+              backdropFilter: 'blur(10px)',
+              WebkitBackdropFilter: 'blur(10px)',
+              boxShadow: '0 4px 30px rgba(0, 0, 0, 0.1)'
+            }"
+          >
+            {{ props.secondCtaText }}
+          </button>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import logo from '../../assets/logos/vue-bits-logo.svg';
+import PreviewSwitch from './PreviewSwitch.vue';
+
+interface BackgroundContentProps {
+  pillText?: string;
+  pillIcon?: string;
+  headline?: string;
+  mainCtaText?: string;
+  secondCtaText?: string;
+}
+
+const props = withDefaults(defineProps<BackgroundContentProps>(), {
+  pillText: 'New Component',
+  pillIcon: '<i class="pi pi-sliders-h" style="font-size: 10px;"></i>',
+  headline: 'Explore the depths of creativity',
+  mainCtaText: 'Get Started',
+  secondCtaText: 'Learn More'
+});
+
+const showContent = ref(true);
+</script>

src/constants/Categories.ts

@@ -25,7 +25,8 @@ export const CATEGORIES = [
       'Scroll Float',
       'Scroll Reveal',
       'Rotating Text',
-      'Glitch Text'
+      'Glitch Text',
+      'Scroll Velocity'
     ]
   },
   {
@@ -47,6 +48,7 @@ export const CATEGORIES = [
       'Blob Cursor',
       'Meta Balls',
       'Image Trail',
+      'Shape Blur',
       'Target Cursor',
     ]
   },
@@ -85,7 +87,6 @@ export const CATEGORIES = [
       'Balatro',
       'Letter Glitch',
       'Particles',
-      'Shape Blur',
       'Waves',
       'Squares',
       'Iridescence',

src/constants/Components.ts

@@ -15,6 +15,7 @@ const animations = {
   'blob-cursor': () => import('../demo/Animations/BlobCursorDemo.vue'),
   'meta-balls': () => import('../demo/Animations/MetaBallsDemo.vue'),
   'image-trail': () => import('../demo/Animations/ImageTrailDemo.vue'),
+  'shape-blur': () => import('../demo/Animations/ShapeBlurDemo.vue'),
   'target-cursor': () => import('../demo/Animations/TargetCursorDemo.vue'),
 };
 
@@ -38,6 +39,7 @@ const textAnimations = {
   'scroll-reveal': () => import("../demo/TextAnimations/ScrollRevealDemo.vue"),
   'rotating-text': () => import("../demo/TextAnimations/RotatingTextDemo.vue"),
   'glitch-text': () => import("../demo/TextAnimations/GlitchTextDemo.vue"),
+  'scroll-velocity': () => import("../demo/TextAnimations/ScrollVelocityDemo.vue"),
 };
 
 const components = {
@@ -75,7 +77,6 @@ const backgrounds = {
   'beams': () => import('../demo/Backgrounds/BeamsDemo.vue'),
   'grid-motion': () => import('../demo/Backgrounds/GridMotionDemo.vue'),
   'hyperspeed': () => import('../demo/Backgrounds/HyperspeedDemo.vue'),
-  'shape-blur': () => import('../demo/Backgrounds/ShapeBlurDemo.vue'),
   'balatro': () => import('../demo/Backgrounds/BalatroDemo.vue'),
   'orb': () => import('../demo/Backgrounds/OrbDemo.vue'),
   'ballpit': () => import('../demo/Backgrounds/BallpitDemo.vue'),

src/constants/code/Animations/shapeBlurCode.ts

@@ -1,8 +1,8 @@
-import code from '@content/Backgrounds/ShapeBlur/ShapeBlur.vue?raw';
+import code from '@/content/Animations/ShapeBlur/ShapeBlur.vue?raw';
 import type { CodeObject } from '../../../types/code';
 
 export const shapeBlur: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/ShapeBlur`,
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/ShapeBlur`,
   installation: `npm install three @types/three`,
   usage: `<template>
   <ShapeBlur

src/constants/code/TextAnimations/scrollVelocityCode.ts

@@ -0,0 +1,24 @@
+import code from '@content/TextAnimations/ScrollVelocity/ScrollVelocity.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const scrollVelocity: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrollVelocity`,
+  installation: `npm install gsap`,
+  usage: `<template>
+  <ScrollVelocity
+    :texts="['Vue Bits', 'Scroll Down']"
+    :velocity="100"
+    :damping="50"
+    :stiffness="400"
+    :velocity-mapping="{ input: [0, 1000], output: [0, 5] }"
+    class-name="custom-scroll-text"
+    parallax-class-name="custom-parallax"
+    scroller-class-name="custom-scroller"
+  />
+</template>
+
+<script setup lang="ts">
+  import ScrollVelocity from "./ScrollVelocity.vue";
+</script>`,
+  code
+};

src/content/TextAnimations/ScrollVelocity/ScrollVelocity.vue

@@ -0,0 +1,236 @@
+<template>
+  <section>
+    <div
+      v-for="(text, index) in texts"
+      :key="index"
+      ref="containerRef"
+      :class="`${parallaxClassName} relative overflow-hidden`"
+      :style="parallaxStyle"
+    >
+      <div
+        ref="scrollerRef"
+        :class="`${scrollerClassName} flex whitespace-nowrap text-center font-sans text-4xl font-bold tracking-[-0.02em] drop-shadow md:text-[5rem] md:leading-[5rem]`"
+        :style="{ transform: `translateX(${scrollTransforms[index] || '0px'})`, ...scrollerStyle }"
+      >
+        <span
+          v-for="spanIndex in calculatedCopies[index] || 15"
+          :key="spanIndex"
+          :class="`flex-shrink-0 ${className}`"
+          :ref="spanIndex === 1 ? el => setCopyRef(el, index) : undefined"
+        >
+          {{ text }}&nbsp;
+        </span>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, nextTick, type ComponentPublicInstance } from 'vue';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+interface VelocityMapping {
+  input: [number, number];
+  output: [number, number];
+}
+
+interface ScrollVelocityProps {
+  scrollContainerRef?: HTMLElement | null;
+  texts?: string[];
+  velocity?: number;
+  className?: string;
+  damping?: number;
+  stiffness?: number;
+  velocityMapping?: VelocityMapping;
+  parallaxClassName?: string;
+  scrollerClassName?: string;
+  parallaxStyle?: Record<string, string | number>;
+  scrollerStyle?: Record<string, string | number>;
+}
+
+const props = withDefaults(defineProps<ScrollVelocityProps>(), {
+  texts: () => [],
+  velocity: 100,
+  className: '',
+  damping: 50,
+  stiffness: 400,
+  velocityMapping: () => ({ input: [0, 1000], output: [0, 5] }),
+  parallaxClassName: '',
+  scrollerClassName: '',
+  parallaxStyle: () => ({}),
+  scrollerStyle: () => ({})
+});
+
+const containerRef = ref<HTMLDivElement[]>([]);
+const scrollerRef = ref<HTMLDivElement[]>([]);
+const copyRefs = ref<HTMLSpanElement[]>([]);
+
+const baseX = ref<number[]>([]);
+const scrollVelocity = ref(0);
+const smoothVelocity = ref(0);
+const velocityFactor = ref(0);
+const copyWidths = ref<number[]>([]);
+const directionFactors = ref<number[]>([]);
+const calculatedCopies = ref<number[]>([]);
+
+let rafId: number | null = null;
+let scrollTriggerInstance: ScrollTrigger | null = null;
+let lastScrollY = 0;
+let lastTime = 0;
+let resizeTimeout: number | null = null;
+
+const setCopyRef = (el: Element | ComponentPublicInstance | null, index: number) => {
+  if (el && el instanceof HTMLSpanElement) {
+    copyRefs.value[index] = el;
+  }
+};
+
+const updateWidths = () => {
+  props.texts.forEach((_, index) => {
+    if (copyRefs.value[index] && containerRef.value[index]) {
+      const singleCopyWidth = copyRefs.value[index].offsetWidth;
+      const containerWidth = containerRef.value[index].offsetWidth;
+      const viewportWidth = window.innerWidth;
+
+      const effectiveWidth = Math.max(containerWidth, viewportWidth);
+      const minCopies = Math.ceil((effectiveWidth * 2.5) / singleCopyWidth);
+      const optimalCopies = Math.max(minCopies, 8);
+
+      copyWidths.value[index] = singleCopyWidth;
+      calculatedCopies.value[index] = optimalCopies;
+    }
+  });
+};
+
+const debouncedUpdateWidths = () => {
+  if (resizeTimeout) {
+    clearTimeout(resizeTimeout);
+  }
+  resizeTimeout = window.setTimeout(() => {
+    updateWidths();
+    resizeTimeout = null;
+  }, 150);
+};
+
+const wrap = (min: number, max: number, v: number): number => {
+  const range = max - min;
+  if (range === 0) return min;
+  const mod = (((v - min) % range) + range) % range;
+  return mod + min;
+};
+
+const scrollTransforms = computed(() => {
+  return props.texts.map((_, index) => {
+    const singleWidth = copyWidths.value[index];
+    if (singleWidth === 0) return '0px';
+    return `${wrap(-singleWidth, 0, baseX.value[index] || 0)}px`;
+  });
+});
+
+const updateSmoothVelocity = () => {
+  const dampingFactor = props.damping / 1000;
+  const stiffnessFactor = props.stiffness / 1000;
+
+  const velocityDiff = scrollVelocity.value - smoothVelocity.value;
+  smoothVelocity.value += velocityDiff * stiffnessFactor;
+  smoothVelocity.value *= 1 - dampingFactor;
+};
+
+const updateVelocityFactor = () => {
+  const { input, output } = props.velocityMapping;
+  const inputRange = input[1] - input[0];
+  const outputRange = output[1] - output[0];
+
+  let normalizedVelocity = (Math.abs(smoothVelocity.value) - input[0]) / inputRange;
+  normalizedVelocity = Math.max(0, Math.min(1, normalizedVelocity));
+
+  velocityFactor.value = output[0] + normalizedVelocity * outputRange;
+  if (smoothVelocity.value < 0) velocityFactor.value *= -1;
+};
+
+const animate = (currentTime: number) => {
+  if (lastTime === 0) lastTime = currentTime;
+  const delta = currentTime - lastTime;
+  lastTime = currentTime;
+
+  updateSmoothVelocity();
+  updateVelocityFactor();
+
+  props.texts.forEach((_, index) => {
+    const baseVelocity = index % 2 !== 0 ? -props.velocity : props.velocity;
+
+    let moveBy = directionFactors.value[index] * baseVelocity * (delta / 1000);
+
+    if (velocityFactor.value < 0) {
+      directionFactors.value[index] = -1;
+    } else if (velocityFactor.value > 0) {
+      directionFactors.value[index] = 1;
+    }
+
+    moveBy += directionFactors.value[index] * moveBy * velocityFactor.value;
+    baseX.value[index] = (baseX.value[index] || 0) + moveBy;
+  });
+
+  rafId = requestAnimationFrame(animate);
+};
+
+const updateScrollVelocity = () => {
+  const container = props.scrollContainerRef || window;
+  const currentScrollY = container === window ? window.scrollY : (container as HTMLElement).scrollTop;
+
+  const currentTime = performance.now();
+  const timeDelta = currentTime - lastTime;
+
+  if (timeDelta > 0) {
+    const scrollDelta = currentScrollY - lastScrollY;
+    scrollVelocity.value = (scrollDelta / timeDelta) * 1000;
+  }
+
+  lastScrollY = currentScrollY;
+};
+
+onMounted(async () => {
+  await nextTick();
+
+  baseX.value = new Array(props.texts.length).fill(0);
+  copyWidths.value = new Array(props.texts.length).fill(0);
+  calculatedCopies.value = new Array(props.texts.length).fill(15);
+  directionFactors.value = new Array(props.texts.length).fill(1);
+
+  setTimeout(() => {
+    updateWidths();
+  }, 100);
+
+  updateWidths();
+
+  if (containerRef.value && containerRef.value.length > 0) {
+    scrollTriggerInstance = ScrollTrigger.create({
+      trigger: containerRef.value[0],
+      start: 'top bottom',
+      end: 'bottom top',
+      onUpdate: updateScrollVelocity,
+      ...(props.scrollContainerRef && { scroller: props.scrollContainerRef })
+    });
+  }
+
+  rafId = requestAnimationFrame(animate);
+
+  window.addEventListener('resize', debouncedUpdateWidths, { passive: true });
+});
+
+onUnmounted(() => {
+  if (rafId) {
+    cancelAnimationFrame(rafId);
+  }
+  if (scrollTriggerInstance) {
+    scrollTriggerInstance.kill();
+  }
+  if (resizeTimeout) {
+    clearTimeout(resizeTimeout);
+  }
+  window.removeEventListener('resize', debouncedUpdateWidths);
+});
+</script>

src/demo/Animations/ShapeBlurDemo.vue

@@ -53,8 +53,8 @@ import CliInstallation from '../../components/code/CliInstallation.vue';
 import CodeExample from '../../components/code/CodeExample.vue';
 import Customize from '../../components/common/Customize.vue';
 import PreviewSlider from '../../components/common/PreviewSlider.vue';
-import ShapeBlur from '../../content/Backgrounds/ShapeBlur/ShapeBlur.vue';
+import ShapeBlur from '../../content/Animations/ShapeBlur/ShapeBlur.vue';
-import { shapeBlur } from '@/constants/code/Backgrounds/shapeBlurCode';
+import { shapeBlur } from '@/constants/code/Animations/shapeBlurCode';
 
 const pixelRatioProp = ref(window.devicePixelRatio || 1);
 const shapeSize = ref(1.0);

src/demo/Backgrounds/AuroraDemo.vue

@@ -1,65 +1,65 @@
 <template>
-  <div class="aurora-demo">
+  <TabbedLayout>
-    <TabbedLayout>
+    <template #preview>
-      <template #preview>
+      <div class="h-[600px] overflow-hidden demo-container">
-        <div class="demo-container">
+        <Aurora
-          <Aurora
+          :color-stops="colorStops"
-            :color-stops="colorStops"
+          :amplitude="amplitude"
-            :amplitude="amplitude"
+          :blend="blend"
-            :blend="blend"
+          :speed="speed"
-            :speed="speed"
+          :intensity="intensity"
-            :intensity="intensity"
+          class="w-full"
-            class="w-full"
+        />
+        <BackgroundContent pillText="New Background" headline="Bring the Arctic to you, with one line of code" />
+      </div>
+
+      <Customize>
+        <div class="flex gap-2">
+          <PreviewColor
+            v-for="(_, index) in colorStops"
+            :key="index"
+            :title="`Color ${index + 1}`"
+            v-model="colorStops[index]"
           />
         </div>
 
-        <Customize>
+        <PreviewSlider title="Amplitude" v-model="amplitude" :min="0" :max="2" :step="0.1" />
-          <div class="flex gap-2">
-            <PreviewColor
-              v-for="(_, index) in colorStops"
-              :key="index"
-              :title="`Color ${index + 1}`"
-              v-model="colorStops[index]"
-            />
-          </div>
 
-          <PreviewSlider title="Amplitude" v-model="amplitude" :min="0" :max="2" :step="0.1" />
+        <PreviewSlider title="Blend" v-model="blend" :min="0" :max="1" :step="0.1" />
 
-          <PreviewSlider title="Blend" v-model="blend" :min="0" :max="1" :step="0.1" />
+        <PreviewSlider title="Speed" v-model="speed" :min="0" :max="3" :step="0.1" />
 
-          <PreviewSlider title="Speed" v-model="speed" :min="0" :max="3" :step="0.1" />
+        <PreviewSlider title="Intensity" v-model="intensity" :min="0" :max="2" :step="0.1" />
+      </Customize>
 
-          <PreviewSlider title="Intensity" v-model="intensity" :min="0" :max="2" :step="0.1" />
+      <PropTable :data="propData" />
-        </Customize>
 
-        <PropTable :data="propData" />
+      <Dependencies :dependency-list="['ogl']" />
+    </template>
 
-        <Dependencies :dependency-list="['ogl']" />
+    <template #code>
-      </template>
+      <CodeExample :code-object="aurora" />
+    </template>
 
-      <template #code>
+    <template #cli>
-        <CodeExample :code-object="aurora" />
+      <CliInstallation :command="aurora.cli" />
-      </template>
+    </template>
-
+  </TabbedLayout>
-      <template #cli>
-        <CliInstallation :command="aurora.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
-import PropTable from '../../components/common/PropTable.vue';
-import Dependencies from '../../components/code/Dependencies.vue';
-import CliInstallation from '../../components/code/CliInstallation.vue';
-import CodeExample from '../../components/code/CodeExample.vue';
-import Customize from '../../components/common/Customize.vue';
-import Aurora from '@/content/Backgrounds/Aurora/Aurora.vue';
 import PreviewColor from '@/components/common/PreviewColor.vue';
 import PreviewSlider from '@/components/common/PreviewSlider.vue';
 import { aurora } from '@/constants/code/Backgrounds/auroraCode';
+import Aurora from '@/content/Backgrounds/Aurora/Aurora.vue';
+import { ref } from 'vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import BackgroundContent from '../../components/common/BackgroundContent.vue';
+import Customize from '../../components/common/Customize.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
 
 const colorStops = ref(['#171D22', '#7cff67', '#171D22']);
 const amplitude = ref(1.0);
@@ -101,7 +101,6 @@ const propData = [
 
 <style scoped>
 .demo-container {
-  overflow: hidden;
   padding: 0;
 }
 </style>

src/demo/Backgrounds/BalatroDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container">
+      <div class="h-[600px] overflow-hidden demo-container">
         <Balatro
           :is-rotate="rotate"
           :mouse-interaction="mouseInteractionEnabled"
@@ -9,7 +9,7 @@
           :color1="colorStops[0]"
           :color2="colorStops[1]"
           :color3="colorStops[2]"
-          class="h-full w-full"
+          class="w-full h-full"
         />
       </div>
 
@@ -147,9 +147,6 @@ const propData = [
 
 <style scoped>
 .demo-container {
-  overflow: hidden;
   padding: 0;
-  z-index: 1;
-  height: 500px;
 }
 </style>

src/demo/Backgrounds/BallpitDemo.vue

@@ -1,9 +1,8 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="relative p-0 h-[500px] overflow-hidden demo-container">
+      <div class="relative p-0 h-[600px] overflow-hidden demo-container">
         <RefreshButton @click="forceRerender" />
-        <p class="z-0 absolute font-black text-[#222] text-[140px]">Balls.</p>
         <Ballpit
           className="relative"
           :key="key"
@@ -14,6 +13,7 @@
           :followCursor="followCursor"
           :colors="colors"
         />
+        <BackgroundContent pillText="New Background" headline="Balls! What's not to like about them?" />
       </div>
 
       <Customize>
@@ -48,6 +48,7 @@ import { ref, watch } from 'vue';
 import CliInstallation from '../../components/code/CliInstallation.vue';
 import CodeExample from '../../components/code/CodeExample.vue';
 import Dependencies from '../../components/code/Dependencies.vue';
+import BackgroundContent from '../../components/common/BackgroundContent.vue';
 import Customize from '../../components/common/Customize.vue';
 import PreviewSlider from '../../components/common/PreviewSlider.vue';
 import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
@@ -60,7 +61,7 @@ import Ballpit from '../../content/Backgrounds/Ballpit/Ballpit.vue';
 const { rerenderKey: key, forceRerender } = useForceRerender();
 
 const count = ref(100);
-const gravity = ref(0.5);
+const gravity = ref(0.01);
 const friction = ref(0.9975);
 const wallBounce = ref(0.95);
 const followCursor = ref(false);

src/demo/Backgrounds/BeamsDemo.vue

@@ -1,66 +1,66 @@
 <template>
-  <div class="beams-demo">
+  <TabbedLayout>
-    <TabbedLayout>
+    <template #preview>
-      <template #preview>
+      <div class="h-[600px] overflow-hidden demo-container">
-        <div class="demo-container">
+        <Beams
-          <Beams
+          :beam-width="beamWidth"
-            :beam-width="beamWidth"
+          :beam-height="beamHeight"
-            :beam-height="beamHeight"
+          :beam-number="beamNumber"
-            :beam-number="beamNumber"
+          :light-color="lightColor"
-            :light-color="lightColor"
+          :speed="speed"
-            :speed="speed"
+          :noise-intensity="noiseIntensity"
-            :noise-intensity="noiseIntensity"
+          :scale="scale"
-            :scale="scale"
+          :rotation="rotation"
-            :rotation="rotation"
+        />
-          />
+        <BackgroundContent pillText="New Background" headline="Radiant beams for creative user interfaces" />
-        </div>
+      </div>
 
-        <Customize>
+      <Customize>
-          <PreviewColor title="Color" v-model="lightColor" />
+        <PreviewColor title="Color" v-model="lightColor" />
 
-          <PreviewSlider title="Beam Width" v-model="beamWidth" :min="0.1" :max="10" :step="0.1" />
+        <PreviewSlider title="Beam Width" v-model="beamWidth" :min="0.1" :max="10" :step="0.1" />
 
-          <PreviewSlider title="Beam Height" v-model="beamHeight" :min="1" :max="25" :step="1" />
+        <PreviewSlider title="Beam Height" v-model="beamHeight" :min="1" :max="25" :step="1" />
 
-          <PreviewSlider title="Beam Count" v-model="beamNumber" :min="1" :max="50" :step="1" />
+        <PreviewSlider title="Beam Count" v-model="beamNumber" :min="1" :max="50" :step="1" />
 
-          <PreviewSlider title="Speed" v-model="speed" :min="0.1" :max="10" :step="0.1" />
+        <PreviewSlider title="Speed" v-model="speed" :min="0.1" :max="10" :step="0.1" />
 
-          <PreviewSlider title="Noise Intensity" v-model="noiseIntensity" :min="0" :max="5" :step="0.05" />
+        <PreviewSlider title="Noise Intensity" v-model="noiseIntensity" :min="0" :max="5" :step="0.05" />
 
-          <PreviewSlider title="Noise Scale" v-model="scale" :min="0.01" :max="1" :step="0.01" />
+        <PreviewSlider title="Noise Scale" v-model="scale" :min="0.01" :max="1" :step="0.01" />
 
-          <PreviewSlider title="Rotation" v-model="rotation" :min="0" :max="360" :step="1" />
+        <PreviewSlider title="Rotation" v-model="rotation" :min="0" :max="360" :step="1" />
-        </Customize>
+      </Customize>
 
-        <PropTable :data="propData" />
+      <PropTable :data="propData" />
 
-        <Dependencies :dependency-list="['three']" />
+      <Dependencies :dependency-list="['three']" />
-      </template>
+    </template>
 
-      <template #code>
+    <template #code>
-        <CodeExample :code-object="beams" />
+      <CodeExample :code-object="beams" />
-      </template>
+    </template>
 
-      <template #cli>
+    <template #cli>
-        <CliInstallation :command="beams.cli" />
+      <CliInstallation :command="beams.cli" />
-      </template>
+    </template>
-    </TabbedLayout>
+  </TabbedLayout>
-  </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import TabbedLayout from '@/components/common/TabbedLayout.vue';
-import PropTable from '@/components/common/PropTable.vue';
-import Dependencies from '@/components/code/Dependencies.vue';
 import CliInstallation from '@/components/code/CliInstallation.vue';
 import CodeExample from '@/components/code/CodeExample.vue';
+import Dependencies from '@/components/code/Dependencies.vue';
 import Customize from '@/components/common/Customize.vue';
-import Beams from '@/content/Backgrounds/Beams/Beams.vue';
 import PreviewColor from '@/components/common/PreviewColor.vue';
 import PreviewSlider from '@/components/common/PreviewSlider.vue';
+import PropTable from '@/components/common/PropTable.vue';
+import TabbedLayout from '@/components/common/TabbedLayout.vue';
 import { beams } from '@/constants/code/Backgrounds/beamsCode';
+import Beams from '@/content/Backgrounds/Beams/Beams.vue';
+import { ref } from 'vue';
+import BackgroundContent from '../../components/common/BackgroundContent.vue';
 
 const beamWidth = ref(3);
 const beamHeight = ref(30);
@@ -125,8 +125,6 @@ const propData = [
 
 <style scoped>
 .demo-container {
-  overflow: hidden;
   padding: 0;
-  height: 500px;
 }
 </style>

src/demo/Backgrounds/DotGridDemo.vue

@@ -1,80 +1,80 @@
 <template>
-  <div class="dot-grid-demo">
+  <TabbedLayout>
-    <TabbedLayout>
+    <template #preview>
-      <template #preview>
+      <div class="h-[600px] overflow-hidden demo-container">
-        <div class="demo-container" style="height: 500px; overflow: hidden">
+        <DotGrid
-          <DotGrid
+          :key="rerenderKey"
-            :key="rerenderKey"
+          :dot-size="dotSize"
-            :dot-size="dotSize"
+          :gap="gap"
-            :gap="gap"
+          :base-color="baseColor"
-            :base-color="baseColor"
+          :active-color="activeColor"
-            :active-color="activeColor"
+          :proximity="proximity"
-            :proximity="proximity"
+          :speed-trigger="speedTrigger"
-            :speed-trigger="speedTrigger"
+          :shock-radius="shockRadius"
-            :shock-radius="shockRadius"
+          :shock-strength="shockStrength"
-            :shock-strength="shockStrength"
+          :max-speed="maxSpeed"
-            :max-speed="maxSpeed"
+          :resistance="resistance"
-            :resistance="resistance"
+          :return-duration="returnDuration"
-            :return-duration="returnDuration"
+          class-name="dot-grid-demo-canvas"
-            class-name="dot-grid-demo-canvas"
+        />
-          />
+        <BackgroundContent pillText="New Background" headline="Organized chaos with every cursor movement!" />
+      </div>
+
+      <Customize>
+        <div class="flex gap-4 mb-4">
+          <PreviewColor title="Base Color" v-model="baseColor" />
+
+          <PreviewColor title="Active Color" v-model="activeColor" />
         </div>
 
-        <Customize>
+        <PreviewSlider title="Dot Size" v-model="dotSize" :min="2" :max="50" :step="1" />
-          <div class="color-controls">
-            <PreviewColor title="Base Color" v-model="baseColor" />
 
-            <PreviewColor title="Active Color" v-model="activeColor" />
+        <PreviewSlider title="Gap" v-model="gap" :min="5" :max="100" :step="1" />
-          </div>
 
-          <PreviewSlider title="Dot Size" v-model="dotSize" :min="2" :max="50" :step="1" />
+        <PreviewSlider title="Proximity" v-model="proximity" :min="50" :max="500" :step="10" />
 
-          <PreviewSlider title="Gap" v-model="gap" :min="5" :max="100" :step="1" />
+        <PreviewSlider title="Speed Trigger" v-model="speedTrigger" :min="50" :max="500" :step="10" />
 
-          <PreviewSlider title="Proximity" v-model="proximity" :min="50" :max="500" :step="10" />
+        <PreviewSlider title="Shock Radius" v-model="shockRadius" :min="50" :max="500" :step="10" />
 
-          <PreviewSlider title="Speed Trigger" v-model="speedTrigger" :min="50" :max="500" :step="10" />
+        <PreviewSlider title="Shock Strength" v-model="shockStrength" :min="1" :max="20" :step="1" />
 
-          <PreviewSlider title="Shock Radius" v-model="shockRadius" :min="50" :max="500" :step="10" />
+        <PreviewSlider title="Max Speed" v-model="maxSpeed" :min="1000" :max="10000" :step="100" />
 
-          <PreviewSlider title="Shock Strength" v-model="shockStrength" :min="1" :max="20" :step="1" />
+        <PreviewSlider title="Resistance (Inertia)" v-model="resistance" :min="100" :max="2000" :step="50" />
 
-          <PreviewSlider title="Max Speed" v-model="maxSpeed" :min="1000" :max="10000" :step="100" />
+        <PreviewSlider title="Return Duration (Inertia)" v-model="returnDuration" :min="0.1" :max="5" :step="0.1" />
+      </Customize>
 
-          <PreviewSlider title="Resistance (Inertia)" v-model="resistance" :min="100" :max="2000" :step="50" />
+      <PropTable :data="propData" />
 
-          <PreviewSlider title="Return Duration (Inertia)" v-model="returnDuration" :min="0.1" :max="5" :step="0.1" />
+      <Dependencies :dependency-list="['gsap']" />
-        </Customize>
+    </template>
 
-        <PropTable :data="propData" />
+    <template #code>
+      <CodeExample :code-object="dotGrid" />
+    </template>
 
-        <Dependencies :dependency-list="['gsap']" />
+    <template #cli>
-      </template>
+      <CliInstallation :command="dotGrid.cli" />
-
+    </template>
-      <template #code>
+  </TabbedLayout>
-        <CodeExample :code-object="dotGrid" />
-      </template>
-
-      <template #cli>
-        <CliInstallation :command="dotGrid.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
 </template>
 
 <script setup lang="ts">
+import { useForceRerender } from '@/composables/useForceRerender';
+import { dotGrid } from '@/constants/code/Backgrounds/dotGridCode';
 import { ref } from 'vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
-import PropTable from '../../components/common/PropTable.vue';
-import Dependencies from '../../components/code/Dependencies.vue';
 import CliInstallation from '../../components/code/CliInstallation.vue';
 import CodeExample from '../../components/code/CodeExample.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import BackgroundContent from '../../components/common/BackgroundContent.vue';
 import Customize from '../../components/common/Customize.vue';
-import PreviewSlider from '../../components/common/PreviewSlider.vue';
 import PreviewColor from '../../components/common/PreviewColor.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import DotGrid from '../../content/Backgrounds/DotGrid/DotGrid.vue';
-import { dotGrid } from '@/constants/code/Backgrounds/dotGridCode';
-import { useForceRerender } from '@/composables/useForceRerender';
 
 const dotSize = ref(5);
 const gap = ref(15);
@@ -131,10 +131,4 @@ const propData = [
   width: 100%;
   height: 100%;
 }
-
-.color-controls {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
 </style>

src/demo/Backgrounds/GridDistortionDemo.vue

@@ -4,16 +4,14 @@
       <div class="relative p-0 h-[600px] overflow-hidden demo-container" ref="containerRef">
         <GridDistortion
           :key="key"
-          imageSrc="https://picsum.photos/1920/1080?grayscale"
+          imageSrc="https://picsum.photos/1920/1080"
           :grid="grid"
           :mouse="mouse"
           :strength="0.15"
           :relaxation="0.9"
           className="grid-distortion"
         />
-        <p class="absolute font-black text-8xl text-center pointer-events-none select-none mix-blend-difference">
+        <BackgroundContent pillText="New Background" headline="Don't just sit there, move your cursor!" />
-          Distortion.
-        </p>
       </div>
 
       <Customize>
@@ -48,6 +46,7 @@ import PropTable from '../../components/common/PropTable.vue';
 import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import { gridDistortion } from '../../constants/code/Backgrounds/gridDistortionCode';
 import GridDistortion from '../../content/Backgrounds/GridDistortion/GridDistortion.vue';
+import BackgroundContent from '../../components/common/BackgroundContent.vue';
 
 const { rerenderKey: key, forceRerender } = useForceRerender();
 

src/demo/Backgrounds/GridMotionDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container h-[600px]">
+      <div class="h-[600px] overflow-hidden demo-container">
         <GridMotion :items="images" />
       </div>
 
@@ -53,6 +53,5 @@ const images = Array.from({ length: numberOfImages }, () => imageUrl);
 <style scoped>
 .demo-container {
   padding: 0;
-  overflow: hidden;
 }
 </style>

src/demo/Backgrounds/HyperspeedDemo.vue

@@ -1,44 +1,43 @@
 <template>
-  <div class="hyperspeed-demo">
+  <TabbedLayout>
-    <TabbedLayout>
+    <template #preview>
-      <template #preview>
+      <div class="h-[600px] overflow-hidden cursor-pointer demo-container">
-        <div class="demo-container">
+        <Hyperspeed :effect-options="currentPreset" />
-          <div class="instruction-text">Click & Hold</div>
+        <BackgroundContent pillText="New Background" headline="Cick & hold to see the real magic of hyperspeed!" />
-          <Hyperspeed :effect-options="currentPreset" />
+      </div>
-        </div>
 
-        <Customize>
+      <Customize>
-          <PreviewSelect title="Animation Preset" :options="options" v-model="activePreset" />
+        <PreviewSelect title="Animation Preset" :options="options" v-model="activePreset" />
-        </Customize>
+      </Customize>
 
-        <PropTable :data="propData" />
+      <PropTable :data="propData" />
 
-        <Dependencies :dependency-list="['three', 'postprocessing']" />
+      <Dependencies :dependency-list="['three', 'postprocessing']" />
-      </template>
+    </template>
 
-      <template #code>
+    <template #code>
-        <CodeExample :code-object="hyperspeed" />
+      <CodeExample :code-object="hyperspeed" />
-      </template>
+    </template>
 
-      <template #cli>
+    <template #cli>
-        <CliInstallation :command="hyperspeed.cli" />
+      <CliInstallation :command="hyperspeed.cli" />
-      </template>
+    </template>
-    </TabbedLayout>
+  </TabbedLayout>
-  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { hyperspeed } from '@/constants/code/Backgrounds/hyperspeedCode';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import { computed, ref } from 'vue';
-import PropTable from '../../components/common/PropTable.vue';
-import Dependencies from '../../components/code/Dependencies.vue';
 import CliInstallation from '../../components/code/CliInstallation.vue';
 import CodeExample from '../../components/code/CodeExample.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import BackgroundContent from '../../components/common/BackgroundContent.vue';
 import Customize from '../../components/common/Customize.vue';
 import PreviewSelect from '../../components/common/PreviewSelect.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import Hyperspeed from '../../content/Backgrounds/Hyperspeed/Hyperspeed.vue';
 import { hyperspeedPresets } from '../../content/Backgrounds/Hyperspeed/HyperspeedPresets';
-import { hyperspeed } from '@/constants/code/Backgrounds/hyperspeedCode';
 
 const activePreset = ref<string>('one');
 
@@ -67,26 +66,7 @@ const options = [
 </script>
 
 <style scoped>
-.hyperspeed-demo {
-  width: 100%;
-}
-
 .demo-container {
-  height: 600px;
-  overflow: hidden;
-  cursor: pointer;
   padding: 0;
 }
-
-.instruction-text {
-  position: absolute;
-  top: 1.5rem;
-  left: 50%;
-  transform: translateX(-50%);
-  font-weight: 900;
-  font-size: 4rem;
-  color: #222;
-  z-index: 10;
-  pointer-events: none;
-}
 </style>

src/demo/Backgrounds/IridescenceDemo.vue

@@ -1,8 +1,9 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="relative demo-container h-[500px] p-0 overflow-hidden">
+      <div class="relative p-0 h-[600px] overflow-hidden demo-container">
         <Iridescence :key="key" :speed="speed" :color="colors" :mouseReact="mouseInteraction" :amplitude="amplitude" />
+        <BackgroundContent pillText="New Background" headline="Radiant iridescence with customizable colors" />
       </div>
 
       <Customize>
@@ -36,19 +37,20 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import BackgroundContent from '../../components/common/BackgroundContent.vue';
 import Customize from '../../components/common/Customize.vue';
 import PreviewSlider from '../../components/common/PreviewSlider.vue';
 import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
 import PropTable from '../../components/common/PropTable.vue';
-import Dependencies from '../../components/code/Dependencies.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
-import CodeExample from '../../components/code/CodeExample.vue';
-import CliInstallation from '../../components/code/CliInstallation.vue';
-import Iridescence from '../../content/Backgrounds/Iridescence/Iridescence.vue';
-import { iridescence } from '../../constants/code/Backgrounds/iridescenceCode';
 import { useForceRerender } from '../../composables/useForceRerender';
+import { iridescence } from '../../constants/code/Backgrounds/iridescenceCode';
+import Iridescence from '../../content/Backgrounds/Iridescence/Iridescence.vue';
 
-const colors = ref<[number, number, number]>([1, 1, 1]);
+const colors = ref<[number, number, number]>([0.5, 0.6, 0.8]);
 const speed = ref(1);
 const amplitude = ref(0.1);
 const mouseInteraction = ref(true);
@@ -85,7 +87,6 @@ const propData = [
 
 <style scoped>
 .demo-container {
-  overflow: hidden;
   padding: 0;
 }
 </style>

src/demo/Backgrounds/LetterGlitchDemo.vue

@@ -1,65 +1,65 @@
 <template>
-  <div class="letter-glitch-demo">
+  <TabbedLayout>
-    <TabbedLayout>
+    <template #preview>
-      <template #preview>
+      <div class="h-[600px] overflow-hidden demo-container">
-        <div class="demo-container">
+        <LetterGlitch
-          <LetterGlitch
+          :key="rerenderKey"
-            :key="rerenderKey"
+          :glitch-colors="colors"
-            :glitch-colors="colors"
+          :glitch-speed="speed"
-            :glitch-speed="speed"
+          :center-vignette="showCenterVignette"
-            :center-vignette="showCenterVignette"
+          :outer-vignette="showOuterVignette"
-            :outer-vignette="showOuterVignette"
+          :smooth="smooth"
-            :smooth="smooth"
+          class="w-full h-full"
-            class="w-full h-full"
+        />
-          />
+        <BackgroundContent pillText="New Background" headline="Am I finally a real hacker now, mom?" />
-        </div>
+      </div>
 
-        <Customize>
+      <Customize>
-          <button
+        <button
-            @click="randomizeColors"
+          @click="randomizeColors"
-            class="px-3 py-2 text-xs bg-[#111] hover:bg-[#222] text-white rounded-lg border border-[#333] transition-colors"
+          class="bg-[#111] hover:bg-[#222] px-3 py-2 border border-[#333] rounded-lg text-white text-xs transition-colors"
-          >
+        >
-            Randomize Colors
+          Randomize Colors
-          </button>
+        </button>
 
-          <PreviewSlider title="Glitch Speed" v-model="speed" :min="0" :max="100" :step="5" />
+        <PreviewSlider title="Glitch Speed" v-model="speed" :min="0" :max="100" :step="5" />
 
-          <PreviewSwitch title="Smooth Animation" v-model="smooth" />
+        <PreviewSwitch title="Smooth Animation" v-model="smooth" />
 
-          <PreviewSwitch title="Show Center Vignette" v-model="showCenterVignette" />
+        <PreviewSwitch title="Show Center Vignette" v-model="showCenterVignette" />
 
-          <PreviewSwitch title="Show Outer Vignette" v-model="showOuterVignette" />
+        <PreviewSwitch title="Show Outer Vignette" v-model="showOuterVignette" />
-        </Customize>
+      </Customize>
 
-        <PropTable :data="propData" />
+      <PropTable :data="propData" />
 
-        <Dependencies :dependency-list="[]" />
+      <Dependencies :dependency-list="[]" />
-      </template>
+    </template>
 
-      <template #code>
+    <template #code>
-        <CodeExample :code-object="letterGlitch" />
+      <CodeExample :code-object="letterGlitch" />
-      </template>
+    </template>
 
-      <template #cli>
+    <template #cli>
-        <CliInstallation :command="letterGlitch.cli" />
+      <CliInstallation :command="letterGlitch.cli" />
-      </template>
+    </template>
-    </TabbedLayout>
+  </TabbedLayout>
-  </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
-import PropTable from '../../components/common/PropTable.vue';
-import Dependencies from '../../components/code/Dependencies.vue';
-import CliInstallation from '../../components/code/CliInstallation.vue';
-import CodeExample from '../../components/code/CodeExample.vue';
-import Customize from '../../components/common/Customize.vue';
-import LetterGlitch from '@/content/Backgrounds/LetterGlitch/LetterGlitch.vue';
 import PreviewSlider from '@/components/common/PreviewSlider.vue';
 import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
-import { letterGlitch } from '@/constants/code/Backgrounds/letterGlitchCode';
 import { useForceRerender } from '@/composables/useForceRerender';
+import { letterGlitch } from '@/constants/code/Backgrounds/letterGlitchCode';
+import LetterGlitch from '@/content/Backgrounds/LetterGlitch/LetterGlitch.vue';
+import { ref } from 'vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import BackgroundContent from '../../components/common/BackgroundContent.vue';
+import Customize from '../../components/common/Customize.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
 
 const smooth = ref(true);
 const speed = ref(10);
@@ -119,7 +119,6 @@ const propData = [
 
 <style scoped>
 .demo-container {
-  overflow: hidden;
   padding: 0;
 }
 </style>

src/demo/Backgrounds/LightningDemo.vue

@@ -1,57 +1,57 @@
 <template>
-  <div class="lightning-demo">
+  <TabbedLayout>
-    <TabbedLayout>
+    <template #preview>
-      <template #preview>
+      <div class="h-[600px] overflow-hidden demo-container">
-        <div class="demo-container">
+        <Lightning
-          <Lightning
+          :hue="hue"
-            :hue="hue"
+          :x-offset="xOffset"
-            :x-offset="xOffset"
+          :speed="speed"
-            :speed="speed"
+          :intensity="intensity"
-            :intensity="intensity"
+          :size="size"
-            :size="size"
+          class="w-full h-full"
-            class="w-full h-full"
+        />
-          />
+        <BackgroundContent pillText="New Background" headline="The power of nature's fury, with React Bits!" />
-        </div>
+      </div>
 
-        <Customize>
+      <Customize>
-          <PreviewSlider title="Hue" v-model="hue" :min="0" :max="360" :step="1" />
+        <PreviewSlider title="Hue" v-model="hue" :min="0" :max="360" :step="1" />
 
-          <PreviewSlider title="X Offset" v-model="xOffset" :min="-2" :max="2" :step="0.1" />
+        <PreviewSlider title="X Offset" v-model="xOffset" :min="-2" :max="2" :step="0.1" />
 
-          <PreviewSlider title="Speed" v-model="speed" :min="0.5" :max="2" :step="0.1" />
+        <PreviewSlider title="Speed" v-model="speed" :min="0.5" :max="2" :step="0.1" />
 
-          <PreviewSlider title="Intensity" v-model="intensity" :min="0.1" :max="2" :step="0.1" />
+        <PreviewSlider title="Intensity" v-model="intensity" :min="0.1" :max="2" :step="0.1" />
 
-          <PreviewSlider title="Size" v-model="size" :min="0.1" :max="3" :step="0.1" />
+        <PreviewSlider title="Size" v-model="size" :min="0.1" :max="3" :step="0.1" />
-        </Customize>
+      </Customize>
 
-        <PropTable :data="propData" />
+      <PropTable :data="propData" />
 
-        <Dependencies :dependency-list="[]" />
+      <Dependencies :dependency-list="[]" />
-      </template>
+    </template>
 
-      <template #code>
+    <template #code>
-        <CodeExample :code-object="lightning" />
+      <CodeExample :code-object="lightning" />
-      </template>
+    </template>
 
-      <template #cli>
+    <template #cli>
-        <CliInstallation :command="lightning.cli" />
+      <CliInstallation :command="lightning.cli" />
-      </template>
+    </template>
-    </TabbedLayout>
+  </TabbedLayout>
-  </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
-import PropTable from '../../components/common/PropTable.vue';
-import Dependencies from '../../components/code/Dependencies.vue';
-import CliInstallation from '../../components/code/CliInstallation.vue';
-import CodeExample from '../../components/code/CodeExample.vue';
-import Customize from '../../components/common/Customize.vue';
-import Lightning from '@/content/Backgrounds/Lightning/Lightning.vue';
 import PreviewSlider from '@/components/common/PreviewSlider.vue';
 import { lightning } from '@/constants/code/Backgrounds/lightningCode';
+import Lightning from '@/content/Backgrounds/Lightning/Lightning.vue';
+import { ref } from 'vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import BackgroundContent from '../../components/common/BackgroundContent.vue';
+import Customize from '../../components/common/Customize.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
 
 const hue = ref(160);
 const xOffset = ref(0);
@@ -75,7 +75,6 @@ const propData = [
 
 <style scoped>
 .demo-container {
-  overflow: hidden;
   padding: 0;
 }
 </style>

src/demo/Backgrounds/LiquidChromeDemo.vue

@@ -1,8 +1,9 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="relative p-0 h-[500px] overflow-hidden demo-container">
+      <div class="relative p-0 h-[600px] overflow-hidden demo-container">
         <LiquidChrome :baseColor="baseColor" :speed="speed" :amplitude="amplitude" :interactive="interactive" />
+        <BackgroundContent pill-text="New Background" headline="Swirl around in the deep sea of liquid chrome!" />
       </div>
 
       <Customize>
@@ -39,6 +40,7 @@ import { ref, watch } from 'vue';
 import CliInstallation from '../../components/code/CliInstallation.vue';
 import CodeExample from '../../components/code/CodeExample.vue';
 import Dependencies from '../../components/code/Dependencies.vue';
+import BackgroundContent from '../../components/common/BackgroundContent.vue';
 import Customize from '../../components/common/Customize.vue';
 import PreviewSlider from '../../components/common/PreviewSlider.vue';
 import PreviewSwitch from '../../components/common/PreviewSwitch.vue';

src/demo/Backgrounds/OrbDemo.vue

@@ -1,14 +1,14 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="relative p-0 h-[500px] overflow-hidden demo-container">
+      <div class="relative p-0 h-[600px] overflow-hidden demo-container">
         <Orb
           :hue="debouncedHue"
           :hoverIntensity="debouncedHoverIntensity"
           :rotateOnHover="rotateOnHover"
           :forceHoverState="forceHoverState"
         />
-        <p class="z-0 absolute mb-0 font-black text-[clamp(2rem,2vw,6rem)] mix-blend-difference">Hover.</p>
+        <BackgroundContent pill-text="New Background" headline="This orb is hiding something, try hovering!" />
       </div>
 
       <Customize>
@@ -40,6 +40,7 @@ import { ref, watch } from 'vue';
 import CliInstallation from '../../components/code/CliInstallation.vue';
 import CodeExample from '../../components/code/CodeExample.vue';
 import Dependencies from '../../components/code/Dependencies.vue';
+import BackgroundContent from '../../components/common/BackgroundContent.vue';
 import Customize from '../../components/common/Customize.vue';
 import PreviewSlider from '../../components/common/PreviewSlider.vue';
 import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
@@ -49,7 +50,7 @@ import { orb } from '../../constants/code/Backgrounds/orbCode';
 import Orb from '../../content/Backgrounds/Orb/Orb.vue';
 
 const hue = ref(100);
-const hoverIntensity = ref(0.5);
+const hoverIntensity = ref(2);
 const rotateOnHover = ref(true);
 const forceHoverState = ref(false);
 

src/demo/Backgrounds/ParticlesDemo.vue

@@ -1,56 +1,55 @@
 <template>
-  <div class="particles-demo">
+  <TabbedLayout>
-    <TabbedLayout>
+    <template #preview>
-      <template #preview>
+      <div class="h-[600px] overflow-hidden demo-container">
-        <div class="demo-container">
+        <Particles
-          <Particles
+          :key="rerenderKey"
-            :key="rerenderKey"
+          :particle-colors="[color]"
-            :particle-colors="[color]"
+          :particle-count="particleCount"
-            :particle-count="particleCount"
+          :particle-spread="particleSpread"
-            :particle-spread="particleSpread"
+          :speed="speed"
-            :speed="speed"
+          :particle-base-size="baseSize"
-            :particle-base-size="baseSize"
+          :move-particles-on-hover="moveParticlesOnHover"
-            :move-particles-on-hover="moveParticlesOnHover"
+          :alpha-particles="alphaParticles"
-            :alpha-particles="alphaParticles"
+          :disable-rotation="disableRotation"
-            :disable-rotation="disableRotation"
+          class="w-full h-full"
-            class="w-full h-full"
+        />
-          />
+        <BackgroundContent pillText="New Background" headline="Particles that mimick the dance of the cosmos" />
+      </div>
+
+      <Customize>
+        <div class="flex items-center gap-4">
+          <PreviewColor title="Color" v-model="color" />
         </div>
 
-        <Customize>
+        <PreviewSlider title="Count" v-model="particleCount" :min="100" :max="1000" :step="100" />
-          <div class="flex gap-4 items-center">
-            <PreviewColor title="Color" v-model="color" />
-          </div>
 
-          <PreviewSlider title="Count" v-model="particleCount" :min="100" :max="1000" :step="100" />
+        <PreviewSlider title="Spread" v-model="particleSpread" :min="10" :max="100" :step="10" />
 
-          <PreviewSlider title="Spread" v-model="particleSpread" :min="10" :max="100" :step="10" />
+        <PreviewSlider title="Speed" v-model="speed" :min="0" :max="2" :step="0.1" />
 
-          <PreviewSlider title="Speed" v-model="speed" :min="0" :max="2" :step="0.1" />
+        <PreviewSlider title="Base Size" v-model="baseSize" :min="100" :max="1000" :step="100" />
 
-          <PreviewSlider title="Base Size" v-model="baseSize" :min="100" :max="1000" :step="100" />
+        <PreviewSwitch title="Mouse Interaction" v-model="moveParticlesOnHover" />
 
-          <PreviewSwitch title="Mouse Interaction" v-model="moveParticlesOnHover" />
+        <PreviewSwitch title="Particle Transparency" v-model="alphaParticles" />
 
-          <PreviewSwitch title="Particle Transparency" v-model="alphaParticles" />
+        <PreviewSwitch title="Disable Rotation" v-model="disableRotation" />
+      </Customize>
 
-          <PreviewSwitch title="Disable Rotation" v-model="disableRotation" />
+      <PropTable :data="propData" />
-        </Customize>
 
-        <PropTable :data="propData" />
+      <Dependencies :dependency-list="['ogl']" />
+    </template>
 
-        <Dependencies :dependency-list="['ogl']" />
+    <template #code>
-      </template>
+      <CodeExample :code-object="particles" />
+    </template>
 
-      <template #code>
+    <template #cli>
-        <CodeExample :code-object="particles" />
+      <CliInstallation :command="particles.cli" />
-      </template>
+    </template>
-
+  </TabbedLayout>
-      <template #cli>
-        <CliInstallation :command="particles.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -62,6 +61,7 @@ import CliInstallation from '../../components/code/CliInstallation.vue';
 import CodeExample from '../../components/code/CodeExample.vue';
 import Customize from '../../components/common/Customize.vue';
 import Particles from '@/content/Backgrounds/Particles/Particles.vue';
+import BackgroundContent from '../../components/common/BackgroundContent.vue';
 import PreviewSlider from '@/components/common/PreviewSlider.vue';
 import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
 import PreviewColor from '@/components/common/PreviewColor.vue';
@@ -136,7 +136,6 @@ const propData = [
 
 <style scoped>
 .demo-container {
-  overflow: hidden;
   padding: 0;
 }
 </style>

src/demo/Backgrounds/SilkDemo.vue

@@ -1,58 +1,58 @@
 <template>
-  <div class="silk-demo">
+  <TabbedLayout>
-    <TabbedLayout>
+    <template #preview>
-      <template #preview>
+      <div class="relative h-[600px] overflow-hidden demo-container">
-        <div class="demo-container">
+        <Silk
-          <Silk
+          :speed="speed"
-            :speed="speed"
+          :scale="scale"
-            :scale="scale"
+          :color="color"
-            :color="color"
+          :noise-intensity="noiseIntensity"
-            :noise-intensity="noiseIntensity"
+          :rotation="rotation"
-            :rotation="rotation"
+          class="w-full h-full"
-            class="w-full h-full"
+        />
-          />
+        <BackgroundContent pillText="New Background" headline="Silk touch is a good enhancement, Steve!" />
-        </div>
+      </div>
 
-        <Customize>
+      <Customize>
-          <PreviewSlider title="Speed" v-model="speed" :min="0" :max="10" :step="0.1" />
+        <PreviewSlider title="Speed" v-model="speed" :min="0" :max="10" :step="0.1" />
 
-          <PreviewSlider title="Scale" v-model="scale" :min="0.1" :max="3" :step="0.1" />
+        <PreviewSlider title="Scale" v-model="scale" :min="0.1" :max="3" :step="0.1" />
 
-          <PreviewSlider title="Noise Intensity" v-model="noiseIntensity" :min="0" :max="3" :step="0.1" />
+        <PreviewSlider title="Noise Intensity" v-model="noiseIntensity" :min="0" :max="3" :step="0.1" />
 
-          <PreviewSlider title="Rotation" v-model="rotation" :min="0" :max="6.28" :step="0.1" />
+        <PreviewSlider title="Rotation" v-model="rotation" :min="0" :max="6.28" :step="0.1" />
 
-          <PreviewColor title="Color" v-model="color" />
+        <PreviewColor title="Color" v-model="color" />
-        </Customize>
+      </Customize>
 
-        <PropTable :data="propData" />
+      <PropTable :data="propData" />
 
-        <Dependencies :dependency-list="['ogl']" />
+      <Dependencies :dependency-list="['ogl']" />
-      </template>
+    </template>
 
-      <template #code>
+    <template #code>
-        <CodeExample :code-object="silk" />
+      <CodeExample :code-object="silk" />
-      </template>
+    </template>
 
-      <template #cli>
+    <template #cli>
-        <CliInstallation :command="silk.cli" />
+      <CliInstallation :command="silk.cli" />
-      </template>
+    </template>
-    </TabbedLayout>
+  </TabbedLayout>
-  </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
-import PropTable from '../../components/common/PropTable.vue';
-import Dependencies from '../../components/code/Dependencies.vue';
-import CliInstallation from '../../components/code/CliInstallation.vue';
-import CodeExample from '../../components/code/CodeExample.vue';
-import Customize from '../../components/common/Customize.vue';
-import Silk from '@/content/Backgrounds/Silk/Silk.vue';
 import PreviewColor from '@/components/common/PreviewColor.vue';
 import PreviewSlider from '@/components/common/PreviewSlider.vue';
 import { silk } from '@/constants/code/Backgrounds/silkCode';
+import Silk from '@/content/Backgrounds/Silk/Silk.vue';
+import { ref } from 'vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import BackgroundContent from '../../components/common/BackgroundContent.vue';
+import Customize from '../../components/common/Customize.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
 
 const speed = ref(5);
 const scale = ref(1);
@@ -73,7 +73,6 @@ const propData = [
 
 <style scoped>
 .demo-container {
-  overflow: hidden;
   padding: 0;
 }
 </style>

src/demo/Backgrounds/SquaresDemo.vue

@@ -1,8 +1,8 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="relative min-h-[200px] demo-container overflow-hidden p-0">
+      <div class="relative p-0 min-h-[200px] overflow-hidden demo-container">
-        <div class="w-full h-[500px] overflow-hidden">
+        <div class="w-full h-[600px] overflow-hidden">
           <Squares
             :squareSize="size"
             :speed="speed"
@@ -10,12 +10,13 @@
             :borderColor="borderColor"
             :hoverFillColor="hoverColor"
           />
+          <BackgroundContent pillText="New Background" headline="Customizable squares moving around smoothly" />
         </div>
       </div>
 
       <Customize>
         <div class="flex items-center mb-6">
-          <span class="text-sm mr-2">Direction</span>
+          <span class="mr-2 text-sm">Direction</span>
 
           <div class="flex">
             <button
@@ -59,15 +60,16 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
-import Customize from '../../components/common/Customize.vue';
-import PreviewSlider from '../../components/common/PreviewSlider.vue';
-import PreviewColor from '../../components/common/PreviewColor.vue';
-import PropTable from '../../components/common/PropTable.vue';
-import CodeExample from '../../components/code/CodeExample.vue';
 import CliInstallation from '../../components/code/CliInstallation.vue';
-import Squares from '../../content/Backgrounds/Squares/Squares.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import BackgroundContent from '../../components/common/BackgroundContent.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewColor from '../../components/common/PreviewColor.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import { squares } from '../../constants/code/Backgrounds/squaresCode';
+import Squares from '../../content/Backgrounds/Squares/Squares.vue';
 
 const direction = ref<'diagonal' | 'up' | 'right' | 'down' | 'left'>('diagonal');
 const borderColor = ref('#333');
@@ -119,7 +121,6 @@ const propData = [
 
 <style scoped>
 .demo-container {
-  overflow: hidden;
   padding: 0;
 }
 </style>

src/demo/Backgrounds/ThreadsDemo.vue

@@ -1,13 +1,14 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="relative demo-container h-[500px] overflow-hidden p-0">
+      <div class="relative p-0 h-[600px] overflow-hidden demo-container">
         <Threads
           :amplitude="amplitude"
           :distance="distance"
           :enableMouseInteraction="enableMouseInteraction"
           :color="[1, 1, 1]"
         />
+        <BackgroundContent pillText="New Background" headline="Not to be confused with the Threads app by Meta!" />
       </div>
 
       <Customize>
@@ -35,16 +36,17 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import BackgroundContent from '../../components/common/BackgroundContent.vue';
 import Customize from '../../components/common/Customize.vue';
 import PreviewSlider from '../../components/common/PreviewSlider.vue';
 import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
 import PropTable from '../../components/common/PropTable.vue';
-import Dependencies from '../../components/code/Dependencies.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
-import CodeExample from '../../components/code/CodeExample.vue';
-import CliInstallation from '../../components/code/CliInstallation.vue';
-import Threads from '../../content/Backgrounds/Threads/Threads.vue';
 import { threads } from '../../constants/code/Backgrounds/threadsCode';
+import Threads from '../../content/Backgrounds/Threads/Threads.vue';
 
 const amplitude = ref(1);
 const distance = ref(0);
@@ -80,7 +82,6 @@ const propData = [
 
 <style scoped>
 .demo-container {
-  overflow: hidden;
   padding: 0;
 }
 </style>

src/demo/Backgrounds/WavesDemo.vue

@@ -1,33 +1,31 @@
 <template>
-  <div class="waves-demo">
+  <TabbedLayout>
-    <TabbedLayout>
+    <template #preview>
-      <template #preview>
+      <div class="h-[600px] overflow-hidden demo-container">
-        <div class="demo-container">
+        <Waves :wave-speed-x="waveSpeedX" :line-color="color" class="w-full h-full" />
-          <Waves :wave-speed-x="waveSpeedX" :line-color="color" class="w-full h-full" />
+      </div>
+
+      <Customize>
+        <PreviewSlider title="Wave Speed X" v-model="waveSpeedX" :min="0" :max="0.1" :step="0.01" />
+
+        <div class="flex items-center gap-4">
+          <PreviewColor title="Waves Color" v-model="color" />
         </div>
+      </Customize>
 
-        <Customize>
+      <PropTable :data="propData" />
-          <PreviewSlider title="Wave Speed X" v-model="waveSpeedX" :min="0" :max="0.1" :step="0.01" />
 
-          <div class="flex gap-4 items-center">
+      <Dependencies :dependency-list="[]" />
-            <PreviewColor title="Waves Color" v-model="color" />
+    </template>
-          </div>
-        </Customize>
 
-        <PropTable :data="propData" />
+    <template #code>
+      <CodeExample :code-object="waves" />
+    </template>
 
-        <Dependencies :dependency-list="[]" />
+    <template #cli>
-      </template>
+      <CliInstallation :command="waves.cli" />
-
+    </template>
-      <template #code>
+  </TabbedLayout>
-        <CodeExample :code-object="waves" />
-      </template>
-
-      <template #cli>
-        <CliInstallation :command="waves.cli" />
-      </template>
-    </TabbedLayout>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -105,7 +103,6 @@ const propData = [
 
 <style scoped>
 .demo-container {
-  overflow: hidden;
   padding: 0;
 }
 </style>

src/demo/Components/ChromaGridDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container relative overflow-hidden py-6">
+      <div class="demo-container relative overflow-hidden">
         <ChromaGrid />
       </div>
 
@@ -72,5 +72,6 @@ const propData = [
 <style scoped>
 .demo-container {
   height: auto;
+  padding: 4em 0;
 }
 </style>

src/demo/TextAnimations/ScrollVelocityDemo.vue

@@ -0,0 +1,132 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div class="demo-container overflow-hidden">
+        <div class="relative flex justify-center items-center">
+          <ScrollVelocity
+            :texts="['Vue Bits', 'Scroll Down']"
+            :velocity="velocity"
+            :damping="damping"
+            :stiffness="stiffness"
+            :velocity-mapping="velocityMapping"
+            class-name="custom-scroll-text"
+          />
+        </div>
+      </div>
+
+      <Customize>
+        <PreviewSlider title="Velocity" v-model="velocity" :min="10" :max="500" :step="10" />
+        <PreviewSlider title="Damping" v-model="damping" :min="10" :max="100" :step="10" />
+        <PreviewSlider title="Stiffness" v-model="stiffness" :min="100" :max="1000" :step="50" />
+      </Customize>
+
+      <PropTable :data="propData" />
+
+      <Dependencies :dependency-list="['gsap']" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="scrollVelocity" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="scrollVelocity.cli" />
+    </template>
+  </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import ScrollVelocity from '../../content/TextAnimations/ScrollVelocity/ScrollVelocity.vue';
+import { scrollVelocity } from '@/constants/code/TextAnimations/scrollVelocityCode';
+
+const velocity = ref(100);
+const damping = ref(50);
+const stiffness = ref(400);
+const velocityMapping = ref<{ input: [number, number]; output: [number, number] }>({
+  input: [0, 1000],
+  output: [0, 5]
+});
+
+const propData = [
+  {
+    name: 'scrollContainerRef',
+    type: 'HTMLElement | null',
+    default: 'null',
+    description: 'Optional ref for a custom scroll container to track scroll position.'
+  },
+  {
+    name: 'texts',
+    type: 'string[]',
+    default: '[]',
+    description: 'Array of strings to display as scrolling text.'
+  },
+  {
+    name: 'velocity',
+    type: 'number',
+    default: '100',
+    description: 'Base velocity for scrolling; sign is flipped for odd indexed texts.'
+  },
+  {
+    name: 'className',
+    type: 'string',
+    default: '""',
+    description: 'CSS class applied to each text copy (span).'
+  },
+  {
+    name: 'damping',
+    type: 'number',
+    default: '50',
+    description: 'Damping value for the spring animation.'
+  },
+  {
+    name: 'stiffness',
+    type: 'number',
+    default: '400',
+    description: 'Stiffness value for the spring animation.'
+  },
+  {
+    name: 'velocityMapping',
+    type: '{ input: [number, number]; output: [number, number] }',
+    default: '{ input: [0, 1000], output: [0, 5] }',
+    description: 'Mapping from scroll velocity to a movement multiplier for dynamic scrolling.'
+  },
+  {
+    name: 'parallaxClassName',
+    type: 'string',
+    default: '""',
+    description: 'CSS class for the parallax container.'
+  },
+  {
+    name: 'scrollerClassName',
+    type: 'string',
+    default: '""',
+    description: 'CSS class for the scroller container.'
+  },
+  {
+    name: 'parallaxStyle',
+    type: 'Record<string, string | number>',
+    default: '{}',
+    description: 'Inline styles for the parallax container.'
+  },
+  {
+    name: 'scrollerStyle',
+    type: 'Record<string, string | number>',
+    default: '{}',
+    description: 'Inline styles for the scroller container.'
+  }
+];
+</script>
+
+<style scoped>
+.demo-container {
+  min-height: 400px;
+}
+</style>