> ## 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.

# Livepeer Story

> How Livepeer began with video streaming and grew to become the open AI-infrastructure for real-time Interactive Video & world models.

export const FlexContainer = ({children, direction = "row", gap = "var(--lp-spacing-4)", align = "flex-start", justify = "flex-start", wrap = false, marginTop = "", marginBottom = "", margin = "", padding = "", style = {}, className = "", ...rest}) => {
  return <div className={className} style={{
    display: "flex",
    flexDirection: direction,
    gap: gap,
    alignItems: align,
    justifyContent: justify,
    flexWrap: wrap ? "wrap" : "nowrap",
    ...margin ? {
      margin
    } : {},
    ...padding ? {
      padding
    } : {},
    ...marginTop ? {
      marginTop
    } : {},
    ...marginBottom ? {
      marginBottom
    } : {},
    ...style
  }} {...rest}>
      {children}
    </div>;
};

export const DisplayCard = ({icon, title, style, background = 'var(--lp-color-bg-card)', children, className = "", ...rest}) => {
  if (!title) {
    console.warn("[DisplayCard] Missing required prop: title");
    return null;
  }
  const cardStyle = {
    display: 'flex',
    flexDirection: 'column',
    height: 'calc(100% - 1rem)',
    border: '1px solid var(--lp-color-accent)',
    borderRadius: '8px',
    padding: "var(--lp-spacing-4)",
    marginBottom: "var(--lp-spacing-4)",
    backgroundColor: 'var(--lp-color-bg-page)',
    gap: "var(--lp-spacing-4)"
  };
  const titleStyle = {
    display: 'flex',
    alignItems: 'center',
    gap: "var(--lp-spacing-2)",
    marginBottom: '0',
    color: 'var(--lp-color-text-primary)',
    fontSize: '1rem',
    fontWeight: 600,
    ...style
  };
  const bodyStyle = {
    display: 'flex',
    flexDirection: 'column',
    backgroundColor: background,
    borderRadius: '8px',
    flex: 1,
    padding: "var(--lp-spacing-2)",
    margin: 0
  };
  return <div className={className} style={cardStyle} {...rest}>
      <div style={titleStyle}>
        <Icon icon={icon} size={20} color="var(--lp-color-accent)" />
        {title}
      </div>
      <div style={bodyStyle}>{children}</div>
    </div>;
};

export const QuadGrid = ({children, icon = "arrows-spin", iconSize = 50, iconColor = "var(--lp-color-accent)", iconBackgroundColor = "transparent", gap, spinDuration = "10s", className = "", style = {}, ...rest}) => {
  if (children == null) {
    console.warn("[QuadGrid] Missing children");
    return null;
  }
  return <div className={className} style={{
    position: "relative",
    ...style
  }} {...rest}>
      <style>{`
        @keyframes quadGridSpin {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
        .lp-quad-grid-layout {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          grid-auto-rows: 1fr;
          gap: var(--lp-quad-grid-gap, 0);
        }
        @media (max-width: 768px) {
          .lp-quad-grid-layout {
            grid-template-columns: 1fr;
          }
        }
        @media (prefers-reduced-motion: reduce) {
          .lp-quad-grid-icon {
            animation: none !important;
          }
        }
      `}</style>
      <div className="lp-quad-grid-layout" style={{
    "--lp-quad-grid-gap": gap
  }}>
        {children}
      </div>
      <div style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 10
  }}>
        <div className="lp-quad-grid-icon" style={{
    backgroundColor: iconBackgroundColor,
    borderRadius: "50%",
    padding: "var(--lp-spacing-2)",
    animation: `quadGridSpin ${spinDuration} linear infinite`
  }}>
          <Icon icon={icon} size={iconSize} color={iconColor} />
        </div>
      </div>
    </div>;
};

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 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 Quote = ({children, className = "", style = {}, ...rest}) => {
  const quoteStyle = {
    fontSize: "1rem",
    textAlign: 'center',
    opacity: 1,
    fontStyle: 'italic',
    color: 'var(--lp-color-accent)',
    border: '1px solid var(--lp-color-border-default)',
    borderRadius: "8px",
    padding: "var(--lp-spacing-4)",
    margin: '1rem 0',
    ...style
  };
  return <blockquote className={className} style={quoteStyle} {...rest}>{children}</blockquote>;
};

export const GotoCard = ({label, relativePath, icon, text, cta = '', className = '', style = {}, ...props}) => {
  icon = icon ? icon : 'arrow-turn-down-right';
  return <Card title={label} icon={icon} href={relativePath} cta={cta} className={className} style={style} {...props}>
      {text}
    </Card>;
};

export const GotoLink = ({label, relativePath, text = '', icon = 'arrow-turn-down-right', className = '', style = {}, ...rest}) => {
  return <span className={className} style={{
    display: 'inline-flex',
    alignItems: 'center',
    ...style
  }} {...rest}>
      <span style={{
    marginRight: 8
  }}>{text}</span>
      <Icon icon={icon} aria-hidden="true" />
      <a href={relativePath} style={{
    marginLeft: 6
  }}>
        {label}
      </a>
    </span>;
};

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>;
};

