Orbit text

import type {ReactNode} from "react";
import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";

export type OrbitTextProps = {
  text: string;
  /** Ring radius in design pixels. */
  radius?: number;
  /** Degrees of rotation per frame. Negative runs counter-clockwise. */
  speed?: number;
  /** Glyph size in design pixels. */
  size?: number;
  /** Rendered at the center of the ring. Defaults to a small accent dot. */
  children?: ReactNode;
};

/**
 * A phrase set around a circle, turning slowly — a badge or seal beat. The
 * text is repeated with a separator until the ring is comfortably full, then
 * the glyphs are spread evenly so the circle always closes without a gap.
 * Rotation is frame times speed, so the seal turns at the same rate in the
 * preview and in every render chunk.
 */
export const OrbitText = ({text, radius = 240, speed = 0.25, size = 36, children}: OrbitTextProps) => {
  const frame = useFrame();
  const brand = useBrand();
  const scale = useDesignScale();
  // Repeat a short phrase until the ring's circumference is roughly covered.
  const capacity = Math.max([...text].length, Math.floor((2 * Math.PI * radius) / (size * 0.72)));
  let ring = text;
  while ([...ring].length + [...text].length + 3 <= capacity) {
    ring += ` • ${text}`;
  }
  const glyphs = [...`${ring} • `];
  const rotation = frame * speed;
  const entrance = interpolate(frame, [0, 24], [0, 1], {easing: Easing.standard});

  return (
    <Fill style={{alignItems: "center", justifyContent: "center"}}>
      <div style={{height: radius * 2 * scale, opacity: entrance, position: "relative", width: radius * 2 * scale}}>
        {glyphs.map((glyph, index) => (
          <span
            key={`${glyph}-${index}`}
            style={{
              fontSize: size * scale,
              fontWeight: 550,
              left: "50%",
              letterSpacing: "0.06em",
              position: "absolute",
              top: "50%",
              transform: `translate(-50%, -50%) rotate(${(index * 360) / glyphs.length + rotation}deg) translateY(${-radius * scale}px)`,
              whiteSpace: "pre",
            }}
          >
            {glyph}
          </span>
        ))}
        <div
          style={{
            alignItems: "center",
            display: "flex",
            inset: 0,
            justifyContent: "center",
            position: "absolute",
          }}
        >
          {children ?? (
            <div
              style={{
                background: brand.colors.accent,
                borderRadius: "50%",
                height: 18 * scale,
                width: 18 * scale,
              }}
            />
          )}
        </div>
      </div>
    </Fill>
  );
};

import {defineComponentPreview} from "odori/preview";
import {OrbitText} from "./orbit-text";

export default defineComponentPreview({
  title: "Orbit text",
  category: "Typography/Titles",
  description: "A phrase circles slowly, badge-style, around a centerpiece.",
  component: OrbitText,
  canvas: {width: 1080, height: 1080, duration: "6s"},
  controls: {
    text: {type: "text", defaultValue: "SHIPPED WITH CARE", maxLength: 32},
    radius: {type: "number", defaultValue: 240, min: 100, max: 420},
    speed: {type: "number", defaultValue: 0.25, min: -2, max: 2, step: 0.05},
    size: {type: "number", defaultValue: 36, min: 16, max: 72},
  },
  examples: [
    {name: "Default", props: {text: "SHIPPED WITH CARE"}},
    {name: "Tight seal", props: {text: "EST. 2026", radius: 150, size: 28, speed: 0.5}},
    {name: "Reverse", props: {text: "AROUND WE GO", speed: -0.4}},
  ],
});

import {Scene, Video} from "odori";
import {OrbitText} from "../components/orbit-text/orbit-text";

<Video>
  <Scene id="orbit-text" duration="6s">
    <OrbitText
      text="SHIPPED WITH CARE"
      radius={240}
      speed={0.25}
      size={36}
    />
  </Scene>
</Video>