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

# What's Next for Livepeer?

> What's next for Livepeer? A look at the Livepeer Foundation Roadmap - get involved!

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 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 BorderedBox = ({children, variant = "default", padding = "var(--lp-spacing-4)", borderRadius = "var(--lp-spacing-px-8)", margin = "", accentBar = "", style = {}, className = "", ...rest}) => {
  const variants = {
    default: {
      border: "1px solid var(--lp-color-border-default)",
      backgroundColor: "var(--lp-color-bg-card)"
    },
    accent: {
      border: "1px solid var(--lp-color-accent)",
      backgroundColor: "var(--lp-color-bg-card)"
    },
    muted: {
      border: "1px solid var(--lp-color-border-default)",
      backgroundColor: "transparent"
    }
  };
  const accentBarColors = {
    accent: "var(--lp-color-accent)",
    positive: "var(--green-9)"
  };
  return <div data-docs-bordered-box="" data-accent-bar={accentBarColors[accentBar] ? "" : undefined} className={className} style={{
    ...variants[variant],
    padding: padding,
    borderRadius: borderRadius,
    ...margin ? {
      margin
    } : {},
    ...accentBarColors[accentBar] ? {
      position: "relative",
      '--accent-bar-color': accentBarColors[accentBar]
    } : {},
    ...style
  }} {...rest}>
      {children}
    </div>;
};

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

<WidthCard
  cardProps={{
title: "Livepeer AI x Open Media Forum",
icon: "lightbulb",
img: "/snippets/assets/media/images/AIxOpenMediaBlog.png",
href: "https://blog.livepeer.org/ai-x-open-media-forum-building-new-wave-creativity/",
horizontal: true,
arrow: true,
}}
>
  *If AI is rewriting the conditions of cultural production, the people building the tools and the people using them need to be in the same room.*
</WidthCard>

<CustomDivider style={{ margin: "0 0 -1rem 0"}} />

## [Roadmap](https://roadmap.livepeer.org) <Icon icon="arrow-up-right" />

As AI models evolve toward [world models](https://www.nvidia.com/en-us/glossary/world-models/), autonomous agents, and real-time simulation, demand for open GPU infrastructure continues to be exponential.

Livepeer meets this dynamic need and is expanding its interactive media capabilities - embedding provenance, trust & authenticity into world models and the Livepeer network.

<Quote>Livepeer is building the **open execution layer** for internet-scale *real-time media experiences*. </Quote>

**Affordable. Performant. Dynamically Scalable.**

<Frame caption="Livepeer Roadmap">
  <iframe src="https://roadmap.livepeer.org" style={{width: '100%', height: '1500px', border: 'none', borderRadius: '12px'}} title="Livepeer Roadmap" />
</Frame>