Relay Hub Diagram

Component 7

About

An interactive isometric diagram of a hub with four branches of tiles that lights up the path to whichever tile the pointer is nearest, hop by hop.

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

Code

How Relay Hub Diagram is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import Relay from "@/components/ui/relay";

export default function RelayDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
      <Relay
        play
        style={{ width: 360 }}
        aria-label="A hub and four branches of tiles"
      />
    </div>
  );
}