Migrate <HyperSpeed />

package-lock.json

@@ -18,6 +18,7 @@
         "matter-js": "^0.20.0",
         "motion-v": "^1.5.0",
         "ogl": "^1.0.11",
+        "postprocessing": "^6.37.6",
         "primeicons": "^7.0.0",
         "primevue": "^4.3.6",
         "three": "^0.178.0",
@@ -7664,6 +7665,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/postprocessing": {
+      "version": "6.37.6",
+      "resolved": "https://registry.npmjs.org/postprocessing/-/postprocessing-6.37.6.tgz",
+      "integrity": "sha512-KrdKLf1257RkoIk3z3nhRS0aToKrX2xJgtR0lbnOQUjd+1I4GVNv1gQYsQlfRglvEXjpzrwqOA5fXfoDBimadg==",
+      "license": "Zlib",
+      "peerDependencies": {
+        "three": ">= 0.157.0 < 0.179.0"
+      }
+    },
     "node_modules/potpack": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",

package.json

@@ -26,6 +26,7 @@
     "matter-js": "^0.20.0",
     "motion-v": "^1.5.0",
     "ogl": "^1.0.11",
+    "postprocessing": "^6.37.6",
     "primeicons": "^7.0.0",
     "primevue": "^4.3.6",
     "three": "^0.178.0",

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
+};

src/content/Backgrounds/Hyperspeed/HyperspeedPresets.ts

