wave.js/examples/vanilla/from-json.html at main · iOSDevSK/wave.js · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>wave.js — Load settings from JSON (Vanilla)</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; background: #000; color: #fff; }
    #hero { width: 100%; height: 100vh; position: relative; }
    .content { position: relative; z-index: 5; text-align: center; padding-top: 35vh; }
    .content h1 { font-size: 3rem; font-weight: 700; }
    .content p  { margin-top: 8px; opacity: 0.7; }
    .hint {
      position: fixed; bottom: 1.25rem; left: 1.25rem; z-index: 20;
      font-family: ui-monospace, monospace; font-size: 12px;
      background: rgba(0,0,0,0.6); padding: 10px 14px; border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.1);
    }
    .hint code { color: #34d399; }
  </style>
</head>
<body>
  <div id="hero">
    <div class="content">
      <h1>Loaded from JSON</h1>
      <p>Settings came from <code style="color:#34d399">config.json</code>.</p>
    </div>
  </div>

  <div class="hint">
    Export your own JSON via <code>wave.toJSON()</code> — or click
    <code>Copy JSON</code> in the playground at <code>wavejs.org</code>.
  </div>

  <script type="module">
    import { WaveBackground } from '@redesigner/wave.js'

    // Drop-in settings: fetch the JSON and hand it straight to the
    // constructor. Every key mirrors a WaveBackground option, so the
    // JSON → instance path is zero-config.
    const config = await fetch('./config.json').then(r => r.json())
    const wave = new WaveBackground('#hero', config)

    // Expose for debugging / runtime tweaks
    window.wave = wave
    console.log('Loaded config:', config)
    console.log('Re-export current state:', wave.toJSON())
  </script>
</body>
</html>