Merge branch 'main' into feat/bounce-cards

Author: DavidHDev

src/constants/Categories.ts

@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Target Cursor', 'Ripple Grid', 'Magic Bento', 'Galaxy', 'Text Type', 'Glass Surface', 'Sticker Peel'];
+export const NEW = ['Target Cursor', 'Ripple Grid', 'Magic Bento', 'Galaxy', 'Text Type', 'Glass Surface', 'Sticker Peel', 'Scroll Stack', 'Faulty Terminal'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -63,6 +63,7 @@ export const CATEGORIES = [
       'Masonry',
       'Glass Surface',
       'Magic Bento',
+      'Scroll Stack',
       'Profile Card',
       'Dock',
       'Gooey Nav',
@@ -81,7 +82,9 @@ export const CATEGORIES = [
       'Elastic Slider',
       'Stack',
       'Chroma Grid',
-      'Bounce Cards'
+      'Bounce Cards',
+      'Counter',
+      'Rolling Gallery'
     ]
   },
   {
@@ -93,6 +96,7 @@ export const CATEGORIES = [
       'Dither',
       'Dot Grid',
       'Hyperspeed',
+      'Faulty Terminal',
       'Ripple Grid',
       'Silk',
       'Lightning',

src/constants/Components.ts

@@ -70,6 +70,9 @@ const components = {
   'stack': () => import('../demo/Components/StackDemo.vue'),
   'chroma-grid': () => import('../demo/Components/ChromaGridDemo.vue'),
   'bounce-cards': () => import('../demo/Components/BounceCardsDemo.vue'),
+  'counter': () => import('../demo/Components/CounterDemo.vue'),
+  'rolling-gallery': () => import('../demo/Components/RollingGalleryDemo.vue'),
+  'scroll-stack': () => import('../demo/Components/ScrollStackDemo.vue'),
 };
 
 const backgrounds = {
@@ -95,6 +98,7 @@ const backgrounds = {
   'grid-distortion': () => import('../demo/Backgrounds/GridDistortionDemo.vue'),
   'ripple-grid': () => import('../demo/Backgrounds/RippleGridDemo.vue'),
   'galaxy': () => import('../demo/Backgrounds/GalaxyDemo.vue'),
+  'faulty-terminal': () => import('../demo/Backgrounds/FaultyTerminalDemo.vue'),
 };
 
 export const componentMap = {

src/constants/code/Backgrounds/faultyTerminalCode.ts

@@ -0,0 +1,33 @@
+import code from '@content/Backgrounds/FaultyTerminal/FaultyTerminal.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const faultyTerminal = createCodeObject(code, 'Backgrounds/FaultyTerminal', {
+  installation: `npm install ogl`,
+  usage: `<template>
+  <div class="relative w-full h-[600px]">
+    <FaultyTerminal
+        :scale="1.5"
+        :grid-mul="[2, 1]"
+        :digit-size="1.2"
+        :time-scale="1"
+        :pause="false"
+        :scanline-intensity="1"
+        :glitch-amount="1"
+        :flicker-amount="1"
+        :noise-amp="1"
+        :chromatic-aberration="0"
+        :dither="0"
+        :curvature="0"
+        tint="#ffffff"
+        :mouse-react="true"
+        :mouse-strength="0.5"
+        :page-load-animation="false"
+        :brightness="1"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import FaultyTerminal from "./FaultyTerminal.vue";
+</script>`
+});

src/constants/code/Components/counterCode.ts

@@ -0,0 +1,17 @@
+import code from '@content/Components/Counter/Counter.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const counter = createCodeObject(code, 'Components/Counter', {
+  installation: `npm i motion-v`,
+  usage: `import Counter from './Counter.vue'
+
+<Counter
+  :value="1"
+  :places="[100, 10, 1]"
+  :fontSize="80"
+  :padding="5"
+  :gap="10"
+  textColor="white"
+  :fontWeight="900"
+/>`
+});

src/constants/code/Components/rollingGalleryCode.ts

@@ -0,0 +1,26 @@
+import code from '@content/Components/RollingGallery/RollingGallery.vue?raw';
+import { createCodeObject } from '@/types/code.ts';
+
+export const rollingGallery = createCodeObject(code, 'Components/RollingGallery', {
+  installation: `npm install motion-v`,
+  usage: `<template>
+  <RollingGallery
+    :autoplay="true"
+    :pause-on-hover="true"
+    :images="customImages"
+  />
+</template>
+
+<script setup lang="ts">
+  import RollingGallery from "./RollingGallery.vue";
+
+  const customImages = [
+    "https://images.unsplash.com/photo-1528181304800-259b08848526?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1506665531195-3566af2b4dfa?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?q=80&w=3456&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1495103033382-fe343886b671?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1506781961370-37a89d6b3095?q=80&w=3264&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    // Add more images as needed
+  ];
+</script>`
+});

src/constants/code/Components/scrollStackCode.ts

@@ -0,0 +1,26 @@
+import code from '@content/Components/ScrollStack/ScrollStack.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const scrollStack = createCodeObject(code, 'Components/ScrollStack', {
+  installation: `npm install lenis`,
+  usage: `<template>
+    <ScrollStack>
+        <ScrollStackItem>
+            <h2>Card 1</h2>
+            <p>This is the first card in the stack</p>
+        </ScrollStackItem>
+        <ScrollStackItem>
+            <h2>Card 2</h2>
+            <p>This is the second card in the stack</p>
+        </ScrollStackItem>
+        <ScrollStackItem>
+            <h2>Card 3</h2>
+            <p>This is the third card in the stack</p>
+        </ScrollStackItem>
+    </ScrollStack>
+</template>
+
+<script setup lang="ts">
+  import ScrollStack, { ScrollStackItem } from "./ScrollStack.vue";
+</script>`
+});