Players

Cross-platform transparent video players that render stacked-alpha videos with real-time compositing via WebGL (web) or Metal (iOS).

React / Next.js

@hypervideo-dev/react provides a WebGL-powered component for transparent video playback.

npm | GitHub

Installation

npm install @hypervideo-dev/react

Usage

import { StackedAlphaVideo } from '@hypervideo-dev/react';

export function TransparentMascot() {
  return (
    <StackedAlphaVideo
      src="/mascot-stacked.mp4"
      width={384}
      height={384}
      autoPlay
      loop
      muted
    />
  );
}

Props

Expo / React Native

@hypervideo-dev/expo uses native Metal rendering for transparent video on iOS.

npm | GitHub

Installation

npm install @hypervideo-dev/expo

Requires a development build (not Expo Go). iOS only.

Usage

import { StackedAlphaVideo } from '@hypervideo-dev/expo';

export function TransparentMascot() {
  return (
    <StackedAlphaVideo
      source={require('./mascot-stacked.mp4')}
      width={384}
      height={384}
      autoPlay
      loop
    />
  );
}

Swift (iOS / macOS)

Native Swift Package with Metal rendering for iOS and macOS apps.

GitHub

Installation

In Xcode: File → Add Package Dependencies → paste the repository URL:

https://github.com/hypersocialinc/hypervideo.git

Usage

import HypervideoVideo

struct TransparentMascotView: View {
  var body: some View {
    StackedAlphaVideoPlayer(
      url: URL(string: "https://example.com/mascot-stacked.mp4")!
    )
    .frame(width: 384, height: 384)
    .autoPlay(true)
    .loop(true)
  }
}

How It Works

All players use the stacked-alpha format: a standard H.264 video where the top half contains RGB color and the bottom half contains a grayscale alpha mask.

A GPU shader (WebGL or Metal) reads both halves and composites them in real-time, producing transparent output that renders on top of any background.

This approach works on every platform because it uses standard H.264 video (universally supported) and only requires a custom player for compositing.