-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (126 loc) · 9.64 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liquid Logo: free tool for animated logos</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></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=Honk&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<meta property="og:title" content="Liquid Logo" />
<meta property="og:description" content="Free tool for creating animated logos" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://collidingscopes.github.io/liquid-logo" />
<meta property="og:image" content="https://collidingscopes.github.io/liquid-logo/assets/siteOGImage4.png">
<meta property="og:image:type" content="image/png" >
<meta property="og:image:width" content="2506" >
<meta property="og:image:height" content="1476" >
<link rel="icon" href="assets/siteFavicon3.png">
<link rel="apple-touch-icon" href="assets/siteFavicon3.png">
<script defer src="https://cloud.umami.is/script.js" data-website-id="eb59c81c-27cb-4e1d-9e8c-bfbe70c48cd9"></script>
</head>
<body>
<div class="canvasDiv">
<canvas id="canvas"></canvas>
</div>
<table id="buttonTable">
<tr>
<td>
<button id="randomizeBtn" class="gui-button icon" title="Randomize Inputs (r)">🎲</button>
</td>
<td>
<button id="saveBtn" class="gui-button icon" title="Save Image (s)">📷</button>
</td>
<td>
<button id="exportVideoBtn" class="gui-button icon" title="Export Video (v)">🎥</button>
</td>
<td>
<label for="fileInput" class="gui-button">Upload Image</label>
<input type="file" id="fileInput" accept="image/*">
</td>
</tr>
</table>
<div id="videoRecordingMessageDiv" class="hidden sticky-top">
Video recording underway. Press menu button or "v" to stop. The video will save to your downloads folder after.
</div>
<div id="demo-logos-container">
<div class="demo-logos-header">Try Demo Logos & Icons</div>
<div class="demo-logos-grid">
<div class="demo-logo-button" onclick="loadDemoLogo('apple')">Apple</div>
<div class="demo-logo-button" onclick="loadDemoLogo('nike')">Nike</div>
<div class="demo-logo-button" onclick="loadDemoLogo('github')">GitHub</div>
<div class="demo-logo-button" onclick="loadDemoLogo('pepsi')">Pepsi</div>
<div class="demo-logo-button" onclick="loadDemoLogo('playstation')">Playstation</div>
<div class="demo-logo-button" onclick="loadDemoLogo('spotify')">Spotify</div>
<div class="demo-logo-button" onclick="loadDemoLogo('mario')">Mario</div>
<div class="demo-logo-button" onclick="loadDemoLogo('pikachu')">Pikachu</div>
<div class="demo-logo-button" onclick="loadDemoLogo('youtube')">Youtube</div>
</div>
</div>
<!-- Introduction text for logo animation tool -->
<div id="intro-text" class="hidden">
<h2>Logo Animation Generator</h2>
<p>Upload your logo and watch it come alive with fluid animations!</p>
<p>Use the controls to customize how the animation interacts with your logo.</p>
</div>
<div id="notesDiv">
<div id="textBox">
<h2 id="aboutText">Liquid Logo</h2>
<h3 id="subtitleText">Free tool for creating animated logos</h3>
<img class="example-img" src="assets/siteOGImage4.png">
<p>Turn your logo into a liquid metal animation! Upload a photo, then use the controls to adjust the colors, speed, noise intensity, animation pattern, and more.</p>
<p>Click the 🎲 button underneath the canvas to randomize all input parameters, this can give interesting colour / movement styles. You can then open the controls at the top right of the screen to fine-tune the parameters one-by-one.</p>
<p>This program works best with input logo images in png format, with a transparent background (or with a solid white / black color background). Consider cropping your image or running a background removal before inputting into this tool -- this might help to pick out the key edges of your image.</p>
<p>How this works: this tool uses WebGL shaders to create a real-time animation that moves around the edges of your logo, creating a liquid-metal aesthetic.</p>
<p>You can use this to create stylized animated versions of your logo.</p>
<p>You can export your creation as an image or video afterwards.</p>
<p>A few hotkeys for the pros:</p>
<ul>
<li>[r]: randomize all inputs (useful to find interesting parameters for a new image)</li>
<li>[space]: pause/play the animation</li>
<li>[v]: start and stop video export</li>
<li>[s]: save a screenshot image</li>
</ul>
<p>This tool is completely free, open source (MIT license), without any paywalls or premium options. You are welcome to use it for personal or commercial purposes.</p>
<p>If you found this tool useful, feel free to buy me a coffee. This would be much appreciated during late-night coding sessions!</p>
<a href="https://www.buymeacoffee.com/stereoDrift" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png" alt="Buy Me A Coffee"></a>
<p>Enormous thanks and credit to XorDev on Twitter, whose <a href="https://x.com/XorDev/status/1894123951401378051" rel="noopener" target="_blank">"Plasma" shader work</a> served as a starting point for this tool.</p>
<p>The code used to create the animation is quite resource-intensive, so it may run with some lag if your computer doesn't have enough computing power, too many tabs open, low battery, etc.</p>
<p>If the video export feature does not work for you, please try a free screen-recording tool such as OBS Studio.</p>
<p>This project is coded using webgl shaders, vanilla Javascript, HTML5 canvas, and CSS (<a href="https://github.com/collidingScopes/liquid-logo" target="_blank" rel="noopener">see github repo</a>). Video creation and encoding is done using mp4 muxer.</p>
<p>I do not have access to any images that you upload here, as all processing is done "client-side" (i.e., <b>no videos or images are saved/stored by me — they stay on your computer only</b>).</p>
<p>If you enjoyed this, you may be interested in my other free / open source projects:</p>
<ul>
<li><a href="https://collidingScopes.github.io/particular-drift" target="_blank" rel="noopener">Particular Drift</a>: turn photos into flowing particle animations</li>
<li><a href="https://collidingScopes.github.io/ascii" target="_blank" rel="noopener">Video-to-ASCII</a>: turn videos into ASCII pixel art</li>
<li><a href="https://collidingScopes.github.io/shimmer" target="_blank" rel="noopener">Shape Shimmer</a>: turn photos into funky wave animations</li>
<li><a href="https://collidingScopes.github.io" target="_blank" rel="noopener">Colliding Scopes</a>: turn photos into kaleidoscope animations</li>
<li><a href="https://collidingScopes.github.io/forcefield" target="_blank" rel="noopener">Force-Field Animation</a>: turn photos into particle animations</li>
<li><a href="https://manual-brick-breaker.netlify.app" target="_blank" rel="noopener">Manual Brick Breaker</a>: play brick breaker by waving your hands around</li>
</ul>
<p>Feel free to reach out to discuss, ask questions, or just to say hi! You can find me <a href="https://www.instagram.com/stereo.drift/" target="_blank" rel="noopener">@stereo.drift</a> on instagram, or through the other places below :)</p>
</div>
</div>
<div id="linksDiv">
<table id="infoMenuTable">
<tr>
<td><button id="gitHubButton"class="socialMediaButton"><a href="https://github.com/collidingScopes/liquid-logo" target="_blank" rel="noopener"><i class="fa-brands fa-github"></i></a></button></td>
<td><button id="coffeeButton" class="socialMediaButton"><a href="https://www.buymeacoffee.com/stereoDrift" target="_blank" rel="noopener"><i class="fa-solid fa-heart"></i></a></button></td>
<td><button id="instagramButton" class="socialMediaButton"><a href="https://www.instagram.com/stereo.drift/" target="_blank" rel="noopener"><i class="fa-brands fa-instagram"></i></a></button></td>
<td><button id="xButton" class="socialMediaButton"><a class="x-link" href="https://x.com/measure_plan" target="_blank" rel="noopener">𝕏</i></a></button></td>
<td><button id="emailButton" class="socialMediaButton"><a href="mailto:[email protected]" target="_blank" rel="noopener"><i class="fa-solid fa-envelope"></i></a></button></td>
</tr>
</table>
</div>
</body>
<script src="shaders.js"></script>
<script src="presets.js"></script>
<script src="mp4-muxer-main/build/mp4-muxer.js"></script>
<script src="canvasVideoExport.js"></script>
<script src="background-removal.js"></script>
<script src="gui-controls.js"></script>
<script src="main.js"></script>
</html>