ritual/ritual.sh
ritual/ritual.sh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'feature/button-generator'

Browse source
This commit is contained in:
Dan 2026-01-09 13:20:12 +00:00
commit 7b74e5e997
36 changed files with 5822 additions and 591 deletions
Download patch file Download diff file Expand all files Collapse all files

45
assets/sass/pages/button-generator.scss
View file

@ -76,7 +76,6 @@
z-index: 90;
}
&::before {
content: "";
position: absolute;
@ -203,7 +202,7 @@
}
label {
display: block;
//display: block;
margin-top: 0.75rem;
margin-bottom: 0.25rem;
font-weight: 500;
@ -438,6 +437,7 @@
input[type="checkbox"] {
margin: 0;
cursor: pointer;
margin-right: 0.25em;
}
span {
@ -535,4 +535,45 @@
transform: translateY(0);
}
}
// Custom tooltip styles
.control-tooltip {
position: fixed;
background: linear-gradient(
135deg,
rgba(0, 120, 200, 0.98) 0%,
rgba(0, 100, 180, 0.98) 100%
);
color: #fff;
padding: 0.5rem 0.75rem;
border-radius: 4px;
font-size: 0.8rem;
pointer-events: none;
z-index: 10000;
max-width: 250px;
box-shadow:
0 0 20px rgba(0, 150, 255, 0.5),
0 4px 12px rgba(0, 0, 0, 0.4),
inset 0 0 20px rgba(0, 150, 255, 0.1);
border: 1px solid rgba(0, 150, 255, 0.6);
opacity: 0;
transition: opacity 0.15s ease;
line-height: 1.4;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
&.visible {
opacity: 1;
}
&::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-bottom-color: rgba(0, 120, 200, 0.98);
filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.2));
}
}
}

6
content/resources/button-generator/index.md
View file

