Hyperspeed

Component 37

About

Hyperspeed futuristic interactive background

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hyperspeed to your project and fits it to your theme.

Code

How Hyperspeed is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from "react";
import { Component } from "@/components/ui/hyperspeed";

const DemoOne = () => {
  return (

    
    <div className="w-full h-screen bg-black">
      <Component
        effectOptions={{
          onSpeedUp: () => { console.log("Speeding up!"); },
          onSlowDown: () => { console.log("Slowing down!"); },
          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,
          }
        }}
      />
    </div>
  );
};

export { DemoOne };