layout, title, titleTemplate, hero, features
| layout |
title |
titleTemplate |
hero |
features |
| home |
SubMiner |
Immersion Mining Workflow for MPV |
| name |
text |
tagline |
image |
actions |
| SubMiner |
Immersion Mining for MPV |
Watch media, mine vocabulary, and build cards without leaving the scene. |
| src |
alt |
| /assets/SubMiner.png |
SubMiner logo |
|
| theme |
text |
link |
| brand |
Install |
/installation |
|
| theme |
text |
link |
| alt |
Explore workflow |
/mining-workflow |
|
|
|
| icon |
title |
details |
| src |
alt |
| /assets/mpv.svg |
mpv icon |
|
Built for mpv |
Tracks subtitles through mpv IPC in real time, with a single launch path and no external bridge services. |
|
| icon |
title |
details |
| src |
alt |
| /assets/yomitan-icon.svg |
Yomitan logo |
|
Yomitan Integration |
Keep your flow moving with instant word lookups and context-aware card creation directly from subtitles. |
|
| icon |
title |
details |
| src |
alt |
| /assets/anki-card.svg |
Anki card icon |
|
Anki Card Enrichment |
Auto-fills card fields with subtitle sentence, clipping, image, and translation so you can focus on learning. |
|
| icon |
title |
details |
| src |
alt |
| /assets/dual-layer.svg |
Dual layer icon |
|
Three-Plane Overlay Stack |
Secondary context plane + visible interactive layer + invisible interaction plane, each with independent behavior and startup state. |
|
| icon |
title |
details |
| src |
alt |
| /assets/highlight.svg |
Highlight icon |
|
N+1 Highlighting |
Surfaces known words from your deck so unknown targets stand out during immersion sessions. |
|
| icon |
title |
details |
| src |
alt |
| /assets/tokenization.svg |
Tokenization icon |
|
Immersion Tracking |
Captures subtitle and mining telemetry to SQLite, with daily/monthly rollups for progress clarity. |
|
| icon |
title |
details |
| src |
alt |
| /assets/subtitle-download.svg |
Subtitle download icon |
|
Subtitle Download & Sync |
Pull and synchronize subtitles with Jimaku plus alass/ffsubsync in one cohesive workflow. |
|
| icon |
title |
details |
| src |
alt |
| /assets/keyboard.svg |
Keyboard icon |
|
Keyboard-Driven |
Run lookups, mining actions, clipping, and workflow toggles with one configurable shortcut surface. |
|
| icon |
title |
details |
| src |
alt |
| /assets/texthooker.svg |
Texthooker icon |
|
Texthooker & WebSocket |
Stream subtitles in real time to browser tools via local WebSocket and keep your stack integrated. |
|
|
<script setup>
const demoAssetVersion = '20260223-2';
</script>
How it fits together
01
Start
Launch with the wrapper or existing mpv setup and keep subtitles in sync.
02
Lookup
Hover or click a token in the interactive overlay to open Yomitan context.
03
Mine
Create cards from Yomitan or mine sentence cards directly from subtitle lines.
04
Enrich
Automatically attach timing-accurate audio, sentence text, and visual evidence.
05
Track
Review immersion history and repeat high-value patterns over time.
See it in action
Subtitles, lookup flow, and card enrichment from a real playback session.
<style>
@import url('
https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
.landing-shell {
max-width: 1120px;
margin: 0 auto;
padding: 0.5rem 1rem 4rem;
}
.landing-shell,
.landing-shell .step-title,
.landing-shell h1,
.landing-shell h2 {
font-family: 'Manrope', 'Arial', sans-serif;
}
.step-title,
.step-number {
font-family: 'Space Grotesk', 'Manrope', 'Arial', sans-serif;
letter-spacing: -0.01em;
}
.demo-section {
max-width: 960px;
margin: 0 auto;
padding: 2rem 0 0;
}
.demo-section h2 {
font-size: 1.45rem;
font-weight: 600;
margin-bottom: 0.5rem;
letter-spacing: -0.01em;
}
.demo-section p {
color: var(--vp-c-text-2);
margin: 0 0 0.9rem;
line-height: 1.6;
}
.demo-section video {
width: 100%;
border-radius: 12px;
border: 1px solid var(--vp-c-divider);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
animation: card-enter 380ms ease-out;
}
.workflow-section {
margin: 2.4rem auto 0;
padding: 0 0 2.5rem;
}
.workflow-section h2 {
font-size: 1.45rem;
font-weight: 600;
margin-bottom: 1rem;
letter-spacing: -0.01em;
}
.workflow-steps {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1px;
background: var(--vp-c-divider);
border-radius: 12px;
overflow: hidden;
}
@media (max-width: 960px) {
.workflow-steps {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 640px) {
.workflow-steps {
grid-template-columns: 1fr;
}
}
.workflow-step {
padding: 1.1rem 1.25rem;
background: var(--vp-c-bg-soft);
animation: card-enter 330ms ease-out;
}
.workflow-step .step-number {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--vp-c-brand-1);
margin-bottom: 0.5rem;
font-variant-numeric: tabular-nums;
}
.workflow-step .step-title {
font-weight: 600;
font-size: 1rem;
margin-bottom: 0.35rem;
}
.workflow-step .step-desc {
font-size: 0.85rem;
color: var(--vp-c-text-2);
line-height: 1.5;
}
@keyframes card-enter {
from {
opacity: 0.8;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
