reactbits-animation
Version:
A comprehensive collection of beautiful, performant React animation components including bounce effects, click sparks, star borders, scroll-triggered animations, and fade transitions.
278 lines • 8.45 kB
TypeScript
export declare const hyperspeedPresets: {
one: {
onSpeedUp: () => void;
onSlowDown: () => void;
distortion: string;
length: number;
roadWidth: number;
islandWidth: number;
lanesPerRoad: number;
fov: number;
fovSpeedUp: number;
speedUp: number;
carLightsFade: number;
totalSideLightSticks: number;
lightPairsPerRoadWay: number;
shoulderLinesWidthPercentage: number;
brokenLinesWidthPercentage: number;
brokenLinesLengthPercentage: number;
lightStickWidth: number[];
lightStickHeight: number[];
movingAwaySpeed: number[];
movingCloserSpeed: number[];
carLightsLength: number[];
carLightsRadius: number[];
carWidthPercentage: number[];
carShiftX: number[];
carFloorSeparation: number[];
colors: {
roadColor: number;
islandColor: number;
background: number;
shoulderLines: number;
brokenLines: number;
leftCars: number[];
rightCars: number[];
sticks: number;
};
};
two: {
onSpeedUp: () => void;
onSlowDown: () => void;
distortion: string;
length: number;
roadWidth: number;
islandWidth: number;
lanesPerRoad: number;
fov: number;
fovSpeedUp: number;
speedUp: number;
carLightsFade: number;
totalSideLightSticks: number;
lightPairsPerRoadWay: number;
shoulderLinesWidthPercentage: number;
brokenLinesWidthPercentage: number;
brokenLinesLengthPercentage: number;
lightStickWidth: number[];
lightStickHeight: number[];
movingAwaySpeed: number[];
movingCloserSpeed: number[];
carLightsLength: number[];
carLightsRadius: number[];
carWidthPercentage: number[];
carShiftX: number[];
carFloorSeparation: number[];
colors: {
roadColor: number;
islandColor: number;
background: number;
shoulderLines: number;
brokenLines: number;
leftCars: number[];
rightCars: number[];
sticks: number;
};
};
three: {
onSpeedUp: () => void;
onSlowDown: () => void;
distortion: string;
length: number;
roadWidth: number;
islandWidth: number;
lanesPerRoad: number;
fov: number;
fovSpeedUp: number;
speedUp: number;
carLightsFade: number;
totalSideLightSticks: number;
lightPairsPerRoadWay: number;
shoulderLinesWidthPercentage: number;
brokenLinesWidthPercentage: number;
brokenLinesLengthPercentage: number;
lightStickWidth: number[];
lightStickHeight: number[];
movingAwaySpeed: number[];
movingCloserSpeed: number[];
carLightsLength: number[];
carLightsRadius: number[];
carWidthPercentage: number[];
carShiftX: number[];
carFloorSeparation: number[];
colors: {
roadColor: number;
islandColor: number;
background: number;
shoulderLines: number;
brokenLines: number;
leftCars: number[];
rightCars: number[];
sticks: number;
};
};
four: {
onSpeedUp: () => void;
onSlowDown: () => void;
distortion: string;
length: number;
roadWidth: number;
islandWidth: number;
lanesPerRoad: number;
fov: number;
fovSpeedUp: number;
speedUp: number;
carLightsFade: number;
totalSideLightSticks: number;
lightPairsPerRoadWay: number;
shoulderLinesWidthPercentage: number;
brokenLinesWidthPercentage: number;
brokenLinesLengthPercentage: number;
lightStickWidth: number[];
lightStickHeight: number[];
movingAwaySpeed: number[];
movingCloserSpeed: number[];
carLightsLength: number[];
carLightsRadius: number[];
carWidthPercentage: number[];
carShiftX: number[];
carFloorSeparation: number[];
colors: {
roadColor: number;
islandColor: number;
background: number;
shoulderLines: number;
brokenLines: number;
leftCars: number[];
rightCars: number[];
sticks: number;
};
};
five: {
onSpeedUp: () => void;
onSlowDown: () => void;
distortion: string;
length: number;
roadWidth: number;
islandWidth: number;
lanesPerRoad: number;
fov: number;
fovSpeedUp: number;
speedUp: number;
carLightsFade: number;
totalSideLightSticks: number;
lightPairsPerRoadWay: number;
shoulderLinesWidthPercentage: number;
brokenLinesWidthPercentage: number;
brokenLinesLengthPercentage: number;
lightStickWidth: number[];
lightStickHeight: number[];
movingAwaySpeed: number[];
movingCloserSpeed: number[];
carLightsLength: number[];
carLightsRadius: number[];
carWidthPercentage: number[];
carShiftX: number[];
carFloorSeparation: number[];
colors: {
roadColor: number;
islandColor: number;
background: number;
shoulderLines: number;
brokenLines: number;
leftCars: number[];
rightCars: number[];
sticks: number;
};
};
six: {
onSpeedUp: () => void;
onSlowDown: () => void;
distortion: string;
length: number;
roadWidth: number;
islandWidth: number;
lanesPerRoad: number;
fov: number;
fovSpeedUp: number;
speedUp: number;
carLightsFade: number;
totalSideLightSticks: number;
lightPairsPerRoadWay: number;
shoulderLinesWidthPercentage: number;
brokenLinesWidthPercentage: number;
brokenLinesLengthPercentage: number;
lightStickWidth: number[];
lightStickHeight: number[];
movingAwaySpeed: number[];
movingCloserSpeed: number[];
carLightsLength: number[];
carLightsRadius: number[];
carWidthPercentage: number[];
carShiftX: number[];
carFloorSeparation: number[];
colors: {
roadColor: number;
islandColor: number;
background: number;
shoulderLines: number;
brokenLines: number;
leftCars: number[];
rightCars: number[];
sticks: number;
};
};
};
import { FC } from "react";
import * as THREE from "three";
interface Distortion {
uniforms: Record<string, {
value: any;
}>;
getDistortion: string;
getJS?: (progress: number, time: number) => THREE.Vector3;
}
interface Colors {
roadColor: number;
islandColor: number;
background: number;
shoulderLines: number;
brokenLines: number;
leftCars: number[];
rightCars: number[];
sticks: number;
}
interface HyperspeedOptions {
onSpeedUp?: (ev: MouseEvent) => void;
onSlowDown?: (ev: MouseEvent) => void;
distortion?: string | Distortion;
length: number;
roadWidth: number;
islandWidth: number;
lanesPerRoad: number;
fov: number;
fovSpeedUp: number;
speedUp: number;
carLightsFade: number;
totalSideLightSticks: number;
lightPairsPerRoadWay: number;
shoulderLinesWidthPercentage: number;
brokenLinesWidthPercentage: number;
brokenLinesLengthPercentage: number;
lightStickWidth: [number, number];
lightStickHeight: [number, number];
movingAwaySpeed: [number, number];
movingCloserSpeed: [number, number];
carLightsLength: [number, number];
carLightsRadius: [number, number];
carWidthPercentage: [number, number];
carShiftX: [number, number];
carFloorSeparation: [number, number];
colors: Colors;
isHyper?: boolean;
}
interface HyperspeedProps {
effectOptions?: Partial<HyperspeedOptions>;
}
declare const Hyperspeed: FC<HyperspeedProps>;
export default Hyperspeed;
//# sourceMappingURL=Hyperspeed.d.ts.map