Type Vortex

Use it like any other component. Choose a theme with preset; any prop you pass as well overrides the preset.

import { useRef } from 'react'
import { TypeVortex, type TypeVortexHandle } from '@/components/effects/type-vortex/type-vortex'

export function Hero() {
  const vortex = useRef<TypeVortexHandle>(null)
  return (
    <section className="relative h-[640px] overflow-hidden">
      {/* fills its parent; children are drawn over it, so a crisp headline sits on the type */}
      <TypeVortex ref={vortex} preset="Studio" words={['Design', 'Motion', 'Brand', 'Story']} direction="in" centerX={0.7} className="absolute inset-0">
        <div className="absolute inset-y-0 left-0 flex max-w-md flex-col justify-center p-12">
          <h1>Words with a pull.</h1>
          <button className="pointer-events-auto" onClick={() => vortex.current?.surge()}>See the work</button>
        </div>
      </TypeVortex>
    </section>
  )
}

// Scroll the page to fly through it: down dives in, up climbs out.
export function Scrolly() {
  return <div className="sticky top-0 h-screen"><TypeVortex preset="Prism" scrollDriven pointer={0.4} /></div>
}

// Presets: Studio, Infrared, Mint, Paper (ink on cream, a dark centre, for light pages), Prism. Any prop overrides the preset.
// `words` takes an array (up to six) or one string split on "·", "|" or ",". font="site" uses your page's own font.
// The stage above is <TypeVortexShowcase />, also exported: the vortex with a headline and a button over it.

<TypeVortex preset="Infrared" words={"Design · Motion · Brand · Story · Craft · Type"} />

• Studio
• Infrared
• Mint
• Paper
• Prism

• Every word is a ring of real type. It is drawn to an offscreen canvas at high resolution (the page font or a system stack), uploaded once as a texture and wrapped around the vanishing point in log-polar coordinates, so the letters stay undistorted all the way down the tunnel. Rings turn in alternating directions at their own speeds and stream toward the centre (or away from it with direction="out").
• The type stays sharp because the texture carries four hand-built mip levels per ring and the shader picks the level from the exact on-screen footprint. Toward the centre the rings dissolve into the centre colour with depth fog, so the vanishing point is a clean light (or hole), never noise. A fine dither keeps the gradients free of banding.
• The pointer leans the vanishing point toward the cursor (the rim stays put, so the tunnel bends) and twists the vortex. On touch, dragging does the same. pointer={0} ignores it.
• A click or tap warps: speed, blur and light surge, then settle. Call surge() on a ref to do it from code (surge(1.5) for a stronger one). surgeOnClick turns the click off.
• scrollDriven ties the motion to the page scroll: scroll down and the vortex dives in, scroll up and it climbs out, faster as you scroll faster. It idles slowly when you stop. The direction prop flips which way is "down".
• Motion blur follows the speed: sharp at rest, a radial streak when the vortex surges. Chromatic aberration grows toward the edges.
• The words are in the page as visually hidden text (or your label), the canvas is hidden from assistive technology, and any children are ordinary DOM drawn on top.
• It pauses off screen and in a background tab, lowers its resolution automatically if frames run slow, and draws one composed still frame under prefers-reduced-motion. Without WebGL, and before the first frame, you see a poster of concentric SVG text rings (they turn slowly when WebGL is missing).

See all effects