Skip to content

Commit 5673adb

Browse files
Codewriter90xCodewriter90x
authored
feat(site): showcase real gameplay video (#26)
1 parent 23385f1 commit 5673adb

9 files changed

Lines changed: 82 additions & 8 deletions

File tree

‎README.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,18 @@ hit matching and MIDI input are shared rather than reimplemented per mode.
4646
These are real captures of the current Unity application running the original,
4747
rights-clean demo content—not promotional mockups.
4848

49+
<p align="center">
50+
<a href="https://codewriter90x.github.io/HitTheKit/en/#demo">
51+
<img src="website/assets/images/screenshots/hitthekit-real-tour-poster.jpg" width="100%" alt="Watch the 42-second HitTheKit gameplay tour">
52+
</a>
53+
<br>
54+
<strong><a href="https://codewriter90x.github.io/HitTheKit/en/#demo">Watch the 42-second gameplay tour →</a></strong>
55+
</p>
56+
57+
The tour moves from the main menu through kit setup and lesson selection into
58+
real gameplay. Its soundtrack is an original, rights-clean instrumental created
59+
for HitTheKit.
60+
4961
| Main menu | Concert Stage gameplay |
5062
| --- | --- |
5163
| [![HitTheKit main menu with Play, Learn and electronic-drum setup](website/assets/images/screenshots/main-menu.jpg)](website/assets/images/screenshots/main-menu.jpg) | [![HitTheKit Concert Stage gameplay with the perspective drum highway and countdown](website/assets/images/screenshots/gameplay-concert-stage.jpg)](website/assets/images/screenshots/gameplay-concert-stage.jpg) |

‎docs/legal/ASSET_PROVENANCE.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,13 @@ captures retained in the private development archive.
5757
| --- | --- | --- |
5858
| `website/assets/images/screenshots/main-menu.jpg` | `7f00a1b51d05b327c279f0bf199b646bc9899dac5b76a798d0932f7d0e41338a` | README application preview: main menu |
5959
| `website/assets/images/screenshots/gameplay-concert-stage.jpg` | `246771f958d41adc02cf7ef15533ea977f9d0a35676bd9c9edf197eec37f510d` | README application preview: synthetic Concert Stage gameplay |
60+
| `website/assets/images/screenshots/hitthekit-real-tour-poster.jpg` | `e2c9d678a9fe05d12c83070019a03620f50c532a0fc3f490fef5b2ceff9399bb` | Poster for the first-party gameplay tour |
61+
62+
The gameplay tour was captured from a maintainer-built HitTheKit application.
63+
It shows only the project-owned interface, environments, lesson content, and
64+
synthetic gameplay. The instrumental soundtrack was synthesized specifically
65+
for the tour from deterministic oscillators and noise sources; it does not
66+
sample or reproduce a third-party recording.
6067

6168
## Programmatically generated branding
6269

‎docs/legal/ASSET_PROVENANCE.sha256‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,4 +62,5 @@ aeb85dcd4d2146f541a20b059d0202b4b74e26d36bb0c4d6a69e3216b53d32b3 website/assets
6262
3fbf9e18624c5e3df571b58b92ec8639a21120db3d740e2a4f11ac534f1fdcae website/assets/images/logo-original.png
6363
5fdcf113362ecd258997910feffbafc3c367b78008c0ecf9daf2b134c91cdee2 website/assets/images/stage-command.jpg
6464
246771f958d41adc02cf7ef15533ea977f9d0a35676bd9c9edf197eec37f510d website/assets/images/screenshots/gameplay-concert-stage.jpg
65+
e2c9d678a9fe05d12c83070019a03620f50c532a0fc3f490fef5b2ceff9399bb website/assets/images/screenshots/hitthekit-real-tour-poster.jpg
6566
7f00a1b51d05b327c279f0bf199b646bc9899dac5b76a798d0932f7d0e41338a website/assets/images/screenshots/main-menu.jpg

‎tests/scripts/asset-provenance-contract-tests.sh‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ find branding docs/design src/HitTheKit.Unity/Assets website \
4343
-iname '*.svg' -o -iname '*.fbx' -o -iname '*.icns' -o \
4444
-iname '*.wav' -o -iname '*.ogg' -o -iname '*.mp3' -o \
4545
-iname '*.flac' -o -iname '*.aac' -o -iname '*.m4a' -o \
46+
-iname '*.mp4' -o -iname '*.webm' -o -iname '*.mov' -o \
4647
-iname '*.ttf' -o -iname '*.otf' \
4748
\) -print | sort > "$ACTUAL"
4849