{/* Video of Doug talking about Livepeer */}

<Frame>
  <FlexContainer direction="column">
    <video controls className="w-full aspect-video rounded-xl" src="https://raw.githubusercontent.com/livepeer/docs/docs-v2-assets/snippets/assets/media/videos/livepeer-founders-post.mp4" />

    <FrameQuote author="Doug Petkanics" source="Livepeer Founder" frame={false}>
      Livepeer was founded on the belief that a decentralised network could power the future of video infrastructure at *internet scale*. <br /><br />
      That vision is now more relevant than ever - with the rise of realtime AI video workloads. <br />
    </FrameQuote>
  </FlexContainer>
</Frame>

<CustomDivider />

Livepeer was [founded](https://medium.com/livepeer-blog/the-livepeer-development-stack-technology-behind-live-streaming-built-on-ethereum-d6a06158d5e2) in 2017 by entrepreneurs
[Doug Petkanics](https://www.linkedin.com/in/doug-petkanics/) and [Eric Tang](https://www.linkedin.com/in/erictang/), who,
frustrated by the high costs and rigid infrastructure of existing video streaming solutions, wondered:

<Quote>
  What if video - the most captivating, expressive medium online - ran on open, permissionless infrastructure instead of expensive, proprietary systems?
</Quote>

This conviction, alongside a deep belief in both the practical need and open source potential of decentalised open infrastructure, led them to found Livepeer.

Doug and Eric set out to revolutionise video streaming infrastructure from the hardware infrastructure up by:

* Turning idle GPUs around the world into a competitive marketplace,
* Using crypto-economic incentives to guarantee reliability and quality,
* Delivering measurable cost reductions via decentralised economies of scale.

## Livepeer Vision

From the beginning, Livepeer’s goal has been simple but ambitious:

*Make video infrastructure open, permissionless, and economically efficient - the way the internet itself was meant to be.*

As video becomes increasingly real-time, interactive, and AI-driven, Livepeer is evolving to meet the next wave of demand: real-time AI video pipelines.

{/* That vision remains unchanged today, as Livepeer continues to evolve from a video streaming network to a full-stack AI infrastructure. Livepeer's mission is to enable next-generation applications in interactive media, AI training, and digital creativity.
Livepeer’s end goal is to [serve](https://medium.com/livepeer-blog/livepeer-for-beginners-3b49945c24a7?source=collection_home---------163----------------------------)
as the infrastructure service layer for decentralised streaming & AI, [making](https://livepeer.org/primer) video streaming more reliable and affordable, & AI more accessible. */}

<YouTubeVideo embedUrl="https://www.youtube.com/embed/BXMArwnp-No?si=TYSJUyxshUPKS1h4" />

## Core Mission

Since its launch in 2017, Livepeer’s mission has been to deliver affordable, performant open video & AI infrastructure rooted in decentralised video technology enabled by cryptoeconomic primitives.

Today, Livepeer is a respected and trusted brand, enabling internet-scale, next-generation applications in interactive media, AI training, and digital creativity.

Livepeer is on a mission to give innovators and creators the tools they need to build the future of interactive media experiences.

{" "}

**Core Pillars**

This mission drives the why's of Livepeer and informs its competitive edge and business advantage.
The network's strategy is built upon a foundation of core value propositions and messaging pillars derived from this mission:

<QuadGrid icon="arrows-spin" iconSize={50}>
  <DisplayCard title="Real-time Performance" icon="bolt">
    Industry-standard low latency optimised for real-time video AI and media, enabling sub-second inference and proven scalability.
  </DisplayCard>

  <DisplayCard title="Cost Efficiency" icon="piggy-bank">
    Access to GPU compute at 5–10x lower cost through an open marketplace with transparent on-chain economics and a pay-per-use model.
  </DisplayCard>

  <DisplayCard title="Automagic Scalability" icon="arrows-maximize">
    Scale capacity up or down dynamically in real-time via an elastic network supply, smart routing, and incentivised idle GPU utilisation.
  </DisplayCard>

  <DisplayCard title="Openness & Community" icon="people-group">
    Permissionless, open-source, community-driven infrastructure that provides global access, on-chain verifiable compute, and rewards all participants.
  </DisplayCard>
</QuadGrid>

{/* # Why Livepeer? */}

{/* ## Livepeer Advantages

- 60% cheaper than cloud for video broadcasting
- Built-in redundancy & network resilience (thanks to a distributed open access compute)
- Lower latency (thanks to global distributed nodes - your neighbour might be running the compute you're using!)
- On-demand pricing - only pay for what you use - forever.
- Open Software (forever - developers can rest easy knowing their businesses will never be at risk of APIs getting closed-sourced)
- Verifiable and auditable jobs (which AI loves)
- Permissionless, open network - you don't need to talk to sales to try it out or join the innvoation economy */}

{/* <GotoCard
label="Read More in this blog post"
relativePath="https://blog.livepeer.org/introducing-livepeer-cascade-a-vision-for-livepeers-future-in-the-age-of-real-time-ai-video/"
text=""
/> */}

{/*
Roadmap Milestones would be good & invite community to build the future with us / takes a village ...

... Image quote here -> the future is what we create today .. */}