@appletosolutions/reactbits/dist/Hyperspeed.d.ts

A comprehensive collection of beautiful, performant React animation components including bounce effects, click sparks, star borders, scroll-triggered animations, and fade transitions.

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