Migrate <HyperSpeed />

src/constants/Categories.ts

@@ -67,6 +67,7 @@ export const CATEGORIES = [
       'Aurora',
       'Beams',
       'Dot Grid',
+      'Hyperspeed',
       'Silk',
       'Lightning',
       'Letter Glitch',

src/constants/Components.ts

@@ -61,7 +61,8 @@ const backgrounds = {
   'threads': () => import('../demo/Backgrounds/ThreadsDemo.vue'),
   'aurora': () => import('../demo/Backgrounds/AuroraDemo.vue'),
   'beams': () => import('../demo/Backgrounds/BeamsDemo.vue'),
-  'grid-motion': () => import('../demo/Backgrounds/GridMotionDemo.vue')
+  'grid-motion': () => import('../demo/Backgrounds/GridMotionDemo.vue'),
+  'hyperspeed': () => import('../demo/Backgrounds/HyperspeedDemo.vue')
 };
 
 export const componentMap = {

src/constants/code/Backgrounds/hyperspeedCode.ts

@@ -0,0 +1,67 @@
+import code from '@content/Backgrounds/Hyperspeed/Hyperspeed.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const hyperspeed: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Hyperspeed`,
+  installation: `npm install three postprocessing`,
+  usage: `<template>
+  <div class="hyperspeed-container">
+    <Hyperspeed :effect-options="effectOptions" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import Hyperspeed from './Hyperspeed.vue'
+  import { hyperspeedPresets } from './HyperspeedPresets'
+
+  // Use a preset or create custom options
+  const effectOptions = ref(hyperspeedPresets.one)
+
+  // Or create your own custom configuration
+  const customOptions = ref({
+    distortion: 'turbulentDistortion',
+    length: 400,
+    roadWidth: 10,
+    islandWidth: 2,
+    lanesPerRoad: 4,
+    fov: 90,
+    fovSpeedUp: 150,
+    speedUp: 2,
+    carLightsFade: 0.4,
+    totalSideLightSticks: 20,
+    lightPairsPerRoadWay: 40,
+    shoulderLinesWidthPercentage: 0.05,
+    brokenLinesWidthPercentage: 0.1,
+    brokenLinesLengthPercentage: 0.5,
+    lightStickWidth: [0.12, 0.5],
+    lightStickHeight: [1.3, 1.7],
+    movingAwaySpeed: [60, 80],
+    movingCloserSpeed: [-120, -160],
+    carLightsLength: [400 * 0.03, 400 * 0.2],
+    carLightsRadius: [0.05, 0.14],
+    carWidthPercentage: [0.3, 0.5],
+    carShiftX: [-0.8, 0.8],
+    carFloorSeparation: [0, 5],
+    colors: {
+      roadColor: 0x080808,
+      islandColor: 0x0a0a0a,
+      background: 0x000000,
+      shoulderLines: 0xffffff,
+      brokenLines: 0xffffff,
+      leftCars: [0xd856bf, 0x6750a2, 0xc247ac],
+      rightCars: [0x03b3c3, 0x0e5ea5, 0x324555],
+      sticks: 0x03b3c3,
+    },
+  })
+</script>
+
+<style scoped>
+.hyperspeed-container {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+</style>`,
+  code
+};