Give Your App the Duolingo Effect

Transparent video with hardware-accelerated playback. Works natively in Android views, Jetpack Compose, and web views.

// Android - ExoPlayer with WebM alpha
val player = ExoPlayer.Builder(context).build()
player.setMediaItem(MediaItem.fromUri("mascot_wave.webm"))
player.prepare()

APNG renders in UIImageView with no extra libraries. ProRes MOV gives you alpha channel video for AVPlayer overlays.

// iOS - Display APNG in UIImageView
let imageView = UIImageView()
imageView.image = UIImage.animatedImage(
  withAnimatedGIFURL: Bundle.main.url(
    forResource: "mascot_wave", withExtension: "png"
  )!
)

Use react-native-video for WebM on Android, APNG on iOS. Or export as Lottie for cross-platform consistency.

// React Native - Platform-specific mascot
import Video from 'react-native-video';

<Video
  source={Platform.select({
    android: require('./mascot_wave.webm'),
    ios: require('./mascot_wave.mov'),
  })}
  style={{ width: 200, height: 200 }}
/>

Flutter handles WebM via video_player on Android. For iOS, use APNG with the apng package or spritesheets with flame engine.

// Flutter - Animated mascot widget
VideoPlayerController controller =
  VideoPlayerController.asset('assets/mascot_wave.webm');

@override
Widget build(BuildContext context) {
  return AspectRatio(
    aspectRatio: controller.value.aspectRatio,
    child: VideoPlayer(controller),
  );
}