TS Fixes + Demo Cleanup

src/components/common/SearchDialog.vue

@@ -132,7 +132,7 @@ const keyboardNav = ref(false);
 const topGradientOpacity = ref(0);
 const bottomGradientOpacity = ref(1);
 const searchValue = ref('');
-let debounceTimer: any = null;
+let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 
 interface SearchResult {
   categoryName: string;

src/content/Components/CircularGallery/CircularGallery.vue

@@ -42,12 +42,16 @@ function lerp(p1: number, p2: number, t: number): number {
   return p1 + (p2 - p1) * t;
 }
 
-function autoBind(instance: Record<string, unknown>): void {
+function autoBind<T extends object>(instance: T): void {
-  const proto = Object.getPrototypeOf(instance);
+  const proto = Object.getPrototypeOf(instance) as Record<string, unknown> | null;
+  if (!proto) return;
   Object.getOwnPropertyNames(proto).forEach(key => {
-    if (key !== 'constructor' && typeof instance[key] === 'function') {
+    if (key !== 'constructor') {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const desc = Object.getOwnPropertyDescriptor(proto, key);
-      instance[key] = (instance[key] as any).bind(instance);
+      if (desc && typeof desc.value === 'function') {
+        const fn = desc.value as (...args: unknown[]) => unknown;
+        (instance as Record<string, unknown>)[key] = fn.bind(instance);
+      }
     }
   });
 }
@@ -107,8 +111,7 @@ class Title {
   mesh!: Mesh;
 
   constructor({ gl, plane, renderer, text, textColor = '#545050', font = '30px sans-serif' }: TitleProps) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    autoBind(this);
-    autoBind(this as any);
     this.gl = gl;
     this.plane = plane;
     this.renderer = renderer;
@@ -590,8 +593,9 @@ class App {
 
   onWheel(e: Event) {
     const wheelEvent = e as WheelEvent;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // Support legacy wheel events if present
-    const delta = wheelEvent.deltaY || (wheelEvent as any).wheelDelta || (wheelEvent as any).detail;
+    const legacy = wheelEvent as unknown as { wheelDelta?: number; detail?: number };
+    const delta = wheelEvent.deltaY ?? legacy.wheelDelta ?? legacy.detail ?? 0;
     this.scroll.target += delta > 0 ? this.scrollSpeed : -this.scrollSpeed;
     this.onCheckDebounce();
   }

src/content/Components/FlyingPosters/FlyingPosters.vue

@@ -156,8 +156,11 @@ void main() {
 }
 `;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type MethodNames<T> = {
-function AutoBind(self: any, { include, exclude }: AutoBindOptions = {}) {
+  [K in keyof T]: T[K] extends (...args: unknown[]) => unknown ? K : never;
+}[keyof T];
+
+function AutoBind<T extends object>(self: T, { include, exclude }: AutoBindOptions = {}) {
   const getAllProperties = (object: object): Set<[object, string | symbol]> => {
     const properties = new Set<[object, string | symbol]>();
     let currentObject: object | null = object;
@@ -178,11 +181,18 @@ function AutoBind(self: any, { include, exclude }: AutoBindOptions = {}) {
     return true;
   };
 
-  for (const [object, key] of getAllProperties(self.constructor.prototype)) {
+  const proto = Object.getPrototypeOf(self);
+  if (!proto) return self;
+  for (const [object, key] of getAllProperties(proto)) {
     if (key === 'constructor' || !filter(key)) continue;
     const descriptor = Reflect.getOwnPropertyDescriptor(object, key);
     if (descriptor && typeof descriptor.value === 'function' && typeof key === 'string') {
-      self[key] = self[key].bind(self);
+      const current = (self as Record<string, unknown>)[key];
+      if (typeof current === 'function') {
+        (self as Record<MethodNames<T>, unknown>)[key as MethodNames<T>] = (
+          current as (...a: unknown[]) => unknown
+        ).bind(self);
+      }
     }
   }
   return self;

src/content/TextAnimations/RotatingText/RotatingText.vue

@@ -59,14 +59,20 @@ let intervalId: ReturnType<typeof setInterval> | null = null;
 
 const splitIntoCharacters = (text: string): string[] => {
   if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const IntlWithSegmenter = Intl as typeof Intl & {
-    const segmenter = new (Intl as any).Segmenter('en', { granularity: 'grapheme' });
+      Segmenter: new (
+        locales?: string | string[],
+        options?: { granularity: 'grapheme' | 'word' | 'sentence' }
+      ) => {
+        segment: (text: string) => Iterable<{ segment: string }>;
+      };
+    };
+    const segmenter = new IntlWithSegmenter.Segmenter('en', { granularity: 'grapheme' });
     return [...segmenter.segment(text)].map(({ segment }) => segment);
   }
 
   return [...text];
 };
-
 const elements = computed((): WordElement[] => {
   const currentText = props.texts[currentTextIndex.value];
 

src/css/category.css

@@ -86,12 +86,10 @@
 }
 
 .demo-container {
-  min-height: 500px;
   position: relative;
   width: 100%;
   background: #0b0b0b;
   border: 1px solid #333;
-  padding: 1em;
   margin-top: 1.4rem;
   border-radius: 20px;
   display: flex;

src/demo/Animations/AnimatedContentDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container">
+      <div class="demo-container h-[500px]">
         <RefreshButton @click="forceRerender" />
         <AnimatedContent
           :direction="direction"

src/demo/Animations/ClickSparkDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container">
+      <div class="demo-container h-[500px]">
         <ClickSpark
           :key="rerenderKey"
           :spark-color="sparkColor"
@@ -87,10 +87,6 @@ const propData = [
 </script>
 
 <style scoped>
-.demo-container {
-  min-height: 400px;
-}
-
 .click-spark-demo-area {
   position: absolute;
   width: 100%;

src/demo/Animations/CountUpDemo.vue

@@ -3,7 +3,7 @@
     <template #preview>
       <h2 class="demo-title-extra">Default</h2>
 
-      <div class="demo-container relative">
+      <div class="demo-container h-[200px]">
         <CountUp
           :key="keyDefault"
           :from="from"
@@ -19,9 +19,9 @@
 
       <h2 class="demo-title-extra">Start Programmatically</h2>
 
-      <div class="demo-container flex flex-col justify-center items-center relative min-h-[200px]">
+      <div class="demo-container h-[200px] flex-col justify-center items-center">
         <button
-          class="bg-[#0b0b0b] cursor-pointer rounded-[10px] border border-[#222] text-white px-4 py-2 mb-4"
+          class="bg-[#0b0b0b] cursor-pointer rounded-[10px] border border-[#222] text-white px-4 py-2"
           @click="setStartCounting(true)"
         >
           Count to 500!
@@ -166,10 +166,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  min-height: 200px;
-  height: 200px;
-}
-</style>

src/demo/Animations/CrosshairDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div ref="containerRef" class="demo-container relative min-h-[300px] overflow-hidden">
+      <div ref="containerRef" class="demo-container min-h-[300px] overflow-hidden">
         <Crosshair :container-ref="targeted ? containerElement : null" :color="color" />
 
         <div class="flex flex-col justify-center items-center">

src/demo/Animations/CubesDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container h-[650px]">
+      <div class="demo-container h-[700px]">
         <Cubes
           :borderStyle="borderStyle"
           :gridSize="gridSize"

src/demo/Animations/ElectricBorderDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="flex-col h-[500px] overflow-hidden demo-container">
+      <div class="demo-container h-[500px] overflow-hidden">
         <ElectricBorder
           v-if="example === 'card'"
           :color="cardProps.color"
@@ -160,9 +160,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Animations/FadeContentDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container">
+      <div class="demo-container h-[500px]">
         <RefreshButton @refresh="forceRerender" />
 
         <FadeContent

src/demo/Animations/GlareHoverDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container min-h-[400px]">
+      <div class="demo-container h-[400px]">
         <GlareHover
           background="#111"
           border-color="#222"

src/demo/Animations/GradualBlurDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="relative flex-col h-[500px] overflow-hidden demo-container demo-container-dots">
+      <div class="demo-container demo-container-dots h-[500px] overflow-hidden">
         <div
           ref="scrollRef"
           class="relative flex flex-col items-center px-6 py-[100px] w-full h-full overflow-x-hidden overflow-y-auto scrollContainer"
@@ -237,10 +237,6 @@ const propData = [
 </script>
 
 <style scoped>
-.demo-container {
-  padding: 0;
-}
-
 .scrollContainer {
   &::-webkit-scrollbar {
     display: none;

src/demo/Animations/LogoLoopDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="relative h-[500px] overflow-hidden demo-container">
+      <div class="demo-container h-[500px] overflow-hidden">
         <LogoLoop
           :key="key"
           :logos="items"
@@ -161,9 +161,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Animations/MagnetDemo.vue

@@ -3,7 +3,7 @@
     <template #preview>
       <h2 class="demo-title-extra">Container</h2>
 
-      <div class="demo-container">
+      <div class="demo-container h-[400px]">
         <Magnet :key="rerenderKey" :padding="padding" :disabled="disabled" :magnetStrength="magnetStrength">
           <div class="magnet-container">Hover Me!</div>
         </Magnet>
@@ -11,7 +11,7 @@
 
       <h2 class="demo-title-extra">Link</h2>
 
-      <div class="demo-container">
+      <div class="demo-container h-[400px]">
         <Magnet
           :key="rerenderKey + 1"
           :padding="Math.floor(padding / 2)"
@@ -119,11 +119,6 @@ const propData = [
   font-weight: 600;
 }
 
-.demo-container {
-  position: relative;
-  min-height: 300px;
-}
-
 .magnet-container {
   width: 200px;
   height: 100px;

src/demo/Animations/MagnetLinesDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container">
+      <div class="demo-container h-[600px] overflow-hidden">
         <MagnetLines
           :rows="rows"
           :columns="columns"

src/demo/Animations/MetaBallsDemo.vue

@@ -140,9 +140,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Animations/MetallicPaintDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container relative h-[500px] overflow-hidden">
+      <div class="demo-container h-[500px] overflow-hidden">
         <MetallicPaint
           v-if="imageData"
           :key="rerenderKey"

src/demo/Animations/PixelTransitionDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container min-h-[400px]">
+      <div class="demo-container h-[400px]">
         <PixelTransition
           :key="key"
           :grid-size="gridSize"
@@ -24,7 +24,7 @@
           </template>
         </PixelTransition>
 
-        <div class="mt-2 absolute bottom-[2em] text-[#a6a6a6]">Psst, hover the image!</div>
+        <div class="mt-2 absolute bottom-[1em] text-[#a6a6a6]">Psst, hover the image!</div>
       </div>
 
       <Customize>

src/demo/Animations/RibbonsDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container">
+      <div class="demo-container h-[500px] overflow-hidden">
         <div class="hover-text">Hover Me.</div>
         <Ribbons
           :base-thickness="baseThickness"
@@ -177,13 +177,6 @@ const propData = [
   pointer-events: none;
 }
 
-.demo-container {
-  position: relative;
-  height: 500px;
-  padding: 0;
-  overflow: hidden;
-}
-
 .count-controls {
   display: flex;
   gap: 1rem;

src/demo/Animations/ShapeBlurDemo.vue

@@ -2,7 +2,7 @@
   <div class="shape-blur-demo">
     <TabbedLayout>
       <template #preview>
-        <div class="demo-container">
+        <div class="demo-container h-[500px] overflow-hidden">
           <ShapeBlur
             :variation="0"
             :pixel-ratio-prop="pixelRatioProp"
@@ -121,9 +121,4 @@ const propData = [
   color: #222;
   pointer-events: none;
 }
-
-.demo-container {
-  overflow: hidden;
-  padding: 0;
-}
 </style>

src/demo/Animations/SplashCursorDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container">
+      <div class="demo-container h-[400px]">
         <span class="text-6xl text-center text-[#333] font-black select-none">Move Your Cursor</span>
       </div>
 
@@ -142,11 +142,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  overflow: hidden;
-  min-height: 300px;
-  padding: 0;
-}
-</style>

src/demo/Animations/StickerPeelDemo.vue

@@ -2,7 +2,7 @@
   <TabbedLayout>
     <template #preview>
       <div
-        class="flex-col bg-[linear-gradient(to_bottom,_#060010,_#0D0716,_#0D0716,_#060010)] h-[500px] overflow-hidden demo-container"
+        class="bg-[linear-gradient(to_bottom,_#060010,_#0D0716,_#0D0716,_#060010)] h-[500px] overflow-hidden demo-container"
       >
         <StickerPeel
           :image-src="logo"
@@ -143,9 +143,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Animations/TargetCursorDemo.vue

@@ -95,9 +95,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/AuroraDemo.vue

@@ -98,9 +98,3 @@ const propData = [
   { name: 'style', type: 'CSSProperties', default: '{}', description: 'Inline styles for the component.' }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/BalatroDemo.vue

@@ -144,9 +144,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/BeamsDemo.vue

@@ -122,9 +122,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/FaultyTerminalDemo.vue

@@ -194,9 +194,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/GalaxyDemo.vue

@@ -174,9 +174,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/GradientBlindsDemo.vue

@@ -182,9 +182,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/GridDistortionDemo.vue

@@ -102,9 +102,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/GridMotionDemo.vue

@@ -49,9 +49,3 @@ const imageUrl =
 const numberOfImages = 30;
 const images = Array.from({ length: numberOfImages }, () => imageUrl);
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/HyperspeedDemo.vue

@@ -64,9 +64,3 @@ const options = [
   { value: 'six', label: 'Deep' }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/IridescenceDemo.vue

@@ -84,9 +84,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/LetterGlitchDemo.vue

@@ -116,9 +116,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/LightRaysDemo.vue

@@ -180,9 +180,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/LightningDemo.vue

@@ -72,9 +72,3 @@ const propData = [
   { name: 'size', type: 'number', default: '1', description: 'Scale factor for the bolt size.' }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/LiquidChromeDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="relative p-0 h-[600px] overflow-hidden demo-container">
+      <div class="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>
@@ -103,9 +103,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/ParticlesDemo.vue

@@ -133,9 +133,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/PixelBlastDemo.vue

@@ -190,9 +190,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/PlasmaDemo.vue

@@ -104,9 +104,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/PrismDemo.vue

@@ -166,9 +166,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/PrismaticBurstDemo.vue

@@ -146,9 +146,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/RippleGridDemo.vue

@@ -168,9 +168,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/SilkDemo.vue

@@ -70,9 +70,3 @@ const propData = [
   { name: 'style', type: 'CSSProperties', default: '{}', description: 'Inline styles for the component.' }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/SquaresDemo.vue

@@ -118,9 +118,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/ThreadsDemo.vue

@@ -79,9 +79,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/WavesDemo.vue

@@ -100,9 +100,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Components/AnimatedListDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container relative min-h-[500px] max-h-[500px] overflow-hidden flex items-center justify-center">
+      <div class="demo-container h-[500px] overflow-hidden">
         <AnimatedList
           :key="rerenderKey"
           :show-gradients="showGradients"

src/demo/Components/BounceCardsDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container bounce-cards-demo">
+      <div class="demo-container h-[500px] bounce-cards-demo">
         <RefreshButton @refresh="forceRerender" />
 
         <BounceCards

src/demo/Components/BubbleMenuDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="relative h-[800px] overflow-hidden demo-container demo-container-dots">
+      <div class="demo-container demo-container-dots h-[800px] overflow-hidden">
         <BubbleMenu
           :logo="logo"
           :menu-bg="menuBg"

src/demo/Components/CardNavDemo.vue

@@ -2,7 +2,7 @@
   <TabbedLayout>
     <template #preview>
       <div
-        class="relative overflow-hidden demo-container demo-container-dots"
+        class="demo-container demo-container-dots overflow-hidden"
         :style="{
           backgroundColor: currentTheme.backgroundColor,
           minHeight: '550px',

src/demo/Components/CardSwapDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container h-[500px] overflow-hidden flex flex-col lg:flex-row relative">
+      <div class="demo-container h-[500px] overflow-hidden">
         <div
           class="w-full lg:w-1/2 h-auto lg:h-full flex flex-col justify-center items-center lg:items-start text-center lg:text-left pt-8 lg:pt-0 pb-4 lg:pb-0 px-4 lg:px-4"
         >

src/demo/Components/ChromaGridDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container relative overflow-hidden">
+      <div class="demo-container overflow-hidden py-[64px]">
         <ChromaGrid :radius="radius" :damping="damping" :fadeOut="fadeOut" :ease="ease" />
       </div>
 
@@ -93,10 +93,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  height: auto;
-  padding: 4em 0;
-}
-</style>

src/demo/Components/CounterDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container h-[400px] overflow-hidden relative">
+      <div class="demo-container h-[400px] overflow-hidden">
         <Counter
           :value="value"
           :places="[100, 10, 1]"

src/demo/Components/DecayCardDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container" style="overflow: hidden">
+      <div class="demo-container h-[500px] overflow-hidden">
         <DecayCard>
           <div class="text-[2rem]">
             Decay

src/demo/Components/DockDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container">
+      <div class="demo-container h-[400px]">
         <Dock
           :key="rerenderKey"
           :items="items"
@@ -140,10 +140,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  min-height: 400px;
-  padding: 2rem;
-}
-</style>

src/demo/Components/ElasticSliderDemo.vue

@@ -2,7 +2,7 @@
   <TabbedLayout>
     <template #preview>
       <div class="demo-section">
-        <div class="demo-container relative min-h-[200px] flex items-center justify-center">
+        <div class="demo-container h-[300px] overflow-hidden">
           <ElasticSlider />
         </div>
       </div>
@@ -10,7 +10,7 @@
       <div class="demo-section">
         <h2 class="demo-title-extra">Using Steps</h2>
 
-        <div class="demo-container relative min-h-[200px] flex items-center justify-center">
+        <div class="demo-container h-[300px] overflow-hidden">
           <ElasticSlider :is-stepped="true" :step-size="10" />
         </div>
       </div>
@@ -18,7 +18,7 @@
       <div class="demo-section">
         <h2 class="demo-title-extra">Custom Range & Icons</h2>
 
-        <div class="demo-container relative min-h-[200px] flex items-center justify-center">
+        <div class="demo-container h-[300px] overflow-hidden">
           <ElasticSlider :starting-value="500" :default-value="750" :max-value="1000">
             <template #left-icon>
               <i class="pi pi-thumbs-down text-xl"></i>
@@ -103,11 +103,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  height: 300px;
-  min-height: 300px;
-  overflow: hidden;
-}
-</style>

src/demo/Components/FlowingMenuDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container" style="height: 600px; overflow: hidden; padding: 100px 0">
+      <div class="demo-container h-[600px] overflow-hidden py-[100px]">
         <FlowingMenu :items="demoItems" />
       </div>
 

src/demo/Components/FlyingPostersDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container relative h-[600px] overflow-hidden flex items-center justify-center">
+      <div class="demo-container h-[600px] overflow-hidden">
         <FlyingPosters
           :key="rerenderKey"
           :items="items"

src/demo/Components/FolderDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container">
+      <div class="demo-container h-[500px]">
         <Folder :size="size" :color="color"></Folder>
       </div>
 

src/demo/Components/GlassIconsDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container" style="height: 500px; overflow: hidden">
+      <div class="demo-container h-[500px] overflow-hidden">
         <GlassIcons :items="items" class="my-glass-icons" />
       </div>
 

src/demo/Components/GlassSurfaceDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="relative overflow-y-auto no-scrollbar demo-container" ref="scrollContainerRef">
+      <div class="overflow-y-auto no-scrollbar demo-container h-[500px]" ref="scrollContainerRef">
         <GlassSurface
           :key="key"
           :width="360"
@@ -293,12 +293,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-.demo-container::-webkit-scrollbar {
-  display: none;
-}
-</style>

src/demo/Components/GooeyNavDemo.vue

@@ -1,9 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div
+      <div class="demo-container h-[500px] overflow-hidden">
-        class="demo-container relative h-[500px] overflow-hidden bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 flex items-center justify-center"
-      >
         <GooeyNav
           :key="rerenderKey"
           :items="navItems"

src/demo/Components/MagicBentoDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="relative h-auto overflow-hidden demo-container">
+      <div class="py-[100px] overflow-hidden demo-container">
         <MagicBento
           :enable-stars="enableStars"
           :enable-spotlight="enableSpotlight"
@@ -133,9 +133,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0 8px;
-}
-</style>

src/demo/Components/ScrollStackDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="relative h-[500px] overflow-hidden demo-container">
+      <div class="demo-container h-[500px] overflow-hidden">
         <RefreshButton
           @refresh="
             () => {
@@ -208,9 +208,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Components/SpotlightCardDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container relative py-10">
+      <div class="demo-container py-10">
         <SpotlightCard class-name="custom-spotlight-card">
           <div class="flex h-full flex-col items-start justify-center">
             <i class="pi pi-star-fill text-4xl mb-3 text-white"></i>
@@ -17,7 +17,7 @@
 
       <h2 class="text-xl font-semibold text-white mb-4 mt-8">Custom Color</h2>
 
-      <div class="demo-container relative py-10">
+      <div class="demo-container py-10">
         <SpotlightCard class-name="custom-spotlight-card" spotlight-color="rgba(39, 255, 100, 0.326)">
           <div class="flex h-full flex-col items-start justify-center">
             <i class="pi pi-lock text-3xl mb-3 text-white"></i>

src/demo/Components/StackDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container">
+      <div class="demo-container h-[500px]">
         <Stack
           :key="rerenderKey"
           :randomRotation="randomRotation"

src/demo/Components/StepperDemo.vue

@@ -14,7 +14,7 @@
   />
   <TabbedLayout>
     <template #preview>
-      <div class="relative demo-container h-[500px] overflow-hidden">
+      <div class="demo-container h-[500px] overflow-hidden">
         <Stepper
           :initial-step="step"
           :on-step-change="handleStepChange"

src/demo/Components/TiltedCardDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container" style="min-height: 500px; position: relative; overflow: hidden">
+      <div class="demo-container h-[500px] overflow-hidden">
         <TiltedCard
           image-src="https://i.scdn.co/image/ab67616d0000b273d9985092cd88bffd97653b58"
           alt-text="Kendrick Lamar - GNX Album Cover"

src/demo/TextAnimations/AsciiTextDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container">
+      <div class="demo-container h-[400px] overflow-hidden">
         <AsciiText
           :key="rerenderKey"
           :text="text"

src/demo/TextAnimations/BlurTextDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container relative min-h-[400px] overflow-hidden">
+      <div class="demo-container h-[400px] overflow-hidden">
         <RefreshButton @refresh="forceRerender" />
 
         <BlurText

src/demo/TextAnimations/CircularTextDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container relative min-h-[400px] overflow-hidden flex items-center justify-center">
+      <div class="demo-container h-[400px] overflow-hidden">
         <CircularText
           :key="rerenderKey"
           text="VUE * BITS * IS * AWESOME * "

src/demo/TextAnimations/CurvedLoopDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container relative h-[500px] overflow-hidden p-0">
+      <div class="demo-container h-[500px] overflow-hidden">
         <CurvedLoop
           :key="rerenderKey"
           :marquee-text="marqueeText"

src/demo/TextAnimations/DecryptedTextDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container relative py-6 overflow-hidden">
+      <div class="demo-container py-6 overflow-hidden">
         <RefreshButton @click="forceRerender" />
 
         <div :key="key" class="pl-6 m-8 w-full flex flex-col justify-start items-start">

src/demo/TextAnimations/FallingTextDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container relative h-[400px] overflow-hidden p-0 flex justify-center items-center">
+      <div class="demo-container h-[400px] overflow-hidden">
         <FallingText
           :key="key"
           text="Vue Bits is a library of animated and interactive Vue components designed to streamline UI development and simplify your workflow."

src/demo/TextAnimations/FuzzyTextDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container relative h-[500px] overflow-hidden">
+      <div class="demo-container h-[500px] overflow-hidden">
         <div class="flex flex-col items-center justify-center h-full">
           <FuzzyText
             :key="`main-${rerenderKey}`"

src/demo/TextAnimations/GlitchTextDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container relative h-[500px] overflow-hidden">
+      <div class="demo-container h-[500px] overflow-hidden">
         <GlitchText
           :children="text"
           :speed="speed"

src/demo/TextAnimations/GradientTextDemo.vue

@@ -4,7 +4,7 @@
       <template #preview>
         <h2 class="demo-title-extra">Default</h2>
 
-        <div class="demo-container">
+        <div class="demo-container h-[200px]">
           <div class="text-[2rem]">
             <GradientText
               text="Add a splash of color!"
@@ -17,7 +17,7 @@
 
         <h2 class="demo-title-extra">Border Animation</h2>
 
-        <div class="demo-container">
+        <div class="demo-container h-[200px]">
           <div class="text-[2rem]">
             <GradientText
               text="Now with a cool border!"
@@ -128,9 +128,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  min-height: 200px;
-}
-</style>

src/demo/TextAnimations/RotatingTextDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="min-h-[400px] demo-container">
+      <div class="h-[400px] demo-container">
         <div
           class="flex flex-row justify-center items-center p-12 sm:p-20 md:p-24 w-full h-full overflow-hidden font-light text-[1.5rem] text-white sm:text-[1.875rem] md:text-[3rem] dark:text-muted leading-8 sm:leading-9 md:leading-none"
         >

src/demo/TextAnimations/ScrollFloatDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div ref="containerRef" class="demo-container" @wheel="smoothScroll">
+      <div ref="containerRef" class="demo-container overflow-y-auto h-[600px]" @wheel="smoothScroll">
         <div class="scroll-instruction">Scroll Down</div>
 
         <div class="scroll-content">
@@ -158,11 +158,6 @@ const propData = [
 </script>
 
 <style scoped>
-.demo-container {
-  height: 60vh;
-  overflow-y: auto;
-}
-
 .scroll-content {
   padding-top: 150vh !important;
   padding-bottom: 50vh;

src/demo/TextAnimations/ScrollRevealDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div ref="containerRef" class="demo-container" @wheel="smoothScroll">
+      <div ref="containerRef" class="demo-container overflow-y-auto h-[600px]" @wheel="smoothScroll">
         <div class="scroll-instruction">Scroll Down</div>
 
         <div class="scroll-content">
@@ -171,11 +171,6 @@ const propData = [
 </script>
 
 <style scoped>
-.demo-container {
-  height: 60vh;
-  overflow-y: auto;
-}
-
 .scroll-content {
   padding: 150vh 2em 50vh 2em;
 }

src/demo/TextAnimations/ScrollVelocityDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container overflow-hidden">
+      <div class="demo-container h-[500px] overflow-hidden">
         <div class="relative flex justify-center items-center">
           <ScrollVelocity
             :texts="['Vue Bits', 'Scroll Down']"
@@ -124,9 +124,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  min-height: 400px;
-}
-</style>

src/demo/TextAnimations/ShinyTextDemo.vue

@@ -3,13 +3,13 @@
     <template #preview>
       <h2 class="demo-title-extra">Basic</h2>
 
-      <div class="demo-container">
+      <div class="demo-container h-[200px]">
         <ShinyText text="Just some shiny text!" :disabled="false" :speed="3" class-name="shiny-text-demo" />
       </div>
 
       <h2 class="demo-title-extra">Button Text</h2>
 
-      <div class="demo-container">
+      <div class="demo-container h-[200px]">
         <div class="shiny-button">
           <ShinyText text="Shiny Button" :disabled="false" :speed="3" class-name="shiny-text-demo" />
         </div>
@@ -17,7 +17,7 @@
 
       <h2 class="demo-title-extra">Configurable Speed</h2>
 
-      <div class="demo-container relative min-h-[150px] text-2xl flex items-center justify-center">
+      <div class="demo-container h-[200px]">
         <ShinyText
           :text="speed < 2.5 ? '🐎 This is fast!' : '🐌 This is slow!'"
           :disabled="false"
@@ -85,10 +85,6 @@ const propData = [
 </script>
 
 <style scoped>
-.demo-container {
-  min-height: 200px;
-}
-
 .shiny-button {
   padding: 12px 24px;
   border-radius: 50px;

src/demo/TextAnimations/SplitTextDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container">
+      <div class="demo-container h-[400px]">
         <RefreshButton @refresh="forceRerender" />
 
         <SplitText

src/demo/TextAnimations/TextPressureDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container min-h-[400px]">
+      <div class="demo-container h-[400px]">
         <TextPressure
           :key="rerenderKey"
           :text="text"

src/demo/TextAnimations/TextTrailDemo.vue

@@ -143,9 +143,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/TextAnimations/TextTypeDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container">
+      <div class="demo-container py-[64px] h-[350px]">
         <TextType
           :key="key"
           :text="texts"
@@ -216,13 +216,4 @@ const propData = [
   font-size: clamp(1.5rem, 4vw, 4rem);
   font-weight: 700;
 }
-.demo-container {
-  padding: 64px;
-  min-height: 350px;
-  align-items: flex-start;
-  justify-content: flex-start;
-  display: flex;
-  position: relative;
-  overflow: hidden;
-}
 </style>

src/demo/TextAnimations/TrueFocusDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="demo-container">
+      <div class="demo-container h-[400px]">
         <div :key="key" class="flex flex-col justify-center items-center m-8 pl-6 w-full">
           <TrueFocus :key="key" v-bind="config" />
         </div>

src/demo/TextAnimations/VariableProximityDemo.vue

@@ -1,10 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div
+      <div ref="containerRef" class="demo-container h-[400px] overflow-hidden font-['Roboto_Flex',sans-serif]">
-        ref="containerRef"
-        class="demo-container relative min-h-[400px] overflow-hidden p-4 font-['Roboto_Flex',sans-serif]"
-      >
         <VariableProximity
           label="Hover me! And then star Vue Bits on GitHub, or else..."
           class-name="variable-proximity-demo"