Skip to main content

Kinetic Tunnel

Words wrapped around rings that fly toward the camera. The cursor steers the vanishing point; click to accelerate.

  • 5.6 KB .bexode
  • 7 live inputs
  • Responsive fit Layout
Live runtime

Use it

The code follows your customizations. Install with npm i exodeui.

import { ExodeUICanvas } from 'exodeui';

// kinetic-tunnel.bexode goes in /public (download it below)
export function KineticTunnel() {
  return (
    <ExodeUICanvas
      src="/kinetic-tunnel.bexode"
      fit="Layout"   // responsive: redraws at any container size
      autoPlay
      interactive
      style={{ width: '100%', height: 560 }}
    />
  );
}

Inputs

InputTypeDefaultRange
wordsTextMOTION,SIGNAL,FORM,RHYTHM,LIGHT,TENSION,SPACE,TIME—
titleTextInto the frame—
speedNumber10.1 – 3
accentText#ff4b2bhex colour
accent2Text#ffd2c2hex colour
bgText#080706hex colour
textText#f3ede6hex colour