satisfying-canvas-effects/index.html at main · VikumKarunathilake/satisfying-canvas-effects · 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
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Satisfying Canvas Effects - Interactive Visual Experiences</title>
    <meta
      name="description"
      content="Explore mesmerizing interactive canvas animations including flowfield particles, liquid ripples, and more. Experience the beauty of responsive visual effects."
    />
    <meta
      name="keywords"
      content="canvas effects, interactive animations, particles, ripples, visual effects, javascript"
    />
    <script src="https://cdn.tailwindcss.com"></script>
    <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=Inter:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        font-family: "Inter", sans-serif;
      }
      .gradient-bg {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }
      .card-hover {
        transition: all 0.3s ease;
      }
      .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      }
    </style>
  </head>
  <body class="min-h-screen flex flex-col gradient-bg text-white">
    <header class="text-center py-16 px-4">
      <h1
        class="text-5xl md:text-7xl font-bold mb-6 text-center bg-clip-text text-transparent bg-gradient-to-r from-cyan-300 via-purple-300 to-pink-300"
      >
        Satisfying Canvas Effects
      </h1>
    </header>

    <main class="flex-grow container mx-auto px-4 pb-20">
      <!-- Effects Grid -->
      <div
        class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto mb-16"
      >
        <!-- Flowfield Particles Card -->
        <div
          class="rounded-2xl shadow-2xl p-8 bg-white/10 backdrop-blur-lg border border-white/20 card-hover"
        >
          <div class="flex justify-between items-start mb-6">
            <div>
              <h2 class="text-2xl font-bold text-white mb-2">
                🌊 Flowfield Particles
              </h2>
              <div class="flex gap-2 flex-wrap">
                <span
                  class="text-xs font-medium px-3 py-1 rounded-full bg-indigo-500/80 text-white backdrop-blur-sm"
                  >Interactive</span
                >
                <span
                  class="text-xs font-medium px-3 py-1 rounded-full bg-purple-500/80 text-white backdrop-blur-sm"
                  >Physics</span
                >
                <span
                  class="text-xs font-medium px-3 py-1 rounded-full bg-green-600/80 text-white backdrop-blur-sm"
                  >ChatGPT 5</span
                >
              </div>
            </div>
          </div>
          <div class="mb-6">
            <h3 class="text-white font-semibold mb-3">✨ Advanced Features:</h3>
            <div class="grid grid-cols-2 gap-2 text-sm">
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-cyan-300">▶</span> Mouse
                attraction/repulsion
              </div>
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-cyan-300">▶</span> Dynamic color
                transitions
              </div>
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-cyan-300">▶</span> Particle connections
              </div>
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-cyan-300">▶</span> Real-time parameters
              </div>
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-cyan-300">▶</span> Noise-based movement
              </div>
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-cyan-300">▶</span> Performance optimized
              </div>
            </div>
          </div>
          <div class="mb-6">
            <h4 class="text-white/90 font-medium mb-2">🎮 Controls:</h4>
            <p class="text-sm text-white/70">
              Move your mouse to influence particle flow • Click and drag for
              stronger effects
            </p>
          </div>
          <a
            href="Flowfield-Particles.html"
            class="w-full text-center font-semibold text-white py-3 px-6 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 transition-all duration-300 shadow-lg hover:shadow-xl"
            >🚀 Launch Experience</a
          >
        </div>

        <!-- Liquid Ripple Effect Card -->
        <div
          class="rounded-2xl shadow-2xl p-8 bg-white/10 backdrop-blur-lg border border-white/20 card-hover"
        >
          <div class="flex justify-between items-start mb-6">
            <div>
              <h2 class="text-2xl font-bold text-white mb-2">
                💧 Liquid Ripple Effect
              </h2>
              <div class="flex gap-2 flex-wrap">
                <span
                  class="text-xs font-medium px-3 py-1 rounded-full bg-teal-500/80 text-white backdrop-blur-sm"
                  >Click Interactive</span
                >
                <span
                  class="text-xs font-medium px-3 py-1 rounded-full bg-blue-500/80 text-white backdrop-blur-sm"
                  >Fluid</span
                >
                <span
                  class="text-xs font-medium px-3 py-1 rounded-full bg-green-600/80 text-white backdrop-blur-sm"
                  >ChatGPT 5</span
                >
              </div>
            </div>
          </div>
          <div class="mb-6">
            <h3 class="text-white font-semibold mb-3">🌊 Fluid Features:</h3>
            <div class="grid grid-cols-2 gap-2 text-sm">
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-cyan-300">▶</span> Realistic wave physics
              </div>
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-cyan-300">▶</span> Smooth fade animations
              </div>
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-cyan-300">▶</span> Multiple ripple layers
              </div>
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-cyan-300">▶</span> Responsive canvas
              </div>
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-cyan-300">▶</span> Wave interference
              </div>
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-cyan-300">▶</span> Calming visuals
              </div>
            </div>
          </div>
          <div class="mb-6">
            <h4 class="text-white/90 font-medium mb-2">🎮 Controls:</h4>
            <p class="text-sm text-white/70">
              Click anywhere to create ripples • Multiple clicks create
              overlapping waves
            </p>
          </div>
          <a
            href="Liquid-Ripple-Effect.html"
            class="w-full text-center font-semibold text-white py-3 px-6 rounded-xl bg-gradient-to-r from-teal-500 to-blue-600 hover:from-teal-600 hover:to-blue-700 transition-all duration-300 shadow-lg hover:shadow-xl"
            >🌊 Dive In</a
          >
        </div>

        <!-- Hive Mind Simulator Card -->
        <div
          class="rounded-2xl shadow-2xl p-8 bg-white/10 backdrop-blur-lg border border-white/20 card-hover"
        >
          <div class="flex justify-between items-start mb-6">
            <div>
              <h2 class="text-2xl font-bold text-white mb-2">
                🐝 Hive Mind Simulator
              </h2>
              <div class="flex gap-2 flex-wrap">
                <span
                  class="text-xs font-medium px-3 py-1 rounded-full bg-amber-500/80 text-white backdrop-blur-sm"
                  >Simulation</span
                >
                <span
                  class="text-xs font-medium px-3 py-1 rounded-full bg-orange-500/80 text-white backdrop-blur-sm"
                  >AI Behavior</span
                >
                <span
                  class="text-xs font-medium px-3 py-1 rounded-full bg-green-600/80 text-white backdrop-blur-sm"
                  >Gemini 3 Pro</span
                >
              </div>
            </div>
          </div>
          <div class="mb-6">
            <h3 class="text-white font-semibold mb-3">
              🏗️ Simulation Features:
            </h3>
            <div class="grid grid-cols-2 gap-2 text-sm">
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-amber-300">▶</span> Emergent hive
                construction
              </div>
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-amber-300">▶</span> Intelligent bee
                behavior
              </div>
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-amber-300">▶</span> Hexagonal cell
                formation
              </div>
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-amber-300">▶</span> Resource management
              </div>
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-amber-300">▶</span> Colony size control
              </div>
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-amber-300">▶</span> Honey production
              </div>
            </div>
          </div>
          <div class="mb-6">
            <h4 class="text-white/90 font-medium mb-2">🎮 Controls:</h4>
            <p class="text-sm text-white/70">
              Adjust colony size and resources • Watch autonomous construction
              unfold
            </p>
          </div>
          <a
            href="Hive-Mind-Simulator.html"
            class="w-full text-center font-semibold text-white py-3 px-6 rounded-xl bg-gradient-to-r from-amber-500 to-orange-600 hover:from-amber-600 hover:to-orange-700 transition-all duration-300 shadow-lg hover:shadow-xl"
            >🐝 Enter the Hive</a
          >
        </div>

        <!-- Cyber Lambo Card -->
        <div
          class="rounded-2xl shadow-2xl p-8 bg-white/10 backdrop-blur-lg border border-white/20 card-hover"
        >
          <div class="flex justify-between items-start mb-6">
            <div>
              <h2 class="text-2xl font-bold text-white mb-2">
                🏎️ Cyber Lambo
              </h2>
              <div class="flex gap-2 flex-wrap">
                <span
                  class="text-xs font-medium px-3 py-1 rounded-full bg-yellow-500/80 text-white backdrop-blur-sm"
                  >3D Model</span
                >
                <span
                  class="text-xs font-medium px-3 py-1 rounded-full bg-red-500/80 text-white backdrop-blur-sm"
                  >Interactive</span
                >
                <span
                  class="text-xs font-medium px-3 py-1 rounded-full bg-green-600/80 text-white backdrop-blur-sm"
                  >Gemini 3 Pro</span
                >
              </div>
            </div>
          </div>
          <div class="mb-6">
            <h3 class="text-white font-semibold mb-3">🚗 3D Features:</h3>
            <div class="grid grid-cols-2 gap-2 text-sm">
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-yellow-300">▶</span> Realistic car model
              </div>
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-yellow-300">▶</span> Dynamic lighting
              </div>
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-yellow-300">▶</span> Orbit controls
              </div>
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-yellow-300">▶</span> Cyber aesthetics
              </div>
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-yellow-300">▶</span> Reflective surfaces
              </div>
              <div class="flex items-center text-white/80">
                <span class="mr-2 text-yellow-300">▶</span> Smooth animations
              </div>
            </div>
          </div>
          <div class="mb-6">
            <h4 class="text-white/90 font-medium mb-2">🎮 Controls:</h4>
            <p class="text-sm text-white/70">
              Drag to rotate • Scroll to zoom • Experience the cyber future
            </p>
          </div>
          <a
            href="Cyber-Lambo.html"
            class="w-full text-center font-semibold text-white py-3 px-6 rounded-xl bg-gradient-to-r from-yellow-500 to-red-600 hover:from-yellow-600 hover:to-red-700 transition-all duration-300 shadow-lg hover:shadow-xl"
            >🏎️ Drive Into Cyber</a
          >
        </div>
      </div>
    </main>

    <footer class="text-center py-12 px-4">
      <div class="max-w-2xl mx-auto">
        <div class="mb-6">
          <h3 class="text-xl font-semibold text-white mb-3">
            🚀 Open Source Project
          </h3>
          <p class="text-white/70 mb-4">
            Explore the code, contribute, or create your own effects
          </p>
          <a
            href="https://github.com/vikumkarunathilake/satisfying-canvas-effects"
            target="_blank"
            rel="noopener noreferrer"
            class="inline-flex items-center px-6 py-3 bg-white/10 hover:bg-white/20 rounded-xl text-white font-medium transition-all duration-300 backdrop-blur-sm border border-white/20"
          >
            <span class="mr-2">⭐</span> View on GitHub
          </a>
        </div>
        <div class="border-t border-white/20 pt-6">
          <p class="text-white/60">
            Crafted with ❤️ by
            <a
              href="https://vikum.vercel.app/"
              target="_blank"
              rel="noopener noreferrer"
              class="text-cyan-300 hover:text-cyan-200 font-medium transition-colors duration-300"
              >Vikum Karunathilake</a
            >
          </p>
          <p class="text-white/40 text-sm mt-2">
            © 2024 • Built with vanilla JavaScript & HTML5 Canvas
          </p>
        </div>
      </div>
    </footer>
  </body>
</html>