Skip to content
Native Animation
Mini Player Expand animation preview

This preview uses fictional demo content. See the props below for the customization options available in this component.

npx nativeanimation add mini-player-expand
Glass

Mini Player Expand

A music player that expands from a compact glass bar, with configurable artwork, track copy, dominant color, and fonts.

$9 for this animation

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

About this animation

A music player that expands from a compact glass bar, with configurable artwork, track copy, dominant color, and fonts.

How it works

  1. The component measures its own surface and uses one continuous progress shared value from compact to expanded.
  2. The compact artwork slot is measured with onLayout; its exact position, size, corner radius, and breathing scale interpolate into the large cover without a navigation dependency.
  3. A spring follows upward and downward pans, inheriting release velocity so the gesture can be interrupted at any point.
  4. The background scales back and dims while the full player materializes with a blurred artwork atmosphere.
  5. The expanded surface stays opaque over the library by compositing the blurred artwork over a solid #120C14 base.

Install

npx expo install expo-blur expo-image react-native-gesture-handler react-native-reanimated react-native-worklets @expo/vector-icons

Usage

import MiniPlayerExpand from './MiniPlayerExpand';

<MiniPlayerExpand artwork={require('./artwork.jpg')} />

With content and an imperative trigger:

const ref = useRef<MiniPlayerExpandRef>(null);

<MiniPlayerExpand
  ref={ref}
  artwork={artwork}
  title="Slow Morning"
  artist="Mira Vale"
  brandName="Aurora"
  dominantColor="#A46D63"
/>

Props

PropTypeDefaultDescription
artworkImageSourcePropTypeRequiredAlbum artwork shown in both player states.
titlestring'Slow Morning'Track title.
artiststring'Mira Vale'Track artist.
dominantColorstring'#B67A67'Dominant artwork color used for the full-screen atmosphere.
brandNamestring'Solis'Product name shown in the library header.
backgroundItems{ artwork: ImageSourcePropType; title: string }[][]Optional cards shown behind the player in a host screen.
playingbooleantrueWhether playback starts active.
onExpandedChange(expanded: boolean) => voidundefinedCalled after the player reaches either resting state.
fontFamilystringundefinedFont used for interface copy.
monoFontFamilystringundefinedMonospaced font used for time labels.
styleStyleProp<ViewStyle>undefinedContainer styling.
accessibilityLabelstring${title} by ${artist}Screen-reader label for the player.
testIDstringundefinedTest identifier for the component.
durationnumber620Player preview expansion duration in milliseconds. Spring physics and reduced-motion timing are unchanged.

The ref exposes expand(), collapse(), toggle(), togglePlayback(), and dragCollapse().

Compatibility

Expo SDK 58, React Native 0.88, Reanimated 4.7, and Worklets 0.13. iOS, Android, and web are supported. The component uses Expo Go-compatible modules.

Accessibility

The mini player and all playback actions expose button roles and labels with 44 pt hit areas. Reduced motion changes the transition to a short fade and removes the spring-driven movement.

Icons

Icons: Lucide (ISC), using the matching Feather rendering family from Expo Vector Icons.

Why this one

The player makes the measured mini artwork the navigation anchor: it remains visually continuous while the entire library recedes beneath an opaque, artwork-tinted listening space. A tactile 72 pt playback disc and a finger-paced demo collapse make the familiar pattern feel more physical than a separate modal appearing over a static mini player.

More animations