voice-orb/preview.html at main · webfuse-com/voice-orb · 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
<!DOCTYPE html>
<html>
    <head>
        <title>Voice Orb | Preview</title>
        <script src="./voice-orb.js"></script>
    </head>
    <body>
        <voice-orb id="orb" size="300"></voice-orb>
        <script>
            customElements
                .whenDefined("voice-orb")
                .then(()=>{
                    const orb = document.getElementById("orb");

                    setTimeout(() => {
                        orb.update({
                            colors: [
                                [0, 200, 255],
                                [0, 100, 255],
                                [0, 255, 180]
                            ],
                            transitionTime: 2000,
                            morphSpeed: 0.5,
                            randomness: 0.75,
                            rotationSpeed: 0.8
                        });
                    }, 2000);

                    setTimeout(() => {
                        orb.update({
                            colors: [
                                [0, 255, 180],
                                [0, 200, 255],
                                [0, 100, 255]
                            ],
                            transitionTime: 1000,
                            morphSpeed: 0.125,
                            randomness: 0,
                            rotationSpeed: 0
                        });
                    }, 8000);
                });
        </script>
    </body>
</html>