{"name":"Hyperspeed","title":"Hyperspeed","description":"Animated lines continously moving to simulate hyperspace travel on click hold.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div ref=\"hyperspeedContainer\" class=\"hyperspeed-container\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';\nimport * as THREE from 'three';\nimport { BloomEffect, EffectComposer, EffectPass, RenderPass, SMAAEffect, SMAAPreset } from 'postprocessing';\n\ninterface Distortion {\n  uniforms: Record<string, { value: unknown }>;\n  getDistortion: string;\n  getJS?: (progress: number, time: number) => THREE.Vector3;\n}\n\ninterface Distortions {\n  [key: string]: Distortion;\n}\n\ninterface Colors {\n  roadColor: number;\n  islandColor: number;\n  background: number;\n  shoulderLines: number;\n  brokenLines: number;\n  leftCars: number[];\n  rightCars: number[];\n  sticks: number;\n}\n\ninterface HyperspeedOptions {\n  onSpeedUp?: (ev: MouseEvent) => void;\n  onSlowDown?: (ev: MouseEvent) => void;\n  distortion?: string | Distortion;\n  length: number;\n  roadWidth: number;\n  islandWidth: number;\n  lanesPerRoad: number;\n  fov: number;\n  fovSpeedUp: number;\n  speedUp: number;\n  carLightsFade: number;\n  totalSideLightSticks: number;\n  lightPairsPerRoadWay: number;\n  shoulderLinesWidthPercentage: number;\n  brokenLinesWidthPercentage: number;\n  brokenLinesLengthPercentage: number;\n  lightStickWidth: [number, number];\n  lightStickHeight: [number, number];\n  movingAwaySpeed: [number, number];\n  movingCloserSpeed: [number, number];\n  carLightsLength: [number, number];\n  carLightsRadius: [number, number];\n  carWidthPercentage: [number, number];\n  carShiftX: [number, number];\n  carFloorSeparation: [number, number];\n  colors: Colors;\n  isHyper?: boolean;\n}\n\ninterface HyperspeedProps {\n  effectOptions?: Partial<HyperspeedOptions>;\n}\n\nconst props = withDefaults(defineProps<HyperspeedProps>(), {\n  effectOptions: () => ({})\n});\n\nconst hyperspeedContainer = useTemplateRef<HTMLDivElement>('hyperspeedContainer');\nlet appRef: App | null = null;\n\nconst defaultOptions: HyperspeedOptions = {\n  onSpeedUp: () => {},\n  onSlowDown: () => {},\n  distortion: 'turbulentDistortion',\n  length: 400,\n  roadWidth: 10,\n  islandWidth: 2,\n  lanesPerRoad: 4,\n  fov: 90,\n  fovSpeedUp: 150,\n  speedUp: 2,\n  carLightsFade: 0.4,\n  totalSideLightSticks: 20,\n  lightPairsPerRoadWay: 40,\n  shoulderLinesWidthPercentage: 0.05,\n  brokenLinesWidthPercentage: 0.1,\n  brokenLinesLengthPercentage: 0.5,\n  lightStickWidth: [0.12, 0.5],\n  lightStickHeight: [1.3, 1.7],\n  movingAwaySpeed: [60, 80],\n  movingCloserSpeed: [-120, -160],\n  carLightsLength: [400 * 0.03, 400 * 0.2],\n  carLightsRadius: [0.05, 0.14],\n  carWidthPercentage: [0.3, 0.5],\n  carShiftX: [-0.8, 0.8],\n  carFloorSeparation: [0, 5],\n  colors: {\n    roadColor: 0x080808,\n    islandColor: 0x0a0a0a,\n    background: 0x000000,\n    shoulderLines: 0xffffff,\n    brokenLines: 0xffffff,\n    leftCars: [0xd856bf, 0x6750a2, 0xc247ac],\n    rightCars: [0x03b3c3, 0x0e5ea5, 0x324555],\n    sticks: 0x03b3c3\n  }\n};\n\nfunction nsin(val: number) {\n  return Math.sin(val) * 0.5 + 0.5;\n}\n\nconst mountainUniforms = {\n  uFreq: { value: new THREE.Vector3(3, 6, 10) },\n  uAmp: { value: new THREE.Vector3(30, 30, 20) }\n};\n\nconst xyUniforms = {\n  uFreq: { value: new THREE.Vector2(5, 2) },\n  uAmp: { value: new THREE.Vector2(25, 15) }\n};\n\nconst LongRaceUniforms = {\n  uFreq: { value: new THREE.Vector2(2, 3) },\n  uAmp: { value: new THREE.Vector2(35, 10) }\n};\n\nconst turbulentUniforms = {\n  uFreq: { value: new THREE.Vector4(4, 8, 8, 1) },\n  uAmp: { value: new THREE.Vector4(25, 5, 10, 10) }\n};\n\nconst deepUniforms = {\n  uFreq: { value: new THREE.Vector2(4, 8) },\n  uAmp: { value: new THREE.Vector2(10, 20) },\n  uPowY: { value: new THREE.Vector2(20, 2) }\n};\n\nconst distortions: Distortions = {\n  mountainDistortion: {\n    uniforms: mountainUniforms,\n    getDistortion: `\n      uniform vec3 uAmp;\n      uniform vec3 uFreq;\n      #define PI 3.14159265358979\n      float nsin(float val){\n        return sin(val) * 0.5 + 0.5;\n      }\n      vec3 getDistortion(float progress){\n        float movementProgressFix = 0.02;\n        return vec3( \n          cos(progress * PI * uFreq.x + uTime) * uAmp.x - cos(movementProgressFix * PI * uFreq.x + uTime) * uAmp.x,\n          nsin(progress * PI * uFreq.y + uTime) * uAmp.y - nsin(movementProgressFix * PI * uFreq.y + uTime) * uAmp.y,\n          nsin(progress * PI * uFreq.z + uTime) * uAmp.z - nsin(movementProgressFix * PI * uFreq.z + uTime) * uAmp.z\n        );\n      }\n    `,\n    getJS: (progress: number, time: number) => {\n      const movementProgressFix = 0.02;\n      const uFreq = mountainUniforms.uFreq.value;\n      const uAmp = mountainUniforms.uAmp.value;\n      const distortion = new THREE.Vector3(\n        Math.cos(progress * Math.PI * uFreq.x + time) * uAmp.x -\n          Math.cos(movementProgressFix * Math.PI * uFreq.x + time) * uAmp.x,\n        nsin(progress * Math.PI * uFreq.y + time) * uAmp.y -\n          nsin(movementProgressFix * Math.PI * uFreq.y + time) * uAmp.y,\n        nsin(progress * Math.PI * uFreq.z + time) * uAmp.z -\n          nsin(movementProgressFix * Math.PI * uFreq.z + time) * uAmp.z\n      );\n      const lookAtAmp = new THREE.Vector3(2, 2, 2);\n      const lookAtOffset = new THREE.Vector3(0, 0, -5);\n      return distortion.multiply(lookAtAmp).add(lookAtOffset);\n    }\n  },\n  xyDistortion: {\n    uniforms: xyUniforms,\n    getDistortion: `\n      uniform vec2 uFreq;\n      uniform vec2 uAmp;\n      #define PI 3.14159265358979\n      vec3 getDistortion(float progress){\n        float movementProgressFix = 0.02;\n        return vec3( \n          cos(progress * PI * uFreq.x + uTime) * uAmp.x - cos(movementProgressFix * PI * uFreq.x + uTime) * uAmp.x,\n          sin(progress * PI * uFreq.y + PI/2. + uTime) * uAmp.y - sin(movementProgressFix * PI * uFreq.y + PI/2. + uTime) * uAmp.y,\n          0.\n        );\n      }\n    `,\n    getJS: (progress: number, time: number) => {\n      const movementProgressFix = 0.02;\n      const uFreq = xyUniforms.uFreq.value;\n      const uAmp = xyUniforms.uAmp.value;\n      const distortion = new THREE.Vector3(\n        Math.cos(progress * Math.PI * uFreq.x + time) * uAmp.x -\n          Math.cos(movementProgressFix * Math.PI * uFreq.x + time) * uAmp.x,\n        Math.sin(progress * Math.PI * uFreq.y + time + Math.PI / 2) * uAmp.y -\n          Math.sin(movementProgressFix * Math.PI * uFreq.y + time + Math.PI / 2) * uAmp.y,\n        0\n      );\n      const lookAtAmp = new THREE.Vector3(2, 0.4, 1);\n      const lookAtOffset = new THREE.Vector3(0, 0, -3);\n      return distortion.multiply(lookAtAmp).add(lookAtOffset);\n    }\n  },\n  LongRaceDistortion: {\n    uniforms: LongRaceUniforms,\n    getDistortion: `\n      uniform vec2 uFreq;\n      uniform vec2 uAmp;\n      #define PI 3.14159265358979\n      vec3 getDistortion(float progress){\n        float camProgress = 0.0125;\n        return vec3( \n          sin(progress * PI * uFreq.x + uTime) * uAmp.x - sin(camProgress * PI * uFreq.x + uTime) * uAmp.x,\n          sin(progress * PI * uFreq.y + uTime) * uAmp.y - sin(camProgress * PI * uFreq.y + uTime) * uAmp.y,\n          0.\n        );\n      }\n    `,\n    getJS: (progress: number, time: number) => {\n      const camProgress = 0.0125;\n      const uFreq = LongRaceUniforms.uFreq.value;\n      const uAmp = LongRaceUniforms.uAmp.value;\n      const distortion = new THREE.Vector3(\n        Math.sin(progress * Math.PI * uFreq.x + time) * uAmp.x -\n          Math.sin(camProgress * Math.PI * uFreq.x + time) * uAmp.x,\n        Math.sin(progress * Math.PI * uFreq.y + time) * uAmp.y -\n          Math.sin(camProgress * Math.PI * uFreq.y + time) * uAmp.y,\n        0\n      );\n      const lookAtAmp = new THREE.Vector3(1, 1, 0);\n      const lookAtOffset = new THREE.Vector3(0, 0, -5);\n      return distortion.multiply(lookAtAmp).add(lookAtOffset);\n    }\n  },\n  turbulentDistortion: {\n    uniforms: turbulentUniforms,\n    getDistortion: `\n      uniform vec4 uFreq;\n      uniform vec4 uAmp;\n      float nsin(float val){\n        return sin(val) * 0.5 + 0.5;\n      }\n      #define PI 3.14159265358979\n      float getDistortionX(float progress){\n        return (\n          cos(PI * progress * uFreq.r + uTime) * uAmp.r +\n          pow(cos(PI * progress * uFreq.g + uTime * (uFreq.g / uFreq.r)), 2. ) * uAmp.g\n        );\n      }\n      float getDistortionY(float progress){\n        return (\n          -nsin(PI * progress * uFreq.b + uTime) * uAmp.b +\n          -pow(nsin(PI * progress * uFreq.a + uTime / (uFreq.b / uFreq.a)), 5.) * uAmp.a\n        );\n      }\n      vec3 getDistortion(float progress){\n        return vec3(\n          getDistortionX(progress) - getDistortionX(0.0125),\n          getDistortionY(progress) - getDistortionY(0.0125),\n          0.\n        );\n      }\n    `,\n    getJS: (progress: number, time: number) => {\n      const uFreq = turbulentUniforms.uFreq.value;\n      const uAmp = turbulentUniforms.uAmp.value;\n\n      const getX = (p: number) =>\n        Math.cos(Math.PI * p * uFreq.x + time) * uAmp.x +\n        Math.pow(Math.cos(Math.PI * p * uFreq.y + time * (uFreq.y / uFreq.x)), 2) * uAmp.y;\n\n      const getY = (p: number) =>\n        -nsin(Math.PI * p * uFreq.z + time) * uAmp.z -\n        Math.pow(nsin(Math.PI * p * uFreq.w + time / (uFreq.z / uFreq.w)), 5) * uAmp.w;\n\n      const distortion = new THREE.Vector3(\n        getX(progress) - getX(progress + 0.007),\n        getY(progress) - getY(progress + 0.007),\n        0\n      );\n      const lookAtAmp = new THREE.Vector3(-2, -5, 0);\n      const lookAtOffset = new THREE.Vector3(0, 0, -10);\n      return distortion.multiply(lookAtAmp).add(lookAtOffset);\n    }\n  },\n  turbulentDistortionStill: {\n    uniforms: turbulentUniforms,\n    getDistortion: `\n      uniform vec4 uFreq;\n      uniform vec4 uAmp;\n      float nsin(float val){\n        return sin(val) * 0.5 + 0.5;\n      }\n      #define PI 3.14159265358979\n      float getDistortionX(float progress){\n        return (\n          cos(PI * progress * uFreq.r) * uAmp.r +\n          pow(cos(PI * progress * uFreq.g * (uFreq.g / uFreq.r)), 2. ) * uAmp.g\n        );\n      }\n      float getDistortionY(float progress){\n        return (\n          -nsin(PI * progress * uFreq.b) * uAmp.b +\n          -pow(nsin(PI * progress * uFreq.a / (uFreq.b / uFreq.a)), 5.) * uAmp.a\n        );\n      }\n      vec3 getDistortion(float progress){\n        return vec3(\n          getDistortionX(progress) - getDistortionX(0.02),\n          getDistortionY(progress) - getDistortionY(0.02),\n          0.\n        );\n      }\n    `\n  },\n  deepDistortionStill: {\n    uniforms: deepUniforms,\n    getDistortion: `\n      uniform vec4 uFreq;\n      uniform vec4 uAmp;\n      uniform vec2 uPowY;\n      float nsin(float val){\n        return sin(val) * 0.5 + 0.5;\n      }\n      #define PI 3.14159265358979\n      float getDistortionX(float progress){\n        return (\n          sin(progress * PI * uFreq.x) * uAmp.x * 2.\n        );\n      }\n      float getDistortionY(float progress){\n        return (\n          pow(abs(progress * uPowY.x), uPowY.y) + sin(progress * PI * uFreq.y) * uAmp.y\n        );\n      }\n      vec3 getDistortion(float progress){\n        return vec3(\n          getDistortionX(progress) - getDistortionX(0.02),\n          getDistortionY(progress) - getDistortionY(0.05),\n          0.\n        );\n      }\n    `\n  },\n  deepDistortion: {\n    uniforms: deepUniforms,\n    getDistortion: `\n      uniform vec4 uFreq;\n      uniform vec4 uAmp;\n      uniform vec2 uPowY;\n      float nsin(float val){\n        return sin(val) * 0.5 + 0.5;\n      }\n      #define PI 3.14159265358979\n      float getDistortionX(float progress){\n        return (\n          sin(progress * PI * uFreq.x + uTime) * uAmp.x\n        );\n      }\n      float getDistortionY(float progress){\n        return (\n          pow(abs(progress * uPowY.x), uPowY.y) + sin(progress * PI * uFreq.y + uTime) * uAmp.y\n        );\n      }\n      vec3 getDistortion(float progress){\n        return vec3(\n          getDistortionX(progress) - getDistortionX(0.02),\n          getDistortionY(progress) - getDistortionY(0.02),\n          0.\n        );\n      }\n    `,\n    getJS: (progress: number, time: number) => {\n      const uFreq = deepUniforms.uFreq.value;\n      const uAmp = deepUniforms.uAmp.value;\n      const uPowY = deepUniforms.uPowY.value;\n\n      const getX = (p: number) => Math.sin(p * Math.PI * uFreq.x + time) * uAmp.x;\n      const getY = (p: number) => Math.pow(p * uPowY.x, uPowY.y) + Math.sin(p * Math.PI * uFreq.y + time) * uAmp.y;\n\n      const distortion = new THREE.Vector3(\n        getX(progress) - getX(progress + 0.01),\n        getY(progress) - getY(progress + 0.01),\n        0\n      );\n      const lookAtAmp = new THREE.Vector3(-2, -4, 0);\n      const lookAtOffset = new THREE.Vector3(0, 0, -10);\n      return distortion.multiply(lookAtAmp).add(lookAtOffset);\n    }\n  }\n};\n\nconst distortion_uniforms = {\n  uDistortionX: { value: new THREE.Vector2(80, 3) },\n  uDistortionY: { value: new THREE.Vector2(-40, 2.5) }\n};\n\nconst distortion_vertex = `\n  #define PI 3.14159265358979\n  uniform vec2 uDistortionX;\n  uniform vec2 uDistortionY;\n  float nsin(float val){\n    return sin(val) * 0.5 + 0.5;\n  }\n  vec3 getDistortion(float progress){\n    progress = clamp(progress, 0., 1.);\n    float xAmp = uDistortionX.r;\n    float xFreq = uDistortionX.g;\n    float yAmp = uDistortionY.r;\n    float yFreq = uDistortionY.g;\n    return vec3( \n      xAmp * nsin(progress * PI * xFreq - PI / 2.),\n      yAmp * nsin(progress * PI * yFreq - PI / 2.),\n      0.\n    );\n  }\n`;\n\nfunction random(base: number | [number, number]): number {\n  if (Array.isArray(base)) {\n    return Math.random() * (base[1] - base[0]) + base[0];\n  }\n  return Math.random() * base;\n}\n\nfunction pickRandom<T>(arr: T | T[]): T {\n  if (Array.isArray(arr)) {\n    return arr[Math.floor(Math.random() * arr.length)];\n  }\n  return arr;\n}\n\nfunction lerp(current: number, target: number, speed = 0.1, limit = 0.001): number {\n  let change = (target - current) * speed;\n  if (Math.abs(change) < limit) {\n    change = target - current;\n  }\n  return change;\n}\n\nclass CarLights {\n  webgl: App;\n  options: HyperspeedOptions;\n  colors: number[] | THREE.Color;\n  speed: [number, number];\n  fade: THREE.Vector2;\n  mesh!: THREE.Mesh<THREE.InstancedBufferGeometry, THREE.ShaderMaterial>;\n\n  constructor(\n    webgl: App,\n    options: HyperspeedOptions,\n    colors: number[] | THREE.Color,\n    speed: [number, number],\n    fade: THREE.Vector2\n  ) {\n    this.webgl = webgl;\n    this.options = options;\n    this.colors = colors;\n    this.speed = speed;\n    this.fade = fade;\n  }\n\n  init() {\n    const options = this.options;\n    const curve = new THREE.LineCurve3(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, -1));\n    const geometry = new THREE.TubeGeometry(curve, 40, 1, 8, false);\n\n    const instanced = new THREE.InstancedBufferGeometry();\n\n    for (const key in geometry.attributes) {\n      instanced.setAttribute(key, geometry.attributes[key]);\n    }\n    if (geometry.index) {\n      instanced.setIndex(geometry.index);\n    }\n    instanced.instanceCount = options.lightPairsPerRoadWay * 2;\n\n    const laneWidth = options.roadWidth / options.lanesPerRoad;\n\n    const aOffset: number[] = [];\n    const aMetrics: number[] = [];\n    const aColor: number[] = [];\n\n    let colorArray: THREE.Color[];\n    if (Array.isArray(this.colors)) {\n      colorArray = this.colors.map(c => new THREE.Color(c));\n    } else {\n      colorArray = [new THREE.Color(this.colors)];\n    }\n\n    for (let i = 0; i < options.lightPairsPerRoadWay; i++) {\n      const radius = random(options.carLightsRadius);\n      const length = random(options.carLightsLength);\n      const spd = random(this.speed);\n\n      const carLane = i % options.lanesPerRoad;\n      let laneX = carLane * laneWidth - options.roadWidth / 2 + laneWidth / 2;\n\n      const carWidth = random(options.carWidthPercentage) * laneWidth;\n      const carShiftX = random(options.carShiftX) * laneWidth;\n      laneX += carShiftX;\n\n      const offsetY = random(options.carFloorSeparation) + radius * 1.3;\n      const offsetZ = -random(options.length);\n\n      aOffset.push(laneX - carWidth / 2);\n      aOffset.push(offsetY);\n      aOffset.push(offsetZ);\n\n      aOffset.push(laneX + carWidth / 2);\n      aOffset.push(offsetY);\n      aOffset.push(offsetZ);\n\n      aMetrics.push(radius);\n      aMetrics.push(length);\n      aMetrics.push(spd);\n\n      aMetrics.push(radius);\n      aMetrics.push(length);\n      aMetrics.push(spd);\n\n      const color = pickRandom<THREE.Color>(colorArray);\n      aColor.push(color.r);\n      aColor.push(color.g);\n      aColor.push(color.b);\n\n      aColor.push(color.r);\n      aColor.push(color.g);\n      aColor.push(color.b);\n    }\n\n    instanced.setAttribute('aOffset', new THREE.InstancedBufferAttribute(new Float32Array(aOffset), 3, false));\n    instanced.setAttribute('aMetrics', new THREE.InstancedBufferAttribute(new Float32Array(aMetrics), 3, false));\n    instanced.setAttribute('aColor', new THREE.InstancedBufferAttribute(new Float32Array(aColor), 3, false));\n\n    const material = new THREE.ShaderMaterial({\n      fragmentShader: carLightsFragment,\n      vertexShader: carLightsVertex,\n      transparent: true,\n      uniforms: Object.assign(\n        {\n          uTime: { value: 0 },\n          uTravelLength: { value: options.length },\n          uFade: { value: this.fade }\n        },\n        this.webgl.fogUniforms,\n        (typeof this.options.distortion === 'object' ? this.options.distortion.uniforms : {}) || {}\n      )\n    });\n\n    material.onBeforeCompile = shader => {\n      shader.vertexShader = shader.vertexShader.replace(\n        '#include <getDistortion_vertex>',\n        typeof this.options.distortion === 'object' ? this.options.distortion.getDistortion : ''\n      );\n    };\n\n    const mesh = new THREE.Mesh(instanced, material);\n    mesh.frustumCulled = false;\n    this.webgl.scene.add(mesh);\n    this.mesh = mesh;\n  }\n\n  update(time: number) {\n    if (this.mesh.material.uniforms.uTime) {\n      this.mesh.material.uniforms.uTime.value = time;\n    }\n  }\n}\n\nconst carLightsFragment = `\n  #define USE_FOG;\n  ${THREE.ShaderChunk['fog_pars_fragment']}\n  varying vec3 vColor;\n  varying vec2 vUv; \n  uniform vec2 uFade;\n  void main() {\n    vec3 color = vec3(vColor);\n    float alpha = smoothstep(uFade.x, uFade.y, vUv.x);\n    gl_FragColor = vec4(color, alpha);\n    if (gl_FragColor.a < 0.0001) discard;\n    ${THREE.ShaderChunk['fog_fragment']}\n  }\n`;\n\nconst carLightsVertex = `\n  #define USE_FOG;\n  ${THREE.ShaderChunk['fog_pars_vertex']}\n  attribute vec3 aOffset;\n  attribute vec3 aMetrics;\n  attribute vec3 aColor;\n  uniform float uTravelLength;\n  uniform float uTime;\n  varying vec2 vUv; \n  varying vec3 vColor; \n  #include <getDistortion_vertex>\n  void main() {\n    vec3 transformed = position.xyz;\n    float radius = aMetrics.r;\n    float myLength = aMetrics.g;\n    float speed = aMetrics.b;\n\n    transformed.xy *= radius;\n    transformed.z *= myLength;\n\n    transformed.z += myLength - mod(uTime * speed + aOffset.z, uTravelLength);\n    transformed.xy += aOffset.xy;\n\n    float progress = abs(transformed.z / uTravelLength);\n    transformed.xyz += getDistortion(progress);\n\n    vec4 mvPosition = modelViewMatrix * vec4(transformed, 1.);\n    gl_Position = projectionMatrix * mvPosition;\n    vUv = uv;\n    vColor = aColor;\n    ${THREE.ShaderChunk['fog_vertex']}\n  }\n`;\n\nclass LightsSticks {\n  webgl: App;\n  options: HyperspeedOptions;\n  mesh!: THREE.Mesh<THREE.InstancedBufferGeometry, THREE.ShaderMaterial>;\n\n  constructor(webgl: App, options: HyperspeedOptions) {\n    this.webgl = webgl;\n    this.options = options;\n  }\n\n  init() {\n    const options = this.options;\n    const geometry = new THREE.PlaneGeometry(1, 1);\n    const instanced = new THREE.InstancedBufferGeometry();\n\n    for (const key in geometry.attributes) {\n      instanced.setAttribute(key, geometry.attributes[key]);\n    }\n    if (geometry.index) {\n      instanced.setIndex(geometry.index);\n    }\n    const totalSticks = options.totalSideLightSticks;\n    instanced.instanceCount = totalSticks;\n\n    const stickoffset = options.length / (totalSticks - 1);\n    const aOffset: number[] = [];\n    const aColor: number[] = [];\n    const aMetrics: number[] = [];\n\n    let colorArray: THREE.Color[];\n    if (Array.isArray(options.colors.sticks)) {\n      colorArray = options.colors.sticks.map(c => new THREE.Color(c));\n    } else {\n      colorArray = [new THREE.Color(options.colors.sticks)];\n    }\n\n    for (let i = 0; i < totalSticks; i++) {\n      const width = random(options.lightStickWidth);\n      const height = random(options.lightStickHeight);\n      aOffset.push((i - 1) * stickoffset * 2 + stickoffset * Math.random());\n\n      const color = pickRandom<THREE.Color>(colorArray);\n      aColor.push(color.r);\n      aColor.push(color.g);\n      aColor.push(color.b);\n\n      aMetrics.push(width);\n      aMetrics.push(height);\n    }\n\n    instanced.setAttribute('aOffset', new THREE.InstancedBufferAttribute(new Float32Array(aOffset), 1, false));\n    instanced.setAttribute('aColor', new THREE.InstancedBufferAttribute(new Float32Array(aColor), 3, false));\n    instanced.setAttribute('aMetrics', new THREE.InstancedBufferAttribute(new Float32Array(aMetrics), 2, false));\n\n    const material = new THREE.ShaderMaterial({\n      fragmentShader: sideSticksFragment,\n      vertexShader: sideSticksVertex,\n      side: THREE.DoubleSide,\n      uniforms: Object.assign(\n        {\n          uTravelLength: { value: options.length },\n          uTime: { value: 0 }\n        },\n        this.webgl.fogUniforms,\n        (typeof options.distortion === 'object' ? options.distortion.uniforms : {}) || {}\n      )\n    });\n\n    material.onBeforeCompile = shader => {\n      shader.vertexShader = shader.vertexShader.replace(\n        '#include <getDistortion_vertex>',\n        typeof this.options.distortion === 'object' ? this.options.distortion.getDistortion : ''\n      );\n    };\n\n    const mesh = new THREE.Mesh(instanced, material);\n    mesh.frustumCulled = false;\n    this.webgl.scene.add(mesh);\n    this.mesh = mesh;\n  }\n\n  update(time: number) {\n    if (this.mesh.material.uniforms.uTime) {\n      this.mesh.material.uniforms.uTime.value = time;\n    }\n  }\n}\n\nconst sideSticksVertex = `\n  #define USE_FOG;\n  ${THREE.ShaderChunk['fog_pars_vertex']}\n  attribute float aOffset;\n  attribute vec3 aColor;\n  attribute vec2 aMetrics;\n  uniform float uTravelLength;\n  uniform float uTime;\n  varying vec3 vColor;\n  mat4 rotationY( in float angle ) {\n    return mat4(\n      cos(angle),\t\t0,\t\tsin(angle),\t0,\n      0,\t\t        1.0,\t0,\t\t\t0,\n      -sin(angle),\t    0,\t\tcos(angle),\t0,\n      0, \t\t        0,\t\t0,\t\t\t1\n    );\n  }\n  #include <getDistortion_vertex>\n  void main(){\n    vec3 transformed = position.xyz;\n    float width = aMetrics.x;\n    float height = aMetrics.y;\n\n    transformed.xy *= vec2(width, height);\n    float time = mod(uTime * 60. * 2. + aOffset, uTravelLength);\n\n    transformed = (rotationY(3.14/2.) * vec4(transformed,1.)).xyz;\n    transformed.z += - uTravelLength + time;\n\n    float progress = abs(transformed.z / uTravelLength);\n    transformed.xyz += getDistortion(progress);\n\n    transformed.y += height / 2.;\n    transformed.x += -width / 2.;\n    vec4 mvPosition = modelViewMatrix * vec4(transformed, 1.);\n    gl_Position = projectionMatrix * mvPosition;\n    vColor = aColor;\n    ${THREE.ShaderChunk['fog_vertex']}\n  }\n`;\n\nconst sideSticksFragment = `\n  #define USE_FOG;\n  ${THREE.ShaderChunk['fog_pars_fragment']}\n  varying vec3 vColor;\n  void main(){\n    vec3 color = vec3(vColor);\n    gl_FragColor = vec4(color,1.);\n    ${THREE.ShaderChunk['fog_fragment']}\n  }\n`;\n\nclass Road {\n  webgl: App;\n  options: HyperspeedOptions;\n  uTime: { value: number };\n  leftRoadWay!: THREE.Mesh;\n  rightRoadWay!: THREE.Mesh;\n  island!: THREE.Mesh;\n\n  constructor(webgl: App, options: HyperspeedOptions) {\n    this.webgl = webgl;\n    this.options = options;\n    this.uTime = { value: 0 };\n  }\n\n  createPlane(side: number, width: number, isRoad: boolean) {\n    const options = this.options;\n    const segments = 100;\n    const geometry = new THREE.PlaneGeometry(\n      isRoad ? options.roadWidth : options.islandWidth,\n      options.length,\n      20,\n      segments\n    );\n\n    let uniforms: Record<string, { value: unknown }> = {\n      uTravelLength: { value: options.length },\n      uColor: {\n        value: new THREE.Color(isRoad ? options.colors.roadColor : options.colors.islandColor)\n      },\n      uTime: this.uTime\n    };\n\n    if (isRoad) {\n      uniforms = Object.assign(uniforms, {\n        uLanes: { value: options.lanesPerRoad },\n        uBrokenLinesColor: {\n          value: new THREE.Color(options.colors.brokenLines)\n        },\n        uShoulderLinesColor: {\n          value: new THREE.Color(options.colors.shoulderLines)\n        },\n        uShoulderLinesWidthPercentage: {\n          value: options.shoulderLinesWidthPercentage\n        },\n        uBrokenLinesLengthPercentage: {\n          value: options.brokenLinesLengthPercentage\n        },\n        uBrokenLinesWidthPercentage: {\n          value: options.brokenLinesWidthPercentage\n        }\n      });\n    }\n\n    const material = new THREE.ShaderMaterial({\n      fragmentShader: isRoad ? roadFragment : islandFragment,\n      vertexShader: roadVertex,\n      side: THREE.DoubleSide,\n      uniforms: Object.assign(\n        uniforms,\n        this.webgl.fogUniforms,\n        (typeof options.distortion === 'object' ? options.distortion.uniforms : {}) || {}\n      )\n    });\n\n    material.onBeforeCompile = shader => {\n      shader.vertexShader = shader.vertexShader.replace(\n        '#include <getDistortion_vertex>',\n        typeof this.options.distortion === 'object' ? this.options.distortion.getDistortion : ''\n      );\n    };\n\n    const mesh = new THREE.Mesh(geometry, material);\n    mesh.rotation.x = -Math.PI / 2;\n    mesh.position.z = -options.length / 2;\n    mesh.position.x += (this.options.islandWidth / 2 + options.roadWidth / 2) * side;\n\n    this.webgl.scene.add(mesh);\n    return mesh;\n  }\n\n  init() {\n    this.leftRoadWay = this.createPlane(-1, this.options.roadWidth, true);\n    this.rightRoadWay = this.createPlane(1, this.options.roadWidth, true);\n    this.island = this.createPlane(0, this.options.islandWidth, false);\n  }\n\n  update(time: number) {\n    this.uTime.value = time;\n  }\n}\n\nconst roadBaseFragment = `\n  #define USE_FOG;\n  varying vec2 vUv; \n  uniform vec3 uColor;\n  uniform float uTime;\n  #include <roadMarkings_vars>\n  ${THREE.ShaderChunk['fog_pars_fragment']}\n  void main() {\n    vec2 uv = vUv;\n    vec3 color = vec3(uColor);\n    #include <roadMarkings_fragment>\n    gl_FragColor = vec4(color, 1.);\n    ${THREE.ShaderChunk['fog_fragment']}\n  }\n`;\n\nconst islandFragment = roadBaseFragment\n  .replace('#include <roadMarkings_fragment>', '')\n  .replace('#include <roadMarkings_vars>', '');\n\nconst roadMarkings_vars = `\n  uniform float uLanes;\n  uniform vec3 uBrokenLinesColor;\n  uniform vec3 uShoulderLinesColor;\n  uniform float uShoulderLinesWidthPercentage;\n  uniform float uBrokenLinesWidthPercentage;\n  uniform float uBrokenLinesLengthPercentage;\n  highp float random(vec2 co) {\n    highp float a = 12.9898;\n    highp float b = 78.233;\n    highp float c = 43758.5453;\n    highp float dt = dot(co.xy, vec2(a, b));\n    highp float sn = mod(dt, 3.14);\n    return fract(sin(sn) * c);\n  }\n`;\n\nconst roadMarkings_fragment = `\n  uv.y = mod(uv.y + uTime * 0.05, 1.);\n  float laneWidth = 1.0 / uLanes;\n  float brokenLineWidth = laneWidth * uBrokenLinesWidthPercentage;\n  float laneEmptySpace = 1. - uBrokenLinesLengthPercentage;\n\n  float brokenLines = step(1.0 - brokenLineWidth, fract(uv.x * 2.0)) * step(laneEmptySpace, fract(uv.y * 10.0));\n  float sideLines = step(1.0 - brokenLineWidth, fract((uv.x - laneWidth * (uLanes - 1.0)) * 2.0)) + step(brokenLineWidth, uv.x);\n\n  brokenLines = mix(brokenLines, sideLines, uv.x);\n`;\n\nconst roadFragment = roadBaseFragment\n  .replace('#include <roadMarkings_fragment>', roadMarkings_fragment)\n  .replace('#include <roadMarkings_vars>', roadMarkings_vars);\n\nconst roadVertex = `\n  #define USE_FOG;\n  uniform float uTime;\n  ${THREE.ShaderChunk['fog_pars_vertex']}\n  uniform float uTravelLength;\n  varying vec2 vUv; \n  #include <getDistortion_vertex>\n  void main() {\n    vec3 transformed = position.xyz;\n    vec3 distortion = getDistortion((transformed.y + uTravelLength / 2.) / uTravelLength);\n    transformed.x += distortion.x;\n    transformed.z += distortion.y;\n    transformed.y += -1. * distortion.z;  \n    \n    vec4 mvPosition = modelViewMatrix * vec4(transformed, 1.);\n    gl_Position = projectionMatrix * mvPosition;\n    vUv = uv;\n    ${THREE.ShaderChunk['fog_vertex']}\n  }\n`;\n\nfunction resizeRendererToDisplaySize(\n  renderer: THREE.WebGLRenderer,\n  setSize: (width: number, height: number, updateStyle: boolean) => void\n) {\n  const canvas = renderer.domElement;\n  const container = canvas.parentElement;\n  if (!container) return false;\n\n  const width = container.clientWidth;\n  const height = container.clientHeight;\n  const needResize = canvas.width !== width || canvas.height !== height;\n  if (needResize) {\n    setSize(width, height, false);\n  }\n  return needResize;\n}\n\nclass App {\n  container: HTMLElement;\n  options: HyperspeedOptions;\n  renderer: THREE.WebGLRenderer;\n  composer: EffectComposer;\n  camera: THREE.PerspectiveCamera;\n  scene: THREE.Scene;\n  renderPass!: RenderPass;\n  bloomPass!: EffectPass;\n  clock: THREE.Clock;\n  assets: Record<string, unknown>;\n  disposed: boolean;\n  road: Road;\n  leftCarLights: CarLights;\n  rightCarLights: CarLights;\n  leftSticks: LightsSticks;\n  fogUniforms: Record<string, { value: unknown }>;\n  fovTarget: number;\n  speedUpTarget: number;\n  speedUp: number;\n  timeOffset: number;\n  resizeObserver?: ResizeObserver;\n\n  constructor(container: HTMLElement, options: HyperspeedOptions) {\n    this.options = options;\n    if (!this.options.distortion) {\n      this.options.distortion = {\n        uniforms: distortion_uniforms,\n        getDistortion: distortion_vertex\n      };\n    }\n    this.container = container;\n\n    this.renderer = new THREE.WebGLRenderer({\n      antialias: false,\n      alpha: true\n    });\n    this.renderer.setSize(container.offsetWidth, container.offsetHeight, false);\n    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n    this.renderer.domElement.style.display = 'block';\n    this.renderer.domElement.style.width = '100%';\n    this.renderer.domElement.style.height = '100%';\n\n    this.composer = new EffectComposer(this.renderer);\n    container.appendChild(this.renderer.domElement);\n\n    this.camera = new THREE.PerspectiveCamera(options.fov, container.offsetWidth / container.offsetHeight, 0.1, 10000);\n    this.camera.position.z = -5;\n    this.camera.position.y = 8;\n    this.camera.position.x = 0;\n\n    this.scene = new THREE.Scene();\n    this.scene.background = null;\n\n    const fog = new THREE.Fog(options.colors.background, options.length * 0.2, options.length * 500);\n    this.scene.fog = fog;\n\n    this.fogUniforms = {\n      fogColor: { value: fog.color },\n      fogNear: { value: fog.near },\n      fogFar: { value: fog.far }\n    };\n\n    this.clock = new THREE.Clock();\n    this.assets = {};\n    this.disposed = false;\n\n    this.road = new Road(this, options);\n    this.leftCarLights = new CarLights(\n      this,\n      options,\n      options.colors.leftCars,\n      options.movingAwaySpeed,\n      new THREE.Vector2(0, 1 - options.carLightsFade)\n    );\n    this.rightCarLights = new CarLights(\n      this,\n      options,\n      options.colors.rightCars,\n      options.movingCloserSpeed,\n      new THREE.Vector2(1, 0 + options.carLightsFade)\n    );\n    this.leftSticks = new LightsSticks(this, options);\n\n    this.fovTarget = options.fov;\n    this.speedUpTarget = 0;\n    this.speedUp = 0;\n    this.timeOffset = 0;\n\n    this.tick = this.tick.bind(this);\n    this.init = this.init.bind(this);\n    this.setSize = this.setSize.bind(this);\n    this.onMouseDown = this.onMouseDown.bind(this);\n    this.onMouseUp = this.onMouseUp.bind(this);\n    this.onWindowResize = this.onWindowResize.bind(this);\n\n    if (typeof ResizeObserver !== 'undefined') {\n      const resizeObserver = new ResizeObserver(() => {\n        this.onWindowResize();\n      });\n      resizeObserver.observe(container);\n\n      this.resizeObserver = resizeObserver;\n    } else {\n      window.addEventListener('resize', this.onWindowResize);\n    }\n  }\n\n  onWindowResize() {\n    const width = this.container.offsetWidth;\n    const height = this.container.offsetHeight;\n\n    this.renderer.setSize(width, height, false);\n    this.camera.aspect = width / height;\n    this.camera.updateProjectionMatrix();\n    this.composer.setSize(width, height);\n  }\n\n  initPasses() {\n    this.renderPass = new RenderPass(this.scene, this.camera);\n    this.bloomPass = new EffectPass(\n      this.camera,\n      new BloomEffect({\n        luminanceThreshold: 0.2,\n        luminanceSmoothing: 0,\n        resolutionScale: 1\n      })\n    );\n\n    const smaaPass = new EffectPass(\n      this.camera,\n      new SMAAEffect({\n        preset: SMAAPreset.MEDIUM\n      })\n    );\n    this.renderPass.renderToScreen = false;\n    this.bloomPass.renderToScreen = false;\n    smaaPass.renderToScreen = true;\n\n    this.composer.addPass(this.renderPass);\n    this.composer.addPass(this.bloomPass);\n    this.composer.addPass(smaaPass);\n  }\n\n  loadAssets(): Promise<void> {\n    const assets = this.assets as { smaa: { search?: HTMLImageElement; area?: HTMLImageElement } };\n    return new Promise(resolve => {\n      const manager = new THREE.LoadingManager(resolve);\n\n      const searchImage = new Image();\n      const areaImage = new Image();\n      assets.smaa = {};\n\n      searchImage.addEventListener('load', function () {\n        assets.smaa.search = this;\n        manager.itemEnd('smaa-search');\n      });\n\n      areaImage.addEventListener('load', function () {\n        assets.smaa.area = this;\n        manager.itemEnd('smaa-area');\n      });\n\n      manager.itemStart('smaa-search');\n      manager.itemStart('smaa-area');\n\n      searchImage.src = SMAAEffect.searchImageDataURL;\n      areaImage.src = SMAAEffect.areaImageDataURL;\n    });\n  }\n\n  init() {\n    this.initPasses();\n    const options = this.options;\n    this.road.init();\n    this.leftCarLights.init();\n    this.leftCarLights.mesh.position.setX(-options.roadWidth / 2 - options.islandWidth / 2);\n\n    this.rightCarLights.init();\n    this.rightCarLights.mesh.position.setX(options.roadWidth / 2 + options.islandWidth / 2);\n\n    this.leftSticks.init();\n    this.leftSticks.mesh.position.setX(-(options.roadWidth + options.islandWidth / 2));\n\n    this.container.addEventListener('mousedown', this.onMouseDown);\n    this.container.addEventListener('mouseup', this.onMouseUp);\n    this.container.addEventListener('mouseout', this.onMouseUp);\n\n    this.tick();\n  }\n\n  onMouseDown(ev: MouseEvent) {\n    if (this.options.onSpeedUp) this.options.onSpeedUp(ev);\n    this.fovTarget = this.options.fovSpeedUp;\n    this.speedUpTarget = this.options.speedUp;\n  }\n\n  onMouseUp(ev: MouseEvent) {\n    if (this.options.onSlowDown) this.options.onSlowDown(ev);\n    this.fovTarget = this.options.fov;\n    this.speedUpTarget = 0;\n  }\n\n  update(delta: number) {\n    const lerpPercentage = Math.exp(-(-60 * Math.log2(1 - 0.1)) * delta);\n    this.speedUp += lerp(this.speedUp, this.speedUpTarget, lerpPercentage, 0.00001);\n    this.timeOffset += this.speedUp * delta;\n    const time = this.clock.elapsedTime + this.timeOffset;\n\n    this.rightCarLights.update(time);\n    this.leftCarLights.update(time);\n    this.leftSticks.update(time);\n    this.road.update(time);\n\n    let updateCamera = false;\n    const fovChange = lerp(this.camera.fov, this.fovTarget, lerpPercentage);\n    if (fovChange !== 0) {\n      this.camera.fov += fovChange * delta * 6;\n      updateCamera = true;\n    }\n\n    if (typeof this.options.distortion === 'object' && this.options.distortion.getJS) {\n      const distortion = this.options.distortion.getJS(0.025, time);\n      this.camera.lookAt(\n        new THREE.Vector3(\n          this.camera.position.x + distortion.x,\n          this.camera.position.y + distortion.y,\n          this.camera.position.z + distortion.z\n        )\n      );\n      updateCamera = true;\n    }\n\n    if (updateCamera) {\n      this.camera.updateProjectionMatrix();\n    }\n  }\n\n  render(delta: number) {\n    this.composer.render(delta);\n  }\n\n  dispose() {\n    this.disposed = true;\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    } else {\n      window.removeEventListener('resize', this.onWindowResize);\n    }\n\n    if (this.renderer) {\n      this.renderer.dispose();\n    }\n    if (this.composer) {\n      this.composer.dispose();\n    }\n    if (this.scene) {\n      this.scene.clear();\n    }\n\n    if (this.container) {\n      this.container.removeEventListener('mousedown', this.onMouseDown);\n      this.container.removeEventListener('mouseup', this.onMouseUp);\n      this.container.removeEventListener('mouseout', this.onMouseUp);\n    }\n  }\n\n  setSize(width: number, height: number, updateStyles: boolean) {\n    this.composer.setSize(width, height, updateStyles);\n  }\n\n  tick() {\n    if (this.disposed || !this) return;\n\n    const containerWidth = this.container.offsetWidth;\n    const containerHeight = this.container.offsetHeight;\n\n    if (resizeRendererToDisplaySize(this.renderer, this.setSize)) {\n      this.camera.aspect = containerWidth / containerHeight;\n      this.camera.updateProjectionMatrix();\n    }\n\n    const delta = this.clock.getDelta();\n    this.render(delta);\n    this.update(delta);\n    requestAnimationFrame(this.tick);\n  }\n}\n\nconst initHyperspeed = async () => {\n  if (appRef) {\n    appRef.dispose();\n    const container = hyperspeedContainer.value;\n    if (container) {\n      while (container.firstChild) {\n        container.removeChild(container.firstChild);\n      }\n    }\n  }\n\n  const container = hyperspeedContainer.value;\n  if (!container) return;\n\n  const mergedOptions: HyperspeedOptions = {\n    ...defaultOptions,\n    ...props.effectOptions\n  };\n\n  const options = { ...mergedOptions };\n  if (typeof options.distortion === 'string') {\n    options.distortion = distortions[options.distortion];\n  }\n\n  const myApp = new App(container, options);\n  appRef = myApp;\n  await myApp.loadAssets();\n  myApp.init();\n};\n\nonMounted(() => {\n  initHyperspeed();\n});\n\nonUnmounted(() => {\n  if (appRef) {\n    appRef.dispose();\n    appRef = null;\n  }\n});\n\nwatch(\n  () => props.effectOptions,\n  () => {\n    initHyperspeed();\n  },\n  { deep: true }\n);\n</script>\n\n<style scoped>\n.hyperspeed-container {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.hyperspeed-container :deep(canvas) {\n  width: 100% !important;\n  height: 100% !important;\n  display: block;\n}\n</style>\n","path":"Hyperspeed/Hyperspeed.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]},{"type":"registry:component","role":"file","content":"export const hyperspeedPresets = {\n  one: {\n    onSpeedUp: () => {},\n    onSlowDown: () => {},\n    distortion: 'turbulentDistortion',\n    length: 400,\n    roadWidth: 10,\n    islandWidth: 2,\n    lanesPerRoad: 3,\n    fov: 90,\n    fovSpeedUp: 150,\n    speedUp: 2,\n    carLightsFade: 0.4,\n    totalSideLightSticks: 20,\n    lightPairsPerRoadWay: 40,\n    shoulderLinesWidthPercentage: 0.05,\n    brokenLinesWidthPercentage: 0.1,\n    brokenLinesLengthPercentage: 0.5,\n    lightStickWidth: [0.12, 0.5] as [number, number],\n    lightStickHeight: [1.3, 1.7] as [number, number],\n    movingAwaySpeed: [60, 80] as [number, number],\n    movingCloserSpeed: [-120, -160] as [number, number],\n    carLightsLength: [400 * 0.03, 400 * 0.2] as [number, number],\n    carLightsRadius: [0.05, 0.14] as [number, number],\n    carWidthPercentage: [0.3, 0.5] as [number, number],\n    carShiftX: [-0.8, 0.8] as [number, number],\n    carFloorSeparation: [0, 5] as [number, number],\n    colors: {\n      roadColor: 0x080808,\n      islandColor: 0x0a0a0a,\n      background: 0x000000,\n      shoulderLines: 0x131318,\n      brokenLines: 0x131318,\n      leftCars: [0xd856bf, 0x6750a2, 0xc247ac],\n      rightCars: [0x03b3c3, 0x0e5ea5, 0x324555],\n      sticks: 0x03b3c3\n    }\n  },\n  two: {\n    onSpeedUp: () => {},\n    onSlowDown: () => {},\n    distortion: 'mountainDistortion',\n    length: 400,\n    roadWidth: 9,\n    islandWidth: 2,\n    lanesPerRoad: 3,\n    fov: 90,\n    fovSpeedUp: 150,\n    speedUp: 2,\n    carLightsFade: 0.4,\n    totalSideLightSticks: 50,\n    lightPairsPerRoadWay: 50,\n    shoulderLinesWidthPercentage: 0.05,\n    brokenLinesWidthPercentage: 0.1,\n    brokenLinesLengthPercentage: 0.5,\n    lightStickWidth: [0.12, 0.5] as [number, number],\n    lightStickHeight: [1.3, 1.7] as [number, number],\n\n    movingAwaySpeed: [60, 80] as [number, number],\n    movingCloserSpeed: [-120, -160] as [number, number],\n    carLightsLength: [400 * 0.05, 400 * 0.15] as [number, number],\n    carLightsRadius: [0.05, 0.14] as [number, number],\n    carWidthPercentage: [0.3, 0.5] as [number, number],\n    carShiftX: [-0.2, 0.2] as [number, number],\n    carFloorSeparation: [0.05, 1] as [number, number],\n    colors: {\n      roadColor: 0x080808,\n      islandColor: 0x0a0a0a,\n      background: 0x000000,\n      shoulderLines: 0x131318,\n      brokenLines: 0x131318,\n      leftCars: [0xff102a, 0xeb383e, 0xff102a],\n      rightCars: [0xdadafa, 0xbebae3, 0x8f97e4],\n      sticks: 0xdadafa\n    }\n  },\n  three: {\n    onSpeedUp: () => {},\n    onSlowDown: () => {},\n    distortion: 'xyDistortion',\n    length: 400,\n    roadWidth: 9,\n    islandWidth: 2,\n    lanesPerRoad: 3,\n    fov: 90,\n    fovSpeedUp: 150,\n    speedUp: 3,\n    carLightsFade: 0.4,\n    totalSideLightSticks: 50,\n    lightPairsPerRoadWay: 30,\n    shoulderLinesWidthPercentage: 0.05,\n    brokenLinesWidthPercentage: 0.1,\n    brokenLinesLengthPercentage: 0.5,\n    lightStickWidth: [0.02, 0.05] as [number, number],\n    lightStickHeight: [0.3, 0.7] as [number, number],\n    movingAwaySpeed: [20, 50] as [number, number],\n    movingCloserSpeed: [-150, -230] as [number, number],\n    carLightsLength: [400 * 0.05, 400 * 0.2] as [number, number],\n    carLightsRadius: [0.03, 0.08] as [number, number],\n    carWidthPercentage: [0.1, 0.5] as [number, number],\n    carShiftX: [-0.5, 0.5] as [number, number],\n    carFloorSeparation: [0, 0.1] as [number, number],\n    colors: {\n      roadColor: 0x080808,\n      islandColor: 0x0a0a0a,\n      background: 0x000000,\n      shoulderLines: 0x131318,\n      brokenLines: 0x131318,\n      leftCars: [0x7d0d1b, 0xa90519, 0xff102a],\n      rightCars: [0xf1eece, 0xe6e2b1, 0xdfd98a],\n      sticks: 0xf1eece\n    }\n  },\n  four: {\n    onSpeedUp: () => {},\n    onSlowDown: () => {},\n    distortion: 'LongRaceDistortion',\n    length: 400,\n    roadWidth: 10,\n    islandWidth: 5,\n    lanesPerRoad: 2,\n    fov: 90,\n    fovSpeedUp: 150,\n    speedUp: 2,\n    carLightsFade: 0.4,\n    totalSideLightSticks: 50,\n    lightPairsPerRoadWay: 70,\n    shoulderLinesWidthPercentage: 0.05,\n    brokenLinesWidthPercentage: 0.1,\n    brokenLinesLengthPercentage: 0.5,\n    lightStickWidth: [0.12, 0.5] as [number, number],\n    lightStickHeight: [1.3, 1.7] as [number, number],\n    movingAwaySpeed: [60, 80] as [number, number],\n    movingCloserSpeed: [-120, -160] as [number, number],\n    carLightsLength: [400 * 0.05, 400 * 0.15] as [number, number],\n    carLightsRadius: [0.05, 0.14] as [number, number],\n    carWidthPercentage: [0.3, 0.5] as [number, number],\n    carShiftX: [-0.2, 0.2] as [number, number],\n    carFloorSeparation: [0.05, 1] as [number, number],\n    colors: {\n      roadColor: 0x080808,\n      islandColor: 0x0a0a0a,\n      background: 0x000000,\n      shoulderLines: 0x131318,\n      brokenLines: 0x131318,\n      leftCars: [0xff5f73, 0xe74d60, 0xff102a],\n      rightCars: [0xa4e3e6, 0x80d1d4, 0x53c2c6],\n      sticks: 0xa4e3e6\n    }\n  },\n  five: {\n    onSpeedUp: () => {},\n    onSlowDown: () => {},\n    distortion: 'turbulentDistortion',\n    length: 400,\n    roadWidth: 9,\n    islandWidth: 2,\n    lanesPerRoad: 3,\n    fov: 90,\n    fovSpeedUp: 150,\n    speedUp: 2,\n    carLightsFade: 0.4,\n    totalSideLightSticks: 50,\n    lightPairsPerRoadWay: 50,\n    shoulderLinesWidthPercentage: 0.05,\n    brokenLinesWidthPercentage: 0.1,\n    brokenLinesLengthPercentage: 0.5,\n    lightStickWidth: [0.12, 0.5] as [number, number],\n    lightStickHeight: [1.3, 1.7] as [number, number],\n    movingAwaySpeed: [60, 80] as [number, number],\n    movingCloserSpeed: [-120, -160] as [number, number],\n    carLightsLength: [400 * 0.05, 400 * 0.15] as [number, number],\n    carLightsRadius: [0.05, 0.14] as [number, number],\n    carWidthPercentage: [0.3, 0.5] as [number, number],\n    carShiftX: [-0.2, 0.2] as [number, number],\n    carFloorSeparation: [0.05, 1] as [number, number],\n    colors: {\n      roadColor: 0x080808,\n      islandColor: 0x0a0a0a,\n      background: 0x000000,\n      shoulderLines: 0x131318,\n      brokenLines: 0x131318,\n      leftCars: [0xdc5b20, 0xdca320, 0xdc2020],\n      rightCars: [0x334bf7, 0xe5e6ed, 0xbfc6f3],\n      sticks: 0xc5e8eb\n    }\n  },\n  six: {\n    onSpeedUp: () => {},\n    onSlowDown: () => {},\n    distortion: 'deepDistortion',\n    length: 400,\n    roadWidth: 18,\n    islandWidth: 2,\n    lanesPerRoad: 3,\n    fov: 90,\n    fovSpeedUp: 150,\n    speedUp: 2,\n    carLightsFade: 0.4,\n    totalSideLightSticks: 50,\n    lightPairsPerRoadWay: 50,\n    shoulderLinesWidthPercentage: 0.05,\n    brokenLinesWidthPercentage: 0.1,\n    brokenLinesLengthPercentage: 0.5,\n    lightStickWidth: [0.12, 0.5] as [number, number],\n    lightStickHeight: [1.3, 1.7] as [number, number],\n    movingAwaySpeed: [60, 80] as [number, number],\n    movingCloserSpeed: [-120, -160] as [number, number],\n    carLightsLength: [400 * 0.05, 400 * 0.15] as [number, number],\n    carLightsRadius: [0.05, 0.14] as [number, number],\n    carWidthPercentage: [0.3, 0.5] as [number, number],\n    carShiftX: [-0.2, 0.2] as [number, number],\n    carFloorSeparation: [0.05, 1] as [number, number],\n    colors: {\n      roadColor: 0x080808,\n      islandColor: 0x0a0a0a,\n      background: 0x000000,\n      shoulderLines: 0x131318,\n      brokenLines: 0x131318,\n      leftCars: [0xff322f, 0xa33010, 0xa81508],\n      rightCars: [0xfdfdf0, 0xf3dea0, 0xe2bb88],\n      sticks: 0xfdfdf0\n    }\n  }\n};\n","path":"Hyperspeed/HyperspeedPresets.ts","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"three","version":"^0.178.0"},{"ecosystem":"js","name":"postprocessing","version":"^6.37.6"}],"devDependencies":[],"categories":["Backgrounds"]}