Raindrop/index.html at master · KingDuane/Raindrop · 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Raindrop — Window Mode Demo</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        html, body {
            height: 100%;
            overflow: hidden;
            background: #000;
        }

        /* Background image - visible through droplet windows */
        #background {
            position: fixed;
            inset: 0;
            z-index: 1;
            background: url('https://d2w9rnfcy7mm78.cloudfront.net/34018192/original_9982b1cec03035bbbf5fcae20cdf07a7.jpg') center/cover no-repeat;
        }

        /* Rain canvas overlay */
        #canvas {
            position: fixed;
            inset: 0;
            z-index: 10;
            pointer-events: none;
            background: transparent;
        }

        /* Info overlay */
        #info {
            position: fixed;
            bottom: 30px;
            left: 30px;
            z-index: 100;
            color: rgba(255,255,255,0.7);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            font-size: 14px;
        }

        #info a {
            color: rgba(255,255,255,0.9);
            text-decoration: none;
        }

        #info a:hover {
            text-decoration: underline;
        }
    </style>
    <script src="./bundle/index.js"></script>
</head>
<body>
    <!-- Background visible through droplet windows -->
    <div id="background"></div>

    <!-- Rain overlay -->
    <canvas id="canvas"></canvas>

    <!-- Info -->
    <div id="info">
        <strong>Raindrop — Window Mode</strong><br>
        Droplets are transparent windows to the DOM beneath<br>
        <a href="https://github.com/KingDuane/Raindrop">View on GitHub</a>
    </div>

    <script>
        const canvas = document.querySelector("#canvas");

        function resize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        resize();

        const raindropFx = new RaindropFX({
            canvas: canvas,

            // Window mode - droplets become transparent holes
            windowMode: true,
            windowOverlayColor: [0, 0, 0, 0.88],

            // Simulation
            spawnInterval: [0.06, 0.15],
            spawnSize: [25, 60],
            spawnLimit: 1500,
            gravity: 2200,
            trailDropDensity: 0.12,
            trailDropSize: [0.2, 0.4],
            trailDistance: [8, 15],
            shrinkRate: 0.005,
            evaporate: 5,

            // Droplets
            dropletsPerSeconds: 40,
            dropletSize: [4, 12],
            smoothRaindrop: [0.94, 1.0],

            // Mist
            mist: true,
            mistTime: 20,
        });

        raindropFx.start();

        window.addEventListener("resize", () => {
            resize();
            raindropFx.resize(canvas.width, canvas.height);
        });
    </script>
</body>
</html>