CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/word-tunnel

Word Tunnel

Rows of bold black-and-white typography wrapped into a rotating cylinder. The camera drifts between reading the folded text wall and staring straight down the vortex, with the far wall ghosting through the gaps. Feed it your own manifesto lines.

ReactWebGL3DInteractiveFont#typography#tunnel#vortex#3d#three#monochrome#kinetic#editorial#bold

Usage

import WordTunnel from '@crazygl/hero-word-tunnel';

export default function Page() {
  return (
    <WordTunnel
      phrases={'BUILD THE FUTURE\nSHIP WITH INTENT\nFORM MEETS FUNCTION\nDETAILS DECIDE'}
      spinSpeed={1}
      cameraCycle
    />
  );
}

phrases accepts a newline-separated string (as the customizer edits it) or an array of strings from code — each line becomes one ring of the tunnel.

Customise

  • Words — phrases (8–12 short lines look best), headingFontFamily (bold tight sans-serifs read best), italicAlternate for the editorial every-other-row italics.
  • Tunnel — spinSpeed, rowDrift (rows slide against each other), cameraCycle + cycleSeconds for the wall↔vortex journey, ghostOpacity for the mirrored far-wall text showing through the gaps.
  • Colors — textColor, bgColor. Monochrome white-on-black is the signature look; try warm paper tones for an editorial variant.

Best for

  • Design studios, agencies, and portfolio sites with a manifesto to shout.
  • Editorial, magazine, and type-foundry landing pages.
  • Conference and event sites — feed it the themes of the year and let them spiral.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-word-tunnel
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import WordTunnel from '@crazygl/hero-word-tunnel';

export default function Landing() {
  return (
    <WordTunnel />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import WordTunnel from '@crazygl/hero-word-tunnel';

export default function Page() {
  return (
    <section>
      <WordTunnel
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Progressive Blur Text

A giant display word that is razor-sharp at the top and melts into a progressively heavier blur toward the bottom — a true variable-radius blur per row, not a gradient-masked copy. Bold, editorial, fully recolourable.

Kinetic Text

Stacked lines where each word is timed independently — bounce in, rotate, scale, on a choreographed sequence. Pick whether the show plays on load, follows scroll, or loops forever.

Colorful Type Motion

Each letter cycles through a hue palette on a phase offset — moving colour without a moving gradient. Pick from eight curated palettes spanning soft pastels to electric neon.

On Scroll Typography

A headline whose transform is driven by scroll progress through the viewport — pick an animation flavour (scale / rotate / slide / blur / combo), tune the scroll window, and the headline does the rest.

Animated Flow Text

Each word rides its own sine wave with a per-letter phase offset — the line reads like a banner caught in a slow current.

Kinetic Split Typography

A bold grotesk headline is split into horizontal slices that fly in from alternating sides, settle into alignment, and then parallax against the pointer at different depths.Live customizer

Word Tunnel

Phrases (one per line)Each line becomes one ring of the tunnel, repeated around the circumference. 8-12 short lines look best.FontThe typeface the tunnel is set in. Bold, tight sans-serifs read best.Alternate ItalicsEvery other row is italic, like an editorial spread.Spin Speed1How fast the cylinder rotates.Row Drift0.5Rows slide against each other — 0 locks them together, 1 alternates direction row by row.Camera JourneyDrift between the folded text wall and the straight-down-the-tunnel vortex. Off holds the vortex view.Journey Interval9sFar-Wall Ghost0.22How much the reversed text on the far side of the cylinder shows through.Text ColorBackgroundInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.