> ## Documentation Index
> Fetch the complete documentation index at: https://omss.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# OMSS — Open Media Streaming Standard

> The unified open standard powering the next generation of media streaming infrastructure.

export const FeatureCard = ({icon, title, description}) => <div className="group flex flex-col gap-3 p-6 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:border-blue-500 dark:hover:border-blue-500 transition-all duration-200 hover:shadow-lg hover:shadow-blue-500/10">
        <div className="text-2xl">{icon}</div>
        <h3 className="font-semibold text-zinc-900 dark:text-zinc-50 text-base">{title}</h3>
        <p className="text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed">{description}</p>
    </div>;

export const NavCard = ({title, description, href, badge}) => <a href={href} className="group flex flex-col gap-2 p-6 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:border-blue-500 dark:hover:border-blue-500 transition-all duration-200 hover:shadow-lg hover:shadow-blue-500/10 no-underline">
        <div className="flex items-center justify-between">
            <h3 className="font-semibold text-zinc-900 dark:text-zinc-50 text-base group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{title}</h3>
            {badge && <span className="text-xs px-2 py-0.5 rounded-full bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 font-medium">{badge}</span>}
        </div>
        <p className="text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed">{description}</p>
        <span className="text-blue-600 dark:text-blue-400 text-sm font-medium mt-1 group-hover:underline">Explore →</span>
    </a>;

export const StatBadge = ({value, label}) => <div className="flex flex-col items-center gap-1">
        <span className="text-3xl font-bold text-blue-600 dark:text-blue-400 tabular-nums">{value}</span>
        <span className="text-xs text-zinc-500 dark:text-zinc-400 uppercase tracking-widest">{label}</span>
    </div>;

<div className="relative overflow-hidden">
  <div className="omss-hero-bg absolute inset-0 pointer-events-none" />

  <div className="relative px-6 pt-20 pb-20 max-w-4xl mx-auto text-center">
    <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-blue-950/40 text-blue-700 dark:text-blue-300 text-xs font-semibold uppercase tracking-widest mb-8">
      <span className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse" />

      OMSS v1.1 released!
    </div>

    <img src="https://mintcdn.com/omss/_44Z-cEyNoVrULfb/assets/logo-light.svg?fit=max&auto=format&n=_44Z-cEyNoVrULfb&q=85&s=c3ad82c51fbea6322b7a6cdbbd3c23b0" alt="OMSS Logo" className="block dark:hidden mx-auto h-40 mb-6" width="1240" height="550" data-path="assets/logo-light.svg" />

    <img src="https://mintcdn.com/omss/_44Z-cEyNoVrULfb/assets/logo-dark.svg?fit=max&auto=format&n=_44Z-cEyNoVrULfb&q=85&s=526b350842e3dbc9725d1607260cc8f3" alt="OMSS Logo" className="hidden dark:block mx-auto h-40 mb-6" width="1240" height="550" data-path="assets/logo-dark.svg" />

    <h1 className="text-5xl lg:text-6xl font-bold text-zinc-900 dark:text-zinc-50 tracking-tight leading-tight">
      Developing the Future of

      <br />

      <span className="omss-gradient-text">Standardized Media Streaming</span>
    </h1>

    <p className="mt-6 text-lg text-zinc-500 dark:text-zinc-400 max-w-2xl mx-auto leading-relaxed">
      OMSS defines a unified API for streaming media backends — enabling any frontend to seamlessly integrate with any OMSS-compliant backend through standardized endpoints, schemas, and data
      formats.
    </p>

    <div className="mt-10 flex flex-wrap gap-3 justify-center">
      <a href="/quickstart" className="omss-btn-primary inline-flex items-center gap-2 px-6 py-3 rounded-xl text-sm font-semibold text-white no-underline transition-all duration-200 hover:opacity-90 hover:shadow-lg hover:shadow-blue-500/30 hover:-translate-y-0.5">
        Get Started →
      </a>

      <a href="/spec" className="inline-flex items-center gap-2 px-6 py-3 rounded-xl text-sm font-semibold text-zinc-700 dark:text-zinc-200 border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 no-underline transition-all duration-200 hover:border-blue-500 dark:hover:border-blue-500">
        View Specification
      </a>
    </div>
  </div>