@ -14,10 +14,14 @@ This supports gif despite the basic `canvas` tag limitation courtesy of [gif.js]
Big thanks to [neonaut's 88x31 archive](https://neonaut.neocities.org/cyber/88x31) and everyone who made the buttons that appear there. You should check it out if you need inspiration for your button!
**Important note:** Some effects and animations stack, some don't. Some work better with certain lengths of text or variables depending on text length. Experiment, see what happens.
{{< button-generator >}}
---
### Changelog
- 08/01/2025 - Initial release.
- 07/01/2025 - Initial release.
- 08/01/2025 - Total refactor to be modular, added many more effects.
- 09/01/2025 - Rewrote the bevel inset and outset border code so they look a lot nicer at the corners. Updates throughout so that multibit (emoji!) characters should work.

3
layouts/_default/baseof.html
View file

@ -37,8 +37,7 @@
<!-- Button Generator - only load if page content contains button-generator shortcode -->
{{ if or (findRE "{{<\\s*button-generator" .RawContent) (findRE "{{%\\s*button-generator" .RawContent) }}
<script src="{{ "js/gif.js" | relURL }}"></script>
{{ $buttonGenerator := resources.Get "js/button-generator.js" | resources.Minify | resources.Fingerprint }}
<script src="{{ $buttonGenerator.RelPermalink }}" integrity="{{ $buttonGenerator.Data.Integrity }}"></script>
<script type="module" src="{{ "js/button-generator/main.js" | relURL }}"></script>
{{ end }}
</body>
</html>

587
layouts/shortcodes/button-generator.html
View file

@ -17,591 +17,6 @@
</div>
</div>
<div class="controls-section">
<div class="control-group">
<h3 class="control-group-header">
<span>Text Line 1</span>
<span class="toggle-icon">−</span>
</h3>
<div class="control-group-content">
<label for="button-text">Text</label>
<input
type="text"
id="button-text"
value="RITUAL.SH"
maxlength="20"
/>
<label class="checkbox-label">
<input type="checkbox" id="text-enabled" checked />
<span>Enable Text Line 1</span>
</label>
<label for="font-size"
>Font Size: <span id="font-size-value">14</span>px</label
>
<input type="range" id="font-size" min="6" max="24" value="14" />
<label for="text-x"
>Horizontal Position: <span id="text-x-value">50</span>%</label
>
<input type="range" id="text-x" min="0" max="100" value="50" />
<label for="text-y"
>Vertical Position: <span id="text-y-value">35</span>%</label
>
<input type="range" id="text-y" min="0" max="100" value="35" />
<label for="text-color-type">Text Color Type</label>
<select id="text-color-type">
<option value="solid">Solid Color</option>
<option value="gradient">Gradient</option>
</select>
<div id="text-solid-color">
<label for="text-color">Text Color</label>
<input type="color" id="text-color" value="#ffffff" />
</div>
<div id="text-gradient-color" style="display: none">
<label for="text-gradient-color1">Gradient Color 1</label>
<input type="color" id="text-gradient-color1" value="#ffffff" />
<label for="text-gradient-color2">Gradient Color 2</label>
<input type="color" id="text-gradient-color2" value="#00ffff" />
<label for="text-gradient-angle"
>Gradient Angle:
<span id="text-gradient-angle-value">0</span>°</label
>
<input
type="range"
id="text-gradient-angle"
min="0"
max="360"
value="0"
/>
</div>
<label class="checkbox-label">
<input type="checkbox" id="text-outline" />
<span>Outline</span>
</label>
<input
type="color"
id="outline-color"
value="#000000"
style="display: none"
/>
<label for="font-family">Font</label>
<select id="font-family">
<option value="Lato">Lato</option>
<option value="Roboto">Roboto</option>
<option value="Open Sans">Open Sans</option>
<option value="Montserrat">Montserrat</option>
<option value="Oswald">Oswald</option>
<option value="Bebas Neue">Bebas Neue</option>
<option value="Roboto Mono">Roboto Mono</option>
<option value="VT323">VT323</option>
<option value="Press Start 2P">Press Start 2P</option>
<option value="DSEG7-Classic">DSEG7</option>
</select>
<div class="checkbox-row">
<label class="checkbox-label">
<input type="checkbox" id="font-bold" />
<span>Bold</span>
</label>
<label class="checkbox-label">
<input type="checkbox" id="font-italic" />
<span>Italic</span>
</label>
</div>
</div>
</div>
<div class="control-group">
<h3 class="control-group-header">
<span>Text Line 1 Animation</span>
<span class="toggle-icon">−</span>
</h3>
<div class="control-group-content">
<label class="checkbox-label">
<input type="checkbox" id="animate-text-wave" />
<span>Wave Animation</span>
</label>
<div id="wave-controls" style="display: none">
<label for="wave-amplitude"
>Amplitude: <span id="wave-amplitude-value">3</span>px</label
>
<input
type="range"
id="wave-amplitude"
min="0"
max="10"
value="3"
step="0.5"
/>
<label for="wave-speed"
>Speed: <span id="wave-speed-value">1.0</span>x</label
>
<input
type="range"
id="wave-speed"
min="0.5"
max="3"
value="1.0"
step="0.1"
/>
</div>
<label class="checkbox-label">
<input type="checkbox" id="animate-text-rainbow" />
<span>Rainbow Text</span>
</label>
<div id="rainbow-text-controls" style="display: none">
<label for="text-rainbow-speed"
>Speed: <span id="text-rainbow-speed-value">1.0</span>x</label
>
<input
type="range"
id="text-rainbow-speed"
min="0.5"
max="5"
value="1.0"
step="0.1"
/>
</div>
</div>
</div>
<div class="control-group">
<h3 class="control-group-header">
<span>Text Line 2</span>
<span class="toggle-icon">−</span>
</h3>
<div class="control-group-content">
<label for="button-text2">Text</label>
<input type="text" id="button-text2" value="" maxlength="20" />
<label class="checkbox-label">
<input type="checkbox" id="text2-enabled" />
<span>Enable Text Line 2</span>
</label>
<label for="font-size2"
>Font Size: <span id="font-size2-value">12</span>px</label
>
<input type="range" id="font-size2" min="6" max="24" value="12" />
<label for="text2-x"
>Horizontal Position: <span id="text2-x-value">50</span>%</label
>
<input type="range" id="text2-x" min="0" max="100" value="50" />
<label for="text2-y"
>Vertical Position: <span id="text2-y-value">65</span>%</label
>
<input type="range" id="text2-y" min="0" max="100" value="65" />
<label for="text2-color-type">Text Color Type</label>
<select id="text2-color-type">
<option value="solid">Solid Color</option>
<option value="gradient">Gradient</option>
</select>
<div id="text2-solid-color">
<label for="text2-color">Text Color</label>
<input type="color" id="text2-color" value="#ffffff" />
</div>
<div id="text2-gradient-color" style="display: none">
<label for="text2-gradient-color1">Gradient Color 1</label>
<input type="color" id="text2-gradient-color1" value="#ffffff" />
<label for="text2-gradient-color2">Gradient Color 2</label>
<input type="color" id="text2-gradient-color2" value="#00ffff" />
<label for="text2-gradient-angle"
>Gradient Angle:
<span id="text2-gradient-angle-value">0</span>°</label
>
<input
type="range"
id="text2-gradient-angle"
min="0"
max="360"
value="0"
/>
</div>
<label class="checkbox-label">
<input type="checkbox" id="text2-outline" />
<span>Outline</span>
</label>
<input
type="color"
id="outline2-color"
value="#000000"
style="display: none"
/>
<label for="font-family2">Font</label>
<select id="font-family2">
<option value="Lato">Lato</option>
<option value="Roboto">Roboto</option>
<option value="Open Sans">Open Sans</option>
<option value="Montserrat">Montserrat</option>
<option value="Oswald">Oswald</option>
<option value="Bebas Neue">Bebas Neue</option>
<option value="Roboto Mono">Roboto Mono</option>
<option value="VT323">VT323</option>
<option value="Press Start 2P">Press Start 2P</option>
<option value="DSEG7-Classic">DSEG7</option>
</select>
<div class="checkbox-row">
<label class="checkbox-label">
<input type="checkbox" id="font-bold2" />
<span>Bold</span>
</label>
<label class="checkbox-label">
<input type="checkbox" id="font-italic2" />
<span>Italic</span>
</label>
</div>
</div>
</div>
<div class="control-group">
<h3 class="control-group-header">
<span>Text Line 2 Animation</span>
<span class="toggle-icon">−</span>
</h3>
<div class="control-group-content">
<label class="checkbox-label">
<input type="checkbox" id="animate-text-wave2" />
<span>Wave Animation</span>
</label>
<div id="wave-controls2" style="display: none">
<label for="wave-amplitude2"
>Amplitude: <span id="wave-amplitude2-value">3</span>px</label
>
<input
type="range"
id="wave-amplitude2"
min="0"
max="10"
value="3"
step="0.5"
/>
<label for="wave-speed2"
>Speed: <span id="wave-speed2-value">1.0</span>x</label
>
<input
type="range"
id="wave-speed2"
min="0.5"
max="3"
value="1.0"
step="0.1"
/>
</div>
<label class="checkbox-label">
<input type="checkbox" id="animate-text-rainbow2" />
<span>Rainbow Text</span>
</label>
<div id="rainbow-text2-controls" style="display: none">
<label for="text-rainbow-speed2"
>Speed: <span id="text-rainbow-speed2-value">1.0</span>x</label
>
<input
type="range"
id="text-rainbow-speed2"
min="0.5"
max="5"
value="1.0"
step="0.1"
/>
</div>
</div>
</div>
<div class="control-group">
<h3 class="control-group-header">
<span>Background</span>
<span class="toggle-icon">−</span>
</h3>
<div class="control-group-content">
<label for="bg-type">Background Type</label>
<select id="bg-type">
<option value="solid">Solid Color</option>
<option value="gradient">Gradient</option>
<option value="texture">Texture</option>
</select>
<div id="solid-controls">
<label for="bg-color">Background Color</label>
<input type="color" id="bg-color" value="#0066cc" />
</div>
<div id="gradient-controls" style="display: none">
<label for="gradient-color1">Color 1</label>
<input type="color" id="gradient-color1" value="#0066cc" />
<label for="gradient-color2">Color 2</label>
<input type="color" id="gradient-color2" value="#00ccff" />
<label for="gradient-angle"
>Angle: <span id="gradient-angle-value">90</span>°</label
>
<input
type="range"
id="gradient-angle"
min="0"
max="360"
value="90"
/>
</div>
<div id="texture-controls" style="display: none">
<label for="texture-type">Texture Pattern</label>
<select id="texture-type">
<option value="dots">Dots</option>
<option value="grid">Grid</option>
<option value="diagonal">Diagonal Lines</option>
<option value="checkerboard">Checkerboard</option>
<option value="noise">Noise</option>
<option value="stars">Stars</option>
</select>
<label for="texture-color1">Base Color</label>
<input type="color" id="texture-color1" value="#0066cc" />
<label for="texture-color2">Pattern Color</label>
<input type="color" id="texture-color2" value="#0099ff" />
<label for="texture-scale"
>Pattern Scale: <span id="texture-scale-value">50</span>%</label
>
<input
type="range"
id="texture-scale"
min="10"
max="100"
value="50"
/>
</div>
</div>
</div>
<div class="control-group">
<h3 class="control-group-header">
<span>Background Animation</span>
<span class="toggle-icon">−</span>
</h3>
<div class="control-group-content">
<label class="checkbox-label">
<input type="checkbox" id="animate-bg-rainbow" />
<span>Rainbow Flash</span>
</label>
<div id="rainbow-bg-controls" style="display: none">
<label for="rainbow-speed"
>Speed: <span id="rainbow-speed-value">0.5</span>x</label
>
<input
type="range"
id="rainbow-speed"
min="0.1"
max="3"
value="0.5"
step="0.1"
/>
</div>
<label class="checkbox-label">
<input type="checkbox" id="animate-bg-rainbow-gradient" />
<span>Rainbow Gradient</span>
</label>
</div>
</div>
<div class="control-group">
<h3 class="control-group-header">
<span>Border</span>
<span class="toggle-icon">−</span>
</h3>
<div class="control-group-content">
<label for="border-width"
>Border Width: <span id="border-width-value">2</span>px</label
>
<input type="range" id="border-width" min="0" max="5" value="2" />
<label for="border-color">Border Color</label>
<input type="color" id="border-color" value="#000000" />
<label for="border-style">Border Style</label>
<select id="border-style">
<option value="solid">Solid</option>
<option value="inset">Inset (3D)</option>
<option value="outset">Outset (3D)</option>
<option value="ridge">Ridge</option>
</select>
</div>
</div>
<div class="control-group">
<h3 class="control-group-header">
<span>Special Effects</span>
<span class="toggle-icon">−</span>
</h3>
<div class="control-group-content">
<p class="info-text">
Almost all animations should stack, so pick as many as you want.
</p>
<label class="checkbox-label">
<input type="checkbox" id="animate-glitch" />
<span>Glitch Effect</span>
</label>
<div id="glitch-controls" style="display: none">
<label for="glitch-intensity"
>Intensity: <span id="glitch-intensity-value">3</span></label
>
<input
type="range"
id="glitch-intensity"
min="1"
max="10"
value="3"
/>
</div>
<label class="checkbox-label">
<input type="checkbox" id="animate-pulse" />
<span>Pulse Effect</span>
</label>
<div id="pulse-controls" style="display: none">
<label for="pulse-scale"
>Scale: <span id="pulse-scale-value">1.1</span>x</label
>
<input
type="range"
id="pulse-scale"
min="1.0"
max="1.3"
value="1.1"
step="0.05"
/>
</div>
<label class="checkbox-label">
<input type="checkbox" id="animate-shimmer" />
<span>Shimmer Effect</span>
</label>
<label class="checkbox-label">
<input type="checkbox" id="animate-scanline" />
<span>Scanline Effect</span>
</label>
<div id="scanline-controls" style="display: none">
<label for="scanline-intensity"
>Intensity: <span id="scanline-intensity-value">0.3</span></label
>
<input
type="range"
id="scanline-intensity"
min="0.1"
max="1"
value="0.3"
step="0.1"
/>
<label for="scanline-speed"
>Speed: <span id="scanline-speed-value">1.0</span>x</label
>
<input
type="range"
id="scanline-speed"
min="0.5"
max="3"
value="1.0"
step="0.1"
/>
</div>
<label class="checkbox-label">
<input type="checkbox" id="animate-rgb-split" />
<span>RGB Split Effect</span>
</label>
<div id="rgb-split-controls" style="display: none">
<label for="rgb-split-intensity"
>Intensity: <span id="rgb-split-intensity-value">2</span>px</label
>
<input
type="range"
id="rgb-split-intensity"
min="1"
max="5"
value="2"
step="0.5"
/>
</div>
<label class="checkbox-label">
<input type="checkbox" id="animate-noise" />
<span>Noise Effect</span>
</label>
<div id="noise-controls" style="display: none">
<label for="noise-intensity"
>Intensity: <span id="noise-intensity-value">0.1</span></label
>
<input
type="range"
id="noise-intensity"
min="0.05"
max="0.5"
value="0.1"
step="0.05"
/>
</div>
{{/*
<label class="checkbox-label">
<input type="checkbox" id="animate-rotate" />
<span>Rotate Effect</span>
</label>
<div id="rotate-controls" style="display: none">
<label for="rotate-angle"
>Max Angle: <span id="rotate-angle-value">5</span>°</label
>
<input
type="range"
id="rotate-angle"
min="2"
max="15"
value="5"
step="1"
/>
<label for="rotate-speed"
>Speed: <span id="rotate-speed-value">1.0</span>x</label
>
<input
type="range"
id="rotate-speed"
min="0.5"
max="3"
value="1.0"
step="0.1"
/>
</div>
*/}}
</div>
</div>
</div>
<div class="controls-section"></div>
</div>
</div>

607
layouts/shortcodes/button-generator.html.backup Normal file
View file

@ -0,0 +1,607 @@
<div id="button-generator-app">
<div class="generator-container">
<div class="preview-section">
<h3 class="hidden-md-down">Preview</h3>
<div class="preview-container">
<div class="preview-wrapper">
<canvas id="button-canvas" width="88" height="31"></canvas>
</div>
</div>
<button id="download-button" class="btn-primary">Download Button</button>
<div class="presets-container hidden-md-down">
<h3>Presets</h3>
<button id="preset-random" class="btn-secondary">Random Button</button>
<button id="preset-classic" class="btn-secondary">Classic Style</button>
<button id="preset-modern" class="btn-secondary">Modern Style</button>
</div>
</div>
<div class="controls-section">
<div class="control-group">
<h3 class="control-group-header">
<span>Text Line 1</span>
<span class="toggle-icon">−</span>
</h3>
<div class="control-group-content">
<label for="button-text">Text</label>
<input
type="text"
id="button-text"
value="RITUAL.SH"
maxlength="20"
/>
<label class="checkbox-label">
<input type="checkbox" id="text-enabled" checked />
<span>Enable Text Line 1</span>
</label>
<label for="font-size"
>Font Size: <span id="font-size-value">14</span>px</label
>
<input type="range" id="font-size" min="6" max="24" value="14" />
<label for="text-x"
>Horizontal Position: <span id="text-x-value">50</span>%</label
>
<input type="range" id="text-x" min="0" max="100" value="50" />
<label for="text-y"
>Vertical Position: <span id="text-y-value">35</span>%</label
>
<input type="range" id="text-y" min="0" max="100" value="35" />
<label for="text-color-type">Text Color Type</label>
<select id="text-color-type">
<option value="solid">Solid Color</option>
<option value="gradient">Gradient</option>
</select>
<div id="text-solid-color">
<label for="text-color">Text Color</label>
<input type="color" id="text-color" value="#ffffff" />
</div>
<div id="text-gradient-color" style="display: none">
<label for="text-gradient-color1">Gradient Color 1</label>
<input type="color" id="text-gradient-color1" value="#ffffff" />
<label for="text-gradient-color2">Gradient Color 2</label>
<input type="color" id="text-gradient-color2" value="#00ffff" />
<label for="text-gradient-angle"
>Gradient Angle:
<span id="text-gradient-angle-value">0</span>°</label
>
<input
type="range"
id="text-gradient-angle"
min="0"
max="360"
value="0"
/>
</div>
<label class="checkbox-label">
<input type="checkbox" id="text-outline" />
<span>Outline</span>
</label>
<input
type="color"
id="outline-color"
value="#000000"
style="display: none"
/>
<label for="font-family">Font</label>
<select id="font-family">
<option value="Lato">Lato</option>
<option value="Roboto">Roboto</option>
<option value="Open Sans">Open Sans</option>
<option value="Montserrat">Montserrat</option>
<option value="Oswald">Oswald</option>
<option value="Bebas Neue">Bebas Neue</option>
<option value="Roboto Mono">Roboto Mono</option>
<option value="VT323">VT323</option>
<option value="Press Start 2P">Press Start 2P</option>
<option value="DSEG7-Classic">DSEG7</option>
</select>
<div class="checkbox-row">
<label class="checkbox-label">
<input type="checkbox" id="font-bold" />
<span>Bold</span>
</label>
<label class="checkbox-label">
<input type="checkbox" id="font-italic" />
<span>Italic</span>
</label>
</div>
</div>
</div>
<div class="control-group">
<h3 class="control-group-header">
<span>Text Line 1 Animation</span>
<span class="toggle-icon">−</span>
</h3>
<div class="control-group-content">
<label class="checkbox-label">
<input type="checkbox" id="animate-text-wave" />
<span>Wave Animation</span>
</label>
<div id="wave-controls" style="display: none">
<label for="wave-amplitude"
>Amplitude: <span id="wave-amplitude-value">3</span>px</label
>
<input
type="range"
id="wave-amplitude"
min="0"
max="10"
value="3"
step="0.5"
/>
<label for="wave-speed"
>Speed: <span id="wave-speed-value">1.0</span>x</label
>
<input
type="range"
id="wave-speed"
min="0.5"
max="3"
value="1.0"
step="0.1"
/>
</div>
<label class="checkbox-label">
<input type="checkbox" id="animate-text-rainbow" />
<span>Rainbow Text</span>
</label>
<div id="rainbow-text-controls" style="display: none">
<label for="text-rainbow-speed"
>Speed: <span id="text-rainbow-speed-value">1.0</span>x</label
>
<input
type="range"
id="text-rainbow-speed"
min="0.5"
max="5"
value="1.0"
step="0.1"
/>
</div>
</div>
</div>
<div class="control-group">
<h3 class="control-group-header">
<span>Text Line 2</span>
<span class="toggle-icon">−</span>
</h3>
<div class="control-group-content">
<label for="button-text2">Text</label>
<input type="text" id="button-text2" value="" maxlength="20" />
<label class="checkbox-label">
<input type="checkbox" id="text2-enabled" />
<span>Enable Text Line 2</span>
</label>
<label for="font-size2"
>Font Size: <span id="font-size2-value">12</span>px</label
>
<input type="range" id="font-size2" min="6" max="24" value="12" />
<label for="text2-x"
>Horizontal Position: <span id="text2-x-value">50</span>%</label
>
<input type="range" id="text2-x" min="0" max="100" value="50" />
<label for="text2-y"
>Vertical Position: <span id="text2-y-value">65</span>%</label
>
<input type="range" id="text2-y" min="0" max="100" value="65" />
<label for="text2-color-type">Text Color Type</label>
<select id="text2-color-type">
<option value="solid">Solid Color</option>
<option value="gradient">Gradient</option>
</select>
<div id="text2-solid-color">
<label for="text2-color">Text Color</label>
<input type="color" id="text2-color" value="#ffffff" />
</div>
<div id="text2-gradient-color" style="display: none">
<label for="text2-gradient-color1">Gradient Color 1</label>
<input type="color" id="text2-gradient-color1" value="#ffffff" />
<label for="text2-gradient-color2">Gradient Color 2</label>
<input type="color" id="text2-gradient-color2" value="#00ffff" />
<label for="text2-gradient-angle"
>Gradient Angle:
<span id="text2-gradient-angle-value">0</span>°</label
>
<input
type="range"
id="text2-gradient-angle"
min="0"
max="360"
value="0"
/>
</div>
<label class="checkbox-label">
<input type="checkbox" id="text2-outline" />
<span>Outline</span>
</label>
<input
type="color"
id="outline2-color"
value="#000000"
style="display: none"
/>
<label for="font-family2">Font</label>
<select id="font-family2">
<option value="Lato">Lato</option>
<option value="Roboto">Roboto</option>
<option value="Open Sans">Open Sans</option>
<option value="Montserrat">Montserrat</option>
<option value="Oswald">Oswald</option>
<option value="Bebas Neue">Bebas Neue</option>
<option value="Roboto Mono">Roboto Mono</option>
<option value="VT323">VT323</option>
<option value="Press Start 2P">Press Start 2P</option>
<option value="DSEG7-Classic">DSEG7</option>
</select>
<div class="checkbox-row">
<label class="checkbox-label">
<input type="checkbox" id="font-bold2" />
<span>Bold</span>
</label>
<label class="checkbox-label">
<input type="checkbox" id="font-italic2" />
<span>Italic</span>
</label>
</div>
</div>
</div>
<div class="control-group">
<h3 class="control-group-header">
<span>Text Line 2 Animation</span>
<span class="toggle-icon">−</span>
</h3>
<div class="control-group-content">
<label class="checkbox-label">
<input type="checkbox" id="animate-text-wave2" />
<span>Wave Animation</span>
</label>
<div id="wave-controls2" style="display: none">
<label for="wave-amplitude2"
>Amplitude: <span id="wave-amplitude2-value">3</span>px</label
>
<input
type="range"
id="wave-amplitude2"
min="0"
max="10"
value="3"
step="0.5"
/>
<label for="wave-speed2"
>Speed: <span id="wave-speed2-value">1.0</span>x</label
>
<input
type="range"
id="wave-speed2"
min="0.5"
max="3"
value="1.0"
step="0.1"
/>
</div>
<label class="checkbox-label">
<input type="checkbox" id="animate-text-rainbow2" />
<span>Rainbow Text</span>
</label>
<div id="rainbow-text2-controls" style="display: none">
<label for="text-rainbow-speed2"
>Speed: <span id="text-rainbow-speed2-value">1.0</span>x</label
>
<input
type="range"
id="text-rainbow-speed2"
min="0.5"
max="5"
value="1.0"
step="0.1"
/>
</div>
</div>
</div>
<div class="control-group">
<h3 class="control-group-header">
<span>Background</span>
<span class="toggle-icon">−</span>
</h3>
<div class="control-group-content">
<label for="bg-type">Background Type</label>
<select id="bg-type">
<option value="solid">Solid Color</option>
<option value="gradient">Gradient</option>
<option value="texture">Texture</option>
</select>
<div id="solid-controls">
<label for="bg-color">Background Color</label>
<input type="color" id="bg-color" value="#0066cc" />
</div>
<div id="gradient-controls" style="display: none">
<label for="gradient-color1">Color 1</label>
<input type="color" id="gradient-color1" value="#0066cc" />
<label for="gradient-color2">Color 2</label>
<input type="color" id="gradient-color2" value="#00ccff" />
<label for="gradient-angle"
>Angle: <span id="gradient-angle-value">90</span>°</label
>
<input
type="range"
id="gradient-angle"
min="0"
max="360"
value="90"
/>
</div>
<div id="texture-controls" style="display: none">
<label for="texture-type">Texture Pattern</label>
<select id="texture-type">
<option value="dots">Dots</option>
<option value="grid">Grid</option>
<option value="diagonal">Diagonal Lines</option>
<option value="checkerboard">Checkerboard</option>
<option value="noise">Noise</option>
<option value="stars">Stars</option>
</select>
<label for="texture-color1">Base Color</label>
<input type="color" id="texture-color1" value="#0066cc" />
<label for="texture-color2">Pattern Color</label>
<input type="color" id="texture-color2" value="#0099ff" />
<label for="texture-scale"
>Pattern Scale: <span id="texture-scale-value">50</span>%</label
>
<input
type="range"
id="texture-scale"
min="10"
max="100"
value="50"
/>
</div>
</div>
</div>
<div class="control-group">
<h3 class="control-group-header">
<span>Background Animation</span>
<span class="toggle-icon">−</span>
</h3>
<div class="control-group-content">
<label class="checkbox-label">
<input type="checkbox" id="animate-bg-rainbow" />
<span>Rainbow Flash</span>
</label>
<div id="rainbow-bg-controls" style="display: none">
<label for="rainbow-speed"
>Speed: <span id="rainbow-speed-value">0.5</span>x</label
>
<input
type="range"
id="rainbow-speed"
min="0.1"
max="3"
value="0.5"
step="0.1"
/>
</div>
<label class="checkbox-label">
<input type="checkbox" id="animate-bg-rainbow-gradient" />
<span>Rainbow Gradient</span>
</label>
</div>
</div>
<div class="control-group">
<h3 class="control-group-header">
<span>Border</span>
<span class="toggle-icon">−</span>
</h3>
<div class="control-group-content">
<label for="border-width"
>Border Width: <span id="border-width-value">2</span>px</label
>
<input type="range" id="border-width" min="0" max="5" value="2" />
<label for="border-color">Border Color</label>
<input type="color" id="border-color" value="#000000" />
<label for="border-style">Border Style</label>
<select id="border-style">
<option value="solid">Solid</option>
<option value="inset">Inset (3D)</option>
<option value="outset">Outset (3D)</option>
<option value="ridge">Ridge</option>
</select>
</div>
</div>
<div class="control-group">
<h3 class="control-group-header">
<span>Special Effects</span>
<span class="toggle-icon">−</span>
</h3>
<div class="control-group-content">
<p class="info-text">
Almost all animations should stack, so pick as many as you want.
</p>
<label class="checkbox-label">
<input type="checkbox" id="animate-glitch" />
<span>Glitch Effect</span>
</label>
<div id="glitch-controls" style="display: none">
<label for="glitch-intensity"
>Intensity: <span id="glitch-intensity-value">3</span></label
>
<input
type="range"
id="glitch-intensity"
min="1"
max="10"
value="3"
/>
</div>
<label class="checkbox-label">
<input type="checkbox" id="animate-pulse" />
<span>Pulse Effect</span>
</label>
<div id="pulse-controls" style="display: none">
<label for="pulse-scale"
>Scale: <span id="pulse-scale-value">1.1</span>x</label
>
<input
type="range"
id="pulse-scale"
min="1.0"
max="1.3"
value="1.1"
step="0.05"
/>
</div>
<label class="checkbox-label">
<input type="checkbox" id="animate-shimmer" />
<span>Shimmer Effect</span>
</label>
<label class="checkbox-label">
<input type="checkbox" id="animate-scanline" />
<span>Scanline Effect</span>
</label>
<div id="scanline-controls" style="display: none">
<label for="scanline-intensity"
>Intensity: <span id="scanline-intensity-value">0.3</span></label
>
<input
type="range"
id="scanline-intensity"
min="0.1"
max="1"
value="0.3"
step="0.1"
/>
<label for="scanline-speed"
>Speed: <span id="scanline-speed-value">1.0</span>x</label
>
<input
type="range"
id="scanline-speed"
min="0.5"
max="3"
value="1.0"
step="0.1"
/>
</div>
<label class="checkbox-label">
<input type="checkbox" id="animate-rgb-split" />
<span>RGB Split Effect</span>
</label>
<div id="rgb-split-controls" style="display: none">
<label for="rgb-split-intensity"
>Intensity: <span id="rgb-split-intensity-value">2</span>px</label
>
<input
type="range"
id="rgb-split-intensity"
min="1"
max="5"
value="2"
step="0.5"
/>
</div>
<label class="checkbox-label">
<input type="checkbox" id="animate-noise" />
<span>Noise Effect</span>
</label>
<div id="noise-controls" style="display: none">
<label for="noise-intensity"
>Intensity: <span id="noise-intensity-value">0.1</span></label
>
<input
type="range"
id="noise-intensity"
min="0.05"
max="0.5"
value="0.1"
step="0.05"
/>
</div>
{{/*
<label class="checkbox-label">
<input type="checkbox" id="animate-rotate" />
<span>Rotate Effect</span>
</label>
<div id="rotate-controls" style="display: none">
<label for="rotate-angle"
>Max Angle: <span id="rotate-angle-value">5</span>°</label
>
<input
type="range"
id="rotate-angle"
min="2"
max="15"
value="5"
step="1"
/>
<label for="rotate-speed"
>Speed: <span id="rotate-speed-value">1.0</span>x</label
>
<input
type="range"
id="rotate-speed"
min="0.5"
max="3"
value="1.0"
step="0.1"
/>
</div>
*/}}
</div>
</div>
</div>
</div>
</div>

374
static/js/button-generator/button-generator-core.js Normal file
View file

@ -0,0 +1,374 @@
import { ButtonEffect } from './effect-base.js';
/**
* Animation state class - passed to effects for frame-based rendering
*/
export class AnimationState {
constructor(frameNumber = 0, totalFrames = 40, fps = 20) {
this.frame = frameNumber;
this.totalFrames = totalFrames;
this.progress = frameNumber / totalFrames; // 0 to 1
this.fps = fps;
this.time = (frameNumber / fps) * 1000; // milliseconds
}
/**
* Helper to get phase for periodic animations (0 to 2π)
* @param {number} speed - Speed multiplier
* @returns {number} Phase in radians
*/
getPhase(speed = 1.0) {
return this.progress * speed * Math.PI * 2;
}
}
/**
* Main ButtonGenerator class with effect registry system
*/
export class ButtonGenerator {
constructor(canvas, config = {}) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
// Animation configuration
this.animConfig = {
fps: config.fps || 20,
duration: config.duration || 2, // seconds
get totalFrames() {
return this.fps * this.duration;
}
};
// Effect registry organized by type
this.effects = {
transform: [],
background: [],
border: [],
text: [],
text2: [],
general: []
};
// Registered effects by ID for quick lookup
this.effectsById = new Map();
// Control elements cache
this.controlElements = {};
// Animation state
this.previewAnimationId = null;
// Font list for preloading
this.fonts = config.fonts || [
'Lato', 'Roboto', 'Open Sans', 'Montserrat', 'Oswald',
'Bebas Neue', 'Roboto Mono', 'VT323', 'Press Start 2P', 'DSEG7-Classic'
];
}
/**
* Register an effect with the generator
* @param {ButtonEffect} effect - Effect instance to register
*/
registerEffect(effect) {
if (!(effect instanceof ButtonEffect)) {
throw new Error('Effect must extend ButtonEffect class');
}
if (this.effectsById.has(effect.id)) {
console.warn(`Effect with ID "${effect.id}" is already registered. Skipping.`);
return;
}
// Add to type-specific array
const type = effect.type;
if (!this.effects[type]) {
this.effects[type] = [];
}
this.effects[type].push(effect);
this.effectsById.set(effect.id, effect);
// Sort by render order
this.effects[type].sort((a, b) => a.renderOrder - b.renderOrder);
console.log(`Registered effect: ${effect.name} (${effect.id}) [${type}]`);
}
/**
* Get all registered effects
* @returns {Array<ButtonEffect>}
*/
getAllEffects() {
return Array.from(this.effectsById.values());
}
/**
* Get effects by type
* @param {string} type - Effect type
* @returns {Array<ButtonEffect>}
*/
getEffectsByType(type) {
return this.effects[type] || [];
}
/**
* Initialize and preload fonts
* @returns {Promise}
*/
async preloadFonts() {
const fontPromises = this.fonts.flatMap(font => [
document.fonts.load(`400 12px "${font}"`),
document.fonts.load(`700 12px "${font}"`),
document.fonts.load(`italic 400 12px "${font}"`)
]);
await Promise.all(fontPromises);
console.log('All fonts loaded for canvas');
}
/**
* Get current control values from DOM
* @returns {Object} Map of control ID to value
*/
getControlValues() {
const values = {};
// Get all registered control IDs from effects
const allControls = new Set();
this.getAllEffects().forEach(effect => {
effect.controls.forEach(control => {
allControls.add(control.id);
});
});
// Read values from DOM
allControls.forEach(id => {
const element = document.getElementById(id);
if (element) {
if (element.type === 'checkbox') {
values[id] = element.checked;
} else if (element.type === 'range' || element.type === 'number') {
values[id] = parseFloat(element.value);
} else {
values[id] = element.value;
}
}
});
return values;
}
/**
* Draw button with all effects applied
* @param {AnimationState} animState - Animation state (null for static)
* @param {Object} baseControls - Base button controls (text, colors, etc.)
*/
draw(animState = null, baseControls = {}) {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
const controlValues = { ...baseControls, ...this.getControlValues() };
const renderData = {
width: this.canvas.width,
height: this.canvas.height,
centerX: this.canvas.width / 2,
centerY: this.canvas.height / 2
};
// Apply effects in order: transform -> background -> border -> text/text2 -> general
const renderOrder = ['transform', 'background', 'border', 'text', 'text2', 'general'];
// Save context once before transforms
this.ctx.save();
renderOrder.forEach(type => {
this.effects[type]?.forEach(effect => {
if (effect.canApply(controlValues)) {
// Transform effects should NOT be wrapped in save/restore
// They need to persist for all subsequent drawing operations
if (type !== 'transform') {
this.ctx.save();
}
try {
effect.apply(this.ctx, controlValues, animState, renderData);
} catch (error) {
console.error(`Error applying effect ${effect.id}:`, error);
}
if (type !== 'transform') {
this.ctx.restore();
}
}
});
});
// Restore context once after all drawing
this.ctx.restore();
}
/**
* Check if any animations are enabled
* @returns {boolean}
*/
hasAnimationsEnabled() {
const controlValues = this.getControlValues();
return this.getAllEffects().some(effect =>
effect.type !== 'background' && // Background effects can be static
effect.isEnabled(controlValues)
);
}
/**
* Start animated preview loop
*/
startAnimatedPreview() {
this.stopAnimatedPreview();
let frameNum = 0;
let lastFrameTime = performance.now();
const frameDelay = 1000 / this.animConfig.fps;
const animate = (currentTime) => {
const elapsed = currentTime - lastFrameTime;
if (elapsed >= frameDelay) {
const animState = new AnimationState(
frameNum,
this.animConfig.totalFrames,
this.animConfig.fps
);
this.draw(animState);
frameNum = (frameNum + 1) % this.animConfig.totalFrames;
lastFrameTime = currentTime - (elapsed % frameDelay);
}
this.previewAnimationId = requestAnimationFrame(animate);
};
this.previewAnimationId = requestAnimationFrame(animate);
}
/**
* Stop animated preview
*/
stopAnimatedPreview() {
if (this.previewAnimationId) {
cancelAnimationFrame(this.previewAnimationId);
this.previewAnimationId = null;
}
}
/**
* Update preview (static or animated based on settings)
*/
updatePreview() {
if (this.hasAnimationsEnabled()) {
this.startAnimatedPreview();
} else {
this.stopAnimatedPreview();
this.draw();
}
}
/**
* Export as animated GIF
* @param {Function} progressCallback - Called with progress (0-1)
* @returns {Promise<Blob>}
*/
async exportAsGif(progressCallback = null) {
return new Promise((resolve, reject) => {
try {
// Create temporary canvas for frame generation
const frameCanvas = document.createElement('canvas');
frameCanvas.width = this.canvas.width;
frameCanvas.height = this.canvas.height;
const frameCtx = frameCanvas.getContext('2d');
// Initialize gif.js
const gif = new GIF({
workers: 2,
quality: 10,
workerScript: '/js/gif.worker.js',
width: this.canvas.width,
height: this.canvas.height
});
// Generate frames
const totalFrames = this.animConfig.totalFrames;
const generateFrames = async () => {
for (let i = 0; i < totalFrames; i++) {
const animState = new AnimationState(i, totalFrames, this.animConfig.fps);
// Draw to temporary canvas
frameCtx.clearRect(0, 0, frameCanvas.width, frameCanvas.height);
const tempGenerator = new ButtonGenerator(frameCanvas, {
fps: this.animConfig.fps,
duration: this.animConfig.duration,
fonts: this.fonts
});
// Copy effects
this.getAllEffects().forEach(effect => {
tempGenerator.registerEffect(effect);
});
tempGenerator.draw(animState);
gif.addFrame(frameCtx, {
delay: 1000 / this.animConfig.fps,
copy: true
});
if (progressCallback) {
progressCallback(i / totalFrames, 'generating');
}
// Yield to browser every 5 frames
if (i % 5 === 0) {
await new Promise(resolve => setTimeout(resolve, 0));
}
}
};
generateFrames().then(() => {
gif.on('finished', (blob) => {
resolve(blob);
});
gif.on('progress', (progress) => {
if (progressCallback) {
progressCallback(progress, 'encoding');
}
});
gif.render();
});
} catch (error) {
reject(error);
}
});
}
/**
* Bind UI controls to redraw on change
*/
bindControls() {
const allControls = new Set();
this.getAllEffects().forEach(effect => {
effect.controls.forEach(control => {
allControls.add(control.id);
});
});
allControls.forEach(id => {
const element = document.getElementById(id);
if (element) {
element.addEventListener('input', () => this.updatePreview());
element.addEventListener('change', () => this.updatePreview());
}
});
}
}

26
static/js/button-generator/debug-helper.js Normal file
View file

@ -0,0 +1,26 @@
// Debug helper - add this temporarily to main.js to see what's happening
export function debugControlValues(generator) {
console.log('=== DEBUG: Control Values ===');
const values = generator.getControlValues();
// Text controls
console.log('Text controls:');
console.log(' button-text:', values['button-text']);
console.log(' text-enabled:', values['text-enabled']);
console.log(' font-size:', values['font-size']);
console.log(' text-x:', values['text-x']);
console.log(' text-y:', values['text-y']);
// Check which effects are enabled
console.log('\nEnabled effects:');
generator.getAllEffects().forEach(effect => {
const enabled = effect.isEnabled(values);
if (enabled) {
console.log(` ✓ ${effect.name} (${effect.id})`);
}
});
console.log('\nAll control values:', values);
console.log('=== END DEBUG ===');
}

92
static/js/button-generator/effect-base.js Normal file
View file