@@ -0,0 +1,225 @@
+export const hyperspeedPresets = {
+  one: {
+    onSpeedUp: () => {},
+    onSlowDown: () => {},
+    distortion: 'turbulentDistortion',
+    length: 400,
+    roadWidth: 10,
+    islandWidth: 2,
+    lanesPerRoad: 3,
+    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] as [number, number],
+    lightStickHeight: [1.3, 1.7] as [number, number],
+    movingAwaySpeed: [60, 80] as [number, number],
+    movingCloserSpeed: [-120, -160] as [number, number],
+    carLightsLength: [400 * 0.03, 400 * 0.2] as [number, number],
+    carLightsRadius: [0.05, 0.14] as [number, number],
+    carWidthPercentage: [0.3, 0.5] as [number, number],
+    carShiftX: [-0.8, 0.8] as [number, number],
+    carFloorSeparation: [0, 5] as [number, number],
+    colors: {
+      roadColor: 0x080808,
+      islandColor: 0x0a0a0a,
+      background: 0x000000,
+      shoulderLines: 0x131318,
+      brokenLines: 0x131318,
+      leftCars: [0xd856bf, 0x6750a2, 0xc247ac],
+      rightCars: [0x03b3c3, 0x0e5ea5, 0x324555],
+      sticks: 0x03b3c3
+    }
+  },
+  two: {
+    onSpeedUp: () => {},
+    onSlowDown: () => {},
+    distortion: 'mountainDistortion',
+    length: 400,
+    roadWidth: 9,
+    islandWidth: 2,
+    lanesPerRoad: 3,
+    fov: 90,
+    fovSpeedUp: 150,
+    speedUp: 2,
+    carLightsFade: 0.4,
+    totalSideLightSticks: 50,
+    lightPairsPerRoadWay: 50,
+    shoulderLinesWidthPercentage: 0.05,
+    brokenLinesWidthPercentage: 0.1,
+    brokenLinesLengthPercentage: 0.5,
+    lightStickWidth: [0.12, 0.5] as [number, number],
+    lightStickHeight: [1.3, 1.7] as [number, number],
+
+    movingAwaySpeed: [60, 80] as [number, number],
+    movingCloserSpeed: [-120, -160] as [number, number],
+    carLightsLength: [400 * 0.05, 400 * 0.15] as [number, number],
+    carLightsRadius: [0.05, 0.14] as [number, number],
+    carWidthPercentage: [0.3, 0.5] as [number, number],
+    carShiftX: [-0.2, 0.2] as [number, number],
+    carFloorSeparation: [0.05, 1] as [number, number],
+    colors: {
+      roadColor: 0x080808,
+      islandColor: 0x0a0a0a,
+      background: 0x000000,
+      shoulderLines: 0x131318,
+      brokenLines: 0x131318,
+      leftCars: [0xff102a, 0xeb383e, 0xff102a],
+      rightCars: [0xdadafa, 0xbebae3, 0x8f97e4],
+      sticks: 0xdadafa
+    }
+  },
+  three: {
+    onSpeedUp: () => {},
+    onSlowDown: () => {},
+    distortion: 'xyDistortion',
+    length: 400,
+    roadWidth: 9,
+    islandWidth: 2,
+    lanesPerRoad: 3,
+    fov: 90,
+    fovSpeedUp: 150,
+    speedUp: 3,
+    carLightsFade: 0.4,
+    totalSideLightSticks: 50,
+    lightPairsPerRoadWay: 30,
+    shoulderLinesWidthPercentage: 0.05,
+    brokenLinesWidthPercentage: 0.1,
+    brokenLinesLengthPercentage: 0.5,
+    lightStickWidth: [0.02, 0.05] as [number, number],
+    lightStickHeight: [0.3, 0.7] as [number, number],
+    movingAwaySpeed: [20, 50] as [number, number],
+    movingCloserSpeed: [-150, -230] as [number, number],
+    carLightsLength: [400 * 0.05, 400 * 0.2] as [number, number],
+    carLightsRadius: [0.03, 0.08] as [number, number],
+    carWidthPercentage: [0.1, 0.5] as [number, number],
+    carShiftX: [-0.5, 0.5] as [number, number],
+    carFloorSeparation: [0, 0.1] as [number, number],
+    colors: {
+      roadColor: 0x080808,
+      islandColor: 0x0a0a0a,
+      background: 0x000000,
+      shoulderLines: 0x131318,
+      brokenLines: 0x131318,
+      leftCars: [0x7d0d1b, 0xa90519, 0xff102a],
+      rightCars: [0xf1eece, 0xe6e2b1, 0xdfd98a],
+      sticks: 0xf1eece
+    }
+  },
+  four: {
+    onSpeedUp: () => {},
+    onSlowDown: () => {},
+    distortion: 'LongRaceDistortion',
+    length: 400,
+    roadWidth: 10,
+    islandWidth: 5,
+    lanesPerRoad: 2,
+    fov: 90,
+    fovSpeedUp: 150,
+    speedUp: 2,
+    carLightsFade: 0.4,
+    totalSideLightSticks: 50,
+    lightPairsPerRoadWay: 70,
+    shoulderLinesWidthPercentage: 0.05,
+    brokenLinesWidthPercentage: 0.1,
+    brokenLinesLengthPercentage: 0.5,
+    lightStickWidth: [0.12, 0.5] as [number, number],
+    lightStickHeight: [1.3, 1.7] as [number, number],
+    movingAwaySpeed: [60, 80] as [number, number],
+    movingCloserSpeed: [-120, -160] as [number, number],
+    carLightsLength: [400 * 0.05, 400 * 0.15] as [number, number],
+    carLightsRadius: [0.05, 0.14] as [number, number],
+    carWidthPercentage: [0.3, 0.5] as [number, number],
+    carShiftX: [-0.2, 0.2] as [number, number],
+    carFloorSeparation: [0.05, 1] as [number, number],
+    colors: {
+      roadColor: 0x080808,
+      islandColor: 0x0a0a0a,
+      background: 0x000000,
+      shoulderLines: 0x131318,
+      brokenLines: 0x131318,
+      leftCars: [0xff5f73, 0xe74d60, 0xff102a],
+      rightCars: [0xa4e3e6, 0x80d1d4, 0x53c2c6],
+      sticks: 0xa4e3e6
+    }
+  },
+  five: {
+    onSpeedUp: () => {},
+    onSlowDown: () => {},
+    distortion: 'turbulentDistortion',
+    length: 400,
+    roadWidth: 9,
+    islandWidth: 2,
+    lanesPerRoad: 3,
+    fov: 90,
+    fovSpeedUp: 150,
+    speedUp: 2,
+    carLightsFade: 0.4,
+    totalSideLightSticks: 50,
+    lightPairsPerRoadWay: 50,
+    shoulderLinesWidthPercentage: 0.05,
+    brokenLinesWidthPercentage: 0.1,
+    brokenLinesLengthPercentage: 0.5,
+    lightStickWidth: [0.12, 0.5] as [number, number],
+    lightStickHeight: [1.3, 1.7] as [number, number],
+    movingAwaySpeed: [60, 80] as [number, number],
+    movingCloserSpeed: [-120, -160] as [number, number],
+    carLightsLength: [400 * 0.05, 400 * 0.15] as [number, number],
+    carLightsRadius: [0.05, 0.14] as [number, number],
+    carWidthPercentage: [0.3, 0.5] as [number, number],
+    carShiftX: [-0.2, 0.2] as [number, number],
+    carFloorSeparation: [0.05, 1] as [number, number],
+    colors: {
+      roadColor: 0x080808,
+      islandColor: 0x0a0a0a,
+      background: 0x000000,
+      shoulderLines: 0x131318,
+      brokenLines: 0x131318,
+      leftCars: [0xdc5b20, 0xdca320, 0xdc2020],
+      rightCars: [0x334bf7, 0xe5e6ed, 0xbfc6f3],
+      sticks: 0xc5e8eb
+    }
+  },
+  six: {
+    onSpeedUp: () => {},
+    onSlowDown: () => {},
+    distortion: 'deepDistortion',
+    length: 400,
+    roadWidth: 18,
+    islandWidth: 2,
+    lanesPerRoad: 3,
+    fov: 90,
+    fovSpeedUp: 150,
+    speedUp: 2,
+    carLightsFade: 0.4,
+    totalSideLightSticks: 50,
+    lightPairsPerRoadWay: 50,
+    shoulderLinesWidthPercentage: 0.05,
+    brokenLinesWidthPercentage: 0.1,
+    brokenLinesLengthPercentage: 0.5,
+    lightStickWidth: [0.12, 0.5] as [number, number],
+    lightStickHeight: [1.3, 1.7] as [number, number],
+    movingAwaySpeed: [60, 80] as [number, number],
+    movingCloserSpeed: [-120, -160] as [number, number],
+    carLightsLength: [400 * 0.05, 400 * 0.15] as [number, number],
+    carLightsRadius: [0.05, 0.14] as [number, number],
+    carWidthPercentage: [0.3, 0.5] as [number, number],
+    carShiftX: [-0.2, 0.2] as [number, number],
+    carFloorSeparation: [0.05, 1] as [number, number],
+    colors: {
+      roadColor: 0x080808,
+      islandColor: 0x0a0a0a,
+      background: 0x000000,
+      shoulderLines: 0x131318,
+      brokenLines: 0x131318,
+      leftCars: [0xff322f, 0xa33010, 0xa81508],
+      rightCars: [0xfdfdf0, 0xf3dea0, 0xe2bb88],
+      sticks: 0xfdfdf0
+    }
+  }
+};

