Hyperspeed

hyperspeed

超空间跃迁 warp 隧道背景 · 从消失点放射的双色车灯光带向观察者冲来 + 湍流扭曲 + 程序化辉光(ogl 单 shader·零新依赖·token·reduced-motion 静态降级)

用法

基础用法

放进 relative 黑底容器，组件自带 block h-full w-full，由容器控尺寸。

tsx

<div className="relative h-64 overflow-hidden rounded-xl bg-black">
  <Hyperspeed className="absolute inset-0" />
</div>

叠加标题

光带层 aria-hidden，文案放上层 pointer-events-none 居中。

Hyperspeed

tsx

<div className="relative h-64 overflow-hidden rounded-xl bg-black">
  <Hyperspeed className="absolute inset-0" />
  <div className="pointer-events-none absolute inset-0 flex items-center justify-center text-sm font-medium text-white/80">
    Hyperspeed
  </div>
</div>

踩满油门（高速密集）

speed 调大 + density 调密，营造超空间跃迁加速感。

tsx

<div className="relative h-64 overflow-hidden rounded-xl bg-black">
  <Hyperspeed speed={3} density={90} className="absolute inset-0" />
</div>

笔直隧道（无扭曲）

distortion=0 关闭道路湍流摆动，光带笔直冲来。

tsx

<div className="relative h-64 overflow-hidden rounded-xl bg-black">
  <Hyperspeed distortion={0} density={56} className="absolute inset-0" />
</div>

自定义车灯色

leftColor / rightColor 传任意 CSS 颜色，覆盖默认 chart token。

tsx

<div className="relative h-64 overflow-hidden rounded-xl bg-black">
  <Hyperspeed
    leftColor="oklch(0.72 0.2 40)"
    rightColor="oklch(0.7 0.16 200)"
    speed={1.5}
    className="absolute inset-0"
  />
</div>

何时用

需要强冲击的 warp 隧道 / 跃迁速度感 hero 背景时用。要纯几何透视网格（无运动隧道）用 RetroGrid；只要低调网格底纹用 GridPattern。

导入

import { Hyperspeed } from "@hulianui/ui"

Props

名称	类型	默认	说明
speed	`number`	`1`	整体推进速度倍率，越大冲来越快，建议 0.2–4
density	`number`	`40`	道路两侧光带密度，越大越密集，建议 10–120
distortion	`number`	`1`	视野扭曲强度（湍流摆动），0=笔直隧道，建议 0–2
fade	`number`	`0.4`	雾化淡出强度，越大远处越快被黑暗吞没，建议 0–1
leftColor	`string`	`var(--color-chart-4)`	左侧（驶离）车灯色，任意 CSS 颜色
rightColor	`string`	`var(--color-chart-2)`	右侧（驶近）车灯色，任意 CSS 颜色
className	`string`	—	透传根容器（本身 block h-full w-full，由容器控尺寸）
style	`CSSProperties`	—	透传根容器内联样式

Slots

插槽	类型	说明
fallback	`ReactNode`	reduced-motion / 无 WebGL 时渲染在静态兜底层内的内容

禁忌 / 坑

深色底才显辉光，浅色容器上几乎不可见，建议配 bg-black 或深色底。
ogl 单 shader 仅客户端渲染；SSR / 无 WebGL 出 fallback 静态层，reduced-motion 下也降级。
全屏背景层在 opaque 背景的非层叠上下文父级里可能被父背景盖住，见 [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]]。
leftColor/rightColor 传 CSS 变量须用 --color- 前缀 token，见 [[hulian-token-color-var-needs-color-prefix]]。

Playground

推进速度灯带密度扭曲强度雾化淡出

<div className="relative h-64 overflow-hidden rounded-xl bg-black">
  <Hyperspeed
    speed={1}
    density={40}
    distortion={1}
    fade={0.4}
    className="absolute inset-0"
  />
</div>

用法

基础用法

放进 relative 黑底容器，组件自带 block h-full w-full，由容器控尺寸。

tsx

<div className="relative h-64 overflow-hidden rounded-xl bg-black">
  <Hyperspeed className="absolute inset-0" />
</div>

叠加标题

光带层 aria-hidden，文案放上层 pointer-events-none 居中。

Hyperspeed

tsx

<div className="relative h-64 overflow-hidden rounded-xl bg-black">
  <Hyperspeed className="absolute inset-0" />
  <div className="pointer-events-none absolute inset-0 flex items-center justify-center text-sm font-medium text-white/80">
    Hyperspeed
  </div>
</div>

踩满油门（高速密集）

speed 调大 + density 调密，营造超空间跃迁加速感。

tsx

<div className="relative h-64 overflow-hidden rounded-xl bg-black">
  <Hyperspeed speed={3} density={90} className="absolute inset-0" />
</div>

笔直隧道（无扭曲）

distortion=0 关闭道路湍流摆动，光带笔直冲来。

tsx

<div className="relative h-64 overflow-hidden rounded-xl bg-black">
  <Hyperspeed distortion={0} density={56} className="absolute inset-0" />
</div>

自定义车灯色

leftColor / rightColor 传任意 CSS 颜色，覆盖默认 chart token。

tsx

<div className="relative h-64 overflow-hidden rounded-xl bg-black">
  <Hyperspeed
    leftColor="oklch(0.72 0.2 40)"
    rightColor="oklch(0.7 0.16 200)"
    speed={1.5}
    className="absolute inset-0"
  />
</div>

Props

名称	类型	默认	说明
speed	`number`	`1`	整体推进速度倍率，越大冲来越快，建议 0.2–4
density	`number`	`40`	道路两侧光带密度，越大越密集，建议 10–120
distortion	`number`	`1`	视野扭曲强度（湍流摆动），0=笔直隧道，建议 0–2
fade	`number`	`0.4`	雾化淡出强度，越大远处越快被黑暗吞没，建议 0–1
leftColor	`string`	`var(--color-chart-4)`	左侧（驶离）车灯色，任意 CSS 颜色
rightColor	`string`	`var(--color-chart-2)`	右侧（驶近）车灯色，任意 CSS 颜色
className	`string`	—	透传根容器（本身 block h-full w-full，由容器控尺寸）
style	`CSSProperties`	—	透传根容器内联样式

插槽

类型

说明

fallback

ReactNode

reduced-motion / 无 WebGL 时渲染在静态兜底层内的内容

禁忌 / 坑

深色底才显辉光，浅色容器上几乎不可见，建议配 bg-black 或深色底。

ogl 单 shader 仅客户端渲染；SSR / 无 WebGL 出 fallback 静态层，reduced-motion 下也降级。

全屏背景层在 opaque 背景的非层叠上下文父级里可能被父背景盖住，见 [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]]。

leftColor/rightColor 传 CSS 变量须用 --color- 前缀 token，见 [[hulian-token-color-var-needs-color-prefix]]。

Hyperspeed

用法

基础用法

叠加标题

踩满油门（高速密集）

笔直隧道（无扭曲）

自定义车灯色

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground

Hyperspeed

用法

基础用法

叠加标题

踩满油门（高速密集）

笔直隧道（无扭曲）

自定义车灯色

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground