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

# The Livepeer Advantage

> Livepeer offers an open, cost-effective, performant, and scalable trusted execution layer for the interactive AI-first internet.

export const WidthCard = ({width = '80%', children, cardProps, className = "", style = {}, ...rest}) => {
  return <div className={className} style={{
    display: 'flex',
    justifyContent: 'center',
    minWidth: 'fit-content',
    ...style
  }} {...rest}>
      <div style={{
    width: width
  }}>
        <Card {...cardProps}>{children}</Card>
      </div>
    </div>;
};

export const CustomCardTitle = ({icon, title, variant = "card", iconSize, style = {}, className = "", ...rest}) => {
  const variants = {
    card: {
      display: 'flex',
      alignItems: 'center',
      gap: "var(--lp-spacing-2)",
      marginBottom: "var(--lp-spacing-3)",
      color: 'var(--lp-color-text-primary)',
      fontSize: '1rem',
      fontWeight: 600
    },
    accordion: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: "var(--lp-spacing-2)"
    },
    tab: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: '0.4rem',
      fontSize: '0.875rem'
    }
  };
  const sizes = {
    card: 20,
    accordion: 18,
    tab: 14
  };
  const size = iconSize || sizes[variant] || 20;
  const baseStyle = variants[variant] || variants.card;
  return variant === 'card' ? <div className={className} style={{
    ...baseStyle,
    ...style
  }} {...rest}>
      {typeof icon === 'string' ? <Icon icon={icon} size={size} color="var(--lp-color-accent)" /> : icon}
      {title}
    </div> : <span className={className} style={{
    ...baseStyle,
    ...style
  }} {...rest}>
      {typeof icon === 'string' ? <Icon icon={icon} size={size} color="var(--lp-color-accent)" /> : icon}
      {title}
    </span>;
};

export const FrameQuote = ({children, author, source, href, frame = true, align = 'right', borderColor, img, spacing = true, className = "", style = {}, ...props}) => {
  const alignmentMap = {
    left: 'flex-start',
    center: 'center',
    right: 'flex-end'
  };
  const content = <blockquote style={{
    display: 'flex',
    flexDirection: 'column',
    padding: '0.75rem 1rem 0.25rem 1rem',
    gap: "var(--lp-spacing-1)",
    margin: 0
  }}>
      <div style={{
    borderLeft: `4px solid var(--lp-color-accent)`,
    paddingLeft: "var(--lp-spacing-4)",
    fontStyle: 'italic'
  }}>
        {children}
      </div>
      {(author || source) && <div style={{
    display: 'flex',
    justifyContent: alignmentMap[align] || 'flex-end',
    marginLeft: align === 'left' ? "var(--lp-spacing-6)" : 0
  }}>
          <div style={{
    textAlign: align === 'center' ? 'center' : 'left'
  }}>
            {author && <div>
                {spacing && <br />}
                <Icon icon="microphone" />{' '}
                <strong>
                  <em>{author}</em>
                </strong>
              </div>}
            {source && (href ? <a href={href} target="_blank" rel="noopener noreferrer">
                  <span style={{
    opacity: 0.7,
    fontStyle: 'italic',
    borderBottom: '1px solid var(--lp-color-accent)',
    fontSize: "1rem"
  }}>
                    {source}
                  </span>{' '}
                  <Icon icon="arrow-up-right" size={12} color="var(--lp-color-accent)" />
                </a> : <span style={{
    opacity: 0.7,
    fontStyle: 'italic',
    fontSize: "1rem"
  }}>
                  {source}
                </span>)}
          </div>
        </div>}
    </blockquote>;
  return frame ? <div className={className} style={{
    border: borderColor ? `1px solid ${borderColor}` : 'none',
    borderRadius: "8px",
    overflow: 'hidden',
    ...style
  }} {...props}>
      <Frame style={{
    border: 'none'
  }}>
        {img && <img src={img.src} alt={img.alt} />}
        {content}
      </Frame>
    </div> : content;
};

export const CustomDivider = ({color = "var(--lp-color-border-default)", middleText = "", spacing = "default", style = {}, className = "", ...rest}) => {
  const spacingPresets = {
    default: {
      margin: "24px 0"
    },
    overlap: {
      margin: "-1rem 0 -1rem 0"
    },
    tight: {
      margin: "0 0 -1rem 0"
    },
    section: {
      margin: "0 0 -2rem 0"
    },
    sectionOverlap: {
      margin: "-1rem 0 -2rem 0"
    },
    deepOverlap: {
      margin: "-1rem 0 -1.5rem 0"
    }
  };
  const spacingStyle = spacingPresets[spacing] || spacingPresets.default;
  return <div role="separator" aria-orientation="horizontal" className={className} style={{
    display: "flex",
    alignItems: "center",
    ...spacingStyle,
    fontSize: style?.fontSize || "16px",
    height: "fit-content",
    ...style
  }} {...rest}>
      <span style={{
    marginRight: "var(--lp-spacing-px-8)",
    opacity: 0.2
  }}>
        <Icon icon="/snippets/assets/logos/Livepeer-Logo-Symbol-Theme.svg" />
      </span>
      <div style={{
    flex: 1,
    height: "1px",
    background: "var(--lp-color-border-default)",
    opacity: 0.4
  }}></div>
      {middleText && <>
          <Icon icon="circle" size={2} />
          <span style={{
    margin: "0 8px",
    fontWeight: "bold",
    color: color,
    opacity: 0.7
  }}>
            {middleText}
          </span>
          <Icon icon="circle" size={2} />
        </>}
      <div style={{
    flex: 1,
    height: "1px",
    background: "var(--lp-color-border-default)",
    opacity: 0.4
  }}></div>
      <span style={{
    marginLeft: "var(--lp-spacing-px-8)",
    opacity: 0.2
  }}>
        <span style={{
    display: "inline-block",
    transform: "scaleX(-1)"
  }}>
          <Icon icon="/snippets/assets/logos/Livepeer-Logo-Symbol-Theme.svg" />
        </span>
      </span>
    </div>;
};

export const LinkArrow = ({href, label, description, newline = true, borderColor, className = '', style = {}, ...rest}) => {
  const linkArrowStyle = {
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: "var(--lp-spacing-1)",
    width: 'fit-content',
    ...borderColor && ({
      borderColor
    })
  };
  return <span className={className} style={style} {...rest}>
      {newline && <br />}
      <span style={linkArrowStyle}>
        <a href={href} target="_blank" rel="noopener noreferrer">
          {label}
        </a>
        <Icon icon="arrow-up-right" size={14} color="var(--lp-color-accent)" />
      </span>
      {description && description}
      {description && <div style={{
    height: "var(--lp-spacing-3)"
  }} />}
    </span>;
};

export const Image = ({src, alt = "", caption, icon, hint, fullwidth = true, className = "", style = {}, ...rest}) => {
  icon = icon ? icon : "arrow-turn-down-right";
  return <Frame caption={caption} hint={hint} className={className} style={style} {...rest}>
      <img src={src} alt={alt} style={{
    width: fullwidth ? "100%" : undefined
  }} />
    </Frame>;
};

export const YouTubeVideo = ({embedUrl, url, title = "", author = "", hint = "", caption, className = "", style = {}, ...rest}) => {
  const toEmbedUrl = value => {
    if (!value || typeof value !== "string") return "";
    const source = value.trim();
    if (!source) return "";
    try {
      const parsed = new URL(source);
      const host = parsed.hostname.replace(/^www\./, "");
      if (host === "youtube.com" || host === "youtube-nocookie.com") {
        if (parsed.pathname.startsWith("/embed/")) return source;
        const videoId = parsed.pathname.startsWith("/shorts/") ? parsed.pathname.split("/").filter(Boolean)[1] : parsed.searchParams.get("v");
        if (!videoId) return "";
        const params = new URLSearchParams(parsed.search);
        params.delete("v");
        const query = params.toString();
        return `https://www.youtube.com/embed/${videoId}${query ? `?${query}` : ""}`;
      }
      if (host === "youtu.be") {
        const videoId = parsed.pathname.split("/").filter(Boolean)[0];
        if (!videoId) return "";
        const query = parsed.searchParams.toString();
        return `https://www.youtube.com/embed/${videoId}${query ? `?${query}` : ""}`;
      }
    } catch (_err) {
      return "";
    }
    return "";
  };
  const resolvedEmbedUrl = toEmbedUrl(embedUrl || url);
  if (!resolvedEmbedUrl) {
    return null;
  }
  const isValidYouTubeUrl = resolvedEmbedUrl.includes("youtube.com/embed/");
  if (!isValidYouTubeUrl) {
    console.warn("Invalid YouTube embed URL:", embedUrl || url);
    return null;
  }
  const buildCaption = () => {
    if (caption) return caption;
    if (!author && !title) return null;
    return <span style={{
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      textAlign: "center",
      lineHeight: 1.2
    }}>
        <span>
          {author && <>
              <Icon icon="microphone" size={16} /> <strong>{author}</strong>
            </>}
          {author && title ? `${" "} • ${title}` : title}
        </span>
      </span>;
  };
  const captionContent = buildCaption();
  return <Frame className={className} style={style} {...hint ? {
    hint
  } : {}} {...captionContent ? {
    caption: captionContent
  } : {}} {...rest}>
      <iframe className="w-full aspect-video rounded-xl" src={resolvedEmbedUrl} title={title || author || "YouTube Video"} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
    </Frame>;
};

<FrameQuote author="Doug Petkanics" source="Livepeer in the age of AI" href="https://forum.livepeer.org/t/livepeer-inc-in-the-age-of-the-livepeer-foundation/2850">
  Video is evolving - ***fast***. <br /><br />
  The explosion of AI video generation and manipulation is creating entirely new classes of applications that need powerful, cost-effective, programmable video infrastructure. <br /><br />
  Livepeer is uniquely positioned to serve this need.