src/demo/Backgrounds/HyperspeedDemo.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="hyperspeed-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div class="demo-container">
+          <div class="instruction-text">Click & Hold</div>
+          <Hyperspeed :effect-options="currentPreset" />
+        </div>
+
+        <Customize>
+          <PreviewSelect title="Animation Preset" :options="options" v-model="activePreset" />
+        </Customize>
+
+        <PropTable :data="propData" />
+
+        <Dependencies :dependency-list="['three', 'postprocessing']" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="hyperspeed" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="hyperspeed.cli" />
+      </template>
+    </TabbedLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } 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 PreviewSelect from '../../components/common/PreviewSelect.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');
+
+const currentPreset = computed(() => {
+  return hyperspeedPresets[activePreset.value as keyof typeof hyperspeedPresets];
+});
+
+const propData = [
+  {
+    name: 'effectOptions',
+    type: 'object',
+    default: 'See the "code" tab for default values and presets.',
+    description:
+      'The highly customizable configuration object for the effect, controls things like colors, distortion, line properties, etc.'
+  }
+];
+
+const options = [
+  { value: 'one', label: 'Cyberpunk' },
+  { value: 'two', label: 'Akira' },
+  { value: 'three', label: 'Golden' },
+  { value: 'four', label: 'Split' },
+  { value: 'five', label: 'Highway' },
+  { value: 'six', label: 'Deep' }
+];
+</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>