</div>

<div className="max-w-3xl mx-auto px-6 pb-16">
  <div className="flex flex-wrap justify-center gap-12 py-8 border-y border-zinc-200 dark:border-zinc-800">
    <StatBadge value="1" label="Open Standard" />

    <StatBadge value="10k+" label="Endusers using OMSS" />

    <StatBadge value="MIT" label="License" />
  </div>
</div>

<div className="max-w-5xl mx-auto px-6 pb-20">
  <div className="text-center mb-10">
    <h2 className="text-2xl font-bold text-zinc-900 dark:text-zinc-50 tracking-tight">Why OMSS?</h2>
    <p className="mt-2 text-zinc-500 dark:text-zinc-400 text-sm">One standard. Every streaming platform.</p>
  </div>

  <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
    <FeatureCard icon="🔌" title="Universal Compatibility" description="Any OMSS-compliant frontend works with any OMSS-compliant backend — no custom glue code required." />

    <FeatureCard icon="📐" title="Strict Schema Design" description="Precisely defined data models and endpoint contracts eliminate ambiguity across implementations." />

    <FeatureCard icon="⚡" title="Production-Ready" description="Built for real-world media streaming workloads — live, VOD, adaptive bitrate, and beyond." />

    <FeatureCard icon="🌐" title="Open & Community-Driven" description="Governed openly on GitHub. Anyone can contribute, propose changes, or build compliant implementations." />

    <FeatureCard icon="🔒" title="Interoperability First" description="Swap backends without rewriting frontends. Swap frontends without renegotiating contracts." />

    <FeatureCard icon="📦" title="Official SDKs" description="Typed client libraries for major languages to accelerate compliant implementation building." />
  </div>
</div>

<div className="max-w-5xl mx-auto px-6 pb-20">
  <div className="text-center mb-10">
    <h2 className="text-2xl font-bold text-zinc-900 dark:text-zinc-50 tracking-tight">Start Building</h2>
    <p className="mt-2 text-zinc-500 dark:text-zinc-400 text-sm">Everything you need to adopt or implement OMSS.</p>
  </div>

  <div className="grid sm:grid-cols-2 gap-4">
    <NavCard title="Quickstart" description="Get from zero to a running OMSS-compliant integration in minutes." href="/quickstart" badge="Start here" />

    <NavCard title="Specification" description="The full OMSS API specification — endpoints, schemas, and data formats." href="/spec" />

    <NavCard title="SDK Reference" description="Official typed client libraries for TypeScript, Python, and more." href="/sdk" />

    <NavCard title="Contributing" description="Help shape the standard — learn how to propose changes, report issues, and contribute." href="/contributing" />
  </div>
</div>

<div className="max-w-3xl mx-auto px-6 pb-24 text-center">
  <div className="omss-cta-card rounded-2xl p-10">
    <h2 className="text-2xl font-bold text-white tracking-tight">Join the OMSS Ecosystem</h2>
    <p className="mt-3 text-blue-100 text-sm leading-relaxed max-w-lg mx-auto">Build compliant backends. Ship interoperable frontends. Help define the standard that connects them.</p>

    <div className="mt-8 flex flex-wrap gap-3 justify-center">
      <a href="https://github.com/omss-spec" className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-semibold bg-white text-blue-700 no-underline transition-all duration-200 hover:bg-blue-50">
        GitHub Organization →
      </a>

      <a href="/spec" className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-semibold bg-blue-500/20 text-white border border-white/20 no-underline transition-all duration-200 hover:bg-blue-500/30">
        Read the Spec
      </a>
    </div>
  </div>
</div>