web-theremin/index.html at main · yagodecastro/web-theremin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Special+Elite&family=American+Typewriter&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="src/assets/main.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web Theremin — Gestural Music Interface</title>

    <!-- SEO -->
    <meta name="description" content="Web Theremin — play music with hand gestures in your browser. Gestural music interface using MediaPipe, Tone.js and WebMIDI. No hardware needed. · Theremin gestual interativo: controle notas musicais com os movimentos das mãos via webcam." />
    <meta name="keywords" content="web theremin, theremin, gestural music, hand tracking, MediaPipe, Tone.js, WebMIDI, browser instrument, music synthesis, creative coding, interface musical gestual, theremin gestual, síntese de áudio, rastreamento de mãos" />
    <meta name="author" content="Yago Fernando Bastos de Castro" />
    <meta name="citation_title" content="Web Theremin: Expressive Musical Interface on the Web with Gestural Control and Audiovisual Feedback" />
    <meta name="citation_author" content="de Castro, Yago Fernando Bastos" />
    <meta name="citation_year" content="2026" />
    <meta name="citation_doi" content="10.5281/zenodo.20184764" />
    <meta name="citation_publisher" content="Zenodo" />
    <link rel="canonical" href="https://yagodecastro.github.io/web-theremin/" />

    <!-- Open Graph -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://yagodecastro.github.io/web-theremin/" />
    <meta property="og:title" content="Web Theremin — Gestural Music Interface" />
    <meta property="og:description" content="Play music with hand gestures in your browser. No hardware needed — uses MediaPipe for hand tracking and Tone.js for real-time audio synthesis." />
    <meta property="og:image" content="https://yagodecastro.github.io/web-theremin/screenshot.png" />
    <meta property="og:locale" content="pt_BR" />
    <meta property="og:locale:alternate" content="en_US" />

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Web Theremin — Gestural Music Interface" />
    <meta name="twitter:description" content="Play music with hand gestures in your browser. No hardware needed." />
    <meta name="twitter:image" content="https://yagodecastro.github.io/web-theremin/screenshot.png" />

    <meta name="google-site-verification" content="gn8bJIDbPMJijtRBqHKYa6W0fLO3nLlGA9IDJB9KBJg" />
    <!-- Prefetch de DNS para o CDN de fallback do MediaPipe -->
    <link rel="dns-prefetch" href="https://storage.googleapis.com" />
    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
  </head>
  <body class="bg-retro-blue">
    <div id="app"></div>
    <!-- modulepreload instrui o browser a buscar e parsear o módulo antes da execução -->
    <link rel="modulepreload" href="/src/main.ts" />
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>