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

# Key Applications for Livepeer

> Key Applications of Livepeer from the hobby developer to the Fortune 500.

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 LazyLoad = ({children, height = "200px", offset = "200px", fadeDuration = 400, className = "", style = {}, ...rest}) => {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  const [ready, setReady] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setVisible(true);
        observer.disconnect();
      }
    }, {
      rootMargin: offset
    });
    observer.observe(el);
    return () => observer.disconnect();
  }, []);
  useEffect(() => {
    if (!visible) return;
    const frameId = requestAnimationFrame(() => {
      setReady(true);
    });
    return () => cancelAnimationFrame(frameId);
  }, [visible]);
  const placeholder = <div ref={ref} className={className} style={{
    minHeight: height,
    ...style
  }} {...rest} />;
  if (!visible) return placeholder;
  return <div ref={ref} className={className} style={{
    opacity: ready ? 1 : 0,
    transition: `opacity ${fadeDuration}ms ease-in`,
    ...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>;
};

<Columns cols={3}>
  <LazyLoad height="350px">
    <iframe src="https://platform.twitter.com/embed/Tweet.html?id=1983846299586683236&theme=dark" className="lp-tweet-frame-small" title="MyLordBebo on X" />
  </LazyLoad>

  <LazyLoad height="350px">
    <iframe src="https://platform.twitter.com/embed/Tweet.html?id=1983585881865982149&theme=dark" className="lp-tweet-frame-small" title="skalskip92 on X" />
  </LazyLoad>

  <LazyLoad height="350px">
    <iframe src="https://platform.twitter.com/embed/Tweet.html?id=1981406315693187430&theme=dark" className="lp-tweet-frame-small" title="mattshumer_ on X" />
  </LazyLoad>
</Columns>

<CustomDivider margin="0 0 -2rem 0" />

{/* -> The verticals livepeer works for */}

## **Verticals where video is now essential**&#x20;

Video is integral to the success of many of the applications we use daily. <br />

<Columns cols={3}>
  <DisplayCard icon="hashtag" title="Social Media">
    Video posts, Livestreams, Creator economy apps
  </DisplayCard>

  <DisplayCard icon="calendar" title="Events & Conferences">
    Hybrid attendance, Global livestreaming
  </DisplayCard>

  <DisplayCard icon="microphone" title="Creators & Entertainment">
    Podcasts, Tutorials, Livestream shows
  </DisplayCard>

  <DisplayCard icon="graduation-cap" title="Education">
    Recorded lectures, Interactive classrooms
  </DisplayCard>

  <DisplayCard icon="gamepad" title="Gaming & Esports">
    Live game broadcasts, VOD clips
  </DisplayCard>

  <DisplayCard icon="cart-shopping" title="E-commerce">
    Product demos, Livestream shopping
  </DisplayCard>

  <DisplayCard icon="heart-pulse" title="Health & Telemedicine">
    Remote care via video consults
  </DisplayCard>

  <DisplayCard icon="shield-halved" title="Security & Monitoring">
    Real-time camera feeds, Analytics
  </DisplayCard>

  <DisplayCard icon="briefcase" title="Work & Collaboration">
    Remote meetings, Async video updates
  </DisplayCard>

  <DisplayCard icon="wand-magic-sparkles" title="AI-generated Media">
    Generative video, Captions, Upscaling
  </DisplayCard>

  <DisplayCard icon="circle-play" title="AI-powered Video">
    Real-time effects, Object tracking, Smart editing
  </DisplayCard>
</Columns>

## **Products that wouldn’t exist without video**

1. **TikTok** (short-form social video sharing)
2. **Zoom** (real-time video conferencing)
3. **Twitch** (live game streaming)
4. **YouTube** (open video hosting + creator monetisation)
5. **FaceTime/Google Meet** (consumer video calling)
6. **Peloton** (live video-driven fitness classes)
7. **Ring/Nest Cam** (real-time camera security)
8. **Telehealth apps** (video-first remote medical consultations)
9. **Online education platforms** like Coursera/Udacity (video-based learning)
10. **Virtual events platforms** (Devcon/ETH CC streaming, powered by infrastructures like Livepeer)