V-002 Mini Player Dock | Vibe UI Pattern Library

ライブデモ Live Demo

画面下部に固定されたミニプレーヤーで、サムネイル、トラック情報、進捗バー、コントロールボタンがコンパクトに配置されています。

A fixed mini player at the bottom of the screen with thumbnail, track info, progress bar, and control buttons arranged compactly.

Main Content Area

このエリアでは通常のコンテンツが表示され、下部のプレーヤーは常に見えています。

The mini player stays visible while users navigate other content.

プレーヤー表示 Player Visibility

AI向け説明 AI Description

`V-002` は `position: fixed` で画面下部に固定されたミニプレーヤーです。`transform: translateY(100%)` で非表示にし、`.visible` クラスで `translateY(0)` に切り替えてスライドインさせます。`backdrop-filter: blur()` で背景をぼかします。

`V-002` is a fixed-position mini player docked at the bottom. Hidden with `transform: translateY(100%)` and revealed by toggling `.visible` to `translateY(0)`. Uses `backdrop-filter: blur()` for the frosted background.

調整可能パラメータ Adjustable Parameters

backdrop blur — 背景ブラーの強度を調整 adjust background blur intensity
player height — プレーヤーの高さとパディング player height and padding
thumbnail size — サムネイルサイズを変更 modify thumbnail size
progress styling — 進捗バーの色とスタイル progress bar color and style

実装 Implementation

HTML + CSS + JS

<div class="mini-player">
  <div class="player-thumbnail"></div>
  <div class="player-info">
    <span class="player-title">Track Name</span>
    <span class="player-artist">Artist</span>
  </div>
  <div class="player-progress">
    <div class="progress-bar"><div class="progress-fill"></div></div>
  </div>
  <button class="control-btn play">▶</button>
  <button class="close-btn">✕</button>
</div>

<style>
.mini-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(19, 24, 37, 0.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 1000;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.mini-player.visible {
  transform: translateY(0);
}

.progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  width: 35%;
}
</style>

<script>
const player = document.querySelector(".mini-player");
document.getElementById("toggle_player").addEventListener("click", () => {
  player.classList.toggle("visible");
});
</script>

React (JSX + CSS)

// react/V-002.jsx
import { useState } from "react";
import "./V-002.css";

export default function MiniPlayerDock() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <button onClick={() => setVisible(!visible)}>
        {visible ? "Hide" : "Show"} Player
      </button>
      <div className={`mini-player ${visible ? "visible" : ""}`}>
        <div className="player-thumbnail" />
        <div className="player-info">
          <span className="player-title">Track Name</span>
          <span className="player-artist">Artist</span>
        </div>
        <div className="player-progress">
          <div className="progress-bar"><div className="progress-fill" /></div>
        </div>
        <button className="control-btn play">▶</button>
        <button className="close-btn" onClick={() => setVisible(false)}>✕</button>
      </div>
    </>
  );
}

/* react/V-002.css */
.mini-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(19, 24, 37, 0.95);
  backdrop-filter: blur(20px);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.mini-player.visible {
  transform: translateY(0);
}

AIへの指示テンプレート AI Prompt Template

以下のテンプレートをコピーしてAIアシスタントに貼り付けると、このパターンの実装を依頼できます。 Copy the template below and paste it into your AI assistant to request an implementation of this pattern.

以下のUIパターンを実装してください。

- パターンID: V-002
- パターン名: ミニプレーヤードック
- 参照URL: https://devsnips.dev/animations/V-002.html
- フレームワーク: [React / Vue / Vanilla JS / その他]
- 要件:
  - デザインは参照URLのデモに準拠
  - レスポンシブ対応（モバイル/デスクトップ）
  - アクセシビリティ考慮（キーボード操作、スクリーンリーダー）
  - [ここに追加の要件を記述]

Please implement the following UI pattern.

- Pattern ID: V-002
- Pattern Name: Mini Player Dock
- Reference URL: https://devsnips.dev/animations/V-002.html
- Framework: [React / Vue / Vanilla JS / Other]
- Requirements:
  - Follow the design from the reference URL demo
  - Responsive (mobile / desktop)
  - Accessibility (keyboard navigation, screen reader)
  - [Add your requirements here]

注意とバリエーション Notes & Variations

プレイリストアクセス、音量スライダー、お気に入りボタンなど追加機能を組み込んだり、スワイプジェスチャーでの操作を追加できます。

Add features like playlist access, volume slider, favorite button, or swipe gestures for enhanced media control experience.