</FrameQuote>

<CustomDivider />

As video becomes the dominant interface for the internet and AI transforms how it’s created, processed,
and experienced, the underlying infrastructure needs AI-native, real-time, performant systems that meet this demand.

{/* Why Livepeer is the best choice for your next project. Use Cases & Applications */}

Listen to early Livepeer advocate, [Shannon Wells](https://www.linkedin.com/in/shannon-wells/), discuss how Livepeer is becoming the real-time media substrate of the new, AI-powered internet.

<YouTubeVideo embedUrl="https://www.youtube.com/embed/_PnB7Kc9zx4?si=vadxm0bb51zBxRQH" caption="Livepeer as the trusted execution layer of the interactive AI-first internet" />

## The Livepeer Advantage

For developers and startups, Livepeer lowers the barrier to building video products at scale. Usage-based pricing, open APIs, and composable architecture reduce upfront costs and long-term dependency on hyperscalers. Teams can move faster, experiment freely, and build differentiated video experiences without negotiating complex cloud contracts or absorbing runaway GPU bills.

<Columns cols={2}>
  <Card title={<CustomCardTitle variant="card" icon="circle-play" title="Real-time AI-Infrastructure" iconSize={28} />}>
    *Designed for real-time interactive media AI*

    Livepeer is positioned for the fastest-growing class of video workloads - ranging from AI video to on-demand translation, music transforms and more, these workloads require low latency, high throughput, and elastic scaling.
  </Card>

  <Card title={<CustomCardTitle variant="card" icon="hand-holding-dollar" title="Democratised Value Capture" iconSize={28} />}>
    *Value accrual belongs to the value creators. **Permanently**.*

    Livepeer is a creator-first infrastructure: designed to enable builders, innovators and key participants to own and control their pricing, models, innovations and applications.
  </Card>

  <Card title={<CustomCardTitle variant="card" icon="lock" title="Provenance and Trust" iconSize={28} />}>
    *Verifiable Compute and Provenance Primitives*

    With AI becoming indistinguishable from human artefact, trust and verifiability are no longer optional. Backed by blockchain guarantees, Livepeer enables trust primitives for AI products: provenance, integrity, auditability.
  </Card>

  <Card title={<CustomCardTitle variant="card" icon="dollar-sign" title="Universal Payment Rails" iconSize={28} />}>
    *On-demand, agentic-friendly financial framework*

    Livepeer offers the core payment rails and architecture agents workflows rely on: pay-as-you-go, on-demand, global payments - no bank account required.
  </Card>

  <Card title={<CustomCardTitle variant="card" icon="globe-wifi" title="Automagic Scalability" iconSize={28} />}>
    *Elastic capacity for enterprise-grade reliability*

    Livepeer's open GPU marketplace offers both resilience, performance and on-demand scalability - with 5,800+ GPUs, 100% uptime, and 85M+ in paid fees-built for production workloads that need reliability and elastic scaling.
  </Card>

  <Card title={<CustomCardTitle variant="card" icon="lightbulb" title="Crowd-Powered Innovation" iconSize={28} />}>
    *Open Access drives Accelerated Capabilities*

    Livepeer’s community driven, open source, open access design is a 10x iteration engine. New models and capabilities can be deployed network-wide as soon as they emerge - accelerating user capabilities and innovation.
  </Card>
</Columns>

<br />

By separating infrastructure from platforms that control attention and monetisation, Livepeer enables a more competitive,
cooperative, innovative ecosystem: where creators, developers, and businesses can all collaborate in shaping the future of video.

<br />

<WidthCard title={<CustomCardTitle icon="video-camera" title="See what creators are building on Livepeer" />} href="/v2/home/solutions/showcase" horizontal arrow>
  Explore the Livepeer Project Showcase
</WidthCard>

## Technical Benefits

*Livepeer is purpose-built for real-time video and AI workloads*. Its distributed network of globally distributed GPUs is optimised for low-latency, real-time processing, making it well suited for live streaming, interactive video, and AI-driven enhancements.

Designed for low-latency **video ingest → processing → delivery**, and the ability to **deploy custom workflows** (model chains + pre/post processors) as a first-class unit of work.

<Image src="/snippets/assets/media/images/home/LivepeerStats.png" alt="Livepeer Technical Benefits" href="https://explorer.livepeer.org" caption={<LinkArrow label="View on Livepeer Explorer" href="https://explorer.livepeer.org" />} />

By routing jobs across heterogeneous hardware, Livepeer delivers cost-efficient, performant and flexible infrastructure that scales with demand and adapts as video workflows evolve.

**Livepeer delivers**

* Low Latency, Performant Infrastructure
* On-demand cost-effective pricing
* Automagic Scalability
* Open, Composable Architecture
* Community-Driven Innovation
* An Active and Passionate Developer Community

{/* ## Livepeer Offers

- On-demand, open-access, real-time video broadcasting at a fraction of the price of cloud equivalents
- On-demand, open-access AI pipelines */}