@ -0,0 +1,92 @@
/**
* Base class for button generator effects
* All effects should extend this class and implement required methods
*/
export class ButtonEffect {
/**
* @param {Object} config - Effect configuration
* @param {string} config.id - Unique identifier for this effect
* @param {string} config.name - Display name for the effect
* @param {string} config.type - Effect type: 'text', 'text2', 'background', 'general', 'border'
* @param {string} config.category - UI category for grouping effects
* @param {number} config.renderOrder - Order in rendering pipeline (lower = earlier)
*/
constructor(config) {
this.config = config; // Store full config for subclasses to access
this.id = config.id;
this.name = config.name;
this.type = config.type; // 'text', 'text2', 'background', 'general', 'border'
this.category = config.category;
this.renderOrder = config.renderOrder || 100;
this.controls = this.defineControls();
}
/**
* Define UI controls for this effect
* @returns {Array<Object>} Array of control definitions
*
* Control definition format:
* {
* id: string, // HTML element ID
* type: 'checkbox' | 'range' | 'color' | 'select' | 'text',
* label: string, // Display label
* defaultValue: any, // Default value
* min: number, // For range controls
* max: number, // For range controls
* step: number, // For range controls
* options: Array<{value, label}>, // For select controls
* showWhen: string, // ID of checkbox that controls visibility
* description: string // Optional tooltip/help text
* }
*/
defineControls() {
return [];
}
/**
* Check if this effect is currently enabled
* @param {Object} controlValues - Current values of all controls
* @returns {boolean}
*/
isEnabled(controlValues) {
// Default: check for a control with ID pattern 'animate-{effectId}' or '{effectId}-enabled'
const enableControl = controlValues[`animate-${this.id}`] ||
controlValues[`${this.id}-enabled`];
return enableControl === true || enableControl === 'true';
}
/**
* Apply the effect during rendering
* @param {CanvasRenderingContext2D} context - Canvas context to draw on
* @param {Object} controlValues - Current values of all controls
* @param {AnimationState} animState - Current animation state (null for static)
* @param {Object} renderData - Additional render data (text metrics, colors, etc.)
*/
apply(context, controlValues, animState, renderData) {
throw new Error('Effect.apply() must be implemented by subclass');
}
/**
* Get control values specific to this effect
* @param {Object} allControlValues - All control values
* @returns {Object} Only the controls relevant to this effect
*/
getEffectControls(allControlValues) {
const effectControls = {};
this.controls.forEach(control => {
if (control.id in allControlValues) {
effectControls[control.id] = allControlValues[control.id];
}
});
return effectControls;
}
/**
* Validate that this effect can be applied
* @param {Object} controlValues - Current values of all controls
* @returns {boolean}
*/
canApply(controlValues) {
return this.isEnabled(controlValues);
}
}

205
static/js/button-generator/effects/EXAMPLE.js Normal file
View file

@ -0,0 +1,205 @@
/**
* EXAMPLE EFFECT
*
* This is a template for creating new effects.
* Copy this file and modify it to create your own custom effects.
*
* This example creates a "spotlight" effect that highlights a circular area
* and darkens the rest of the button.
*/
import { ButtonEffect } from '../effect-base.js';
/**
* Spotlight Effect
* Creates a moving circular spotlight that highlights different areas
*/
export class SpotlightEffect extends ButtonEffect {
constructor() {
super({
// Unique ID for this effect (used in control IDs)
id: 'spotlight',
// Display name shown in UI
name: 'Spotlight',
// Effect type determines render order category
// Options: 'background', 'border', 'text', 'text2', 'general'
type: 'general',
// Category for organizing effects in UI
category: 'Visual Effects',
// Render order within type (lower = earlier)
// 1-9: backgrounds, 10-19: borders, 20-29: transforms,
// 30-49: text, 50-79: overlays, 80-99: post-processing
renderOrder: 60
});
}
/**
* Define UI controls for this effect
* These controls will be automatically bound to the generator
*/
defineControls() {
return [
// Main enable/disable checkbox
{
id: 'animate-spotlight',
type: 'checkbox',
label: 'Spotlight Effect',
defaultValue: false,
description: 'Moving circular spotlight'
},
// Spotlight size control
{
id: 'spotlight-size',
type: 'range',
label: 'Spotlight Size',
defaultValue: 20,
min: 10,
max: 50,
step: 1,
showWhen: 'animate-spotlight', // Only show when checkbox is enabled
description: 'Radius of the spotlight'
},
// Darkness of the vignette
{
id: 'spotlight-darkness',
type: 'range',
label: 'Darkness',
defaultValue: 0.5,
min: 0,
max: 1,
step: 0.05,
showWhen: 'animate-spotlight',
description: 'How dark the non-spotlight area should be'
},
// Speed of movement
{
id: 'spotlight-speed',
type: 'range',
label: 'Movement Speed',
defaultValue: 1,
min: 0.1,
max: 3,
step: 0.1,
showWhen: 'animate-spotlight',
description: 'Speed of spotlight movement'
}
];
}
/**
* Determine if this effect should be applied
* @param {Object} controlValues - Current values of all controls
* @returns {boolean}
*/
isEnabled(controlValues) {
return controlValues['animate-spotlight'] === true;
}
/**
* Apply the effect to the canvas
*
* @param {CanvasRenderingContext2D} context - Canvas 2D rendering context
* @param {Object} controlValues - Current values of all controls
* @param {AnimationState|null} animState - Animation state (null for static render)
* @param {Object} renderData - Render information: { width, height, centerX, centerY }
*/
apply(context, controlValues, animState, renderData) {
// Skip if no animation (spotlight needs movement)
if (!animState) return;
// Get control values
const size = controlValues['spotlight-size'] || 20;
const darkness = controlValues['spotlight-darkness'] || 0.5;
const speed = controlValues['spotlight-speed'] || 1;
// Calculate spotlight position
// Move in a circular pattern using animation phase
const phase = animState.getPhase(speed);
const spotX = renderData.centerX + Math.cos(phase) * 20;
const spotY = renderData.centerY + Math.sin(phase) * 10;
// Create radial gradient for spotlight effect
const gradient = context.createRadialGradient(
spotX, spotY, 0, // Inner circle (center of spotlight)
spotX, spotY, size // Outer circle (edge of spotlight)
);
// Center is transparent (spotlight is bright)
gradient.addColorStop(0, `rgba(0, 0, 0, 0)`);
// Edge fades to dark
gradient.addColorStop(0.5, `rgba(0, 0, 0, ${darkness * 0.3})`);
gradient.addColorStop(1, `rgba(0, 0, 0, ${darkness})`);
// Apply the gradient as an overlay
context.fillStyle = gradient;
context.fillRect(0, 0, renderData.width, renderData.height);
// Optional: Add a bright center dot
context.fillStyle = 'rgba(255, 255, 255, 0.3)';
context.beginPath();
context.arc(spotX, spotY, 2, 0, Math.PI * 2);
context.fill();
}
/**
* Optional: Override canApply for more complex logic
* By default, it just checks isEnabled()
*/
canApply(controlValues) {
// Example: Only apply if text is also enabled
const textEnabled = controlValues['textEnabled'];
return this.isEnabled(controlValues) && textEnabled;
}
/**
* Optional: Add helper methods for your effect
*/
calculateSpotlightPath(progress, width, height) {
// Example helper method
return {
x: width * progress,
y: height / 2
};
}
}
/**
* Registration function
* This is called to add the effect to the generator
*
* @param {ButtonGenerator} generator - The button generator instance
*/
export function register(generator) {
generator.registerEffect(new SpotlightEffect());
}
/**
* USAGE:
*
* 1. Copy this file to a new name (e.g., my-effect.js)
* 2. Modify the class name, id, and effect logic
* 3. Import in main.js:
* import * as myEffect from './effects/my-effect.js';
* 4. Register in setupApp():
* myEffect.register(generator);
* 5. Add HTML controls with matching IDs
*/
/**
* TIPS:
*
* - Use animState.progress for linear animations (0 to 1)
* - Use animState.getPhase(speed) for periodic animations (0 to 2π)
* - Use Math.sin/cos for smooth periodic motion
* - Check if (!animState) at the start if your effect requires animation
* - The context is automatically saved/restored, so feel free to transform
* - Use renderData for canvas dimensions and center point
* - Look at existing effects for more examples
*/

191
static/js/button-generator/effects/background-aurora.js Normal file
View file

@ -0,0 +1,191 @@
import { ButtonEffect } from "../effect-base.js";
/**
* Aurora/Plasma background effect
* Flowing organic color patterns using layered gradients
*/
export class AuroraEffect extends ButtonEffect {
constructor() {
super({
id: "bg-aurora",
name: "Aurora",
type: "general",
category: "Background Animations",
renderOrder: 55,
});
}
defineControls() {
return [
{
id: "animate-aurora",
type: "checkbox",
label: "Aurora Effect",
defaultValue: false,
},
{
id: "aurora-speed",
type: "range",
label: "Flow Speed",
defaultValue: 1,
min: 1,
max: 3,
step: 1,
showWhen: "animate-aurora",
description: "Speed of flowing colors",
},
{
id: "aurora-intensity",
type: "range",
label: "Intensity",
defaultValue: 0.6,
min: 0.2,
max: 1,
step: 0.1,
showWhen: "animate-aurora",
description: "Brightness and opacity",
},
{
id: "aurora-complexity",
type: "range",
label: "Complexity",
defaultValue: 3,
min: 2,
max: 6,
step: 1,
showWhen: "animate-aurora",
description: "Number of wave layers",
},
{
id: "aurora-color-scheme",
type: "select",
label: "Color Scheme",
defaultValue: "northern",
options: [
{ value: "northern", label: "Northern Lights" },
{ value: "purple", label: "Purple Dream" },
{ value: "fire", label: "Fire" },
{ value: "ocean", label: "Ocean" },
{ value: "rainbow", label: "Rainbow" },
],
showWhen: "animate-aurora",
description: "Color palette",
},
];
}
isEnabled(controlValues) {
return controlValues["animate-aurora"] === true;
}
getColorScheme(scheme, hue) {
switch (scheme) {
case "northern":
return [
{ h: 120, s: 70, l: 50 }, // Green
{ h: 160, s: 70, l: 50 }, // Teal
{ h: 200, s: 70, l: 50 }, // Blue
];
case "purple":
return [
{ h: 270, s: 70, l: 50 }, // Purple
{ h: 300, s: 70, l: 50 }, // Magenta
{ h: 330, s: 70, l: 50 }, // Pink
];
case "fire":
return [
{ h: 0, s: 80, l: 50 }, // Red
{ h: 30, s: 80, l: 50 }, // Orange
{ h: 50, s: 80, l: 50 }, // Yellow-Orange
];
case "ocean":
return [
{ h: 180, s: 70, l: 50 }, // Cyan
{ h: 200, s: 70, l: 50 }, // Light Blue
{ h: 220, s: 70, l: 50 }, // Blue
];
case "rainbow":
return [
{ h: (hue + 0) % 360, s: 70, l: 50 },
{ h: (hue + 120) % 360, s: 70, l: 50 },
{ h: (hue + 240) % 360, s: 70, l: 50 },
];
default:
return [
{ h: 120, s: 70, l: 50 },
{ h: 180, s: 70, l: 50 },
{ h: 240, s: 70, l: 50 },
];
}
}
apply(context, controlValues, animState, renderData) {
if (!animState) return;
const speed = controlValues["aurora-speed"] || 1;
const intensity = controlValues["aurora-intensity"] || 0.6;
const complexity = controlValues["aurora-complexity"] || 3;
const colorScheme = controlValues["aurora-color-scheme"] || "northern";
const time = animState.getPhase(speed);
// Create flowing hue shift that loops properly (only used for rainbow scheme)
// Convert phase (0 to 2π) to hue degrees (0 to 360)
const hueShift = (time / (Math.PI * 2)) * 360;
const colors = this.getColorScheme(colorScheme, hueShift);
// Draw multiple overlapping gradients to create aurora effect
context.globalCompositeOperation = "screen"; // Blend mode for aurora effect
for (let i = 0; i < complexity; i++) {
const phase = time + i * ((Math.PI * 2) / complexity);
// Calculate wave positions
const wave1X =
renderData.centerX + Math.sin(phase) * renderData.width * 0.5;
const wave1Y =
renderData.centerY + Math.cos(phase * 1.3) * renderData.height * 0.5;
// Create radial gradient
const gradient = context.createRadialGradient(
wave1X,
wave1Y,
0,
wave1X,
wave1Y,
renderData.width * 0.8,
);
// Pick color based on wave index
const colorIdx = i % colors.length;
const color = colors[colorIdx];
const baseOpacity = intensity * 0.3;
// Rainbow scheme already has hueShift applied in getColorScheme
// Other schemes use their fixed colors
gradient.addColorStop(
0,
`hsla(${color.h}, ${color.s}%, ${color.l}%, ${baseOpacity})`,
);
gradient.addColorStop(
0.5,
`hsla(${color.h}, ${color.s}%, ${color.l}%, ${baseOpacity * 0.5})`,
);
gradient.addColorStop(
1,
`hsla(${color.h}, ${color.s}%, ${color.l}%, 0)`,
);
context.fillStyle = gradient;
context.fillRect(0, 0, renderData.width, renderData.height);
}
// Reset composite operation
context.globalCompositeOperation = "source-over";
}
}
export function register(generator) {
generator.registerEffect(new AuroraEffect());
}

178
static/js/button-generator/effects/background-bubbles.js Normal file
View file

