Infinity

The OpenCosmos brand mark — two streams sweeping a lemniscate (∞) path. Five pre-tuned sizes from a 16 px inline glyph to a 256 px hero moment. Two render techniques: stripes (rich at large sizes) and dashes (elegant at every size).

All sizes, both techniques

For each size: stripes on top, dashes below. Same palette and duration.

xs

stripes

dashes

sm

stripes

dashes

md

stripes

dashes

lg

stripes

dashes

xl

stripes

dashes

xs16px height — inline glyph (e.g. next to thinking text)

sm24px height — small accent, list-item leading mark

md64px height — section accent, card decoration

lg128px height — feature panel, with halo

xl256px height — hero moment, full bloom + halo

import { Backgrounds } from '@opencosmos/ui';
const { InfinityAnim } = Backgrounds;

export default function HeroSection

import { Backgrounds } from '@opencosmos/ui';
const { InfinityAnim } = Backgrounds;

export default function HeroSection() {
  return (
    <div className="flex flex-col items-center gap-6 py-24">
      {/* The hero moment — full bloom + halo */}
      <InfinityAnim size="xl" technique="dashes" />

      <h1 className="text-5xl font-bold tracking-tight">
        Welcome to OpenCosmos
      </h1>
    </div>
  );
}

Controls

Size

Technique

Two stacked stroke-dasharray streams on opposite lobes. Continuous at every size, more elegant inline.

Palette (dashes only)

Paused

Renders the brand mark as a static still — same image as motion intensity 0.

Speed (cycle duration)3.0s

Higher = slower orbit. Low values feel kinetic; high values (20s+) feel meditative.

Theme-aware

Default palette is derived from OrbBackground: deep blue #101499, purple #9c43fe, cyan #4cc2e9. Override per-instance via the colorTail / colorBody / colorHead props.