Installation
Usage
Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
effectOptions | Partial<LightSpeedOptions> | See defaultOptions | Configuration object to customize road, lights, distortion, speed, and colors. |
Credits
- Ported to Vue from Codrops Article
Learn more about Mintlify
Enter your email to receive updates about new features and product releases.
A highly customizable 3D highway speed visual effect built with Three.js, featuring animated road, cars, lights, and distortion effects for immersive motion simulation.
npm install three postprocessing
<script setup lang="ts">
import { LightSpeed } from '@/components/visualization'
import type { LightSpeedOptions } from '@/components/visualization'
const effectOptions: Partial<LightSpeedOptions> = {
speed: 2,
roadWidth: 9,
roadLength: 400,
islandWidth: 2,
nPairs: 50,
}
</script>
<template>
<LightSpeed :effect-options="effectOptions" />
</template>
| Prop Name | Type | Default | Description |
|---|---|---|---|
effectOptions | Partial<LightSpeedOptions> | See defaultOptions | Configuration object to customize road, lights, distortion, speed, and colors. |