@ -0,0 +1,178 @@
import { ButtonEffect } from "../effect-base.js";
/**
* Bubbles rising background effect
* Floating bubbles that rise with drift
*/
export class BubblesEffect extends ButtonEffect {
constructor() {
super({
id: "bg-bubbles",
name: "Bubbles",
type: "general",
category: "Background Animations",
renderOrder: 55,
});
this.bubbles = [];
this.initialized = false;
}
defineControls() {
return [
{
id: "animate-bubbles",
type: "checkbox",
label: "Bubbles Effect",
defaultValue: false,
},
{
id: "bubble-count",
type: "range",
label: "Bubble Count",
defaultValue: 15,
min: 5,
max: 40,
step: 1,
showWhen: "animate-bubbles",
description: "Number of bubbles",
},
{
id: "bubble-speed",
type: "range",
label: "Rise Speed",
defaultValue: 1,
min: 0.3,
max: 3,
step: 0.1,
showWhen: "animate-bubbles",
description: "Speed of rising bubbles",
},
{
id: "bubble-drift",
type: "range",
label: "Drift Amount",
defaultValue: 1,
min: 0,
max: 3,
step: 0.1,
showWhen: "animate-bubbles",
description: "Side-to-side drift",
},
{
id: "bubble-color",
type: "color",
label: "Bubble Color",
defaultValue: "#4da6ff",
showWhen: "animate-bubbles",
description: "Color of bubbles",
},
];
}
isEnabled(controlValues) {
return controlValues["animate-bubbles"] === true;
}
apply(context, controlValues, animState, renderData) {
if (!animState) return;
const count = controlValues["bubble-count"] || 15;
const speed = controlValues["bubble-speed"] || 1;
const drift = controlValues["bubble-drift"] || 1;
const bubbleColor = controlValues["bubble-color"] || "#4da6ff";
// Initialize bubbles on first frame or count change
if (!this.initialized || this.bubbles.length !== count) {
this.bubbles = [];
for (let i = 0; i < count; i++) {
this.bubbles.push({
x: Math.random() * renderData.width,
startY: Math.random(), // Store as 0-1 ratio instead of pixel value
size: 3 + Math.random() * 8,
speedMultiplier: 0.5 + Math.random() * 1,
driftPhase: Math.random() * Math.PI * 2,
driftSpeed: 0.5 + Math.random() * 1,
});
}
this.initialized = true;
}
// Parse color for gradient
const hexToRgb = (hex) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result
? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16),
}
: { r: 77, g: 166, b: 255 };
};
const rgb = hexToRgb(bubbleColor);
// Draw bubbles
this.bubbles.forEach((bubble) => {
// Calculate Y position based on animation progress for perfect looping
// Each bubble has a different starting offset and speed
const bubbleProgress =
(animState.progress * speed * bubble.speedMultiplier + bubble.startY) %
1;
// Convert to pixel position (bubbles rise from bottom to top)
const bubbleY =
renderData.height + bubble.size - bubbleProgress * (renderData.height + bubble.size * 2);
// Drift side to side
const driftOffset =
Math.sin(
animState.getPhase(bubble.driftSpeed * 0.5) + bubble.driftPhase
) *
drift *
2;
const currentX = bubble.x + driftOffset;
// Draw bubble with gradient for 3D effect
const gradient = context.createRadialGradient(
currentX - bubble.size * 0.3,
bubbleY - bubble.size * 0.3,
0,
currentX,
bubbleY,
bubble.size
);
gradient.addColorStop(
0,
`rgba(${rgb.r + 40}, ${rgb.g + 40}, ${rgb.b + 40}, 0.6)`
);
gradient.addColorStop(
0.6,
`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.4)`
);
gradient.addColorStop(1, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.2)`);
context.fillStyle = gradient;
context.beginPath();
context.arc(currentX, bubbleY, bubble.size, 0, Math.PI * 2);
context.fill();
// Add highlight
context.fillStyle = "rgba(255, 255, 255, 0.4)";
context.beginPath();
context.arc(
currentX - bubble.size * 0.3,
bubbleY - bubble.size * 0.3,
bubble.size * 0.3,
0,
Math.PI * 2
);
context.fill();
});
}
}
export function register(generator) {
generator.registerEffect(new BubblesEffect());
}

109
static/js/button-generator/effects/background-emoji-wallpaper.js Normal file
View file

@ -0,0 +1,109 @@
import { ButtonEffect } from '../effect-base.js';
/**
* Emoji wallpaper background effect
* Tiles a user-specified emoji across the background
*/
export class EmojiWallpaperEffect extends ButtonEffect {
constructor() {
super({
id: 'bg-emoji-wallpaper',
name: 'Emoji Wallpaper',
type: 'background',
category: 'Background',
renderOrder: 1
});
}
defineControls() {
return [
{
id: 'emoji-text',
type: 'text',
label: 'Emoji Character',
defaultValue: '✨',
showWhen: 'bg-type',
description: 'Emoji to tile (can be any text)'
},
{
id: 'emoji-size',
type: 'range',
label: 'Emoji Size',
defaultValue: 12,
min: 6,
max: 24,
step: 1,
showWhen: 'bg-type',
description: 'Size of each emoji'
},
{
id: 'emoji-spacing',
type: 'range',
label: 'Emoji Spacing',
defaultValue: 16,
min: 8,
max: 32,
step: 2,
showWhen: 'bg-type',
description: 'Space between emojis'
},
{
id: 'emoji-bg-color',
type: 'color',
label: 'Background Color',
defaultValue: '#1a1a2e',
showWhen: 'bg-type',
description: 'Background color behind emojis'
},
{
id: 'emoji-opacity',
type: 'range',
label: 'Emoji Opacity',
defaultValue: 30,
min: 10,
max: 100,
step: 5,
showWhen: 'bg-type',
description: 'Transparency of emojis (lower = more transparent)'
}
];
}
isEnabled(controlValues) {
return controlValues['bg-type'] === 'emoji-wallpaper';
}
apply(context, controlValues, animState, renderData) {
const emoji = controlValues['emoji-text'] || '✨';
const size = controlValues['emoji-size'] || 12;
const spacing = controlValues['emoji-spacing'] || 16;
const bgColor = controlValues['emoji-bg-color'] || '#1a1a2e';
const opacity = (controlValues['emoji-opacity'] || 30) / 100;
// Fill background color
context.fillStyle = bgColor;
context.fillRect(0, 0, renderData.width, renderData.height);
// Setup emoji font
context.font = `${size}px Arial`;
context.textAlign = 'center';
context.textBaseline = 'middle';
context.globalAlpha = opacity;
// Tile emojis
for (let y = 0; y < renderData.height + spacing; y += spacing) {
for (let x = 0; x < renderData.width + spacing; x += spacing) {
// Offset every other row for a brick pattern
const offsetX = (Math.floor(y / spacing) % 2) * (spacing / 2);
context.fillText(emoji, x + offsetX, y);
}
}
context.globalAlpha = 1.0;
}
}
// Auto-register effect
export function register(generator) {
generator.registerEffect(new EmojiWallpaperEffect());
}

216
static/js/button-generator/effects/background-fire.js Normal file
View file

@ -0,0 +1,216 @@
import { ButtonEffect } from "../effect-base.js";
/**
* Fire background effect
* Animated flames rising from bottom using particles
*/
export class FireEffect extends ButtonEffect {
constructor() {
super({
id: "bg-fire",
name: "Fire",
type: "general",
category: "Background Animations",
renderOrder: 55,
});
this.particles = [];
this.initialized = false;
}
defineControls() {
return [
{
id: "animate-fire",
type: "checkbox",
label: "Fire Effect",
defaultValue: false,
},
{
id: "fire-intensity",
type: "range",
label: "Intensity",
defaultValue: 50,
min: 20,
max: 100,
step: 5,
showWhen: "animate-fire",
description: "Number of flame particles",
},
{
id: "fire-height",
type: "range",
label: "Flame Height",
defaultValue: 0.6,
min: 0.3,
max: 1,
step: 0.1,
showWhen: "animate-fire",
description: "How high flames reach",
},
{
id: "fire-speed",
type: "range",
label: "Speed",
defaultValue: 1,
min: 0.3,
max: 3,
step: 0.1,
showWhen: "animate-fire",
description: "Speed of rising flames",
},
{
id: "fire-color-scheme",
type: "select",
label: "Color Scheme",
defaultValue: "normal",
options: [
{ value: "normal", label: "Normal Fire" },
{ value: "blue", label: "Blue Flame" },
{ value: "green", label: "Green Flame" },
{ value: "purple", label: "Purple Flame" },
{ value: "white", label: "White Hot" },
],
showWhen: "animate-fire",
description: "Flame color",
},
];
}
isEnabled(controlValues) {
return controlValues["animate-fire"] === true;
}
getFireColors(scheme) {
switch (scheme) {
case "normal":
return [
{ r: 255, g: 60, b: 0 }, // Red-orange
{ r: 255, g: 140, b: 0 }, // Orange
{ r: 255, g: 200, b: 0 }, // Yellow
];
case "blue":
return [
{ r: 0, g: 100, b: 255 }, // Blue
{ r: 100, g: 180, b: 255 }, // Light blue
{ r: 200, g: 230, b: 255 }, // Very light blue
];
case "green":
return [
{ r: 0, g: 200, b: 50 }, // Green
{ r: 100, g: 255, b: 100 }, // Light green
{ r: 200, g: 255, b: 150 }, // Very light green
];
case "purple":
return [
{ r: 150, g: 0, b: 255 }, // Purple
{ r: 200, g: 100, b: 255 }, // Light purple
{ r: 230, g: 180, b: 255 }, // Very light purple
];
case "white":
return [
{ r: 255, g: 200, b: 150 }, // Warm white
{ r: 255, g: 240, b: 200 }, // Light white
{ r: 255, g: 255, b: 255 }, // Pure white
];
default:
return [
{ r: 255, g: 60, b: 0 },
{ r: 255, g: 140, b: 0 },
{ r: 255, g: 200, b: 0 },
];
}
}
apply(context, controlValues, animState, renderData) {
if (!animState) return;
const intensity = controlValues["fire-intensity"] || 50;
const height = controlValues["fire-height"] || 0.6;
const speed = controlValues["fire-speed"] || 1;
const colorScheme = controlValues["fire-color-scheme"] || "normal";
const colors = this.getFireColors(colorScheme);
const maxHeight = renderData.height * height;
// Spawn new particles at the bottom
for (let i = 0; i < intensity / 10; i++) {
this.particles.push({
x: Math.random() * renderData.width,
y: renderData.height,
vx: (Math.random() - 0.5) * 1.5,
vy: -(2 + Math.random() * 3) * speed,
size: 2 + Math.random() * 6,
life: 1.0,
colorIndex: Math.random(),
});
}
// Update and draw particles
this.particles = this.particles.filter((particle) => {
// Update position
particle.x += particle.vx;
particle.y += particle.vy;
// Add some turbulence
particle.vx += (Math.random() - 0.5) * 0.2;
particle.vy *= 0.98; // Slow down as they rise
// Fade out based on height and time
const heightRatio =
(renderData.height - particle.y) / renderData.height;
particle.life -= 0.015;
if (particle.life > 0 && particle.y > renderData.height - maxHeight) {
// Choose color based on life (hotter at bottom, cooler at top)
const colorProgress = 1 - particle.life;
const colorIdx = Math.floor(colorProgress * (colors.length - 1));
const colorBlend = (colorProgress * (colors.length - 1)) % 1;
const c1 = colors[Math.min(colorIdx, colors.length - 1)];
const c2 = colors[Math.min(colorIdx + 1, colors.length - 1)];
const r = Math.floor(c1.r + (c2.r - c1.r) * colorBlend);
const g = Math.floor(c1.g + (c2.g - c1.g) * colorBlend);
const b = Math.floor(c1.b + (c2.b - c1.b) * colorBlend);
// Draw particle with gradient
const gradient = context.createRadialGradient(
particle.x,
particle.y,
0,
particle.x,
particle.y,
particle.size
);
gradient.addColorStop(
0,
`rgba(${r}, ${g}, ${b}, ${particle.life * 0.8})`
);
gradient.addColorStop(
0.5,
`rgba(${r}, ${g}, ${b}, ${particle.life * 0.5})`
);
gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);
context.fillStyle = gradient;
context.beginPath();
context.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
context.fill();
return true;
}
return false;
});
// Limit particle count
if (this.particles.length > intensity * 5) {
this.particles = this.particles.slice(-intensity * 5);
}
}
}
export function register(generator) {
generator.registerEffect(new FireEffect());
}

76
static/js/button-generator/effects/background-gradient.js Normal file
View file

@ -0,0 +1,76 @@
import { ButtonEffect } from '../effect-base.js';
/**
* Gradient background effect
*/
export class GradientBackgroundEffect extends ButtonEffect {
constructor() {
super({
id: 'bg-gradient',
name: 'Gradient Background',
type: 'background',
category: 'Background',
renderOrder: 1
});
}
defineControls() {
return [
{
id: 'gradient-color1',
type: 'color',
label: 'Gradient Color 1',
defaultValue: '#ff0000',
showWhen: 'bg-type',
description: 'Start color of gradient'
},
{
id: 'gradient-color2',
type: 'color',
label: 'Gradient Color 2',
defaultValue: '#0000ff',
showWhen: 'bg-type',
description: 'End color of gradient'
},
{
id: 'gradient-angle',
type: 'range',
label: 'Gradient Angle',
defaultValue: 90,
min: 0,
max: 360,
step: 1,
showWhen: 'bg-type',
description: 'Angle of gradient direction'
}
];
}
isEnabled(controlValues) {
return controlValues['bg-type'] === 'gradient';
}
apply(context, controlValues, animState, renderData) {
const color1 = controlValues['gradient-color1'] || '#ff0000';
const color2 = controlValues['gradient-color2'] || '#0000ff';
const angle = (controlValues['gradient-angle'] || 90) * (Math.PI / 180);
// Calculate gradient endpoints
const x1 = renderData.centerX + Math.cos(angle) * renderData.centerX;
const y1 = renderData.centerY + Math.sin(angle) * renderData.centerY;
const x2 = renderData.centerX - Math.cos(angle) * renderData.centerX;
const y2 = renderData.centerY - Math.sin(angle) * renderData.centerY;
const gradient = context.createLinearGradient(x1, y1, x2, y2);
gradient.addColorStop(0, color1);
gradient.addColorStop(1, color2);
context.fillStyle = gradient;
context.fillRect(0, 0, renderData.width, renderData.height);
}
}
// Auto-register effect
export function register(generator) {
generator.registerEffect(new GradientBackgroundEffect());
}

117
static/js/button-generator/effects/background-rain.js Normal file
View file

@ -0,0 +1,117 @@
import { ButtonEffect } from '../effect-base.js';
/**
* Raining background effect
* Animated raindrops falling down the button
*/
export class RainBackgroundEffect extends ButtonEffect {
constructor() {
super({
id: 'bg-rain',
name: 'Rain Effect',
type: 'general',
category: 'Background Animations',
renderOrder: 55 // After background, before other effects
});
// Initialize raindrop positions (persistent across frames)
this.raindrops = [];
this.initialized = false;
}
defineControls() {
return [
{
id: 'animate-rain',
type: 'checkbox',
label: 'Rain Effect',
defaultValue: false
},
{
id: 'rain-density',
type: 'range',
label: 'Rain Density',
defaultValue: 15,
min: 5,
max: 30,
step: 1,
showWhen: 'animate-rain',
description: 'Number of raindrops'
},
{
id: 'rain-speed',
type: 'range',
label: 'Rain Speed',
defaultValue: 1.5,
min: 0.5,
max: 3,
step: 0.1,
showWhen: 'animate-rain',
description: 'Speed of falling rain'
},
{
id: 'rain-color',
type: 'color',
label: 'Rain Color',
defaultValue: '#6ba3ff',
showWhen: 'animate-rain',
description: 'Color of raindrops'
}
];
}
isEnabled(controlValues) {
return controlValues['animate-rain'] === true;
}
apply(context, controlValues, animState, renderData) {
if (!animState) return;
const density = controlValues['rain-density'] || 15;
const speed = controlValues['rain-speed'] || 1.5;
const color = controlValues['rain-color'] || '#6ba3ff';
// Initialize raindrops on first frame
if (!this.initialized || this.raindrops.length !== density) {
this.raindrops = [];
for (let i = 0; i < density; i++) {
this.raindrops.push({
x: Math.random() * renderData.width,
y: Math.random() * renderData.height,
length: 2 + Math.random() * 4,
speedMultiplier: 0.8 + Math.random() * 0.4
});
}
this.initialized = true;
}
// Draw raindrops
context.strokeStyle = color;
context.lineWidth = 1;
context.lineCap = 'round';
this.raindrops.forEach(drop => {
// Update position
drop.y += speed * drop.speedMultiplier;
// Reset to top when reaching bottom
if (drop.y > renderData.height + drop.length) {
drop.y = -drop.length;
drop.x = Math.random() * renderData.width;
}
// Draw raindrop
context.globalAlpha = 0.6;
context.beginPath();
context.moveTo(drop.x, drop.y);
context.lineTo(drop.x, drop.y + drop.length);
context.stroke();
context.globalAlpha = 1.0;
});
}
}
// Auto-register effect
export function register(generator) {
generator.registerEffect(new RainBackgroundEffect());
}

137
static/js/button-generator/effects/background-rainbow.js Normal file
View file

@ -0,0 +1,137 @@
import { ButtonEffect } from '../effect-base.js';
/**
* Rainbow flash background effect
* Animates background through rainbow colors
*/
export class RainbowBackgroundEffect extends ButtonEffect {
constructor() {
super({
id: 'bg-rainbow',
name: 'Rainbow Background',
type: 'background',
category: 'Background Animations',
renderOrder: 2 // After base background
});
}
defineControls() {
return [
{
id: 'animate-bg-rainbow',
type: 'checkbox',
label: 'Rainbow Flash',
defaultValue: false
},
{
id: 'rainbow-speed',
type: 'range',
label: 'Rainbow Speed',
defaultValue: 1,
min: 0.1,
max: 5,
step: 0.1,
showWhen: 'animate-bg-rainbow',
description: 'Speed of rainbow cycling'
}
];
}
isEnabled(controlValues) {
return controlValues['animate-bg-rainbow'] === true;
}
apply(context, controlValues, animState, renderData) {
if (!animState) return;
const speed = controlValues['rainbow-speed'] || 1;
const hue = (animState.progress * speed * 360) % 360;
const bgType = controlValues['bg-type'];
if (bgType === 'solid') {
// Solid rainbow
context.fillStyle = `hsl(${hue}, 70%, 50%)`;
context.fillRect(0, 0, renderData.width, renderData.height);
} else if (bgType === 'gradient') {
// Rainbow gradient
const angle = (controlValues['gradient-angle'] || 90) * (Math.PI / 180);
const x1 = renderData.centerX + Math.cos(angle) * renderData.centerX;
const y1 = renderData.centerY + Math.sin(angle) * renderData.centerY;
const x2 = renderData.centerX - Math.cos(angle) * renderData.centerX;
const y2 = renderData.centerY - Math.sin(angle) * renderData.centerY;
const gradient = context.createLinearGradient(x1, y1, x2, y2);
gradient.addColorStop(0, `hsl(${hue}, 70%, 50%)`);
gradient.addColorStop(1, `hsl(${(hue + 60) % 360}, 70%, 60%)`);
context.fillStyle = gradient;
context.fillRect(0, 0, renderData.width, renderData.height);
}
}
}
/**
* Rainbow gradient sweep effect
* Creates a moving rainbow gradient that sweeps across the button
*/
export class RainbowGradientSweepEffect extends ButtonEffect {
constructor() {
super({
id: 'bg-rainbow-gradient',
name: 'Rainbow Gradient Sweep',
type: 'general',
category: 'Background Animations',
renderOrder: 50 // After background and text
});
}
defineControls() {
return [
{
id: 'animate-bg-rainbow-gradient',
type: 'checkbox',
label: 'Rainbow Sweep',
defaultValue: false,
description: 'Moving rainbow gradient overlay'
}
];
}
isEnabled(controlValues) {
return controlValues['animate-bg-rainbow-gradient'] === true;
}
apply(context, controlValues, animState, renderData) {
if (!animState) return;
// Map progress to position (-100 to 100)
const position = animState.progress * 200 - 100;
// Create a horizontal gradient that sweeps across
const gradient = context.createLinearGradient(
position - 50,
0,
position + 50,
0
);
// Create rainbow stops that also cycle through colors
const hueOffset = animState.progress * 360;
gradient.addColorStop(0, `hsla(${(hueOffset + 0) % 360}, 80%, 50%, 0)`);
gradient.addColorStop(0.2, `hsla(${(hueOffset + 60) % 360}, 80%, 50%, 0.6)`);
gradient.addColorStop(0.4, `hsla(${(hueOffset + 120) % 360}, 80%, 50%, 0.8)`);
gradient.addColorStop(0.6, `hsla(${(hueOffset + 180) % 360}, 80%, 50%, 0.8)`);
gradient.addColorStop(0.8, `hsla(${(hueOffset + 240) % 360}, 80%, 50%, 0.6)`);
gradient.addColorStop(1, `hsla(${(hueOffset + 300) % 360}, 80%, 50%, 0)`);
context.fillStyle = gradient;
context.fillRect(0, 0, renderData.width, renderData.height);
}
}
// Auto-register effects
export function register(generator) {
generator.registerEffect(new RainbowBackgroundEffect());
generator.registerEffect(new RainbowGradientSweepEffect());
}

56
static/js/button-generator/effects/background-solid.js Normal file
View file

@ -0,0 +1,56 @@
import { ButtonEffect } from '../effect-base.js';
/**
* Solid color background effect
*/
export class SolidBackgroundEffect extends ButtonEffect {
constructor() {
super({
id: 'bg-solid',
name: 'Solid Background',
type: 'background',
category: 'Background',
renderOrder: 1
});
}
defineControls() {
return [
{
id: 'bg-type',
type: 'select',
label: 'Background Type',
defaultValue: 'solid',
options: [
{ value: 'solid', label: 'Solid Color' },
{ value: 'gradient', label: 'Gradient' },
{ value: 'texture', label: 'Texture' },
{ value: 'emoji-wallpaper', label: 'Emoji Wallpaper' }
]
},
{
id: 'bg-color',
type: 'color',
label: 'Background Color',
defaultValue: '#4a90e2',
showWhen: 'bg-type',
description: 'Solid background color'
}
];
}
isEnabled(controlValues) {
return controlValues['bg-type'] === 'solid';
}
apply(context, controlValues, animState, renderData) {
const color = controlValues['bg-color'] || '#4a90e2';
context.fillStyle = color;
context.fillRect(0, 0, renderData.width, renderData.height);
}
}
// Auto-register effect
export function register(generator) {
generator.registerEffect(new SolidBackgroundEffect());
}

166
static/js/button-generator/effects/background-starfield.js Normal file
View file

@ -0,0 +1,166 @@
import { ButtonEffect } from "../effect-base.js";
/**
* Starfield background effect
* Twinkling stars with optional shooting stars
*/
export class StarfieldEffect extends ButtonEffect {
constructor() {
super({
id: "bg-starfield",
name: "Starfield",
type: "general",
category: "Background Animations",
renderOrder: 55,
});
this.stars = [];
this.shootingStars = [];
this.initialized = false;
}
defineControls() {
return [
{
id: "animate-starfield",
type: "checkbox",
label: "Starfield Effect",
description:
"This might look a bit different when exported, work in progress!",
defaultValue: false,
},
{
id: "star-density",
type: "range",
label: "Star Density",
defaultValue: 30,
min: 10,
max: 80,
step: 5,
showWhen: "animate-starfield",
description: "Number of stars",
},
{
id: "star-twinkle-speed",
type: "range",
label: "Twinkle Speed",
defaultValue: 1,
min: 0.1,
max: 3,
step: 0.1,
showWhen: "animate-starfield",
description: "Speed of twinkling",
},
{
id: "star-shooting-enabled",
type: "checkbox",
label: "Shooting Stars",
defaultValue: true,
showWhen: "animate-starfield",
description: "Enable shooting stars",
},
{
id: "star-color",
type: "color",
label: "Star Color",
defaultValue: "#ffffff",
showWhen: "animate-starfield",
description: "Color of stars",
},
];
}
isEnabled(controlValues) {
return controlValues["animate-starfield"] === true;
}
apply(context, controlValues, animState, renderData) {
if (!animState) return;
const density = controlValues["star-density"] || 30;
const twinkleSpeed = controlValues["star-twinkle-speed"] || 1;
const shootingEnabled = controlValues["star-shooting-enabled"] !== false;
const starColor = controlValues["star-color"] || "#ffffff";
// Initialize stars on first frame or density change
if (!this.initialized || this.stars.length !== density) {
this.stars = [];
for (let i = 0; i < density; i++) {
this.stars.push({
x: Math.random() * renderData.width,
y: Math.random() * renderData.height,
size: 0.5 + Math.random() * 1.5,
twinkleOffset: Math.random() * Math.PI * 2,
twinkleSpeed: 0.5 + Math.random() * 1.5,
});
}
this.initialized = true;
}
// Draw twinkling stars
this.stars.forEach((star) => {
const twinkle =
Math.sin(
animState.getPhase(twinkleSpeed * star.twinkleSpeed) +
star.twinkleOffset,
) *
0.5 +
0.5;
const opacity = 0.3 + twinkle * 0.7;
context.fillStyle = starColor;
context.globalAlpha = opacity;
context.beginPath();
context.arc(star.x, star.y, star.size, 0, Math.PI * 2);
context.fill();
context.globalAlpha = 1.0;
});
// Shooting stars
if (shootingEnabled) {
// Randomly spawn shooting stars
if (Math.random() < 0.02 && this.shootingStars.length < 3) {
this.shootingStars.push({
x: Math.random() * renderData.width,
y: -10,
vx: (Math.random() - 0.5) * 2,
vy: 3 + Math.random() * 2,
life: 1.0,
});
}
// Update and draw shooting stars
this.shootingStars = this.shootingStars.filter((star) => {
star.x += star.vx;
star.y += star.vy;
star.life -= 0.02;
if (star.life > 0) {
// Draw shooting star trail
const gradient = context.createLinearGradient(
star.x,
star.y,
star.x - star.vx * 5,
star.y - star.vy * 5,
);
gradient.addColorStop(0, `rgba(255, 255, 255, ${star.life * 0.8})`);
gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
context.strokeStyle = gradient;
context.lineWidth = 2;
context.beginPath();
context.moveTo(star.x, star.y);
context.lineTo(star.x - star.vx * 5, star.y - star.vy * 5);
context.stroke();
return true;
}
return false;
});
}
}
}
export function register(generator) {
generator.registerEffect(new StarfieldEffect());
}

217
static/js/button-generator/effects/background-texture.js Normal file
View file

@ -0,0 +1,217 @@
import { ButtonEffect } from '../effect-base.js';
/**
* Texture background effect
* Provides various procedural texture patterns
*/
export class TextureBackgroundEffect extends ButtonEffect {
constructor() {
super({
id: 'bg-texture',
name: 'Texture Background',
type: 'background',
category: 'Background',
renderOrder: 1
});
}
defineControls() {
return [
{
id: 'texture-type',
type: 'select',
label: 'Texture Type',
defaultValue: 'dots',
showWhen: 'bg-type',
options: [
{ value: 'dots', label: 'Dots' },
{ value: 'grid', label: 'Grid' },
{ value: 'diagonal', label: 'Diagonal Lines' },
{ value: 'checkerboard', label: 'Checkerboard' },
{ value: 'noise', label: 'Noise' },
{ value: 'stars', label: 'Stars' }
]
},
{
id: 'texture-color1',
type: 'color',
label: 'Texture Color 1',
defaultValue: '#000000',
showWhen: 'bg-type',
description: 'Base color'
},
{
id: 'texture-color2',
type: 'color',
label: 'Texture Color 2',
defaultValue: '#ffffff',
showWhen: 'bg-type',
description: 'Pattern color'
},
{
id: 'texture-scale',
type: 'range',
label: 'Texture Scale',
defaultValue: 50,
min: 10,
max: 100,
step: 5,
showWhen: 'bg-type',
description: 'Size/density of pattern'
}
];
}
isEnabled(controlValues) {
return controlValues['bg-type'] === 'texture';
}
apply(context, controlValues, animState, renderData) {
const type = controlValues['texture-type'] || 'dots';
const color1 = controlValues['texture-color1'] || '#000000';
const color2 = controlValues['texture-color2'] || '#ffffff';
const scale = controlValues['texture-scale'] || 50;
const texture = this.drawTexture(
type,
color1,
color2,
scale,
renderData.width,
renderData.height
);
context.drawImage(texture, 0, 0);
}
/**
* Draw texture pattern to a temporary canvas
*/
drawTexture(type, color1, color2, scale, width, height) {
const tempCanvas = document.createElement('canvas');
tempCanvas.width = width;
tempCanvas.height = height;
const ctx = tempCanvas.getContext('2d');
// Fill base color
ctx.fillStyle = color1;
ctx.fillRect(0, 0, width, height);
// Draw pattern
ctx.fillStyle = color2;
const size = Math.max(2, Math.floor(scale / 10));
switch (type) {
case 'dots':
this.drawDots(ctx, width, height, size);
break;
case 'grid':
this.drawGrid(ctx, width, height, size);
break;
case 'diagonal':
this.drawDiagonal(ctx, width, height, size);
break;
case 'checkerboard':
this.drawCheckerboard(ctx, width, height, size);
break;
case 'noise':
this.drawNoise(ctx, width, height);
break;
case 'stars':
this.drawStars(ctx, width, height, scale);
break;
}
return tempCanvas;
}
/**
* Draw dots pattern
*/
drawDots(ctx, width, height, size) {
for (let y = 0; y < height; y += size * 2) {
for (let x = 0; x < width; x += size * 2) {
ctx.beginPath();
ctx.arc(x, y, size / 2, 0, Math.PI * 2);
ctx.fill();
}
}
}
/**
* Draw grid pattern
*/
drawGrid(ctx, width, height, size) {
// Vertical lines
for (let x = 0; x < width; x += size) {
ctx.fillRect(x, 0, 1, height);
}
// Horizontal lines
for (let y = 0; y < height; y += size) {
ctx.fillRect(0, y, width, 1);
}
}
/**
* Draw diagonal lines pattern
*/
drawDiagonal(ctx, width, height, size) {
for (let i = -height; i < width; i += size) {
ctx.fillRect(i, 0, 2, height);
ctx.save();
ctx.translate(i + 1, 0);
ctx.rotate(Math.PI / 4);
ctx.fillRect(0, 0, 2, Math.max(width, height));
ctx.restore();
}
}
/**
* Draw checkerboard pattern
*/
drawCheckerboard(ctx, width, height, size) {
for (let y = 0; y < height; y += size) {
for (let x = 0; x < width; x += size) {
if ((x / size + y / size) % 2 === 0) {
ctx.fillRect(x, y, size, size);
}
}
}
}
/**
* Draw random noise pattern
*/
drawNoise(ctx, width, height) {
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
if (Math.random() > 0.5) {
ctx.fillRect(x, y, 1, 1);
}
}
}
}
/**
* Draw stars pattern
*/
drawStars(ctx, width, height, scale) {
const numStars = scale;
for (let i = 0; i < numStars; i++) {
const x = Math.floor(Math.random() * width);
const y = Math.floor(Math.random() * height);
// Draw plus-shape star
ctx.fillRect(x, y, 1, 1); // Center
ctx.fillRect(x - 1, y, 1, 1); // Left
ctx.fillRect(x + 1, y, 1, 1); // Right
ctx.fillRect(x, y - 1, 1, 1); // Top
ctx.fillRect(x, y + 1, 1, 1); // Bottom
}
}
}
// Auto-register effect
export function register(generator) {
generator.registerEffect(new TextureBackgroundEffect());
}

401
static/js/button-generator/effects/border.js Normal file
View file

@ -0,0 +1,401 @@
import { ButtonEffect } from "../effect-base.js";
/**
* Border effect
* Draws borders around the button with various styles
*/
export class BorderEffect extends ButtonEffect {
constructor() {
super({
id: "border",
name: "Border",
type: "border",
category: "Border",
renderOrder: 10,
});
}
defineControls() {
return [
{
id: "border-width",
type: "range",
label: "Border Width",
defaultValue: 2,
min: 0,
max: 5,
step: 1,
description: "Width of border in pixels",
},
{
id: "border-color",
type: "color",
label: "Border Color",
defaultValue: "#000000",
},
{
id: "border-style",
type: "select",
label: "Border Style",
defaultValue: "solid",
options: [
{ value: "solid", label: "Solid" },
{ value: "dashed", label: "Dashed" },
{ value: "dotted", label: "Dotted" },
{ value: "double", label: "Double" },
{ value: "inset", label: "Inset (3D)" },
{ value: "outset", label: "Outset (3D)" },
{ value: "ridge", label: "Ridge" },
{ value: "rainbow", label: "Rainbow (Animated)" },
{ value: "marching-ants", label: "Marching Ants" },
{ value: "checkerboard", label: "Checkerboard" },
],
},
{
id: "border-rainbow-speed",
type: "range",
label: "Rainbow Speed",
defaultValue: 1,
min: 1,
max: 3,
step: 1,
showWhen: "border-style",
description: "Speed of rainbow animation",
},
{
id: "border-march-speed",
type: "range",
label: "March Speed",
defaultValue: 1,
min: 1,
max: 3,
step: 1,
showWhen: "border-style",
description: "Speed of marching animation",
},
];
}
isEnabled(controlValues) {
const width = controlValues["border-width"] || 0;
return width > 0;
}
apply(context, controlValues, animState, renderData) {
const width = controlValues["border-width"] || 0;
if (width === 0) return;
const color = controlValues["border-color"] || "#000000";
const style = controlValues["border-style"] || "solid";
if (style === "solid") {
this.drawSolidBorder(context, width, color, renderData);
} else if (style === "dashed") {
this.drawDashedBorder(context, width, color, renderData);
} else if (style === "dotted") {
this.drawDottedBorder(context, width, color, renderData);
} else if (style === "double") {
this.drawDoubleBorder(context, width, color, renderData);
} else if (style === "inset" || style === "outset") {
this.draw3DBorder(context, width, color, style === "outset", renderData);
} else if (style === "ridge") {
this.drawRidgeBorder(context, width, renderData);
} else if (style === "rainbow") {
const speed = controlValues["border-rainbow-speed"] || 1;
this.drawRainbowBorder(context, width, animState, speed, renderData);
} else if (style === "marching-ants") {
const speed = controlValues["border-march-speed"] || 1;
this.drawMarchingAntsBorder(context, width, animState, speed, renderData);
} else if (style === "checkerboard") {
this.drawCheckerboardBorder(context, width, color, renderData);
}
}
/**
* Draw solid border
*/
drawSolidBorder(context, width, color, renderData) {
context.strokeStyle = color;
context.lineWidth = width;
context.strokeRect(
width / 2,
width / 2,
renderData.width - width,
renderData.height - width,
);
}
/**
* Draw 3D inset/outset border
*/
draw3DBorder(context, width, color, isOutset, renderData) {
const w = renderData.width;
const h = renderData.height;
const t = width;
const normalized = color.toLowerCase();
const isPureBlack = normalized === "#000000";
const isPureWhite = normalized === "#ffffff";
let lightColor;
let darkColor;
if (isPureBlack || isPureWhite) {
lightColor = isOutset ? "#ffffff" : "#000000";
darkColor = isOutset ? "#000000" : "#ffffff";
} else {
const lighter = this.adjustColor(color, 0.25);
const darker = this.adjustColor(color, -0.25);
lightColor = isOutset ? lighter : darker;
darkColor = isOutset ? darker : lighter;
}
context.fillStyle = lightColor;
context.fillRect(0, 0, w - t, t);
context.fillRect(0, t, t, h - t);
context.fillStyle = darkColor;
context.fillRect(t, h - t, w - t, t);
context.fillRect(w - t, 0, t, h - t);
this.drawBevelCorners(context, t, w, h, lightColor, darkColor, isOutset);
}
drawBevelCorners(ctx, t, w, h, light, dark, isOutset) {
// Top-left corner
ctx.fillStyle = dark;
ctx.beginPath();
ctx.moveTo(0, h);
ctx.lineTo(t, h);
ctx.lineTo(t, h - t);
ctx.closePath();
ctx.fill();
// Bottom-right corner
ctx.fillStyle = light;
ctx.beginPath();
ctx.moveTo(w - t, 0);
ctx.lineTo(w - t, t);
ctx.lineTo(w, 0);
ctx.closePath();
ctx.fill();
}
/**
* Draw ridge border (double 3D effect)
*/
drawRidgeBorder(context, width, renderData) {
// Outer ridge (light)
context.strokeStyle = "#ffffff";
context.lineWidth = width / 2;
context.strokeRect(
width / 4,
width / 4,
renderData.width - width / 2,
renderData.height - width / 2,
);
// Inner ridge (dark)
context.strokeStyle = "#000000";
context.strokeRect(
(width * 3) / 4,
(width * 3) / 4,
renderData.width - width * 1.5,
renderData.height - width * 1.5,
);
}
adjustColor(hex, amount) {
// hex: "#rrggbb", amount: -1.0 .. 1.0
let r = parseInt(hex.slice(1, 3), 16);
let g = parseInt(hex.slice(3, 5), 16);
let b = parseInt(hex.slice(5, 7), 16);
const adjust = (c) =>
Math.min(255, Math.max(0, Math.round(c + amount * 255)));
r = adjust(r);
g = adjust(g);
b = adjust(b);
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
}
/**
* Draw dashed border
*/
drawDashedBorder(context, width, color, renderData) {
context.strokeStyle = color;
context.lineWidth = width;
context.setLineDash([6, 3]); // 6px dash, 3px gap
context.strokeRect(
width / 2,
width / 2,
renderData.width - width,
renderData.height - width
);
context.setLineDash([]); // Reset to solid
}
/**
* Draw dotted border
*/
drawDottedBorder(context, width, color, renderData) {
context.strokeStyle = color;
context.lineWidth = width;
context.setLineDash([2, 3]); // 2px dot, 3px gap
context.lineCap = "round";
context.strokeRect(
width / 2,
width / 2,
renderData.width - width,
renderData.height - width
);
context.setLineDash([]); // Reset to solid
context.lineCap = "butt";
}
/**
* Draw double border
*/
drawDoubleBorder(context, width, color, renderData) {
const gap = Math.max(1, Math.floor(width / 3));
const lineWidth = Math.max(1, Math.floor((width - gap) / 2));
context.strokeStyle = color;
context.lineWidth = lineWidth;
// Outer border
context.strokeRect(
lineWidth / 2,
lineWidth / 2,
renderData.width - lineWidth,
renderData.height - lineWidth
);
// Inner border
const innerOffset = lineWidth + gap;
context.strokeRect(
innerOffset + lineWidth / 2,
innerOffset + lineWidth / 2,
renderData.width - innerOffset * 2 - lineWidth,
renderData.height - innerOffset * 2 - lineWidth
);
}
/**
* Draw rainbow animated border
*/
drawRainbowBorder(context, width, animState, speed, renderData) {
if (!animState) {
// Fallback to solid if no animation
this.drawSolidBorder(context, width, "#ff0000", renderData);
return;
}
const hue = (animState.progress * speed * 360) % 360;
const color = `hsl(${hue}, 80%, 50%)`;
context.strokeStyle = color;
context.lineWidth = width;
context.strokeRect(
width / 2,
width / 2,
renderData.width - width,
renderData.height - width
);
}
/**
* Draw marching ants animated border
*/
drawMarchingAntsBorder(context, width, animState, speed, renderData) {
if (!animState) {
// Fallback to dashed if no animation
this.drawDashedBorder(context, width, "#000000", renderData);
return;
}
// Animate the dash offset using phase for smooth looping
const phase = animState.getPhase(speed);
const dashLength = 9; // 4px dash + 5px gap = 9px total
const offset = (phase / (Math.PI * 2)) * dashLength;
context.strokeStyle = "#000000";
context.lineWidth = width;
context.setLineDash([4, 5]);
context.lineDashOffset = -offset;
context.strokeRect(
width / 2,
width / 2,
renderData.width - width,
renderData.height - width
);
context.setLineDash([]);
context.lineDashOffset = 0;
}
/**
* Draw checkerboard border
*/
drawCheckerboardBorder(context, width, color, renderData) {
const squareSize = Math.max(2, width);
const w = renderData.width;
const h = renderData.height;
// Parse the color
const r = parseInt(color.slice(1, 3), 16);
const g = parseInt(color.slice(3, 5), 16);
const b = parseInt(color.slice(5, 7), 16);
// Create light and dark versions
const darkColor = color;
const lightColor = `rgb(${Math.min(255, r + 60)}, ${Math.min(
255,
g + 60
)}, ${Math.min(255, b + 60)})`;
// Draw checkerboard on all four sides
// Top
for (let x = 0; x < w; x += squareSize) {
for (let y = 0; y < width; y += squareSize) {
const checker = Math.floor(x / squareSize + y / squareSize) % 2;
context.fillStyle = checker === 0 ? darkColor : lightColor;
context.fillRect(x, y, squareSize, squareSize);
}
}
// Bottom
for (let x = 0; x < w; x += squareSize) {
for (let y = h - width; y < h; y += squareSize) {
const checker = Math.floor(x / squareSize + y / squareSize) % 2;
context.fillStyle = checker === 0 ? darkColor : lightColor;
context.fillRect(x, y, squareSize, squareSize);
}
}
// Left
for (let x = 0; x < width; x += squareSize) {
for (let y = width; y < h - width; y += squareSize) {
const checker = Math.floor(x / squareSize + y / squareSize) % 2;
context.fillStyle = checker === 0 ? darkColor : lightColor;
context.fillRect(x, y, squareSize, squareSize);
}
}
// Right
for (let x = w - width; x < w; x += squareSize) {
for (let y = width; y < h - width; y += squareSize) {
const checker = Math.floor(x / squareSize + y / squareSize) % 2;
context.fillStyle = checker === 0 ? darkColor : lightColor;
context.fillRect(x, y, squareSize, squareSize);
}
}
}
}
// Auto-register effect
export function register(generator) {
generator.registerEffect(new BorderEffect());
}

93
static/js/button-generator/effects/glitch.js Normal file
View file

@ -0,0 +1,93 @@
import { ButtonEffect } from '../effect-base.js';
/**
* Glitch effect
* Creates horizontal scanline displacement for a glitchy look
*/
export class GlitchEffect extends ButtonEffect {
constructor() {
super({
id: 'glitch',
name: 'Glitch',
type: 'general',
category: 'Visual Effects',
renderOrder: 80
});
}
defineControls() {
return [
{
id: 'animate-glitch',
type: 'checkbox',
label: 'Glitch Effect',
defaultValue: false
},
{
id: 'glitch-intensity',
type: 'range',
label: 'Glitch Intensity',
defaultValue: 5,
min: 1,
max: 20,
step: 1,
showWhen: 'animate-glitch',
description: 'Maximum pixel offset for glitch'
}
];
}
isEnabled(controlValues) {
return controlValues['animate-glitch'] === true;
}
apply(context, controlValues, animState, renderData) {
if (!animState) return;
const intensity = controlValues['glitch-intensity'] || 5;
const imageData = context.getImageData(0, 0, renderData.width, renderData.height);
// Randomly glitch ~10% of scanlines per frame
const glitchProbability = 0.1;
const maxOffset = intensity;
for (let y = 0; y < renderData.height; y++) {
if (Math.random() < glitchProbability) {
const offset = Math.floor((Math.random() - 0.5) * maxOffset * 2);
this.shiftScanline(imageData, y, offset, renderData.width);
}
}
context.putImageData(imageData, 0, 0);
}
/**
* Shift a horizontal scanline by offset pixels (with wrapping)
*/
shiftScanline(imageData, y, offset, width) {
const rowStart = y * width * 4;
const rowData = new Uint8ClampedArray(width * 4);
// Copy row
for (let i = 0; i < width * 4; i++) {
rowData[i] = imageData.data[rowStart + i];
}
// Shift and wrap
for (let x = 0; x < width; x++) {
let sourceX = (x - offset + width) % width;
let destIdx = rowStart + x * 4;
let srcIdx = sourceX * 4;
imageData.data[destIdx] = rowData[srcIdx];
imageData.data[destIdx + 1] = rowData[srcIdx + 1];
imageData.data[destIdx + 2] = rowData[srcIdx + 2];
imageData.data[destIdx + 3] = rowData[srcIdx + 3];
}
}
}
// Auto-register effect
export function register(generator) {
generator.registerEffect(new GlitchEffect());
}

170
static/js/button-generator/effects/hologram.js Normal file
View file

@ -0,0 +1,170 @@
import { ButtonEffect } from '../effect-base.js';
/**
* Hologram effect
* Creates a futuristic holographic appearance with glitches and scan lines
*/
export class HologramEffect extends ButtonEffect {
constructor() {
super({
id: 'hologram',
name: 'Hologram',
type: 'general',
category: 'Visual Effects',
renderOrder: 88 // Near the end, after most other effects
});
}
defineControls() {
return [
{
id: 'animate-hologram',
type: 'checkbox',
label: 'Hologram Effect',
defaultValue: false,
description: 'Futuristic holographic appearance'
},
{
id: 'hologram-intensity',
type: 'range',
label: 'Effect Intensity',
defaultValue: 50,
min: 10,
max: 100,
step: 5,
showWhen: 'animate-hologram',
description: 'Strength of hologram effect'
},
{
id: 'hologram-glitch-freq',
type: 'range',
label: 'Glitch Frequency',
defaultValue: 30,
min: 0,
max: 100,
step: 10,
showWhen: 'animate-hologram',
description: 'How often glitches occur'
},
{
id: 'hologram-color',
type: 'color',
label: 'Hologram Tint',
defaultValue: '#00ffff',
showWhen: 'animate-hologram',
description: 'Color tint for hologram effect'
}
];
}
isEnabled(controlValues) {
return controlValues['animate-hologram'] === true;
}
apply(context, controlValues, animState, renderData) {
if (!animState) return;
const intensity = (controlValues['hologram-intensity'] || 50) / 100;
const glitchFreq = (controlValues['hologram-glitch-freq'] || 30) / 100;
const color = controlValues['hologram-color'] || '#00ffff';
// Get current canvas content
const imageData = context.getImageData(0, 0, renderData.width, renderData.height);
const data = imageData.data;
// Parse hologram color for tinting
const hexColor = color.replace('#', '');
const r = parseInt(hexColor.substr(0, 2), 16);
const g = parseInt(hexColor.substr(2, 2), 16);
const b = parseInt(hexColor.substr(4, 2), 16);
// Apply holographic tint
for (let i = 0; i < data.length; i += 4) {
// Mix with hologram color
data[i] = data[i] * (1 - intensity * 0.3) + r * intensity * 0.3; // Red
data[i + 1] = data[i + 1] * (1 - intensity * 0.5) + g * intensity * 0.5; // Green (more cyan)
data[i + 2] = data[i + 2] * (1 - intensity * 0.5) + b * intensity * 0.5; // Blue (more cyan)
}
context.putImageData(imageData, 0, 0);
// Add horizontal scan lines
context.globalAlpha = 0.05 * intensity;
context.fillStyle = '#000000';
for (let y = 0; y < renderData.height; y += 2) {
context.fillRect(0, y, renderData.width, 1);
}
context.globalAlpha = 1.0;
// Add moving highlight scan line
const scanY = (animState.progress * renderData.height) % renderData.height;
const gradient = context.createLinearGradient(0, scanY - 3, 0, scanY + 3);
gradient.addColorStop(0, 'rgba(0, 255, 255, 0)');
gradient.addColorStop(0.5, `rgba(${r}, ${g}, ${b}, ${0.3 * intensity})`);
gradient.addColorStop(1, 'rgba(0, 255, 255, 0)');
context.fillStyle = gradient;
context.fillRect(0, scanY - 3, renderData.width, 6);
// Random glitches
if (Math.random() < glitchFreq * 0.1) {
const glitchY = Math.floor(Math.random() * renderData.height);
const glitchHeight = Math.floor(2 + Math.random() * 4);
const offset = (Math.random() - 0.5) * 6 * intensity;
const sliceData = context.getImageData(0, glitchY, renderData.width, glitchHeight);
context.putImageData(sliceData, offset, glitchY);
}
// Add chromatic aberration on edges
if (intensity > 0.3) {
const originalImage = context.getImageData(0, 0, renderData.width, renderData.height);
const aberration = 2 * intensity;
// Slight red shift right
const redShift = context.getImageData(0, 0, renderData.width, renderData.height);
for (let i = 0; i < redShift.data.length; i += 4) {
const pixelIndex = i / 4;
const x = pixelIndex % renderData.width;
if (x < 3 || x > renderData.width - 3) {
const sourceIndex = ((pixelIndex + Math.floor(aberration)) * 4);
if (sourceIndex < originalImage.data.length) {
redShift.data[i] = originalImage.data[sourceIndex];
}
}
}
// Slight blue shift left
const blueShift = context.getImageData(0, 0, renderData.width, renderData.height);
for (let i = 0; i < blueShift.data.length; i += 4) {
const pixelIndex = i / 4;
const x = pixelIndex % renderData.width;
if (x < 3 || x > renderData.width - 3) {
const sourceIndex = ((pixelIndex - Math.floor(aberration)) * 4);
if (sourceIndex >= 0 && sourceIndex < originalImage.data.length) {
blueShift.data[i + 2] = originalImage.data[sourceIndex + 2];
}
}
}
context.putImageData(redShift, 0, 0);
context.globalCompositeOperation = 'screen';
context.globalAlpha = 0.3;
context.putImageData(blueShift, 0, 0);
context.globalCompositeOperation = 'source-over';
context.globalAlpha = 1.0;
}
// Add flickering effect
if (Math.random() < 0.05) {
context.globalAlpha = 0.9 + Math.random() * 0.1;
context.fillStyle = 'rgba(255, 255, 255, 0.05)';
context.fillRect(0, 0, renderData.width, renderData.height);
context.globalAlpha = 1.0;
}
}
}
// Auto-register effect
export function register(generator) {
generator.registerEffect(new HologramEffect());
}

68
static/js/button-generator/effects/noise.js Normal file
View file

@ -0,0 +1,68 @@
import { ButtonEffect } from '../effect-base.js';
/**
* Noise/Static effect
* Adds random pixel noise for a static/interference look
*/
export class NoiseEffect extends ButtonEffect {
constructor() {
super({
id: 'noise',
name: 'Noise',
type: 'general',
category: 'Visual Effects',
renderOrder: 90
});
}
defineControls() {
return [
{
id: 'animate-noise',
type: 'checkbox',
label: 'Noise Effect',
defaultValue: false,
description: 'Random static/interference'
},
{
id: 'noise-intensity',
type: 'range',
label: 'Noise Intensity',
defaultValue: 0.1,
min: 0.01,
max: 0.5,
step: 0.01,
showWhen: 'animate-noise',
description: 'Amount of noise'
}
];
}
isEnabled(controlValues) {
return controlValues['animate-noise'] === true;
}
apply(context, controlValues, animState, renderData) {
if (!animState) return;
const intensity = controlValues['noise-intensity'] || 0.1;
const imageData = context.getImageData(0, 0, renderData.width, renderData.height);
for (let i = 0; i < imageData.data.length; i += 4) {
// Random noise value
const noise = (Math.random() - 0.5) * 255 * intensity;
imageData.data[i] = Math.max(0, Math.min(255, imageData.data[i] + noise));
imageData.data[i + 1] = Math.max(0, Math.min(255, imageData.data[i + 1] + noise));
imageData.data[i + 2] = Math.max(0, Math.min(255, imageData.data[i + 2] + noise));
// Alpha unchanged
}
context.putImageData(imageData, 0, 0);
}
}
// Auto-register effect
export function register(generator) {
generator.registerEffect(new NoiseEffect());
}

62
static/js/button-generator/effects/pulse.js Normal file
View file

@ -0,0 +1,62 @@
import { ButtonEffect } from '../effect-base.js';
/**
* Pulse effect
* Scales the button content up and down
*/
export class PulseEffect extends ButtonEffect {
constructor() {
super({
id: 'pulse',
name: 'Pulse',
type: 'transform',
category: 'Visual Effects',
renderOrder: 1 // Must run before any drawing
});
}
defineControls() {
return [
{
id: 'animate-pulse',
type: 'checkbox',
label: 'Pulse Effect',
defaultValue: false
},
{
id: 'pulse-scale',
type: 'range',
label: 'Pulse Scale',
defaultValue: 1.2,
min: 1.0,
max: 2.0,
step: 0.05,
showWhen: 'animate-pulse',
description: 'Maximum scale size'
}
];
}
isEnabled(controlValues) {
return controlValues['animate-pulse'] === true;
}
apply(context, controlValues, animState, renderData) {
if (!animState) return;
const maxScale = controlValues['pulse-scale'] || 1.2;
const minScale = 1.0;
const scale = minScale + (maxScale - minScale) *
(Math.sin(animState.getPhase(1.0)) * 0.5 + 0.5);
// Apply transformation (context save/restore handled by caller)
context.translate(renderData.centerX, renderData.centerY);
context.scale(scale, scale);
context.translate(-renderData.centerX, -renderData.centerY);
}
}
// Auto-register effect
export function register(generator) {
generator.registerEffect(new PulseEffect());
}

100
static/js/button-generator/effects/rainbow-text.js Normal file
View file

@ -0,0 +1,100 @@
import { ButtonEffect } from '../effect-base.js';
/**
* Rainbow text animation effect
* Cycles text color through rainbow hues
*/
export class RainbowTextEffect extends ButtonEffect {
constructor(textLineNumber = 1) {
const suffix = textLineNumber === 1 ? '' : '2';
super({
id: `text-rainbow${suffix}`,
name: `Rainbow Text ${textLineNumber}`,
type: textLineNumber === 1 ? 'text' : 'text2',
category: textLineNumber === 1 ? 'Text Line 1' : 'Text Line 2',
renderOrder: 5, // Apply before wave (lower order)
textLineNumber: textLineNumber // Pass through config
});
this.textLineNumber = textLineNumber;
}
defineControls() {
const textLineNumber = this.textLineNumber || this.config?.textLineNumber || 1;
const suffix = textLineNumber === 1 ? '' : '2';
return [
{
id: `animate-text-rainbow${suffix}`,
type: 'checkbox',
label: 'Rainbow Animation',
defaultValue: false
},
{
id: `text-rainbow-speed${suffix}`,
type: 'range',
label: 'Rainbow Speed',
defaultValue: 1,
min: 0.1,
max: 5,
step: 0.1,
showWhen: `animate-text-rainbow${suffix}`,
description: 'Speed of color cycling'
}
];
}
isEnabled(controlValues) {
const suffix = this.textLineNumber === 1 ? '' : '2';
return controlValues[`animate-text-rainbow${suffix}`] === true;
}
apply(context, controlValues, animState, renderData) {
if (!animState) return; // Rainbow requires animation
const suffix = this.textLineNumber === 1 ? '' : '2';
// Get text configuration
const text = controlValues[`button-text${suffix}`] || '';
const enabled = controlValues[`text${suffix}-enabled`];
if (!text || !enabled) return;
// Check if wave is also enabled - if so, skip (wave will handle rainbow)
if (controlValues[`animate-text-wave${suffix}`]) return;
const fontSize = controlValues[`font-size${suffix}`] || 12;
const fontWeight = controlValues[`font-bold${suffix}`] ? 'bold' : 'normal';
const fontStyle = controlValues[`font-italic${suffix}`] ? 'italic' : 'normal';
const fontFamily = controlValues[`font-family${suffix}`] || 'Arial';
const x = (controlValues[`text${suffix}-x`] / 100) * renderData.width;
const y = (controlValues[`text${suffix}-y`] / 100) * renderData.height;
const speed = controlValues[`text-rainbow-speed${suffix}`] || 1;
// Calculate rainbow color
const hue = (animState.progress * speed * 360) % 360;
const fillStyle = `hsl(${hue}, 80%, 60%)`;
const strokeStyle = `hsl(${hue}, 80%, 30%)`;
// Set font
context.font = `${fontStyle} ${fontWeight} ${fontSize}px "${fontFamily}"`;
context.textAlign = 'center';
context.textBaseline = 'middle';
// Draw outline if enabled
if (controlValues[`text${suffix}-outline`]) {
context.strokeStyle = strokeStyle;
context.lineWidth = 2;
context.strokeText(text, x, y);
}
// Draw text
context.fillStyle = fillStyle;
context.fillText(text, x, y);
}
}
// Auto-register effect
export function register(generator) {
generator.registerEffect(new RainbowTextEffect(1));
generator.registerEffect(new RainbowTextEffect(2));
}

85
static/js/button-generator/effects/rgb-split.js Normal file
View file

@ -0,0 +1,85 @@
import { ButtonEffect } from '../effect-base.js';
/**
* RGB Split / Chromatic Aberration effect
* Separates color channels for a glitchy chromatic aberration look
*/
export class RgbSplitEffect extends ButtonEffect {
constructor() {
super({
id: 'rgb-split',
name: 'RGB Split',
type: 'general',
category: 'Visual Effects',
renderOrder: 85
});
}
defineControls() {
return [
{
id: 'animate-rgb-split',
type: 'checkbox',
label: 'RGB Split',
defaultValue: false,
description: 'Chromatic aberration effect'
},
{
id: 'rgb-split-intensity',
type: 'range',
label: 'Split Intensity',
defaultValue: 2,
min: 1,
max: 10,
step: 0.5,
showWhen: 'animate-rgb-split',
description: 'Pixel offset for color channels'
}
];
}
isEnabled(controlValues) {
return controlValues['animate-rgb-split'] === true;
}
apply(context, controlValues, animState, renderData) {
if (!animState) return;
const intensity = controlValues['rgb-split-intensity'] || 2;
const imageData = context.getImageData(0, 0, renderData.width, renderData.height);
const result = context.createImageData(renderData.width, renderData.height);
// Oscillating offset
const phase = Math.sin(animState.getPhase(1.0));
const offsetX = Math.round(phase * intensity);
for (let y = 0; y < renderData.height; y++) {
for (let x = 0; x < renderData.width; x++) {
const idx = (y * renderData.width + x) * 4;
// Red channel - shift left
const redX = Math.max(0, Math.min(renderData.width - 1, x - offsetX));
const redIdx = (y * renderData.width + redX) * 4;
result.data[idx] = imageData.data[redIdx];
// Green channel - no shift
result.data[idx + 1] = imageData.data[idx + 1];
// Blue channel - shift right
const blueX = Math.max(0, Math.min(renderData.width - 1, x + offsetX));
const blueIdx = (y * renderData.width + blueX) * 4;
result.data[idx + 2] = imageData.data[blueIdx + 2];
// Alpha channel
result.data[idx + 3] = imageData.data[idx + 3];
}
}
context.putImageData(result, 0, 0);
}
}
// Auto-register effect
export function register(generator) {
generator.registerEffect(new RgbSplitEffect());
}

72
static/js/button-generator/effects/rotate.js Normal file
View file

@ -0,0 +1,72 @@
import { ButtonEffect } from '../effect-base.js';
/**
* Rotate effect
* Rotates the button back and forth
*/
export class RotateEffect extends ButtonEffect {
constructor() {
super({
id: 'rotate',
name: 'Rotate',
type: 'transform',
category: 'Visual Effects',
renderOrder: 2 // Must run before any drawing (after pulse)
});
}
defineControls() {
return [
{
id: 'animate-rotate',
type: 'checkbox',
label: 'Rotate Effect',
defaultValue: false
},
{
id: 'rotate-angle',
type: 'range',
label: 'Max Angle',
defaultValue: 15,
min: 1,
max: 45,
step: 1,
showWhen: 'animate-rotate',
description: 'Maximum rotation angle in degrees'
},
{
id: 'rotate-speed',
type: 'range',
label: 'Rotation Speed',
defaultValue: 1,
min: 0.1,
max: 3,
step: 0.1,
showWhen: 'animate-rotate',
description: 'Speed of rotation'
}
];
}
isEnabled(controlValues) {
return controlValues['animate-rotate'] === true;
}
apply(context, controlValues, animState, renderData) {
if (!animState) return;
const maxAngle = controlValues['rotate-angle'] || 15;
const speed = controlValues['rotate-speed'] || 1;
const angle = Math.sin(animState.getPhase(speed)) * maxAngle * (Math.PI / 180);
// Apply transformation (context save/restore handled by caller)
context.translate(renderData.centerX, renderData.centerY);
context.rotate(angle);
context.translate(-renderData.centerX, -renderData.centerY);
}
}
// Auto-register effect
export function register(generator) {
generator.registerEffect(new RotateEffect());
}

79
static/js/button-generator/effects/scanline.js Normal file
View file

@ -0,0 +1,79 @@
import { ButtonEffect } from '../effect-base.js';
/**
* Scanline effect
* Creates CRT-style horizontal lines
*/
export class ScanlineEffect extends ButtonEffect {
constructor() {
super({
id: 'scanline',
name: 'Scanline',
type: 'general',
category: 'Visual Effects',
renderOrder: 75
});
}
defineControls() {
return [
{
id: 'animate-scanline',
type: 'checkbox',
label: 'Scanline Effect',
defaultValue: false
},
{
id: 'scanline-intensity',
type: 'range',
label: 'Scanline Intensity',
defaultValue: 0.3,
min: 0.1,
max: 0.8,
step: 0.05,
showWhen: 'animate-scanline',
description: 'Darkness of scanlines'
},
{
id: 'scanline-speed',
type: 'range',
label: 'Scanline Speed',
defaultValue: 1,
min: 0.1,
max: 3,
step: 0.1,
showWhen: 'animate-scanline',
description: 'Movement speed of scanlines'
}
];
}
isEnabled(controlValues) {
return controlValues['animate-scanline'] === true;
}
apply(context, controlValues, animState, renderData) {
if (!animState) return;
const intensity = controlValues['scanline-intensity'] || 0.3;
const speed = controlValues['scanline-speed'] || 1;
// Create overlay with scanlines
context.globalCompositeOperation = 'multiply';
context.fillStyle = `rgba(0, 0, 0, ${intensity})`;
// Animate scanline position
const offset = (animState.progress * speed * renderData.height) % 2;
for (let y = offset; y < renderData.height; y += 2) {
context.fillRect(0, Math.floor(y), renderData.width, 1);
}
context.globalCompositeOperation = 'source-over';
}
}
// Auto-register effect
export function register(generator) {
generator.registerEffect(new ScanlineEffect());
}

57
static/js/button-generator/effects/shimmer.js Normal file
View file

@ -0,0 +1,57 @@
import { ButtonEffect } from '../effect-base.js';
/**
* Shimmer effect
* Creates a sweeping light/shine effect across the button
*/
export class ShimmerEffect extends ButtonEffect {
constructor() {
super({
id: 'shimmer',
name: 'Shimmer',
type: 'general',
category: 'Visual Effects',
renderOrder: 70
});
}
defineControls() {
return [
{
id: 'animate-shimmer',
type: 'checkbox',
label: 'Shimmer Effect',
defaultValue: false,
description: 'Sweeping light effect'
}
];
}
isEnabled(controlValues) {
return controlValues['animate-shimmer'] === true;
}
apply(context, controlValues, animState, renderData) {
if (!animState) return;
const shimmerX = animState.progress * (renderData.width + 40) - 20;
const gradient = context.createLinearGradient(
shimmerX - 15,
0,
shimmerX + 15,
renderData.height
);
gradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.3)');
gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
context.fillStyle = gradient;
context.fillRect(0, 0, renderData.width, renderData.height);
}
}
// Auto-register effect
export function register(generator) {
generator.registerEffect(new ShimmerEffect());
}

162
static/js/button-generator/effects/spin-text.js Normal file
View file

@ -0,0 +1,162 @@
import { ButtonEffect } from "../effect-base.js";
/**
* Spinning text animation effect
* Makes each character rotate independently
*/
export class SpinTextEffect extends ButtonEffect {
constructor(textLineNumber = 1) {
const suffix = textLineNumber === 1 ? "" : "2";
super({
id: `text-spin${suffix}`,
name: `Spinning Text ${textLineNumber}`,
type: textLineNumber === 1 ? "text" : "text2",
category: textLineNumber === 1 ? "Text Line 1" : "Text Line 2",
renderOrder: 8, // Before wave, after rainbow
textLineNumber: textLineNumber,
});
this.textLineNumber = textLineNumber;
}
defineControls() {
const textLineNumber =
this.textLineNumber || this.config?.textLineNumber || 1;
const suffix = textLineNumber === 1 ? "" : "2";
return [
{
id: `animate-text-spin${suffix}`,
type: "checkbox",
label: "Spinning Animation",
defaultValue: false,
},
{
id: `spin-speed${suffix}`,
type: "range",
label: "Spin Speed",
defaultValue: 1,
min: 1,
max: 5,
step: 1,
showWhen: `animate-text-spin${suffix}`,
description: "Speed of character rotation",
},
{
id: `spin-stagger${suffix}`,
type: "range",
label: "Spin Stagger",
defaultValue: 0.3,
min: 0,
max: 1,
step: 0.1,
showWhen: `animate-text-spin${suffix}`,
description: "Delay between characters",
},
];
}
isEnabled(controlValues) {
const suffix = this.textLineNumber === 1 ? "" : "2";
return controlValues[`animate-text-spin${suffix}`] === true;
}
apply(context, controlValues, animState, renderData) {
const suffix = this.textLineNumber === 1 ? "" : "2";
const text = controlValues[`button-text${suffix}`] || "";
if (!text || !controlValues[`text${suffix}-enabled`]) return;
if (!animState) return;
const speed = controlValues[`spin-speed${suffix}`] || 1;
const stagger = controlValues[`spin-stagger${suffix}`] || 0.3;
const fontSize = controlValues[`font-size${suffix}`] || 14;
const fontFamily = controlValues[`font-family${suffix}`] || "Arial";
const fontWeight = controlValues[`text${suffix}-bold`] ? "bold" : "normal";
const fontStyle = controlValues[`text${suffix}-italic`]
? "italic"
: "normal";
context.font = `${fontStyle} ${fontWeight} ${fontSize}px "${fontFamily}"`;
context.textAlign = "center";
context.textBaseline = "middle";
// Get text color
let fillStyle;
const colorType = controlValues[`text${suffix}-color-type`] || "solid";
if (colorType === "gradient") {
const color1 =
controlValues[`text${suffix}-gradient-color1`] || "#ffffff";
const color2 =
controlValues[`text${suffix}-gradient-color2`] || "#00ffff";
const angle =
(controlValues[`text${suffix}-gradient-angle`] || 90) * (Math.PI / 180);
const centerX = renderData.centerX;
const centerY = renderData.centerY;
const x1 = centerX + Math.cos(angle) * 20;
const y1 = centerY + Math.sin(angle) * 20;
const x2 = centerX - Math.cos(angle) * 20;
const y2 = centerY - Math.sin(angle) * 20;
const gradient = context.createLinearGradient(x1, y1, x2, y2);
gradient.addColorStop(0, color1);
gradient.addColorStop(1, color2);
fillStyle = gradient;
} else {
fillStyle = controlValues[`text${suffix}-color`] || "#ffffff";
}
// Calculate base position
const x = controlValues[`text${suffix}-x`] || 50;
const y = controlValues[`text${suffix}-y`] || 50;
const baseX = (x / 100) * renderData.width;
const baseY = (y / 100) * renderData.height;
// Split text into grapheme clusters (handles emojis properly)
// Use Intl.Segmenter if available, otherwise fall back to spread operator
let chars;
if (typeof Intl !== 'undefined' && Intl.Segmenter) {
const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
chars = Array.from(segmenter.segment(text), s => s.segment);
} else {
// Fallback: spread operator handles basic emoji
chars = [...text];
}
// Measure total text width for centering
const totalWidth = context.measureText(text).width;
let currentX = baseX - totalWidth / 2;
// Draw each character with rotation
for (let i = 0; i < chars.length; i++) {
const char = chars[i];
const charWidth = context.measureText(char).width;
const charCenterX = currentX + charWidth / 2;
// Calculate rotation for this character
const phase = animState.getPhase(speed) + i * stagger * Math.PI * 2;
const rotation = phase % (Math.PI * 2);
context.save();
context.translate(charCenterX, baseY);
context.rotate(rotation);
// Apply outline if enabled
if (controlValues[`text${suffix}-outline`]) {
context.strokeStyle =
controlValues[`text${suffix}-outline-color`] || "#000000";
context.lineWidth = 2;
context.strokeText(char, 0, 0);
}
context.fillStyle = fillStyle;
context.fillText(char, 0, 0);
context.restore();
currentX += charWidth;
}
}
}
// Auto-register effects for both text lines
export function register(generator) {
generator.registerEffect(new SpinTextEffect(1));
generator.registerEffect(new SpinTextEffect(2));
}

199
static/js/button-generator/effects/spotlight.js Normal file
View file

@ -0,0 +1,199 @@
/**
* EXAMPLE EFFECT
*
* This is a template for creating new effects.
* Copy this file and modify it to create your own custom effects.
*
* This example creates a "spotlight" effect that highlights a circular area
* and darkens the rest of the button.
*/
import { ButtonEffect } from "../effect-base.js";
/**
* Spotlight Effect
* Creates a moving circular spotlight that highlights different areas
*/
export class SpotlightEffect extends ButtonEffect {
constructor() {
super({
// Unique ID for this effect (used in control IDs)
id: "spotlight",
// Display name shown in UI
name: "Spotlight",
// Effect type determines render order category
// Options: 'background', 'border', 'text', 'text2', 'general'
type: "general",
// Category for organizing effects in UI
category: "Visual Effects",
// Render order within type (lower = earlier)
// 1-9: backgrounds, 10-19: borders, 20-29: transforms,
// 30-49: text, 50-79: overlays, 80-99: post-processing
renderOrder: 60,
});
}
/**
* Define UI controls for this effect
* These controls will be automatically bound to the generator
*/
defineControls() {
return [
// Main enable/disable checkbox
{
id: "animate-spotlight",
type: "checkbox",
label: "Spotlight Effect",
defaultValue: false,
description: "Moving circular spotlight",
},
// Spotlight size control
{
id: "spotlight-size",
type: "range",
label: "Spotlight Size",
defaultValue: 20,
min: 10,
max: 50,
step: 1,
showWhen: "animate-spotlight", // Only show when checkbox is enabled
description: "Radius of the spotlight",
},
// Darkness of the vignette
{
id: "spotlight-darkness",
type: "range",
label: "Darkness",
defaultValue: 1,
min: 0,
max: 1,
step: 0.1,
showWhen: "animate-spotlight",
description: "How dark the non-spotlight area should be",
},
// Speed of movement
{
id: "spotlight-speed",
type: "range",
label: "Movement Speed",
defaultValue: 1,
min: 1,
max: 3,
step: 1,
showWhen: "animate-spotlight",
description: "Speed of spotlight movement",
},
];
}
/**
* Determine if this effect should be applied
* @param {Object} controlValues - Current values of all controls
* @returns {boolean}
*/
isEnabled(controlValues) {
return controlValues["animate-spotlight"] === true;
}
/**
* Apply the effect to the canvas
*
* @param {CanvasRenderingContext2D} context - Canvas 2D rendering context
* @param {Object} controlValues - Current values of all controls
* @param {AnimationState|null} animState - Animation state (null for static render)
* @param {Object} renderData - Render information: { width, height, centerX, centerY }
*/
apply(context, controlValues, animState, renderData) {
// Skip if no animation (spotlight needs movement)
if (!animState) return;
// Get control values
const size = controlValues["spotlight-size"] || 20;
const darkness = controlValues["spotlight-darkness"] || 0.5;
const speed = controlValues["spotlight-speed"] || 1;
// Calculate spotlight position
// Move in a circular pattern using animation phase
const phase = animState.getPhase(speed);
const spotX = renderData.centerX + Math.cos(phase) * 20;
const spotY = renderData.centerY + Math.sin(phase) * 10;
// Create radial gradient for spotlight effect
const gradient = context.createRadialGradient(
spotX,
spotY,
0, // Inner circle (center of spotlight)
spotX,
spotY,
size, // Outer circle (edge of spotlight)
);
// Center is transparent (spotlight is bright)
gradient.addColorStop(0, `rgba(0, 0, 0, 0)`);
// Edge fades to dark
gradient.addColorStop(0.5, `rgba(0, 0, 0, ${darkness * 0.3})`);
gradient.addColorStop(1, `rgba(0, 0, 0, ${darkness})`);
// Apply the gradient as an overlay
context.fillStyle = gradient;
context.fillRect(0, 0, renderData.width, renderData.height);
// Optional: Add a bright center dot
context.fillStyle = "rgba(255, 255, 255, 0.3)";
context.beginPath();
context.arc(spotX, spotY, 2, 0, Math.PI * 2);
context.fill();
}
/**
* Optional: Add helper methods for your effect
*/
calculateSpotlightPath(progress, width, height) {
// Example helper method
return {
x: width * progress,
y: height / 2,
};
}
}
/**
* Registration function
* This is called to add the effect to the generator
*
* @param {ButtonGenerator} generator - The button generator instance
*/
export function register(generator) {
generator.registerEffect(new SpotlightEffect());
}
/**
* USAGE:
*
* 1. Copy this file to a new name (e.g., my-effect.js)
* 2. Modify the class name, id, and effect logic
* 3. Import in main.js:
* import * as myEffect from './effects/my-effect.js';
* 4. Register in setupApp():
* myEffect.register(generator);
* 5. Add HTML controls with matching IDs
*/
/**
* TIPS:
*
* - Use animState.progress for linear animations (0 to 1)
* - Use animState.getPhase(speed) for periodic animations (0 to 2π)
* - Use Math.sin/cos for smooth periodic motion
* - Check if (!animState) at the start if your effect requires animation
* - The context is automatically saved/restored, so feel free to transform
* - Use renderData for canvas dimensions and center point
* - Look at existing effects for more examples
*/

167
static/js/button-generator/effects/text-shadow.js Normal file
View file

@ -0,0 +1,167 @@
import { ButtonEffect } from "../effect-base.js";
/**
* Text Drop Shadow Effect
* Renders text with a drop shadow underneath
* This draws the shadow first, then standard text rendering draws on top
*/
export class TextShadowEffect extends ButtonEffect {
constructor(textLineNumber = 1) {
const suffix = textLineNumber === 1 ? "" : "2";
super({
id: `text-shadow${suffix}`,
name: `Drop Shadow ${textLineNumber}`,
type: textLineNumber === 1 ? "text" : "text2",
category: textLineNumber === 1 ? "Text Line 1" : "Text Line 2",
renderOrder: 19, // Before standard text (20), so shadow draws first
textLineNumber: textLineNumber,
});
this.textLineNumber = textLineNumber;
}
defineControls() {
const textLineNumber =
this.textLineNumber || this.config?.textLineNumber || 1;
const suffix = textLineNumber === 1 ? "" : "2";
return [
{
id: `text${suffix}-shadow-enabled`,
type: "checkbox",
label: "Drop Shadow",
defaultValue: false,
description:
"Add drop shadow to text - Not compatible with other text effects!!",
},
{
id: `text${suffix}-shadow-color`,
type: "color",
label: "Shadow Color",
defaultValue: "#000000",
showWhen: `text${suffix}-shadow-enabled`,
description: "Color of the shadow",
},
{
id: `text${suffix}-shadow-blur`,
type: "range",
label: "Shadow Blur",
defaultValue: 4,
min: 0,
max: 10,
step: 1,
showWhen: `text${suffix}-shadow-enabled`,
description: "Blur radius of shadow",
},
{
id: `text${suffix}-shadow-offset-x`,
type: "range",
label: "Shadow X Offset",
defaultValue: 2,
min: -10,
max: 10,
step: 1,
showWhen: `text${suffix}-shadow-enabled`,
description: "Horizontal shadow offset",
},
{
id: `text${suffix}-shadow-offset-y`,
type: "range",
label: "Shadow Y Offset",
defaultValue: 2,
min: -10,
max: 10,
step: 1,
showWhen: `text${suffix}-shadow-enabled`,
description: "Vertical shadow offset",
},
{
id: `text${suffix}-shadow-opacity`,
type: "range",
label: "Shadow Opacity",
defaultValue: 0.8,
min: 0,
max: 1,
step: 0.1,
showWhen: `text${suffix}-shadow-enabled`,
description: "Opacity of the shadow",
},
];
}
isEnabled(controlValues) {
const suffix = this.textLineNumber === 1 ? "" : "2";
const textEnabled = controlValues[`text${suffix}-enabled`];
const shadowEnabled = controlValues[`text${suffix}-shadow-enabled`];
return textEnabled && shadowEnabled;
}
apply(context, controlValues, animState, renderData) {
const suffix = this.textLineNumber === 1 ? "" : "2";
const text = controlValues[`button-text${suffix}`] || "";
if (!text) return;
// Get shadow settings
const shadowColor =
controlValues[`text${suffix}-shadow-color`] || "#000000";
const shadowBlur = controlValues[`text${suffix}-shadow-blur`] || 4;
const shadowOffsetX = controlValues[`text${suffix}-shadow-offset-x`] || 2;
const shadowOffsetY = controlValues[`text${suffix}-shadow-offset-y`] || 2;
const shadowOpacity = controlValues[`text${suffix}-shadow-opacity`] || 0.8;
// Get text rendering settings
const fontSize = controlValues[`font-size${suffix}`] || 14;
const fontFamily = controlValues[`font-family${suffix}`] || "Arial";
const fontWeight = controlValues[`text${suffix}-bold`] ? "bold" : "normal";
const fontStyle = controlValues[`text${suffix}-italic`]
? "italic"
: "normal";
const textX = (controlValues[`text${suffix}-x`] || 50) / 100;
const textY = (controlValues[`text${suffix}-y`] || 50) / 100;
// Convert hex to rgba
const hexToRgba = (hex, alpha) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if (result) {
const r = parseInt(result[1], 16);
const g = parseInt(result[2], 16);
const b = parseInt(result[3], 16);
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
return `rgba(0, 0, 0, ${alpha})`;
};
// Set up text rendering
context.font = `${fontStyle} ${fontWeight} ${fontSize}px "${fontFamily}"`;
context.textAlign = "center";
context.textBaseline = "middle";
// Calculate text position
const x = renderData.width * textX;
const y = renderData.height * textY;
// Draw the shadow using the shadow API
// This will create a shadow underneath whatever we draw
context.shadowColor = hexToRgba(shadowColor, shadowOpacity);
context.shadowBlur = shadowBlur;
context.shadowOffsetX = shadowOffsetX;
context.shadowOffsetY = shadowOffsetY;
// Draw a solid shadow by filling with the shadow color
// The shadow API will create the blur effect
context.fillStyle = hexToRgba(shadowColor, shadowOpacity);
context.fillText(text, x, y);
// Reset shadow for subsequent renders
context.shadowColor = "transparent";
context.shadowBlur = 0;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
}
}
// Export two instances for text line 1 and text line 2
export function register(generator) {
generator.registerEffect(new TextShadowEffect(1));
generator.registerEffect(new TextShadowEffect(2));
}

243
static/js/button-generator/effects/text-standard.js Normal file
View file

@ -0,0 +1,243 @@
import { ButtonEffect } from "../effect-base.js";
/**
* Standard text rendering effect
* Renders static text (when no animations are active)
*/
export class StandardTextEffect extends ButtonEffect {
constructor(textLineNumber = 1) {
const suffix = textLineNumber === 1 ? "" : "2";
super({
id: `text-standard${suffix}`,
name: `Standard Text ${textLineNumber}`,
type: textLineNumber === 1 ? "text" : "text2",
category: textLineNumber === 1 ? "Text Line 1" : "Text Line 2",
renderOrder: 20, // After animations
textLineNumber: textLineNumber, // Pass through config so defineControls can access it
});
this.textLineNumber = textLineNumber;
}
defineControls() {
// Access from config since this is called before constructor completes
const textLineNumber =
this.textLineNumber || this.config?.textLineNumber || 1;
const suffix = textLineNumber === 1 ? "" : "2";
return [
{
id: `button-text${suffix}`,
type: "text",
label: `Text Line ${textLineNumber}`,
defaultValue: textLineNumber === 1 ? "RITUAL.SH" : "",
},
{
id: `font-size${suffix}`,
type: "range",
label: "Font Size",
min: 6,
max: 24,
defaultValue: textLineNumber === 1 ? 14 : 12,
},
{
id: `text${suffix}-x`,
type: "range",
label: "Horizontal Position",
min: 0,
max: 100,
defaultValue: 50,
description: "Percentage from left",
},
{
id: `text${suffix}-y`,
type: "range",
label: "Vertical Position",
min: 0,
max: 100,
defaultValue: textLineNumber === 1 ? 35 : 65,
description: "Percentage from top",
},
{
id: `text${suffix}-color-type`,
type: "select",
label: "Color Type",
defaultValue: "solid",
options: [
{ value: "solid", label: "Solid Color" },
{ value: "gradient", label: "Gradient" },
],
},
{
id: `text${suffix}-color`,
type: "color",
label: "Text Color",
defaultValue: "#ffffff",
showWhen: `text${suffix}-color-type`,
},
{
id: `text${suffix}-gradient-color1`,
type: "color",
label: "Gradient Color 1",
defaultValue: "#ffffff",
showWhen: `text${suffix}-color-type`,
},
{
id: `text${suffix}-gradient-color2`,
type: "color",
label: "Gradient Color 2",
defaultValue: "#00ffff",
showWhen: `text${suffix}-color-type`,
},
{
id: `text${suffix}-gradient-angle`,
type: "range",
label: "Gradient Angle",
min: 0,
max: 360,
defaultValue: 0,
showWhen: `text${suffix}-color-type`,
},
{
id: `text${suffix}-outline`,
type: "checkbox",
label: "Outline",
defaultValue: false,
},
{
id: `outline${suffix}-color`,
type: "color",
label: "Outline Color",
defaultValue: "#000000",
showWhen: `text${suffix}-outline`,
},
{
id: `font-family${suffix}`,
type: "select",
label: "Font",
defaultValue: "Lato",
options: [
{ value: "Lato", label: "Lato" },
{ value: "Roboto", label: "Roboto" },
{ value: "Open Sans", label: "Open Sans" },
{ value: "Montserrat", label: "Montserrat" },
{ value: "Oswald", label: "Oswald" },
{ value: "Bebas Neue", label: "Bebas Neue" },
{ value: "Roboto Mono", label: "Roboto Mono" },
{ value: "VT323", label: "VT323" },
{ value: "Press Start 2P", label: "Press Start 2P" },
{ value: "DSEG7-Classic", label: "DSEG7" },
],
},
{
id: `font-bold${suffix}`,
type: "checkbox",
label: "Bold",
defaultValue: false,
},
{
id: `font-italic${suffix}`,
type: "checkbox",
label: "Italic",
defaultValue: false,
},
];
}
isEnabled(controlValues) {
const suffix = this.textLineNumber === 1 ? "" : "2";
const text = controlValues[`button-text${suffix}`];
// Only render if text exists and no animations are active on this text
const waveActive = controlValues[`animate-text-wave${suffix}`];
const rainbowActive = controlValues[`animate-text-rainbow${suffix}`];
const spinActive = controlValues[`animate-text-spin${suffix}`];
return text && text.trim() !== "" && !waveActive && !rainbowActive && !spinActive;
}
apply(context, controlValues, animState, renderData) {
const suffix = this.textLineNumber === 1 ? "" : "2";
const text = controlValues[`button-text${suffix}`];
if (!text) return;
const fontSize = controlValues[`font-size${suffix}`] || 12;
const fontWeight = controlValues[`font-bold${suffix}`] ? "bold" : "normal";
const fontStyle = controlValues[`font-italic${suffix}`]
? "italic"
: "normal";
const fontFamily = controlValues[`font-family${suffix}`] || "Arial";
const x = (controlValues[`text${suffix}-x`] / 100) * renderData.width;
const y = (controlValues[`text${suffix}-y`] / 100) * renderData.height;
// Set font
context.font = `${fontStyle} ${fontWeight} ${fontSize}px "${fontFamily}"`;
context.textAlign = "center";
context.textBaseline = "middle";
// Get colors
const colors = this.getTextColors(
context,
controlValues,
text,
x,
y,
fontSize,
);
// Draw outline if enabled
if (controlValues[`text${suffix}-outline`]) {
context.strokeStyle = colors.strokeStyle;
context.lineWidth = 2;
context.strokeText(text, x, y);
}
// Draw text
context.fillStyle = colors.fillStyle;
context.fillText(text, x, y);
}
/**
* Get text colors (solid or gradient)
*/
getTextColors(context, controlValues, text, x, y, fontSize) {
const suffix = this.textLineNumber === 1 ? "" : "2";
const colorType = controlValues[`text${suffix}-color-type`] || "solid";
let fillStyle, strokeStyle;
if (colorType === "solid") {
fillStyle = controlValues[`text${suffix}-color`] || "#ffffff";
strokeStyle = controlValues[`outline${suffix}-color`] || "#000000";
} else {
// Gradient
const angle =
(controlValues[`text${suffix}-gradient-angle`] || 0) * (Math.PI / 180);
const textWidth = context.measureText(text).width;
const x1 = x - textWidth / 2 + (Math.cos(angle) * textWidth) / 2;
const y1 = y - fontSize / 2 + (Math.sin(angle) * fontSize) / 2;
const x2 = x + textWidth / 2 - (Math.cos(angle) * textWidth) / 2;
const y2 = y + fontSize / 2 - (Math.sin(angle) * fontSize) / 2;
const gradient = context.createLinearGradient(x1, y1, x2, y2);
gradient.addColorStop(
0,
controlValues[`text${suffix}-gradient-color1`] || "#ffffff",
);
gradient.addColorStop(
1,
controlValues[`text${suffix}-gradient-color2`] || "#00ffff",
);
fillStyle = gradient;
strokeStyle = controlValues[`outline${suffix}-color`] || "#000000";
}
return { fillStyle, strokeStyle };
}
}
// Auto-register effect
export function register(generator) {
generator.registerEffect(new StandardTextEffect(1));
generator.registerEffect(new StandardTextEffect(2));
}

178
static/js/button-generator/effects/wave-text.js Normal file
View file

@ -0,0 +1,178 @@
import { ButtonEffect } from '../effect-base.js';
/**
* Wave text animation effect
* Makes text characters wave up and down in a sine wave pattern
*/
export class WaveTextEffect extends ButtonEffect {
constructor(textLineNumber = 1) {
const suffix = textLineNumber === 1 ? '' : '2';
super({
id: `text-wave${suffix}`,
name: `Text Wave ${textLineNumber}`,
type: textLineNumber === 1 ? 'text' : 'text2',
category: textLineNumber === 1 ? 'Text Line 1' : 'Text Line 2',
renderOrder: 10,
textLineNumber: textLineNumber // Pass through config
});
this.textLineNumber = textLineNumber;
}
defineControls() {
const textLineNumber = this.textLineNumber || this.config?.textLineNumber || 1;
const suffix = textLineNumber === 1 ? '' : '2';
return [
{
id: `animate-text-wave${suffix}`,
type: 'checkbox',
label: 'Wave Animation',
defaultValue: false
},
{
id: `wave-amplitude${suffix}`,
type: 'range',
label: 'Wave Amplitude',
defaultValue: 3,
min: 1,
max: 10,
step: 0.5,
showWhen: `animate-text-wave${suffix}`,
description: 'Height of the wave motion'
},
{
id: `wave-speed${suffix}`,
type: 'range',
label: 'Wave Speed',
defaultValue: 1,
min: 0.1,
max: 3,
step: 0.1,
showWhen: `animate-text-wave${suffix}`,
description: 'Speed of the wave animation'
}
];
}
isEnabled(controlValues) {
const suffix = this.textLineNumber === 1 ? '' : '2';
return controlValues[`animate-text-wave${suffix}`] === true;
}
apply(context, controlValues, animState, renderData) {
if (!animState) return; // Wave requires animation
const suffix = this.textLineNumber === 1 ? '' : '2';
// Get text configuration
const text = controlValues[`button-text${suffix}`] || '';
const enabled = controlValues[`text${suffix}-enabled`];
if (!text || !enabled) return;
const fontSize = controlValues[`font-size${suffix}`] || 12;
const fontWeight = controlValues[`font-bold${suffix}`] ? 'bold' : 'normal';
const fontStyle = controlValues[`font-italic${suffix}`] ? 'italic' : 'normal';
const fontFamily = controlValues[`font-family${suffix}`] || 'Arial';
const baseX = (controlValues[`text${suffix}-x`] / 100) * renderData.width;
const baseY = (controlValues[`text${suffix}-y`] / 100) * renderData.height;
const amplitude = controlValues[`wave-amplitude${suffix}`] || 3;
const speed = controlValues[`wave-speed${suffix}`] || 1;
// Set font
context.font = `${fontStyle} ${fontWeight} ${fontSize}px "${fontFamily}"`;
context.textAlign = 'center';
context.textBaseline = 'middle';
// Get colors
const colors = this.getTextColors(context, controlValues, text, baseX, baseY, fontSize, animState);
// Split text into grapheme clusters (handles emojis properly)
// Use Intl.Segmenter if available, otherwise fall back to spread operator
let chars;
if (typeof Intl !== 'undefined' && Intl.Segmenter) {
const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
chars = Array.from(segmenter.segment(text), s => s.segment);
} else {
// Fallback: spread operator handles basic emoji
chars = [...text];
}
// Measure total width for centering
const totalWidth = context.measureText(text).width;
let currentX = baseX - totalWidth / 2;
// Draw each character with wave offset
for (let i = 0; i < chars.length; i++) {
const char = chars[i];
const charWidth = context.measureText(char).width;
// Calculate wave offset for this character
const phase = animState.getPhase(speed);
const charOffset = i / chars.length;
const waveY = Math.sin(phase + charOffset * Math.PI * 2) * amplitude;
const charX = currentX + charWidth / 2;
const charY = baseY + waveY;
// Draw outline if enabled
if (controlValues[`text${suffix}-outline`]) {
context.strokeStyle = colors.strokeStyle;
context.lineWidth = 2;
context.strokeText(char, charX, charY);
}
// Draw character
context.fillStyle = colors.fillStyle;
context.fillText(char, charX, charY);
currentX += charWidth;
}
}
/**
* Get text colors (solid, gradient, or rainbow)
*/
getTextColors(context, controlValues, text, x, y, fontSize, animState) {
const suffix = this.textLineNumber === 1 ? '' : '2';
let fillStyle, strokeStyle;
// Check if rainbow text is also enabled
if (animState && controlValues[`animate-text-rainbow${suffix}`]) {
const speed = controlValues[`text-rainbow-speed${suffix}`] || 1;
const hue = (animState.progress * speed * 360) % 360;
fillStyle = `hsl(${hue}, 80%, 60%)`;
strokeStyle = `hsl(${hue}, 80%, 30%)`;
} else {
const colorType = controlValues[`text${suffix}-color-type`] || 'solid';
if (colorType === 'solid') {
fillStyle = controlValues[`text${suffix}-color`] || '#ffffff';
strokeStyle = controlValues[`outline${suffix}-color`] || '#000000';
} else {
// Gradient
const angle = (controlValues[`text${suffix}-gradient-angle`] || 0) * (Math.PI / 180);
const textWidth = context.measureText(text).width;
const x1 = x - textWidth / 2 + (Math.cos(angle) * textWidth) / 2;
const y1 = y - fontSize / 2 + (Math.sin(angle) * fontSize) / 2;
const x2 = x + textWidth / 2 - (Math.cos(angle) * textWidth) / 2;
const y2 = y + fontSize / 2 - (Math.sin(angle) * fontSize) / 2;
const gradient = context.createLinearGradient(x1, y1, x2, y2);
gradient.addColorStop(0, controlValues[`text${suffix}-gradient-color1`] || '#ffffff');
gradient.addColorStop(1, controlValues[`text${suffix}-gradient-color2`] || '#00ffff');
fillStyle = gradient;
strokeStyle = controlValues[`outline${suffix}-color`] || '#000000';
}
}
return { fillStyle, strokeStyle };
}
}
// Auto-register effect
export function register(generator) {
generator.registerEffect(new WaveTextEffect(1));
generator.registerEffect(new WaveTextEffect(2));
}

363
static/js/button-generator/main.js Normal file
View file

@ -0,0 +1,363 @@
/**
* Button Generator - Main Application File
*
* This demonstrates how to use the modular button generator system.
* Effects are imported and registered with the generator.
*/
import { ButtonGenerator } from "./button-generator-core.js";
import { UIBuilder } from "./ui-builder.js";
// Import effects (each effect file exports a register() function)
import * as solidBg from "./effects/background-solid.js";
import * as gradientBg from "./effects/background-gradient.js";
import * as textureBg from "./effects/background-texture.js";
import * as emojiWallpaper from "./effects/background-emoji-wallpaper.js";
import * as rainbowBg from "./effects/background-rainbow.js";
import * as rain from "./effects/background-rain.js";
import * as starfield from "./effects/background-starfield.js";
//import * as bubbles from "./effects/background-bubbles.js";
import * as aurora from "./effects/background-aurora.js";
import * as fire from "./effects/background-fire.js";
import * as border from "./effects/border.js";
import * as standardText from "./effects/text-standard.js";
import * as textShadow from "./effects/text-shadow.js";
import * as waveText from "./effects/wave-text.js";
import * as rainbowText from "./effects/rainbow-text.js";
import * as spinText from "./effects/spin-text.js";
import * as glitch from "./effects/glitch.js";
import * as pulse from "./effects/pulse.js";
import * as shimmer from "./effects/shimmer.js";
import * as scanline from "./effects/scanline.js";
import * as rgbSplit from "./effects/rgb-split.js";
import * as noise from "./effects/noise.js";
import * as rotate from "./effects/rotate.js";
import * as hologram from "./effects/hologram.js";
import * as spotlight from "./effects/spotlight.js";
/**
* Initialize the button generator application
*/
export function init() {
// Wait for DOM to be ready
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", setupApp);
} else {
setupApp();
}
}
/**
* Setup the application
*/
async function setupApp() {
console.log("Initializing Button Generator...");
// Setup collapsible sections
setupCollapsible();
// Get canvas
const canvas = document.getElementById("button-canvas");
if (!canvas) {
console.error("Canvas element not found!");
return;
}
// Create button generator
const generator = new ButtonGenerator(canvas, {
fps: 20,
duration: 2,
fonts: [
"Arial",
"Lato",
"Roboto",
"Open Sans",
"Montserrat",
"Oswald",
"Bebas Neue",
"Roboto Mono",
"VT323",
"Press Start 2P",
"DSEG7-Classic",
],
});
// Register all effects
console.log("Registering effects...");
solidBg.register(generator);
gradientBg.register(generator);
textureBg.register(generator);
emojiWallpaper.register(generator);
rainbowBg.register(generator);
rain.register(generator);
starfield.register(generator);
//bubbles.register(generator);
aurora.register(generator);
fire.register(generator);
border.register(generator);
standardText.register(generator);
textShadow.register(generator);
waveText.register(generator);
rainbowText.register(generator);
spinText.register(generator);
glitch.register(generator);
pulse.register(generator);
shimmer.register(generator);
scanline.register(generator);
rgbSplit.register(generator);
noise.register(generator);
rotate.register(generator);
hologram.register(generator);
spotlight.register(generator);
console.log(`Registered ${generator.getAllEffects().length} effects`);
// Build UI from effects
console.log("Building UI...");
const controlsContainer = document.querySelector(".controls-section");
if (!controlsContainer) {
console.error("Controls container not found!");
return;
}
const uiBuilder = new UIBuilder(controlsContainer);
uiBuilder.buildUI(generator.getAllEffects());
uiBuilder.setupConditionalVisibility();
// Preload fonts
console.log("Loading fonts...");
await generator.preloadFonts();
// Bind controls (after UI is built)
generator.bindControls();
// Setup additional UI handlers
setupUIHandlers(generator);
// Setup download button
setupDownloadButton(generator);
// Setup presets
setupPresets(generator);
// Initial draw
generator.updatePreview();
console.log("Button Generator ready!");
}
/**
* Setup collapsible section functionality
*/
function setupCollapsible() {
const headers = document.querySelectorAll(".control-group-header");
console.log("Found", headers.length, "collapsible headers");
headers.forEach((header) => {
header.addEventListener("click", () => {
const controlGroup = header.closest(".control-group");
if (controlGroup) {
controlGroup.classList.toggle("collapsed");
}
});
});
}
/**
* Setup UI handlers for conditional visibility
*/
function setupUIHandlers(generator) {
// Note: Conditional visibility is now handled automatically by UIBuilder.setupConditionalVisibility()
// This function is kept for any additional custom handlers if needed in the future
}
/**
* Setup download button
*/
function setupDownloadButton(generator) {
const downloadBtn = document.getElementById("download-button");
if (!downloadBtn) return;
downloadBtn.addEventListener("click", async () => {
const originalText = downloadBtn.textContent;
downloadBtn.disabled = true;
downloadBtn.textContent = "Generating GIF...";
try {
const blob = await generator.exportAsGif((progress, stage) => {
if (stage === "generating") {
const percent = Math.round(progress * 100);
downloadBtn.textContent = `Generating: ${percent}%`;
} else if (stage === "encoding") {
const percent = Math.round(progress * 100);
downloadBtn.textContent = `Encoding: ${percent}%`;
}
});
// Download the blob
const link = document.createElement("a");
link.download = "button-88x31.gif";
link.href = URL.createObjectURL(blob);
link.click();
URL.revokeObjectURL(link.href);
downloadBtn.textContent = originalText;
} catch (error) {
console.error("Error generating GIF:", error);
alert("Error generating GIF. Please try again.");
downloadBtn.textContent = originalText;
} finally {
downloadBtn.disabled = false;
}
});
}
/**
* Setup preset buttons
*/
function setupPresets(generator) {
// Random preset
const randomBtn = document.getElementById("preset-random");
if (randomBtn) {
randomBtn.addEventListener("click", () => {
applyRandomPreset();
generator.updatePreview();
});
}
// Classic preset
const classicBtn = document.getElementById("preset-classic");
if (classicBtn) {
classicBtn.addEventListener("click", () => {
applyClassicPreset();
generator.updatePreview();
});
}
// Modern preset
const modernBtn = document.getElementById("preset-modern");
if (modernBtn) {
modernBtn.addEventListener("click", () => {
applyModernPreset();
generator.updatePreview();
});
}
}
/**
* Apply random preset
*/
function applyRandomPreset() {
const randomColor = () =>
"#" +
Math.floor(Math.random() * 16777215)
.toString(16)
.padStart(6, "0");
// Random background
const bgTypeEl = document.getElementById("bg-type");
if (bgTypeEl) {
bgTypeEl.value = ["solid", "gradient", "texture"][
Math.floor(Math.random() * 3)
];
bgTypeEl.dispatchEvent(new Event("change"));
}
setControlValue("bg-color", randomColor());
setControlValue("gradient-color1", randomColor());
setControlValue("gradient-color2", randomColor());
setControlValue("gradient-angle", Math.floor(Math.random() * 360));
// Random text colors
setControlValue("text-color", randomColor());
setControlValue("text-gradient-color1", randomColor());
setControlValue("text-gradient-color2", randomColor());
setControlValue("text2-color", randomColor());
setControlValue("text2-gradient-color1", randomColor());
setControlValue("text2-gradient-color2", randomColor());
// Random border
setControlValue("border-color", randomColor());
setControlValue("border-width", Math.floor(Math.random() * 6));
}
/**
* Apply classic 90s preset
*/
function applyClassicPreset() {
setControlValue("bg-type", "gradient");
setControlValue("gradient-color1", "#6e6e6eff");
setControlValue("gradient-color2", "#979797");
setControlValue("gradient-angle", 90);
setControlValue("text-color-type", "solid");
setControlValue("text-color", "#000000");
setControlValue("text2-color-type", "solid");
setControlValue("text2-color", "#000000");
setControlValue("border-width", 2);
setControlValue("border-color", "#000000");
setControlValue("border-style", "outset");
setControlValue("font-family", "VT323");
setControlValue("font-family2", "VT323");
document.getElementById("bg-type")?.dispatchEvent(new Event("change"));
}
/**
* Apply modern preset
*/
function applyModernPreset() {
setControlValue("bg-type", "gradient");
setControlValue("gradient-color1", "#0a0a0a");
setControlValue("gradient-color2", "#1a0a2e");
setControlValue("gradient-angle", 135);
setControlValue("text-color-type", "gradient");
setControlValue("text-gradient-color1", "#00ffaa");
setControlValue("text-gradient-color2", "#00ffff");
setControlValue("text-gradient-angle", 90);
setControlValue("text2-color-type", "gradient");
setControlValue("text2-gradient-color1", "#ff00ff");
setControlValue("text2-gradient-color2", "#ff6600");
setControlValue("border-width", 1);
setControlValue("border-color", "#00ffaa");
setControlValue("border-style", "solid");
setControlValue("font-family", "Roboto Mono");
setControlValue("font-family2", "Roboto Mono");
document.getElementById("bg-type")?.dispatchEvent(new Event("change"));
document
.getElementById("text-color-type")
?.dispatchEvent(new Event("change"));
document
.getElementById("text2-color-type")
?.dispatchEvent(new Event("change"));
}
/**
* Helper to set control value
*/
function setControlValue(id, value) {
const el = document.getElementById(id);
if (el) {
if (el.type === "checkbox") {
el.checked = value;
} else {
el.value = value;
}
// Update value display if it exists
const valueDisplay = document.getElementById(id + "-value");
if (valueDisplay) {
valueDisplay.textContent = value;
}
}
}
// Auto-initialize when imported
init();

506
static/js/button-generator/ui-builder.js Normal file
View file

@ -0,0 +1,506 @@
/**
* UI Builder - Dynamically generates control UI from effect definitions
*/
export class UIBuilder {
constructor(containerElement) {
this.container = containerElement;
this.controlGroups = new Map(); // category -> { element, controls }
this.tooltip = null;
this.tooltipTimeout = null;
this.setupTooltip();
}
/**
* Create and setup the tooltip element
*/
setupTooltip() {
// Wait for DOM to be ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
this.createTooltipElement();
});
} else {
this.createTooltipElement();
}
}
createTooltipElement() {
this.tooltip = document.createElement('div');
this.tooltip.className = 'control-tooltip';
this.tooltip.style.cssText = `
position: fixed;
background: linear-gradient(135deg, rgba(0, 120, 200, 0.98) 0%, rgba(0, 100, 180, 0.98) 100%);
color: #fff;
padding: 0.5rem 0.75rem;
border-radius: 4px;
font-size: 0.8rem;
pointer-events: none;
z-index: 10000;
max-width: 250px;
box-shadow: 0 0 20px rgba(0, 150, 255, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(0, 150, 255, 0.6);
opacity: 0;
transition: opacity 0.15s ease;
line-height: 1.4;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
`;
document.body.appendChild(this.tooltip);
}
/**
* Show tooltip for an element
*/
showTooltip(element, text) {
if (!text || !this.tooltip) return;
clearTimeout(this.tooltipTimeout);
this.tooltip.textContent = text;
this.tooltip.style.opacity = '1';
// Position tooltip above the element
const rect = element.getBoundingClientRect();
// Set initial position to measure
this.tooltip.style.left = '0px';
this.tooltip.style.top = '0px';
this.tooltip.style.visibility = 'hidden';
this.tooltip.style.display = 'block';
const tooltipRect = this.tooltip.getBoundingClientRect();
this.tooltip.style.visibility = 'visible';
let left = rect.left + rect.width / 2 - tooltipRect.width / 2;
let top = rect.top - tooltipRect.height - 10;
// Keep tooltip on screen
const padding = 10;
if (left < padding) left = padding;
if (left + tooltipRect.width > window.innerWidth - padding) {
left = window.innerWidth - tooltipRect.width - padding;
}
if (top < padding) {
top = rect.bottom + 10;
}
this.tooltip.style.left = `${left}px`;
this.tooltip.style.top = `${top}px`;
}
/**
* Hide tooltip
*/
hideTooltip() {
if (!this.tooltip) return;
clearTimeout(this.tooltipTimeout);
this.tooltipTimeout = setTimeout(() => {
this.tooltip.style.opacity = '0';
}, 100);
}
/**
* Add tooltip handlers to an element
*/
addTooltipHandlers(element, description) {
if (!description) return;
element.addEventListener('mouseenter', () => {
this.showTooltip(element, description);
});
element.addEventListener('mouseleave', () => {
this.hideTooltip();
});
element.addEventListener('mousemove', () => {
// Update position on mouse move for better following
if (this.tooltip && this.tooltip.style.opacity === '1') {
this.showTooltip(element, description);
}
});
}
/**
* Build the entire UI from registered effects
* @param {Array<ButtonEffect>} effects - All registered effects
*/
buildUI(effects) {
// Clear existing content
this.container.innerHTML = '';
this.controlGroups.clear();
// Group effects by category
const categorized = this.categorizeEffects(effects);
// Create control groups for each category
for (const [category, categoryEffects] of categorized) {
this.createControlGroup(category, categoryEffects);
}
}
/**
* Categorize effects by their category property
* @param {Array<ButtonEffect>} effects
* @returns {Map<string, Array<ButtonEffect>>}
*/
categorizeEffects(effects) {
const categories = new Map();
effects.forEach(effect => {
const category = effect.category || 'Other';
if (!categories.has(category)) {
categories.set(category, []);
}
categories.get(category).push(effect);
});
// Sort categories in a logical order
const orderedCategories = new Map();
const categoryOrder = [
'Text Line 1',
'Text Line 2',
'Background',
'Background Animations',
'Border',
'Visual Effects',
'General Effects',
'Special Effects'
];
categoryOrder.forEach(cat => {
if (categories.has(cat)) {
orderedCategories.set(cat, categories.get(cat));
}
});
// Add any remaining categories
categories.forEach((effects, cat) => {
if (!orderedCategories.has(cat)) {
orderedCategories.set(cat, effects);
}
});
return orderedCategories;
}
/**
* Create a collapsible control group
* @param {string} category - Category name
* @param {Array<ButtonEffect>} effects - Effects in this category
*/
createControlGroup(category, effects) {
const groupDiv = document.createElement('div');
groupDiv.className = 'control-group';
// Create header
const header = document.createElement('h3');
header.className = 'control-group-header';
header.innerHTML = `
<span>${category}</span>
<span class="toggle-icon">−</span>
`;
// Create content container
const content = document.createElement('div');
content.className = 'control-group-content';
// Add controls for each effect in this category
effects.forEach(effect => {
this.addEffectControls(content, effect);
});
// Add click handler for collapsing
header.addEventListener('click', () => {
groupDiv.classList.toggle('collapsed');
});
groupDiv.appendChild(header);
groupDiv.appendChild(content);
this.container.appendChild(groupDiv);
this.controlGroups.set(category, { element: groupDiv, effects });
}
/**
* Add controls for a single effect
* @param {HTMLElement} container - Container to add controls to
* @param {ButtonEffect} effect - Effect to create controls for
*/
addEffectControls(container, effect) {
effect.controls.forEach(control => {
const controlEl = this.createControl(control);
if (controlEl) {
container.appendChild(controlEl);
}
});
}
/**
* Create a single control element
* @param {Object} controlDef - Control definition from effect
* @returns {HTMLElement}
*/
createControl(controlDef) {
const { id, type, label, defaultValue, min, max, step, options, showWhen, description } = controlDef;
switch (type) {
case 'checkbox':
return this.createCheckbox(id, label, defaultValue, showWhen, description);
case 'range':
return this.createRange(id, label, defaultValue, min, max, step, description, showWhen);
case 'color':
return this.createColor(id, label, defaultValue, showWhen, description);
case 'select':
return this.createSelect(id, label, defaultValue, options, showWhen, description);
case 'text':
return this.createTextInput(id, label, defaultValue, showWhen, description);
default:
console.warn(`Unknown control type: ${type}`);
return null;
}
}
/**
* Create a checkbox control
*/
createCheckbox(id, label, defaultValue, showWhen, description) {
const wrapper = document.createElement('label');
wrapper.className = 'checkbox-label';
const input = document.createElement('input');
input.type = 'checkbox';
input.id = id;
input.checked = defaultValue || false;
const span = document.createElement('span');
span.textContent = label;
wrapper.appendChild(input);
wrapper.appendChild(span);
if (showWhen) {
wrapper.style.display = 'none';
wrapper.dataset.showWhen = showWhen;
}
// Add tooltip handlers to the label wrapper
this.addTooltipHandlers(wrapper, description);
return wrapper;
}
/**
* Create a range slider control
*/
createRange(id, label, defaultValue, min, max, step, description, showWhen) {
const container = document.createElement('div');
const labelEl = document.createElement('label');
labelEl.htmlFor = id;
labelEl.innerHTML = `${label}: <span id="${id}-value">${defaultValue}</span>`;
const input = document.createElement('input');
input.type = 'range';
input.id = id;
input.min = min !== undefined ? min : 0;
input.max = max !== undefined ? max : 100;
input.value = defaultValue !== undefined ? defaultValue : 50;
if (step !== undefined) {
input.step = step;
}
// Update value display on input
input.addEventListener('input', () => {
const valueDisplay = document.getElementById(`${id}-value`);
if (valueDisplay) {
valueDisplay.textContent = input.value;
}
});
container.appendChild(labelEl);
container.appendChild(input);
if (showWhen) {
container.style.display = 'none';
container.dataset.showWhen = showWhen;
}
// Add tooltip handlers to the label
this.addTooltipHandlers(labelEl, description);
return container;
}
/**
* Create a color picker control
*/
createColor(id, label, defaultValue, showWhen, description) {
const container = document.createElement('div');
const labelEl = document.createElement('label');
labelEl.htmlFor = id;
labelEl.textContent = label;
const input = document.createElement('input');
input.type = 'color';
input.id = id;
input.value = defaultValue || '#ffffff';
container.appendChild(labelEl);
container.appendChild(input);
if (showWhen) {
container.style.display = 'none';
container.dataset.showWhen = showWhen;
}
// Add tooltip handlers to the label
this.addTooltipHandlers(labelEl, description);
return container;
}
/**
* Create a select dropdown control
*/
createSelect(id, label, defaultValue, options, showWhen, description) {
const container = document.createElement('div');
const labelEl = document.createElement('label');
labelEl.htmlFor = id;
labelEl.textContent = label;
const select = document.createElement('select');
select.id = id;
options.forEach(opt => {
const option = document.createElement('option');
option.value = opt.value;
option.textContent = opt.label;
if (opt.value === defaultValue) {
option.selected = true;
}
select.appendChild(option);
});
container.appendChild(labelEl);
container.appendChild(select);
if (showWhen) {
container.style.display = 'none';
container.dataset.showWhen = showWhen;
}
// Add tooltip handlers to the label
this.addTooltipHandlers(labelEl, description);
return container;
}
/**
* Create a text input control
*/
createTextInput(id, label, defaultValue, showWhen, description) {
const container = document.createElement('div');
const labelEl = document.createElement('label');
labelEl.htmlFor = id;
labelEl.textContent = label;
const input = document.createElement('input');
input.type = 'text';
input.id = id;
input.value = defaultValue || '';
input.maxLength = 20;
container.appendChild(labelEl);
container.appendChild(input);
if (showWhen) {
container.style.display = 'none';
container.dataset.showWhen = showWhen;
}
// Add tooltip handlers to the label
this.addTooltipHandlers(labelEl, description);
return container;
}
/**
* Setup conditional visibility for controls
* Should be called after all controls are created
*/
setupConditionalVisibility() {
// Find all controls with showWhen attribute
const conditionalControls = this.container.querySelectorAll('[data-show-when]');
conditionalControls.forEach(control => {
const triggerControlId = control.dataset.showWhen;
const triggerControl = document.getElementById(triggerControlId);
if (triggerControl) {
const updateVisibility = () => {
if (triggerControl.type === 'checkbox') {
control.style.display = triggerControl.checked ? 'block' : 'none';
} else if (triggerControl.tagName === 'SELECT') {
// Get the control ID to determine what value to check for
const controlId = control.querySelector('input, select')?.id;
// For background controls
if (triggerControlId === 'bg-type') {
if (controlId === 'bg-color') {
control.style.display = triggerControl.value === 'solid' ? 'block' : 'none';
} else if (controlId && (controlId.startsWith('gradient-') || controlId === 'gradient-angle')) {
control.style.display = triggerControl.value === 'gradient' ? 'block' : 'none';
} else if (controlId && (controlId.startsWith('texture-') || controlId === 'texture-type' || controlId === 'texture-scale')) {
control.style.display = triggerControl.value === 'texture' ? 'block' : 'none';
} else if (controlId && (controlId.startsWith('emoji-') || controlId === 'emoji-text')) {
control.style.display = triggerControl.value === 'emoji-wallpaper' ? 'block' : 'none';
}
}
// For text color controls
else if (triggerControlId === 'text-color-type') {
if (controlId === 'text-color') {
control.style.display = triggerControl.value === 'solid' ? 'block' : 'none';
} else if (controlId && controlId.startsWith('text-gradient-')) {
control.style.display = triggerControl.value === 'gradient' ? 'block' : 'none';
}
} else if (triggerControlId === 'text2-color-type') {
if (controlId === 'text2-color') {
control.style.display = triggerControl.value === 'solid' ? 'block' : 'none';
} else if (controlId && controlId.startsWith('text2-gradient-')) {
control.style.display = triggerControl.value === 'gradient' ? 'block' : 'none';
}
}
// For border style controls
else if (triggerControlId === 'border-style') {
if (controlId === 'border-rainbow-speed') {
control.style.display = triggerControl.value === 'rainbow' ? 'block' : 'none';
} else if (controlId === 'border-march-speed') {
control.style.display = triggerControl.value === 'marching-ants' ? 'block' : 'none';
}
} else {
// Default: show when any value is selected
control.style.display = triggerControl.value ? 'block' : 'none';
}
}
};
// Initial visibility
updateVisibility();
// Update on change
triggerControl.addEventListener('change', updateVisibility);
triggerControl.addEventListener('input', updateVisibility);
}
});
}
}