Bifrost Hyperspace

Heroes

About

A first-person ride over a thick-glass bridge of light into a tunnel of long light ribbons that accelerates to a white-out and loops. WebGL, zero dependencies besides React.

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

Code

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

Usage.tsx

import { BifrostHyperspace } from "@/components/ui/bifrost-hyperspace"

const settings = {
  cycleDuration: 7,
  glow: 1.2,
  cameraShake: false,
}

export default function TunnelHeroDemo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }
  return (
    <div className="w-full p-4">
      <BifrostHyperspace
        mode="tunnel"
        label="Looping tunnel of rainbow light streaks behind a hero heading"
        className="min-h-[520px] w-full rounded-xl border border-border"
        {...s}
      >
        <section className="flex h-full min-h-[520px] flex-col items-center justify-center gap-6 bg-black/40 px-6 text-center">
          <p className="text-xs font-medium uppercase tracking-[0.3em] text-white/70">
            Launch week
          </p>
          <h1 className="max-w-2xl text-balance text-4xl font-semibold tracking-tight text-white drop-shadow-[0_2px_24px_rgba(0,0,0,0.6)] sm:text-6xl">
            Cross the bridge to what ships next
          </h1>
          <p className="max-w-lg text-pretty text-base text-white/80">
            A WebGL hero background that loops seamlessly, so it can sit behind any headline.
          </p>
          <div className="flex flex-wrap items-center justify-center gap-3">
            <a
              href="#start"
              className="inline-flex h-11 items-center rounded-md bg-primary px-5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
            >
              Get started
            </a>
            <a
              href="#docs"
              className="inline-flex h-11 items-center rounded-md border border-white/30 bg-white/10 px-5 text-sm font-medium text-white backdrop-blur transition-colors hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
            >
              Read the docs
            </a>
          </div>
        </section>
      </BifrostHyperspace>
    </div>
  )
}