LiquidGlassMediaControls Component — AuraGlass by AuraOne

Documentation menu · Media

#Overview

Loading preview

Status

live

#Install and Import

Install the package once, import the component from the public entry, and load styles a single time at the app root.

shell

npm install aura-glass

import

import { LiquidGlassMediaControls } from 'aura-glass'

styles

import 'aura-glass/styles';

#Examples

Three baseline shapes flagship components use across docs and AI-agent guidance:

Basic

tsx

import { LiquidGlassMediaControls } from 'aura-glass';
import 'aura-glass/styles';

export function MediaControlsExample() {
  return (
    <LiquidGlassMediaControls
      playing
      currentTime={42}
      duration={180}
      aria-label="Aurora Drift playback"
    />
  );
}

Production

tsx

import { LiquidGlassMediaControls, GlassCard } from 'aura-glass';
import 'aura-glass/styles';

export function LiquidGlassMediaControlsSurface() {
  return (
    <GlassCard depth="medium" tint="neutral">
      <LiquidGlassMediaControls
        aria-label="Media production surface"
      />
    </GlassCard>
  );
}

Contained

tsx

import { LiquidGlassMediaControls, GlassCard } from 'aura-glass';
import 'aura-glass/styles';

export function LiquidGlassMediaControlsContainedPreview() {
  return (
    <GlassCard style={{ maxWidth: 420 }}>
      <LiquidGlassMediaControls />
    </GlassCard>
  );
}

#Accessibility

Expose play, pause, seek, volume, captions, and time information with labels. Do not rely only on icons.

#SSR and Performance

Pause analyzers when playback stops, when the tab is hidden, and when reduced motion is enabled.

#Theming

Theme with public props, `className`, `style`, and AuraGlass CSS variables. Avoid private DOM selectors so the component can upgrade with the package.