bokeh/index.html at main · ChiefInnovator/bokeh · 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!-- Copyright © 2025 Richard Crane -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bokeh Screensaver — Photorealistic Animated Bokeh for Your Browser</title>

    <!-- SEO: Primary Meta Tags -->
    <meta name="description" content="A free, photorealistic animated bokeh screensaver that runs in any modern web browser. Customize particles, themes, and scenic backgrounds, then share your setup with a deep link.">
    <meta name="keywords" content="bokeh screensaver, animated bokeh, browser screensaver, web screensaver, HTML5 canvas, ambient background, seasonal themes, holiday screensaver, Christmas lights screensaver, shimmer particles, fullscreen screensaver">
    <meta name="author" content="Richard Crane">
    <meta name="robots" content="index, follow, max-image-preview:large">
    <meta name="theme-color" content="#0a0a0a">
    <link rel="canonical" href="https://chiefinnovator.github.io/bokeh/">

    <!-- Open Graph / Facebook / LinkedIn / iMessage link preview -->
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Bokeh Screensaver">
    <meta property="og:url" content="https://chiefinnovator.github.io/bokeh/">
    <meta property="og:title" content="Bokeh Screensaver — Photorealistic Animated Bokeh for Your Browser">
    <meta property="og:description" content="Free, photorealistic animated bokeh that runs in your browser. Customize particles, themes, and scenic backgrounds, then share your setup with a deep link.">
    <meta property="og:image" content="https://chiefinnovator.github.io/bokeh/og-image.jpg">
    <meta property="og:image:alt" content="Pink, red, and violet bokeh light particles on a black background — Bokeh Screensaver running the Valentine theme">
    <meta property="og:image:type" content="image/jpeg">
    <meta property="og:image:width" content="2400">
    <meta property="og:image:height" content="1260">
    <meta property="og:locale" content="en_US">

    <!-- Twitter / X Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Bokeh Screensaver — Photorealistic Animated Bokeh for Your Browser">
    <meta name="twitter:description" content="Free, photorealistic animated bokeh that runs in your browser. Customize particles, themes, and scenic backgrounds, then share your setup with a deep link.">
    <meta name="twitter:image" content="https://chiefinnovator.github.io/bokeh/og-image.jpg">
    <meta name="twitter:image:alt" content="Pink, red, and violet bokeh light particles on a black background — Bokeh Screensaver running the Valentine theme">

    <!-- Icons -->
    <link rel="icon" type="image/svg+xml" href="backgrounds/indigo.svg">

    <!-- AEO / GEO: Structured Data (JSON-LD) — helps search + answer engines understand the app -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@graph": [
        {
          "@type": "WebApplication",
          "@id": "https://chiefinnovator.github.io/bokeh/#webapp",
          "name": "Bokeh Screensaver",
          "alternateName": "Bokeh Screensaver Web App",
          "url": "https://chiefinnovator.github.io/bokeh/",
          "description": "A photorealistic animated bokeh screensaver that runs directly in a web browser. Users can select themes, scenic backgrounds, adjust particle count, size, speed, brightness, drift, and share their setup via a deep link.",
          "applicationCategory": "MultimediaApplication",
          "applicationSubCategory": "Screensaver",
          "operatingSystem": "Any (modern web browser)",
          "browserRequirements": "Requires HTML5 Canvas and JavaScript",
          "isAccessibleForFree": true,
          "offers": {
            "@type": "Offer",
            "price": "0",
            "priceCurrency": "USD"
          },
          "featureList": [
            "Photorealistic bokeh rendered with HTML5 Canvas",
            "Animated shimmer and optional drift",
            "Scenic background gallery with depth-of-field blur",
            "Seasonal, holiday, nature, flag, comic, and mood themes",
            "Adjustable particle count, size, speed, and brightness",
            "Fullscreen mode with auto-hiding UI",
            "Shareable deep-link URLs that encode all settings",
            "Mobile and desktop responsive"
          ],
          "author": {
            "@type": "Person",
            "name": "Richard Crane"
          },
          "copyrightYear": "2025",
          "copyrightHolder": {
            "@type": "Person",
            "name": "Richard Crane"
          }
        },
        {
          "@type": "FAQPage",
          "mainEntity": [
            {
              "@type": "Question",
              "name": "What is the Bokeh Screensaver?",
              "acceptedAnswer": {
                "@type": "Answer",
                "text": "Bokeh Screensaver is a free web application that renders photorealistic, animated bokeh light particles in the browser. It works on desktop and mobile, supports multiple themes and scenic backgrounds, and can be run fullscreen as an ambient display."
              }
            },
            {
              "@type": "Question",
              "name": "Do I need to install anything to use it?",
              "acceptedAnswer": {
                "@type": "Answer",
                "text": "No. Bokeh Screensaver runs entirely in the browser using HTML5 Canvas and vanilla JavaScript. Just open the page and click to enter fullscreen."
              }
            },
            {
              "@type": "Question",
              "name": "Can I share my custom bokeh setup with someone else?",
              "acceptedAnswer": {
                "@type": "Answer",
                "text": "Yes. Click the link icon to copy a deep link. The URL encodes the selected theme, background, particle count, size, speed, brightness, and drift settings, so anyone opening it sees the exact same configuration."
              }
            },
            {
              "@type": "Question",
              "name": "What themes and backgrounds are included?",
              "acceptedAnswer": {
                "@type": "Answer",
                "text": "Themes include seasonal sets (Fall Harvest, Winter Frost, Spring Bloom, Summer Sky), holidays (Christmas, Hanukkah, Halloween, Valentine, Easter, Fourth of July), nature, country flags, comic palettes, and mood sets like Cyberpunk and Tron. Backgrounds include scenic photographs (Boston, Groton MA, Crane's General Store, Christmas Forest, Hanukkah menorahs), seasonal gradients, and solid colors."
              }
            },
            {
              "@type": "Question",
              "name": "Is Bokeh Screensaver free?",
              "acceptedAnswer": {
                "@type": "Answer",
                "text": "Yes. It is free to use, open source, and requires no account."
              }
            }
          ]
        }
      ]
    }
    </script>

    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="bg-layer"></div>
    <canvas id="canvas"></canvas>

    <div id="ui-layer">
        <button id="copy-deep-link" class="icon-btn" aria-label="Copy Deep Link">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M10 13a5 5 0 0 0 7.54.54l2-2a5 5 0 0 0-7.07-7.07l-1.5 1.5"/>
                <path d="M14 11a5 5 0 0 0-7.54-.54l-2 2a5 5 0 0 0 7.07 7.07l1.5-1.5"/>
            </svg>
        </button>
        <button id="settings-btn" aria-label="Open Theme Settings">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="3"></circle>
                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
            </svg>
        </button>

        <div id="toast-notification" class="toast hidden">
            <span id="toast-message"></span>
        </div>

        <div id="theme-panel" class="panel-hidden">
            <div class="panel-header">
                <h3>Settings</h3>
                <button id="close-btn">&times;</button>
            </div>

            <div class="panel-content">
                <div class="panel-section">
                    <h4 class="collapsible-header">
                        Settings
                        <svg class="chevron" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
                    </h4>
                    <div class="section-content">
                        <div class="control-group">
                            <label for="particle-count">Particle Count: <span id="particle-count-val">300</span></label>
                            <input type="range" id="particle-count" min="50" max="1000" value="300" step="10">
                        </div>
                        <div class="control-group">
                            <label for="particle-size">Size: <span id="particle-size-val">1.0</span>x</label>
                            <input type="range" id="particle-size" min="0.5" max="2.0" value="1.0" step="0.1">
                        </div>
                        <div class="control-group">
                            <label for="anim-speed">Speed: <span id="anim-speed-val">1.0</span>x</label>
                            <input type="range" id="anim-speed" min="0.1" max="3.0" value="1.0" step="0.1">
                        </div>
                        <div class="control-group">
                            <label for="brightness">Brightness: <span id="brightness-val">100</span>%</label>
                            <input type="range" id="brightness" min="20" max="200" value="100" step="10">
                        </div>
                        <div class="control-group checkbox-group">
                            <label for="drift">Enable Drift</label>
                            <input type="checkbox" id="drift">
                        </div>
                        <div class="control-group">
                            <button id="reset-settings" class="theme-btn" type="button">Reset to Defaults</button>
                        </div>
                    </div>
                </div>

                <div class="panel-section">
                    <h4 class="collapsible-header">
                        Theme
                        <svg class="chevron" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
                    </h4>
                    <div id="theme-list" class="section-content">
                        <!-- Themes will be injected here by JS -->
                    </div>
                </div>

                <div class="panel-section">
                    <h4 class="collapsible-header">
                        Background
                        <svg class="chevron" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
                    </h4>
                    <div id="background-list" class="section-content">
                        <!-- Backgrounds will be injected here by JS -->
                    </div>
                </div>

                <div id="version-footer" class="version-footer"></div>
            </div>
        </div>
    </div>

    <script src="js/app.js"></script>
</body>
</html>