‎website/assets/css/styles.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,17 @@ button { font: inherit; }
8888
.hero-light-cyan { right: 20%; background: linear-gradient(transparent, var(--cyan), transparent); animation: beam 8s ease-in-out infinite alternate; }
8989
.hero-light-pink { right: -3%; background: linear-gradient(transparent, var(--pink), transparent); animation: beam 10s 1.4s ease-in-out infinite alternate-reverse; }
9090
.hero-grid { position: absolute; inset: 48% 0 0; opacity: .15; background-image: linear-gradient(rgba(47,224,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(47,224,255,.2) 1px, transparent 1px); background-size: 70px 70px; transform: perspective(420px) rotateX(62deg) scale(1.8); transform-origin: top center; mask-image: linear-gradient(#000, transparent 85%); }
91+
92+
.section-demo { overflow: hidden; padding-top: 105px; background: radial-gradient(circle at 50% 35%, rgba(47,224,255,.1), transparent 42%), linear-gradient(180deg, #05070d, #080d17); }
93+
.section-demo::before { content: ""; position: absolute; inset: 12% 8% auto; height: 55%; background: radial-gradient(circle, rgba(255,46,196,.08), transparent 62%); pointer-events: none; }
94+
.demo-heading { max-width: 820px; margin: 0 auto 48px; text-align: center; }
95+
.demo-heading .section-label { margin-bottom: 14px; }
96+
.demo-heading > p:last-child { max-width: 700px; margin: 20px auto 0; color: var(--muted); }
97+
.demo-frame { position: relative; max-width: 1080px; margin: 0 auto; padding: 1px; border: 1px solid rgba(47,224,255,.34); border-radius: 18px; background: linear-gradient(135deg, rgba(47,224,255,.2), rgba(255,46,196,.12)); box-shadow: 0 30px 90px rgba(0,0,0,.52), 0 0 55px rgba(47,224,255,.07); }
98+
.demo-frame::before { content: ""; position: absolute; z-index: -1; inset: -28px 7% 30%; background: rgba(47,224,255,.16); filter: blur(55px); }
99+
.demo-frame iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 16px 16px 0 0; background: #000; }
100+
.demo-frame figcaption { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 21px; color: #e9eef8; font-size: .78rem; font-weight: 800; letter-spacing: .025em; }
101+
.demo-frame figcaption small { color: #7f8ca0; font-size: .7rem; font-weight: 600; text-align: right; }
91102
.scroll-cue { position: absolute; z-index: 4; bottom: 27px; left: 50%; display: grid; gap: 8px; justify-items: center; transform: translateX(-50%); color: #718096; font-size: .58rem; font-weight: 900; letter-spacing: .18em; text-decoration: none; }
92103
.scroll-cue i { width: 1px; height: 28px; background: linear-gradient(var(--cyan), transparent); animation: scrollLine 1.8s ease-in-out infinite; }
93104

@@ -250,6 +261,10 @@ button { font: inherit; }
250261
.flow-line { display: grid; grid-template-columns: 1fr; gap: 12px; }
251262
.flow-line i { width: 1px; height: 20px; margin-left: 14px; }
252263
.stage-preview img { aspect-ratio: 4/3; object-position: 70% center; }
264+
.demo-frame { border-radius: 12px; }
265+
.demo-frame iframe { border-radius: 10px 10px 0 0; }
266+
.demo-frame figcaption { align-items: flex-start; flex-direction: column; gap: 4px; }
267+
.demo-frame figcaption small { text-align: left; }
253268
.learning-metrics { gap: 18px; }
254269
.learning-metrics span { font-size: .59rem; }
255270
.module-list li { grid-template-columns: 34px 1fr; }

‎website/assets/images/screenshots/hitthekit-real-tour-poster.jpg‎

354 KB
Loading

‎website/assets/js/site.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ document.documentElement.classList.add("js");
22

33
const copy = {
44
it: {
5-
skip: "Vai al contenuto", menuOpen: "Apri il menu", navHow: "Come funziona", navThemes: "Temi", navLearn: "Impara", navSongs: "Brani", navRoadmap: "Roadmap", navDownload: "Download", navSponsor: "Supporta",
6-
version: "v0.5.x · PRE-RELEASE OPEN SOURCE", heroLine1: "SALI SUL PALCO,", heroLine2: "COLPISCI IL TEMPO.", heroLead: "Il rhythm game costruito per chi vuole imparare davvero a suonare: timing preciso, lezioni progressive e la tua batteria elettronica al centro dell’esperienza.", heroCta: "Scopri come funziona", repoCta: "Vedi il codice", sponsorCta: "Supporta HitTheKit", factKeyboard: "Tastiera cross-platform", factMidi: "CoreMIDI su macOS", factLessons: "12 lezioni giocabili", heroCaption: "Otto elementi leggibili, una sola timeline musicale.", scroll: "SCOPRI",
5+
skip: "Vai al contenuto", menuOpen: "Apri il menu", navDemo: "Video", navHow: "Come funziona", navThemes: "Temi", navLearn: "Impara", navSongs: "Brani", navRoadmap: "Roadmap", navDownload: "Download", navSponsor: "Supporta",
6+
version: "v0.5.x · PRE-RELEASE OPEN SOURCE", heroLine1: "SALI SUL PALCO,", heroLine2: "COLPISCI IL TEMPO.", heroLead: "Il rhythm game costruito per chi vuole imparare davvero a suonare: timing preciso, lezioni progressive e la tua batteria elettronica al centro dell’esperienza.", heroCta: "Guarda il gameplay", repoCta: "Vedi il codice", sponsorCta: "Supporta HitTheKit", factKeyboard: "Tastiera cross-platform", factMidi: "CoreMIDI su macOS", factLessons: "12 lezioni giocabili", heroCaption: "Otto elementi leggibili, una sola timeline musicale.", scroll: "GUARDA",
7+
demoLabel: "GAMEPLAY REALE", demoTitle: "Quarantadue secondi dentro HitTheKit", demoIntro: "Dal menu alla configurazione, dalla scelta della lezione alla highway: una cattura reale dell’app con contenuti originali.", demoCaption: "Menu → configurazione → lezione → gameplay", demoRights: "Cattura dell’app e colonna sonora originale rights-clean.",
78
howLabel: "COME FUNZIONA", howTitle: "Un gioco ritmico costruito per imparare", howIntro: "Ogni colpo passa dallo stesso motore deterministico, che tu stia usando la tastiera o un vero kit MIDI.", featureTimingTitle: "Timing deterministico", featureTimingBody: "Il motore di hit-matching vive in una libreria .NET indipendente da Unity, con test automatici sulle finestre di giudizio.", featureKitTitle: "Batteria elettronica reale", featureKitBody: "Configurazione guidata del kit, feedback visivo sul pezzo richiesto e fallback da tastiera sempre disponibile.", featureLearnTitle: "Percorso strutturato", featureLearnBody: "Lezioni progressive con obiettivi, velocità di studio e valutazioni trasparenti: niente difficoltà artificiale.", flowConnect: "Collega o configura", flowChoose: "Scegli lezione o brano", flowPlay: "Suona e migliora",
89
themesLabel: "AMBIENTI", themesTitle: "Tre ambienti, lo stesso gioco", themesIntro: "Cambia il linguaggio visivo senza alterare timing, note o punteggio.", themeArcade: "Runway olografico, note a diamante e una palette ciano/viola.", themeConcert: "Un’arena dal vivo vista da dietro un kit elettronico completo.", themeGrid: "Geometria tecnica, prospettiva piatta e massima leggibilità.",
910
learnLabel: "PERCORSO GUIDATO", learnTitle: "24 lezioni, sei moduli", learnIntro: "Il primo semestre è già giocabile: da una pulsazione di grancassa a 64 BPM fino a un groove completo in sedicesimi. Il secondo resta visibile come programma, senza fingere di valutare ciò che il motore non supporta ancora.", metricPlayable: "lezioni giocabili", metricPass: "soglia di superamento", metricMastery: "padronanza", module1: "Fondamenta", module2: "Tecnica di base", module3: "Coordinazione", module4: "Controllo e dinamiche", module5: "Stili musicali", module6: "Musicista da palco", lessons14: "Giocabile · lezioni 1–4", lessons58: "Giocabile · lezioni 5–8", lessons912: "Giocabile · lezioni 9–12", ready: "PRONTO", planned: "In programma",
@@ -13,8 +14,9 @@ const copy = {
1314
licenseLabel: "LICENZA", licenseTitle: "Open source, con regole chiare", licenseBody: "Il codice originale del progetto è distribuito con licenza GPL-3.0-only. Un percorso di licenza commerciale separata è in preparazione e resta soggetto a revisione legale.", readGpl: "Leggi la GPL-3.0", licenseDetails: "Dettagli sul percorso commerciale", faqTitle: "Domande frequenti", faq1q: "Serve una batteria elettronica?", faq1a: "No. La tastiera è sempre disponibile; un kit MIDI rende però l’esperienza più vicina allo strumento reale.", faq2q: "Il MIDI funziona su tutti i sistemi?", faq2a: "Non ancora. Il backend di produzione usa CoreMIDI su macOS; Windows e Linux supportano oggi il gameplay da tastiera.", faq3q: "Ci sono canzoni commerciali incluse?", faq3a: "No. Il repository contiene solo musica originale rights-clean e un esempio per i contenuti locali del giocatore.", faq4q: "È già una versione stabile?", faq4a: "No. La prima pubblicazione è source-only: nessun binario Unity è ancora approvato per la distribuzione pubblica.", footerTagline: "Rhythm game open source per batteria elettronica. In sviluppo attivo.", contribute: "Contribuisci", footerLicense: "GPL-3.0-only · sorgenti pubblici, binari non distribuiti", footerTrademark: "Progetto indipendente; Unity, Apple, macOS, CoreMIDI e i nomi hardware appartengono ai rispettivi titolari."
1415
},
1516
en: {
16-
skip: "Skip to content", menuOpen: "Open menu", navHow: "How it works", navThemes: "Themes", navLearn: "Learn", navSongs: "Songs", navRoadmap: "Roadmap", navDownload: "Download", navSponsor: "Sponsor",
17-
version: "v0.5.x · OPEN-SOURCE PRE-RELEASE", heroLine1: "STEP ON STAGE,", heroLine2: "KEEP THE BEAT.", heroLead: "The rhythm game built for people who genuinely want to learn: precise timing, progressive lessons, and your electronic drum kit at the center of the experience.", heroCta: "See how it works", repoCta: "View the code", sponsorCta: "Sponsor HitTheKit", factKeyboard: "Cross-platform keyboard", factMidi: "CoreMIDI on macOS", factLessons: "12 playable lessons", heroCaption: "Eight readable kit pieces, one musical timeline.", scroll: "EXPLORE",
17+
skip: "Skip to content", menuOpen: "Open menu", navDemo: "Video", navHow: "How it works", navThemes: "Themes", navLearn: "Learn", navSongs: "Songs", navRoadmap: "Roadmap", navDownload: "Download", navSponsor: "Sponsor",
18+
version: "v0.5.x · OPEN-SOURCE PRE-RELEASE", heroLine1: "STEP ON STAGE,", heroLine2: "KEEP THE BEAT.", heroLead: "The rhythm game built for people who genuinely want to learn: precise timing, progressive lessons, and your electronic drum kit at the center of the experience.", heroCta: "Watch gameplay", repoCta: "View the code", sponsorCta: "Sponsor HitTheKit", factKeyboard: "Cross-platform keyboard", factMidi: "CoreMIDI on macOS", factLessons: "12 playable lessons", heroCaption: "Eight readable kit pieces, one musical timeline.", scroll: "WATCH",
19+
demoLabel: "REAL GAMEPLAY", demoTitle: "Forty-two seconds inside HitTheKit", demoIntro: "From the menu to kit setup, lesson selection, and the note highway: a real capture of the application using original content.", demoCaption: "Menu → setup → lesson → gameplay", demoRights: "First-party application capture with an original, rights-clean soundtrack.",
1820
howLabel: "HOW IT WORKS", howTitle: "A rhythm game built for learning", howIntro: "Every hit passes through the same deterministic engine, whether you use a keyboard or a real MIDI kit.", featureTimingTitle: "Deterministic timing", featureTimingBody: "The hit-matching engine lives in a Unity-independent .NET library, with automated tests covering the judgment windows.", featureKitTitle: "Real electronic drums", featureKitBody: "Guided kit configuration, clear visual feedback for the requested piece, and an always-available keyboard fallback.", featureLearnTitle: "Structured curriculum", featureLearnBody: "Progressive lessons with objectives, practice speeds, and transparent grading—not artificial difficulty.", flowConnect: "Connect or configure", flowChoose: "Choose a lesson or song", flowPlay: "Play and improve",
1921
themesLabel: "ENVIRONMENTS", themesTitle: "Three environments, one game", themesIntro: "Change the visual language without changing timing, notes, or scoring.", themeArcade: "A holographic runway, diamond notes, and a cyan-violet palette.", themeConcert: "A live arena viewed from behind a complete electronic kit.", themeGrid: "Technical geometry, a flat perspective, and maximum readability.",
2022
learnLabel: "GUIDED PATH", learnTitle: "24 lessons, six modules", learnIntro: "The first semester is already playable: from a 64 BPM kick pulse to a full sixteenth-note groove. The second stays visible as a syllabus without pretending to grade capabilities the engine does not support yet.", metricPlayable: "playable lessons", metricPass: "passing threshold", metricMastery: "mastery", module1: "Fundamentals", module2: "Basic technique", module3: "Coordination", module4: "Control and dynamics", module5: "Musical styles", module6: "Stage musician", lessons14: "Playable · lessons 1–4", lessons58: "Playable · lessons 5–8", lessons912: "Playable · lessons 9–12", ready: "READY", planned: "Planned",

‎website/en/index.html‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
</button>
6262

6363
<nav class="site-nav" id="site-nav" aria-label="Main navigation" data-nav>
64+
<a href="#demo" data-i18n="navDemo">Video</a>
6465
<a href="#how" data-i18n="navHow">How it works</a>
6566
<a href="#themes" data-i18n="navThemes">Themes</a>
6667
<a href="#learn" data-i18n="navLearn">Learn</a>
@@ -91,7 +92,7 @@
9192
<h1 id="hero-title"><span data-i18n="heroLine1">STEP ON STAGE,</span><strong data-i18n="heroLine2">KEEP THE BEAT.</strong></h1>
9293
<p class="hero-lead" data-i18n="heroLead">The rhythm game built for people who genuinely want to learn: precise timing, progressive lessons, and your electronic drum kit at the center of the experience.</p>
9394
<div class="hero-actions">
94-
<a class="button button-primary" href="#how"><span data-i18n="heroCta">See how it works</span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></a>
95+
<a class="button button-primary" href="#demo"><span data-i18n="heroCta">Watch gameplay</span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></a>
9596
<a class="button button-secondary" href="https://github.com/Codewriter90x/HitTheKit" target="_blank" rel="noopener noreferrer" data-i18n="repoCta">View the code</a>
9697
<a class="button button-sponsor" href="https://github.com/sponsors/Codewriter90x" target="_blank" rel="noopener noreferrer" data-i18n="sponsorCta">Sponsor HitTheKit</a>
9798
</div>
@@ -106,7 +107,24 @@ <h1 id="hero-title"><span data-i18n="heroLine1">STEP ON STAGE,</span><strong dat
106107
<figcaption data-i18n="heroCaption">Eight readable kit pieces, one musical timeline.</figcaption>
107108
</figure>
108109
</div>
109-
<a class="scroll-cue" href="#how"><span data-i18n="scroll">EXPLORE</span><i aria-hidden="true"></i></a>
110+
<a class="scroll-cue" href="#demo"><span data-i18n="scroll">WATCH</span><i aria-hidden="true"></i></a>
111+
</section>
112+
113+
<section class="section section-demo" id="demo" aria-labelledby="demo-title">
114+
<div class="section-inner">
115+
<div class="demo-heading reveal">
116+
<p class="section-label" data-i18n="demoLabel">REAL GAMEPLAY</p>
117+
<h2 id="demo-title" data-i18n="demoTitle">Forty-two seconds inside HitTheKit</h2>
118+
<p data-i18n="demoIntro">From the menu to kit setup, lesson selection, and the note highway: a real capture of the application using original content.</p>
119+
</div>
120+
<figure class="demo-frame reveal">
121+
<iframe src="https://www.youtube-nocookie.com/embed/10wJjOFGMCg?rel=0" title="HitTheKit — Real Gameplay" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen aria-describedby="demo-caption"></iframe>
122+
<figcaption id="demo-caption">
123+
<span data-i18n="demoCaption">Menu → setup → lesson → gameplay</span>
124+
<small data-i18n="demoRights">First-party application capture with an original, rights-clean soundtrack.</small>
125+
</figcaption>
126+
</figure>
127+
</div>
110128
</section>
111129

112130
<section class="section section-dark" id="how" aria-labelledby="how-title">

0 commit comments

Comments
 (0)