50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T93c1,'use client'; import { useEffect, useRef } from 'react'; import * as THREE from 'three'; import './Hyperspeed.css'; const TRAVEL = 400; const MAX_CARS = 160; const MAX_POLES = 80; const MAX_DUST = 1500; const MAX_COLORS = 8; const CURVES = ['straight', 'gentle', 'winding', 'hills', 'racing', 'deep']; const THEMES = { dark: { background: 'transparent', road: '#08080a', lines: '#25252d', tail: ['#d856bf', '#6750a2', '#c247ac'], head: ['#03b3c3', '#0e5ea5', '#324555'], poles: ['#03b3c3'], dust: '#ffffff' }, light: { background: 'transparent', road: '#efeff2', lines: '#d0d0d7', tail: ['#d856bf', '#6750a2', '#c247ac'], head: ['#03b3c3', '#0e5ea5', '#324555'], poles: ['#03b3c3'], dust: '#18181b' } }; const BEND = /* glsl */ ` uniform float uTime; uniform float uCurvature; uniform vec4 uCurveA; uniform float uCurveB; uniform float uFogNear; uniform float uFogFar; uniform float uPixel; #define PI 3.14159265358979 float nsin(float v) { return sin(v) * 0.5 + 0.5; } vec3 gentle(float p) { return vec3( cos(p * PI * 5.0 + uTime) * 25.0 - cos(0.02 * PI * 5.0 + uTime) * 25.0, sin(p * PI * 2.0 + PI * 0.5 + uTime) * 15.0 - sin(0.02 * PI * 2.0 + PI * 0.5 + uTime) * 15.0, 0.0 ); } float windX(float p) { return cos(PI * p * 4.0 + uTime) * 25.0 + pow(cos(PI * p * 8.0 + uTime * 2.0), 2.0) * 5.0; } float windY(float p) { return -nsin(PI * p * 8.0 + uTime) * 10.0 - pow(nsin(PI * p + uTime / 8.0), 5.0) * 10.0; } vec3 winding(float p) { return vec3(windX(p) - windX(0.0125), windY(p) - windY(0.0125), 0.0); } vec3 hills(float p) { return vec3( cos(p * PI * 3.0 + uTime) * 30.0 - cos(0.02 * PI * 3.0 + uTime) * 30.0, nsin(p * PI * 6.0 + uTime) * 30.0 - nsin(0.02 * PI * 6.0 + uTime) * 30.0, nsin(p * PI * 10.0 + uTime) * 20.0 - nsin(0.02 * PI * 10.0 + uTime) * 20.0 ); } vec3 racing(float p) { return vec3( sin(p * PI * 2.0 + uTime) * 35.0 - sin(0.0125 * PI * 2.0 + uTime) * 35.0, sin(p * PI * 3.0 + uTime) * 10.0 - sin(0.0125 * PI * 3.0 + uTime) * 10.0, 0.0 ); } float deepX(float p) { return sin(p * PI * 4.0 + uTime) * 10.0; } float deepY(float p) { return pow(abs(p * 10.0), 2.0) + sin(p * PI * 8.0 + uTime) * 20.0; } vec3 deep(float p) { return vec3(deepX(p) - deepX(0.02), deepY(p) - deepY(0.02), 0.0); } vec3 bend(float p) { vec3 d = gentle(p) * uCurveA.x + winding(p) * uCurveA.y + hills(p) * uCurveA.z + racing(p) * uCurveA.w + deep(p) * uCurveB; return d * uCurvature; } `; const STREAK_VERTEX = /* glsl */ ` ${BEND} attribute vec4 aSeedA; attribute vec4 aSeedB; attribute float aPair; attribute float aTone; uniform float uTravel; uniform float uRoadX; uniform float uRoadWidth; uniform float uLanes; uniform float uDirection; uniform vec2 uSpeedRange; uniform float uTrail; uniform float uStretch; uniform float uSize; uniform float uRadiusScale; uniform float uMirror; uniform vec3 uColors[${MAX_COLORS}]; uniform float uColorCount; varying vec2 vUv; varying vec3 vNormal; varying vec3 vView; varying vec3 vColor; varying float vFog; varying float vAbove; varying float vThin; void main() { float laneWidth = uRoadWidth / uLanes; float lane = min(floor(aSeedA.x * uLanes), uLanes - 1.0); float laneX = (lane + 0.5) * laneWidth - uRoadWidth * 0.5 + (aSeedA.y - 0.5) * 0.5 * laneWidth; float carWidth = mix(0.3, 0.5, aSeedA.z) * laneWidth; float radius = mix(0.05, 0.14, aSeedA.w) * uSize; float len = mix(0.03, 0.2, aSeedB.x) * uTravel * uTrail * (1.0 + uStretch); float speed = mix(uSpeedRange.x, uSpeedRange.y, aSeedB.y) * uDirection; vec3 center = vec3( uRoadX + laneX + aPair * carWidth, aSeedB.w * 0.8 + radius * 1.3, position.z * len + len - mod(uTime * speed + aSeedB.z * uTravel, uTravel) ); vAbove = center.y; center.y = mix(center.y, -center.y * 1.8, uMirror); center += bend(abs(center.z / uTravel)); float depth = max(0.1, -(modelViewMatrix * vec4(center, 1.0)).z); float wanted = radius * uRadiusScale; float shown = max(wanted, depth * uPixel * 0.75); vThin = wanted / shown; vec3 p = center + vec3(position.x * shown, position.y * shown * mix(1.0, 2.2, uMirror), 0.0); vec4 mv = modelViewMatrix * vec4(p, 1.0); gl_Position = projectionMatrix * mv; vec3 n = normal; n.y *= 1.0 - 2.0 * uMirror; vNormal = normalize(normalMatrix * n); vView = -mv.xyz; vUv = uv; vColor = uColors[int(min(floor(aTone * uColorCount), uColorCount - 1.0))]; vFog = smoothstep(uFogNear, uFogFar, -mv.z); } `; const STREAK_FRAGMENT = /* glsl */ ` uniform vec2 uFade; uniform float uIntensity; uniform float uSharp; uniform float uCore; uniform float uMirror; varying vec2 vUv; varying vec3 vNormal; varying vec3 vView; varying vec3 vColor; varying float vFog; varying float vAbove; varying float vThin; void main() { float facing = abs(dot(normalize(vNormal), normalize(vView))); float alpha = pow(facing, uSharp) * smoothstep(uFade.x, uFade.y, vUv.x) * uIntensity * vThin * (1.0 - vFog); alpha *= mix(1.0, exp(-vAbove * 0.9), uMirror); if (alpha < 0.003) discard; gl_FragColor = vec4(mix(vColor, vec3(1.0), pow(facing, 12.0) * uCore), min(alpha, 1.0)); } `; const POLE_VERTEX = /* glsl */ ` ${BEND} attribute vec4 aSeed; attribute float aIndex; attribute float aSide; uniform float uTravel; uniform float uCount; uniform float uEdge; uniform float uHeight; uniform float uRadiusScale; uniform float uMirror; uniform vec3 uColors[${MAX_COLORS}]; uniform float uColorCount; varying vec3 vNormal; varying vec3 vView; varying vec3 vColor; varying float vFog; varying float vAbove; varying float vHeight; varying float vThin; void main() { vHeight = position.y + 0.5; float width = mix(0.08, 0.22, aSeed.y); float height = mix(1.3, 1.9, aSeed.z) * uHeight; float spacing = uTravel / max(uCount, 1.0); vec3 center = vec3( aSide * uEdge, vHeight * height, -uTravel + mod(uTime * 120.0 + (aIndex + aSeed.x * 0.6) * spacing, uTravel) ); vAbove = center.y; center.y = mix(center.y, -center.y * 1.6, uMirror); center += bend(abs(center.z / uTravel)); float depth = max(0.1, -(modelViewMatrix * vec4(center, 1.0)).z); float wanted = width * uRadiusScale; float shown = max(wanted, depth * uPixel * 0.75); vThin = wanted / shown; vec3 p = center + vec3(position.x * shown, 0.0, position.z * shown); vec4 mv = modelViewMatrix * vec4(p, 1.0); gl_Position = projectionMatrix * mv; vNormal = normalize(normalMatrix * normal); vView = -mv.xyz; vColor = uColors[int(min(floor(aSeed.w * uColorCount), uColorCount - 1.0))]; vFog = smoothstep(uFogNear, uFogFar, -mv.z); } `; const POLE_FRAGMENT = /* glsl */ ` uniform float uIntensity; uniform float uSharp; uniform float uCore; uniform float uMirror; varying vec3 vNormal; varying vec3 vView; varying vec3 vColor; varying float vFog; varying float vAbove; varying float vHeight; varying float vThin; void main() { float facing = abs(dot(normalize(vNormal), normalize(vView))); float ends = smoothstep(0.0, 0.08, vHeight) * smoothstep(1.0, 0.9, vHeight); float alpha = pow(facing, uSharp) * ends * uIntensity * vThin * (1.0 - vFog); alpha *= mix(1.0, exp(-vAbove * 0.6), uMirror); if (alpha < 0.003) discard; gl_FragColor = vec4(mix(vColor, vec3(1.0), pow(facing, 12.0) * uCore), min(alpha, 1.0)); } `; const DUST_VERTEX = /* glsl */ ` ${BEND} attribute vec4 aSeed; attribute float aEnd; uniform float uTravel; uniform float uStretch; uniform float uSpread; varying float vAlpha; void main() { float x = (aSeed.x - 0.5) * uSpread; float y = mix(1.0, 42.0, aSeed.y * aSeed.y); float speed = mix(140.0, 260.0, aSeed.w); float z = -uTravel + mod(uTime * speed + aSeed.z * uTravel, uTravel); float len = (0.6 + uStretch * 7.0) * mix(0.6, 1.4, aSeed.w); vec3 p = vec3(x, y, z + aEnd * len); p += bend(abs(p.z / uTravel)); vec4 mv = modelViewMatrix * vec4(p, 1.0); gl_Position = projectionMatrix * mv; vAlpha = aEnd * (1.0 - smoothstep(uFogNear, uFogFar, -mv.z)); } `; const DUST_FRAGMENT = /* glsl */ ` uniform vec3 uColor; uniform float uIntensity; varying float vAlpha; void main() { gl_FragColor = vec4(uColor, vAlpha * uIntensity); } `; const ROAD_VERTEX = /* glsl */ ` ${BEND} uniform float uTravel; uniform float uWidth; varying vec2 vRoad; varying float vFog; void main() { vec3 p = position; p.x *= uWidth; vRoad = vec2(p.x, p.z); p += bend(abs(p.z / uTravel)); vec4 mv = modelViewMatrix * vec4(p, 1.0); gl_Position = projectionMatrix * mv; vFog = smoothstep(uFogNear, uFogFar, -mv.z); } `; const ROAD_FRAGMENT = /* glsl */ ` uniform float uTime; uniform vec3 uRoadColor; uniform vec3 uLineColor; uniform vec3 uBackground; uniform float uRoadWidth; uniform float uMedian; uniform float uLanes; uniform float uTransparent; uniform float uOpacity; varying vec2 vRoad; varying float vFog; float stripe(float d, float w) { float aa = fwidth(d) * 1.2; return 1.0 - smoothstep(w - aa, w + aa, d); } void main() { float rx = abs(vRoad.x) - uMedian * 0.5; vec3 color = rx < 0.0 ? mix(uRoadColor, uLineColor, 0.12) : uRoadColor; if (rx >= 0.0) { float laneWidth = uRoadWidth / uLanes; float shoulder = max(stripe(abs(rx - 0.3), 0.07), stripe(abs(rx - (uRoadWidth - 0.3)), 0.07)); float nearest = floor(rx / laneWidth + 0.5); float inner = step(0.5, nearest) * step(nearest, uLanes - 0.5); float dash = step(0.5, fract((vRoad.y - uTime * 120.0) / 14.0)); float marks = max(shoulder, stripe(abs(rx - nearest * laneWidth), 0.06) * inner * dash); color = mix(color, uLineColor, marks); } float alpha = mix(1.0, 1.0 - vFog, uTransparent) * uOpacity; gl_FragColor = vec4(mix(color, uBackground, vFog * (1.0 - uTransparent)), alpha); } `; const QUAD_VERTEX = /* glsl */ ` varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position.xy, 0.0, 1.0); } `; const DOWN_FRAGMENT = /* glsl */ ` uniform sampler2D uTexture; uniform vec2 uTexel; varying vec2 vUv; vec4 tap(vec2 offset) { return min(texture2D(uTexture, vUv + uTexel * offset), vec4(1.0)); } void main() { vec4 sum = tap(vec2(0.0)) * 4.0 + tap(vec2(-1.0, -1.0)) + tap(vec2(1.0, -1.0)) + tap(vec2(-1.0, 1.0)) + tap(vec2(1.0, 1.0)); gl_FragColor = sum * 0.125; } `; const TENT = /* glsl */ ` uniform sampler2D uTexture; uniform vec2 uTexel; varying vec2 vUv; vec4 tent() { vec4 sum = texture2D(uTexture, vUv + uTexel * vec2(-1.0, 0.0)); sum += texture2D(uTexture, vUv + uTexel * vec2(1.0, 0.0)); sum += texture2D(uTexture, vUv + uTexel * vec2(0.0, -1.0)); sum += texture2D(uTexture, vUv + uTexel * vec2(0.0, 1.0)); sum += texture2D(uTexture, vUv + uTexel * vec2(-0.5, -0.5)) * 2.0; sum += texture2D(uTexture, vUv + uTexel * vec2(0.5, -0.5)) * 2.0; sum += texture2D(uTexture, vUv + uTexel * vec2(-0.5, 0.5)) * 2.0; sum += texture2D(uTexture, vUv + uTexel * vec2(0.5, 0.5)) * 2.0; return sum / 12.0; } `; const UP_FRAGMENT = /* glsl */ ` ${TENT} void main() { gl_FragColor = tent(); } `; const BLOOM_FRAGMENT = /* glsl */ ` ${TENT} uniform float uStrength; uniform float uCeiling; uniform float uLight; void main() { vec4 color = tent() * uStrength; float peak = max(uLight > 0.5 ? color.a : max(color.r, max(color.g, color.b)), 0.0001); color *= uCeiling * (1.0 - exp(-peak / uCeiling)) / peak; gl_FragColor = uLight > 0.5 ? color : vec4(color.rgb, 0.0); } `; let colorContext = null; const toRgb = color => { colorContext = colorContext ?? document.createElement('canvas').getContext('2d'); if (!colorContext) return [1, 1, 1]; colorContext.fillStyle = '#000000'; colorContext.fillStyle = color; const value = String(colorContext.fillStyle); if (value.startsWith('#')) { const hex = parseInt(value.slice(1, 7), 16); return [((hex >> 16) & 255) / 255, ((hex >> 8) & 255) / 255, (hex & 255) / 255]; } const parts = value.match(/[\d.]+/g)?.map(Number) ?? [0, 0, 0]; return [parts[0] / 255, parts[1] / 255, parts[2] / 255]; }; const fillPalette = (uniform, count, colors) => { const list = colors.length ? colors : ['#ffffff']; for (let i = 0; i < MAX_COLORS; i++) uniform.value[i].fromArray(toRgb(list[i % list.length])); count.value = Math.min(list.length, MAX_COLORS); }; const instanced = source => { const geometry = new THREE.InstancedBufferGeometry(); geometry.setIndex(source.index); Object.entries(source.attributes).forEach(([name, attribute]) => geometry.setAttribute(name, attribute)); return geometry; }; const nsin = value => Math.sin(value) * 0.5 + 0.5; const windX = (q, t) => Math.cos(Math.PI * q * 4 + t) * 25 + Math.cos(Math.PI * q * 8 + t * 2) ** 2 * 5; const windY = (q, t) => -nsin(Math.PI * q * 8 + t) * 10 - nsin(Math.PI * q + t / 8) ** 5 * 10; const deepX = (q, t) => Math.sin(q * Math.PI * 4 + t) * 10; const deepY = (q, t) => Math.abs(q * 10) ** 2 + Math.sin(q * Math.PI * 8 + t) * 20; const curveShapes = (p, t) => { const { PI, cos, sin } = Math; return [ [ cos(p * PI * 5 + t) * 25 - cos(0.02 * PI * 5 + t) * 25, sin(p * PI * 2 + PI * 0.5 + t) * 15 - sin(0.02 * PI * 2 + PI * 0.5 + t) * 15, 0 ], [windX(p, t) - windX(0.0125, t), windY(p, t) - windY(0.0125, t), 0], [ cos(p * PI * 3 + t) * 30 - cos(0.02 * PI * 3 + t) * 30, nsin(p * PI * 6 + t) * 30 - nsin(0.02 * PI * 6 + t) * 30, nsin(p * PI * 10 + t) * 20 - nsin(0.02 * PI * 10 + t) * 20 ], [ sin(p * PI * 2 + t) * 35 - sin(0.0125 * PI * 2 + t) * 35, sin(p * PI * 3 + t) * 10 - sin(0.0125 * PI * 3 + t) * 10, 0 ], [deepX(p, t) - deepX(0.02, t), deepY(p, t) - deepY(0.02, t), 0] ]; }; const lookShapes = (t, curvature) => { const p = 0.025; const [gentle, , hills, racing] = curveShapes(p, t); return [ [gentle[0] * curvature * 2, gentle[1] * curvature * 0.4, -3], [(windX(p, t) - windX(p + 0.007, t)) * curvature * -2, (windY(p, t) - windY(p + 0.007, t)) * curvature * -5, -10], [hills[0] * curvature * 2, hills[1] * curvature * 2, hills[2] * curvature * 2 - 5], [racing[0] * curvature, racing[1] * curvature, -5], [(deepX(p, t) - deepX(p + 0.01, t)) * curvature * -2, (deepY(p, t) - deepY(p + 0.01, t)) * curvature * -4, -10] ]; }; const Hyperspeed = ({ curve = 'winding', curvature = 1, speed = 1, boost = 3, fov = 90, boostFov = 130, lanes = 3, roadWidth = 10, medianWidth = 2, density = 40, trailLength = 1, lightSize = 1, poles = 20, poleHeight = 1, dust = 100, glow = 0.6, reflections = 0.5, steer = 0.35, tailColors, headColors, poleColors, roadColor, roadOpacity = 0.1, lineColor, background, theme = 'dark', interactive = true, boosting = false, onBoostStart, onBoostEnd, className = '', style }) => { const containerRef = useRef(null); const palette = THEMES[theme] ?? THEMES.dark; const settings = { light: theme === 'light', curve: CURVES.includes(curve) ? curve : 'winding', curvature: Math.max(0, curvature), speed: Math.max(0, speed), boost: Math.max(1, boost), fov: Math.min(170, Math.max(20, fov)), boostFov: Math.min(170, Math.max(20, boostFov)), lanes: Math.max(1, Math.round(lanes)), roadWidth: Math.max(1, roadWidth), medianWidth: Math.max(0, medianWidth), density: Math.min(MAX_CARS, Math.max(0, Math.round(density))), trailLength: Math.max(0.05, trailLength), lightSize: Math.max(0.1, lightSize), poles: Math.min(MAX_POLES, Math.max(0, Math.round(poles))), poleHeight: Math.max(0.1, poleHeight), dust: Math.min(MAX_DUST, Math.max(0, Math.round(dust))), glow: Math.max(0, glow), reflections: Math.max(0, reflections), steer: Math.max(0, steer), tailColors: tailColors?.length ? tailColors : palette.tail, headColors: headColors?.length ? headColors : palette.head, poleColors: poleColors?.length ? poleColors : palette.poles, roadColor: roadColor ?? palette.road, roadOpacity: Math.min(1, Math.max(0, roadOpacity)), lineColor: lineColor ?? palette.lines, background: background ?? palette.background, dustColor: palette.dust, interactive, boosting }; const settingsRef = useRef(settings); settingsRef.current = settings; const callbacksRef = useRef({ onBoostStart, onBoostEnd }); callbacksRef.current = { onBoostStart, onBoostEnd }; useEffect(() => { const container = containerRef.current; if (!container) return undefined; const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false; const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, powerPreference: 'high-performance' }); renderer.outputColorSpace = THREE.LinearSRGBColorSpace; renderer.autoClear = false; renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); container.appendChild(renderer.domElement); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(settingsRef.current.fov, 1, 0.1, 10000); camera.position.set(0, 8, -5); const shared = { uTime: { value: 0 }, uCurvature: { value: 1 }, uCurveA: { value: new THREE.Vector4() }, uCurveB: { value: 0 }, uFogNear: { value: TRAVEL * 0.22 }, uFogFar: { value: TRAVEL * 0.95 }, uTravel: { value: TRAVEL }, uStretch: { value: 0 }, uPixel: { value: 0.001 } }; const disposables = []; const effectMaterials = []; const material = (vertexShader, fragmentShader, uniforms, options = {}) => { const created = new THREE.ShaderMaterial({ vertexShader, fragmentShader, uniforms: { ...shared, ...uniforms }, transparent: true, depthWrite: false, ...options }); disposables.push(created); return created; }; const swatches = () => ({ value: Array.from({ length: MAX_COLORS }, () => new THREE.Vector3(1, 1, 1)) }); const roadGeometry = new THREE.PlaneGeometry(1, TRAVEL, 1, 220); roadGeometry.rotateX(-Math.PI / 2); roadGeometry.translate(0, 0, -TRAVEL / 2); disposables.push(roadGeometry); const roadUniforms = { uWidth: { value: 1 }, uRoadColor: { value: new THREE.Vector3() }, uLineColor: { value: new THREE.Vector3() }, uBackground: { value: new THREE.Vector3() }, uRoadWidth: { value: 10 }, uMedian: { value: 2 }, uLanes: { value: 3 }, uTransparent: { value: 0 }, uOpacity: { value: 1 } }; const roadMaterial = material(ROAD_VERTEX, ROAD_FRAGMENT, roadUniforms, { transparent: true, depthWrite: true }); const road = new THREE.Mesh(roadGeometry, roadMaterial); road.frustumCulled = false; road.renderOrder = 0; road.layers.enable(1); scene.add(road); const tube = new THREE.TubeGeometry( new THREE.LineCurve3(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, -1)), 24, 1, 7, false ); disposables.push(tube); const streakGroup = (direction, fade, speedRange) => { const geometry = instanced(tube); const seedA = new Float32Array(MAX_CARS * 2 * 4); const seedB = new Float32Array(MAX_CARS * 2 * 4); const pair = new Float32Array(MAX_CARS * 2); const tone = new Float32Array(MAX_CARS * 2); for (let i = 0; i < MAX_CARS; i++) { const a = [Math.random(), Math.random(), Math.random(), Math.random()]; const b = [Math.random(), Math.random(), Math.random(), Math.random() * Math.random()]; const shade = Math.random(); for (let side = 0; side < 2; side++) { const index = i * 2 + side; seedA.set(a, index * 4); seedB.set(b, index * 4); pair[index] = side ? 0.5 : -0.5; tone[index] = shade; } } geometry.setAttribute('aSeedA', new THREE.InstancedBufferAttribute(seedA, 4)); geometry.setAttribute('aSeedB', new THREE.InstancedBufferAttribute(seedB, 4)); geometry.setAttribute('aPair', new THREE.InstancedBufferAttribute(pair, 1)); geometry.setAttribute('aTone', new THREE.InstancedBufferAttribute(tone, 1)); geometry.instanceCount = 0; disposables.push(geometry); const uniforms = { uRoadX: { value: 0 }, uRoadWidth: { value: 10 }, uLanes: { value: 3 }, uDirection: { value: direction }, uSpeedRange: { value: new THREE.Vector2(...speedRange) }, uTrail: { value: 1 }, uSize: { value: 1 }, uColors: swatches(), uColorCount: { value: 1 }, uFade: { value: new THREE.Vector2(...fade) } }; const layer = (radiusScale, sharp, mirror, order) => { const layerMaterial = material( STREAK_VERTEX, STREAK_FRAGMENT, { ...uniforms, uRadiusScale: { value: radiusScale }, uSharp: { value: sharp }, uMirror: { value: mirror }, uIntensity: { value: 1 }, uCore: { value: 0 } }, { depthTest: !mirror } ); effectMaterials.push(layerMaterial); const mesh = new THREE.Mesh(geometry, layerMaterial); mesh.frustumCulled = false; mesh.renderOrder = order; if (!mirror) mesh.layers.enable(1); scene.add(mesh); return layerMaterial; }; return { geometry, uniforms, reflection: layer(2.1, 1.2, 1, 1), core: layer(1, 0.85, 0, 3) }; }; const tail = streakGroup(1, [0, 0.6], [60, 80]); const head = streakGroup(-1, [1, 0.4], [120, 160]); const cylinder = new THREE.CylinderGeometry(1, 1, 1, 8, 1, true); disposables.push(cylinder); const poleGeometry = instanced(cylinder); const poleSeed = new Float32Array(MAX_POLES * 2 * 4); const poleIndex = new Float32Array(MAX_POLES * 2); const poleSide = new Float32Array(MAX_POLES * 2); for (let i = 0; i < MAX_POLES; i++) { for (let side = 0; side < 2; side++) { const index = i * 2 + side; poleSeed.set([Math.random(), Math.random(), Math.random(), Math.random()], index * 4); poleIndex[index] = i + (side ? 0.5 : 0); poleSide[index] = side ? 1 : -1; } } poleGeometry.setAttribute('aSeed', new THREE.InstancedBufferAttribute(poleSeed, 4)); poleGeometry.setAttribute('aIndex', new THREE.InstancedBufferAttribute(poleIndex, 1)); poleGeometry.setAttribute('aSide', new THREE.InstancedBufferAttribute(poleSide, 1)); poleGeometry.instanceCount = 0; disposables.push(poleGeometry); const poleUniforms = { uCount: { value: 20 }, uEdge: { value: 11 }, uHeight: { value: 1 }, uColors: swatches(), uColorCount: { value: 1 } }; const poleLayer = (radiusScale, sharp, mirror, order) => { const layerMaterial = material( POLE_VERTEX, POLE_FRAGMENT, { ...poleUniforms, uRadiusScale: { value: radiusScale }, uSharp: { value: sharp }, uMirror: { value: mirror }, uIntensity: { value: 1 }, uCore: { value: 0 } }, { depthTest: !mirror } ); effectMaterials.push(layerMaterial); const mesh = new THREE.Mesh(poleGeometry, layerMaterial); mesh.frustumCulled = false; mesh.renderOrder = order; if (!mirror) mesh.layers.enable(1); scene.add(mesh); return layerMaterial; }; const polesLayers = { reflection: poleLayer(2.4, 1.2, 1, 1), core: poleLayer(1, 0.8, 0, 3) }; const dustGeometry = new THREE.BufferGeometry(); const dustSeed = new Float32Array(MAX_DUST * 2 * 4); const dustEnd = new Float32Array(MAX_DUST * 2); for (let i = 0; i < MAX_DUST; i++) { const seed = [Math.random(), Math.random(), Math.random(), Math.random()]; dustSeed.set(seed, i * 8); dustSeed.set(seed, i * 8 + 4); dustEnd[i * 2 + 1] = 1; } dustGeometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(MAX_DUST * 2 * 3), 3)); dustGeometry.setAttribute('aSeed', new THREE.BufferAttribute(dustSeed, 4)); dustGeometry.setAttribute('aEnd', new THREE.BufferAttribute(dustEnd, 1)); dustGeometry.setDrawRange(0, 0); disposables.push(dustGeometry); const dustUniforms = { uSpread: { value: 140 }, uColor: { value: new THREE.Vector3(1, 1, 1) }, uIntensity: { value: 0.5 } }; const dustMaterial = material(DUST_VERTEX, DUST_FRAGMENT, dustUniforms); effectMaterials.push(dustMaterial); const dustLines = new THREE.LineSegments(dustGeometry, dustMaterial); dustLines.frustumCulled = false; dustLines.renderOrder = 4; scene.add(dustLines); const floatTargets = renderer.extensions.has('EXT_color_buffer_float') || renderer.extensions.has('EXT_color_buffer_half_float'); const levels = Array.from({ length: 5 }, (_, index) => { const target = new THREE.WebGLRenderTarget(1, 1, { type: floatTargets ? THREE.HalfFloatType : THREE.UnsignedByteType, depthBuffer: index === 0 }); disposables.push(target); return target; }); const quadScene = new THREE.Scene(); const quadCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); const quadGeometry = new THREE.PlaneGeometry(2, 2); disposables.push(quadGeometry); const quad = new THREE.Mesh(quadGeometry); quad.frustumCulled = false; quadScene.add(quad); const blur = (fragmentShader, options) => { const created = new THREE.ShaderMaterial({ vertexShader: QUAD_VERTEX, fragmentShader, uniforms: { uTexture: { value: null }, uTexel: { value: new THREE.Vector2() }, uStrength: { value: 1 }, uCeiling: { value: 1 }, uLight: { value: 0 } }, depthTest: false, depthWrite: false, ...options }); disposables.push(created); return created; }; const downMaterial = blur(DOWN_FRAGMENT, { blending: THREE.NoBlending }); const upMaterial = blur(UP_FRAGMENT, { blending: THREE.CustomBlending, blendSrc: THREE.OneFactor, blendDst: THREE.OneFactor, blendSrcAlpha: THREE.OneFactor, blendDstAlpha: THREE.OneFactor }); const bloomMaterial = blur(BLOOM_FRAGMENT, { blending: THREE.CustomBlending, blendSrc: THREE.OneFactor }); const pass = (passMaterial, source, target) => { quad.material = passMaterial; passMaterial.uniforms.uTexture.value = source.texture; passMaterial.uniforms.uTexel.value.set(1 / source.width, 1 / source.height); renderer.setRenderTarget(target); renderer.render(quadScene, quadCamera); }; const clearColor = new THREE.Color(); let clearAlpha = 0; const state = { boost: 0, held: false, boosted: false, fov: settingsRef.current.fov, fovVelocity: 0, steerX: 0, steerY: 0, pointerX: 0, pointerY: 0, weights: [0, 0, 0, 0, 0], visible: true }; const keys = { tail: '', head: '', poles: '', surface: '', light: null }; const lookTarget = new THREE.Vector3(); let raf = 0; let last = performance.now(); let alive = true; const syncColors = s => { const tailKey = s.tailColors.join(); if (tailKey !== keys.tail) { keys.tail = tailKey; fillPalette(tail.uniforms.uColors, tail.uniforms.uColorCount, s.tailColors); } const headKey = s.headColors.join(); if (headKey !== keys.head) { keys.head = headKey; fillPalette(head.uniforms.uColors, head.uniforms.uColorCount, s.headColors); } const poleKey = s.poleColors.join(); if (poleKey !== keys.poles) { keys.poles = poleKey; fillPalette(poleUniforms.uColors, poleUniforms.uColorCount, s.poleColors); } const surfaceKey = [s.roadColor, s.lineColor, s.background, s.dustColor].join(); if (surfaceKey !== keys.surface) { keys.surface = surfaceKey; roadUniforms.uRoadColor.value.fromArray(toRgb(s.roadColor)); roadUniforms.uLineColor.value.fromArray(toRgb(s.lineColor)); dustUniforms.uColor.value.fromArray(toRgb(s.dustColor)); const transparent = s.background === 'transparent'; const backdrop = transparent ? [0, 0, 0] : toRgb(s.background); roadUniforms.uBackground.value.fromArray(backdrop); roadUniforms.uTransparent.value = transparent ? 1 : 0; clearColor.setRGB(...backdrop, THREE.LinearSRGBColorSpace); clearAlpha = transparent ? 0 : 1; } if (keys.light !== s.light) { keys.light = s.light; effectMaterials.forEach(item => { item.blending = s.light ? THREE.NormalBlending : THREE.AdditiveBlending; item.needsUpdate = true; }); bloomMaterial.blendDst = s.light ? THREE.OneMinusSrcAlphaFactor : THREE.OneFactor; bloomMaterial.blendSrcAlpha = s.light ? THREE.OneFactor : THREE.ZeroFactor; bloomMaterial.blendDstAlpha = s.light ? THREE.OneMinusSrcAlphaFactor : THREE.OneFactor; bloomMaterial.uniforms.uLight.value = s.light ? 1 : 0; } }; const resize = () => { const width = Math.max(1, container.clientWidth); const height = Math.max(1, container.clientHeight); renderer.setSize(width, height, false); levels.forEach((target, index) => target.setSize( Math.max(1, Math.round(width / 2 ** (index + 1))), Math.max(1, Math.round(height / 2 ** (index + 1))) ) ); camera.aspect = width / height; camera.updateProjectionMatrix(); wake(); }; const frame = now => { raf = 0; if (!alive) return; const s = settingsRef.current; const dt = Math.min(0.05, Math.max(0.001, (now - last) / 1000)); last = now; syncColors(s); const wanted = (state.held && s.interactive) || s.boosting ? 1 : 0; state.boost += (wanted - state.boost) * (1 - Math.exp(-dt / (wanted > state.boost ? 0.28 : 0.85))); const pace = s.speed * (reduce ? 0.3 : 1) * (1 + (s.boost - 1) * state.boost); shared.uTime.value += dt * pace; shared.uStretch.value = state.boost * 1.1; shared.uCurvature.value = s.curvature; const target = CURVES.indexOf(s.curve) - 1; const blend = 1 - Math.exp(-dt / 0.6); state.weights = state.weights.map((weight, index) => weight + ((index === target ? 1 : 0) - weight) * blend); shared.uCurveA.value.set(state.weights[0], state.weights[1], state.weights[2], state.weights[3]); shared.uCurveB.value = state.weights[4]; const halfRoad = s.roadWidth / 2 + s.medianWidth / 2; const surface = 0.45 + 0.55 * s.roadOpacity; [tail, head].forEach((group, index) => { group.geometry.instanceCount = s.density * 2; group.uniforms.uRoadX.value = index ? halfRoad : -halfRoad; group.uniforms.uRoadWidth.value = s.roadWidth; group.uniforms.uLanes.value = s.lanes; group.uniforms.uTrail.value = s.trailLength; group.uniforms.uSize.value = s.lightSize; group.core.uniforms.uIntensity.value = s.light ? 0.95 : 1 + 0.35 * state.boost; group.core.uniforms.uCore.value = s.light ? 0 : 0.75; group.reflection.uniforms.uIntensity.value = s.reflections * (s.light ? 0.22 : 0.42) * surface; }); poleGeometry.instanceCount = s.poles * 2; poleUniforms.uCount.value = Math.max(1, s.poles); poleUniforms.uEdge.value = s.roadWidth + s.medianWidth / 2 + 0.8; poleUniforms.uHeight.value = s.poleHeight; polesLayers.core.uniforms.uIntensity.value = s.light ? 0.9 : 1; polesLayers.core.uniforms.uCore.value = s.light ? 0 : 0.6; polesLayers.reflection.uniforms.uIntensity.value = s.reflections * (s.light ? 0.2 : 0.38) * surface; dustGeometry.setDrawRange(0, s.dust * 2); dustUniforms.uIntensity.value = (s.light ? 0.35 : 0.45) * (1 + state.boost); dustUniforms.uSpread.value = (s.roadWidth * 2 + s.medianWidth) * 5; roadUniforms.uWidth.value = s.roadWidth * 2 + s.medianWidth + 3; roadUniforms.uRoadWidth.value = s.roadWidth; roadUniforms.uMedian.value = s.medianWidth; roadUniforms.uLanes.value = s.lanes; roadUniforms.uOpacity.value = s.roadOpacity; roadMaterial.depthWrite = s.roadOpacity > 0.5; const fovTarget = reduce ? s.fov : s.fov + (s.boostFov - s.fov) * state.boost; state.fovVelocity += ((fovTarget - state.fov) * 90 - state.fovVelocity * 13) * dt; state.fov += state.fovVelocity * dt; camera.fov = state.fov; shared.uPixel.value = (2 * Math.tan((state.fov * Math.PI) / 360)) / Math.max(1, renderer.domElement.height); const steerBlend = 1 - Math.exp(-dt / 0.35); const follow = s.interactive ? s.steer : 0; state.steerX += (state.pointerX * follow - state.steerX) * steerBlend; state.steerY += (state.pointerY * follow - state.steerY) * steerBlend; camera.position.set(state.steerX * s.roadWidth * 0.45, 8 - state.steerY * 2.5, -5); const looks = lookShapes(shared.uTime.value, s.curvature); const straight = 1 - state.weights.reduce((sum, weight) => sum + weight, 0); lookTarget.set(0, 0, -10 * straight); looks.forEach((look, index) => { lookTarget.x += look[0] * state.weights[index]; lookTarget.y += look[1] * state.weights[index]; lookTarget.z += look[2] * state.weights[index]; }); lookTarget.x += state.steerX * 2.5; lookTarget.add(camera.position); camera.lookAt(lookTarget); camera.updateProjectionMatrix(); renderer.setRenderTarget(null); renderer.setClearColor(clearColor, clearAlpha); renderer.clear(); renderer.render(scene, camera); if (s.glow > 0) { const pixel = shared.uPixel.value; shared.uPixel.value = pixel * (renderer.domElement.height / levels[0].height); camera.layers.set(1); roadMaterial.colorWrite = false; renderer.setRenderTarget(levels[0]); renderer.setClearColor(0x000000, 0); renderer.clear(); renderer.render(scene, camera); roadMaterial.colorWrite = true; camera.layers.set(0); shared.uPixel.value = pixel; for (let i = 1; i < levels.length; i++) pass(downMaterial, levels[i - 1], levels[i]); for (let i = levels.length - 1; i > 1; i--) pass(upMaterial, levels[i], levels[i - 1]); bloomMaterial.uniforms.uStrength.value = s.glow * (s.light ? 0.5 : 1.4); bloomMaterial.uniforms.uCeiling.value = s.glow * (s.light ? 0.3 : 0.5); pass(bloomMaterial, levels[1], null); } if (state.visible) raf = requestAnimationFrame(frame); }; const wake = () => { if (raf || !alive || !state.visible) return; last = performance.now(); raf = requestAnimationFrame(frame); }; const setHeld = held => { if (state.held === held) return; state.held = held; if (!settingsRef.current.interactive) return; if (held) callbacksRef.current.onBoostStart?.(); else callbacksRef.current.onBoostEnd?.(); }; const onDown = event => { if (event.button !== 0 && event.pointerType === 'mouse') return; setHeld(true); }; const onUp = () => setHeld(false); const onMove = event => { const rect = container.getBoundingClientRect(); state.pointerX = ((event.clientX - rect.left) / rect.width) * 2 - 1; state.pointerY = ((event.clientY - rect.top) / rect.height) * 2 - 1; }; const onLeave = () => { state.pointerX = 0; state.pointerY = 0; }; const onMenu = event => { if (settingsRef.current.interactive) event.preventDefault(); }; const resizeObserver = new ResizeObserver(resize); resizeObserver.observe(container); const visibility = new IntersectionObserver(entries => { state.visible = entries.some(entry => entry.isIntersecting); if (state.visible) wake(); }); visibility.observe(container); container.addEventListener('pointerdown', onDown); container.addEventListener('pointermove', onMove); container.addEventListener('pointerleave', onLeave); container.addEventListener('contextmenu', onMenu); window.addEventListener('pointerup', onUp); window.addEventListener('pointercancel', onUp); window.addEventListener('blur', onUp); resize(); return () => { alive = false; cancelAnimationFrame(raf); resizeObserver.disconnect(); visibility.disconnect(); container.removeEventListener('pointerdown', onDown); container.removeEventListener('pointermove', onMove); container.removeEventListener('pointerleave', onLeave); container.removeEventListener('contextmenu', onMenu); window.removeEventListener('pointerup', onUp); window.removeEventListener('pointercancel', onUp); window.removeEventListener('blur', onUp); disposables.forEach(item => item.dispose()); renderer.dispose(); renderer.domElement.remove(); }; }, []); return

; }; export default Hyperspeed; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","three@^0.180.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/three","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"three@^0.180.0"}]]}]}]]}],["$","$L50",null,{"namespace":"@react-bits","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"Hyperspeed.css","content":".hyperspeed {\n position: absolute;\n inset: 0;\n overflow: hidden;\n touch-action: pan-y;\n -webkit-tap-highlight-color: transparent;\n -webkit-touch-callout: none;\n user-select: none;\n}\n\n.hyperspeed canvas {\n display: block;\n width: 100%;\n height: 100%;\n}\n","type":"registry:file","target":"@components/Hyperspeed.css"},{"path":"Hyperspeed.jsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]