BranchesTags

Repository files navigation

Waving Flags

A Blazor component library providing fluid, CSS-animated waving pride flags. The wave effects use a synchronized columnar delay to achieve a heavy, realistic fabric feel.

This project is inspired by the animation work of Josh W. Comeau.

Installation & Setup

To use these components, ensure your project targets .NET 9.0 or higher and references your Blazor environment. The library layout follows the structure of mrsquirrely/flags and includes the following core files:

  • Flags.csproj - The project configuration file.
  • Components/Flag.razor - The main Blazor component for rendering the flag UI.
  • Components/Flag.razor.css - The scoped CSS file handling the wave animations.
  • FlagColors.cs - The backend C# file containing predefined color palettes and the FlagColor enum.

Add the library namespace to your _Imports.razor file:

@usingFlags

Usage

You can embed the flag component directly into your Razor views, MVC .cshtml pages, or other Blazor components.

Basic Example

<FlagVariant="FlagColor.Transgender"Width="300"/>

Custom Colors Example

<Flag"hsl(120deg "hsl(240deg55%)" 55%)",90%CustomColors="@(new string[] { "NumOfColumns="15"hsl(0deg})"/>

Logo Example

<FlagLogoUrl="/images/my-custom-logo.svg"Variant="FlagColor.RainbowOriginal"/>

Component Parameters

The Components/Flag.razor architecture supports customization through the following parameters:

  • Variant (FlagColor): A predefined flag color scheme from the FlagColor enum. Defaults to FlagColor.RainbowOriginal.
  • CustomColors (string[]?): An optional array of CSS color strings (e.g., HEX, HSL, RGB) to build a custom top-to-bottom striped flag. If provided, this overrides the selected Variant.
  • Width (double): The rendering target width of the flag in pixels. Defaults to 200.
  • NumOfColumns (int): The number of individual vertical elements making up the flag. More columns create a higher-fidelity wave. Defaults to 10.
  • StaggeredDelay (int): The animation delay offset (in milliseconds) added sequentially per column to establish the fluid ripple effect. Defaults to 150.
  • Billow (double): The intensity / peak vertical distance (in pixels) of the ripple animation oscillation. Defaults to 3.
  • LogoUrl (string): An optional URL to an image or SVG to display centered across the waving flag.

Predefined Variants

The library includes built-in color maps in FlagColors.cs for the following flag variants:

FlagColor EnumDescription / Colors Included
FlagColor.Rainbow8-stripe representation (including dark accent bands)
FlagColor.RainbowOriginalClassic 6-stripe layout
FlagColor.TransgenderPastel blue, pastel pink, and white stripes
FlagColor.PansexualBright magenta, yellow, and cyan stripes
FlagColor.BisexualDeep pink, purple, and blue stripes
FlagColor.NonBinaryYellow, white, purple, and dark gray stripes
FlagColor.LesbianSeven-stripe shades of orange, white, and pink

⚖️ License & Open-Source Copyleft Requirements (GPLv3)

This component library is distributed under the GNU General Public License v3 (GPLv3). Because the GPLv3 includes strong copyleft protections, using this library impacts your software architecture depending on how you host or render your application.

Please review the architectural requirements below to determine if your website must also be open-sourced under the GPLv3:

1. Blazor Server & Static Rendering Mode (Safe / Proprietary Allowed)

If your application runs via Blazor Server or utilizes Static Rendering (RenderMode.Server or RenderMode.Static), the component's underlying C# logic and library binaries remain strictly on your host hardware.

  • The Rule: Under GPLv3 Section 2, "Mere interaction with a user through a computer network, with no transfer of a copy, is not conveying." Since no compiled assemblies are transferred to the user's browser, the copyleft trigger is not pulled.
  • Obligation: You are not required to open-source your website. Your code can remain completely private, proprietary, and closed-source.

2. Blazor WebAssembly Mode (Triggers Open-Source Mandate)

If you configure this component to load and execute via Blazor WebAssembly (WASM) (RenderMode.WebAssembly), the server transmits the compiled library .dll assemblies to the visitor's computer to execute locally within their browser context.

  • The Rule: Delivering compiled software bundles directly to a client's machine constitutes distribution ("conveying") under the GPLv3. Because your website's proprietary code directly interacts with, packages, or links against the GPLv3 component library to run in the client bundle, the complete client-side application becomes a combined work.
  • Obligation:You MUST make the full source code of your client application available under a GPLv3-compatible open-source license to any users interacting with your application.

About

Waving flags based on https://www.joshwcomeau.com/animation/pride-flags/

Resources

Readme
GPL-3.0 license
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Waving Flags
A Blazor component library providing fluid, CSS-animated waving pride flags. The wave effects use a synchronized columnar delay to achieve a heavy, realistic fabric feel.
This project is inspired by the animation work of Josh W. Comeau.
Installation & Setup
To use these components, ensure your project targets .NET 9.0 or higher and references your Blazor environment. The library layout follows the structure of mrsquirrely/flags and includes the following core files:
  • Flags.csproj - The project configuration file.
  • Components/Flag.razor - The main Blazor component for rendering the flag UI.
  • Components/Flag.razor.css - The scoped CSS file handling the wave animations.
  • FlagColors.cs - The backend C# file containing predefined color palettes and the FlagColor enum.
Add the library namespace to your _Imports.razor file:
@usingFlags
Usage
You can embed the flag component directly into your Razor views, MVC .cshtml pages, or other Blazor components.
Basic Example
<FlagVariant="FlagColor.Transgender"Width="300"/>
Custom Colors Example
<Flag"hsl(120deg "hsl(240deg55%)" 55%)",90%CustomColors="@(new string[] { "NumOfColumns="15"hsl(0deg})"/>
Logo Example
<FlagLogoUrl="/images/my-custom-logo.svg"Variant="FlagColor.RainbowOriginal"/>
Component Parameters
The Components/Flag.razor architecture supports customization through the following parameters:
  • Variant (FlagColor): A predefined flag color scheme from the FlagColor enum. Defaults to FlagColor.RainbowOriginal.
  • CustomColors (string[]?): An optional array of CSS color strings (e.g., HEX, HSL, RGB) to build a custom top-to-bottom striped flag. If provided, this overrides the selected Variant.
  • Width (double): The rendering target width of the flag in pixels. Defaults to 200.
  • NumOfColumns (int): The number of individual vertical elements making up the flag. More columns create a higher-fidelity wave. Defaults to 10.
  • StaggeredDelay (int): The animation delay offset (in milliseconds) added sequentially per column to establish the fluid ripple effect. Defaults to 150.
  • Billow (double): The intensity / peak vertical distance (in pixels) of the ripple animation oscillation. Defaults to 3.
  • LogoUrl (string): An optional URL to an image or SVG to display centered across the waving flag.
Predefined Variants
The library includes built-in color maps in FlagColors.cs for the following flag variants:
FlagColor EnumDescription / Colors Included
FlagColor.Rainbow8-stripe representation (including dark accent bands)
FlagColor.RainbowOriginalClassic 6-stripe layout
FlagColor.TransgenderPastel blue, pastel pink, and white stripes
FlagColor.PansexualBright magenta, yellow, and cyan stripes
FlagColor.BisexualDeep pink, purple, and blue stripes
FlagColor.NonBinaryYellow, white, purple, and dark gray stripes
FlagColor.LesbianSeven-stripe shades of orange, white, and pink
⚖️ License & Open-Source Copyleft Requirements (GPLv3)
This component library is distributed under the GNU General Public License v3 (GPLv3). Because the GPLv3 includes strong copyleft protections, using this library impacts your software architecture depending on how you host or render your application.
Please review the architectural requirements below to determine if your website must also be open-sourced under the GPLv3:
1. Blazor Server & Static Rendering Mode (Safe / Proprietary Allowed)
If your application runs via Blazor Server or utilizes Static Rendering (RenderMode.Server or RenderMode.Static), the component's underlying C# logic and library binaries remain strictly on your host hardware.
  • The Rule: Under GPLv3 Section 2, "Mere interaction with a user through a computer network, with no transfer of a copy, is not conveying." Since no compiled assemblies are transferred to the user's browser, the copyleft trigger is not pulled.
  • Obligation: You are not required to open-source your website. Your code can remain completely private, proprietary, and closed-source.
2. Blazor WebAssembly Mode (Triggers Open-Source Mandate)
If you configure this component to load and execute via Blazor WebAssembly (WASM) (RenderMode.WebAssembly), the server transmits the compiled library .dll assemblies to the visitor's computer to execute locally within their browser context.
  • The Rule: Delivering compiled software bundles directly to a client's machine constitutes distribution ("conveying") under the GPLv3. Because your website's proprietary code directly interacts with, packages, or links against the GPLv3 component library to run in the client bundle, the complete client-side application becomes a combined work.
  • Obligation:You MUST make the full source code of your client application available under a GPLv3-compatible open-source license to any users interacting with your application.
About
Waving flags based on https://www.joshwcomeau.com/animation/pride-flags/
Resources
Readme
GPL-3.0 license
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Waving Flags
A Blazor component library providing fluid, CSS-animated waving pride flags. The wave effects use a synchronized columnar delay to achieve a heavy, realistic fabric feel.
This project is inspired by the animation work of Josh W. Comeau.
Installation & Setup
To use these components, ensure your project targets .NET 9.0 or higher and references your Blazor environment. The library layout follows the structure of mrsquirrely/flags and includes the following core files:
  • Flags.csproj - The project configuration file.
  • Components/Flag.razor - The main Blazor component for rendering the flag UI.
  • Components/Flag.razor.css - The scoped CSS file handling the wave animations.
  • FlagColors.cs - The backend C# file containing predefined color palettes and the FlagColor enum.
Add the library namespace to your _Imports.razor file:
@usingFlags
Usage
You can embed the flag component directly into your Razor views, MVC .cshtml pages, or other Blazor components.
Basic Example
<FlagVariant="FlagColor.Transgender"Width="300"/>
Custom Colors Example
<Flag"hsl(120deg "hsl(240deg55%)" 55%)",90%CustomColors="@(new string[] { "NumOfColumns="15"hsl(0deg})"/>
Logo Example
<FlagLogoUrl="/images/my-custom-logo.svg"Variant="FlagColor.RainbowOriginal"/>
Component Parameters
The Components/Flag.razor architecture supports customization through the following parameters:
  • Variant (FlagColor): A predefined flag color scheme from the FlagColor enum. Defaults to FlagColor.RainbowOriginal.
  • CustomColors (string[]?): An optional array of CSS color strings (e.g., HEX, HSL, RGB) to build a custom top-to-bottom striped flag. If provided, this overrides the selected Variant.
  • Width (double): The rendering target width of the flag in pixels. Defaults to 200.
  • NumOfColumns (int): The number of individual vertical elements making up the flag. More columns create a higher-fidelity wave. Defaults to 10.
  • StaggeredDelay (int): The animation delay offset (in milliseconds) added sequentially per column to establish the fluid ripple effect. Defaults to 150.
  • Billow (double): The intensity / peak vertical distance (in pixels) of the ripple animation oscillation. Defaults to 3.
  • LogoUrl (string): An optional URL to an image or SVG to display centered across the waving flag.
Predefined Variants
The library includes built-in color maps in FlagColors.cs for the following flag variants:
FlagColor EnumDescription / Colors Included
FlagColor.Rainbow8-stripe representation (including dark accent bands)
FlagColor.RainbowOriginalClassic 6-stripe layout
FlagColor.TransgenderPastel blue, pastel pink, and white stripes
FlagColor.PansexualBright magenta, yellow, and cyan stripes
FlagColor.BisexualDeep pink, purple, and blue stripes
FlagColor.NonBinaryYellow, white, purple, and dark gray stripes
FlagColor.LesbianSeven-stripe shades of orange, white, and pink
⚖️ License & Open-Source Copyleft Requirements (GPLv3)
This component library is distributed under the GNU General Public License v3 (GPLv3). Because the GPLv3 includes strong copyleft protections, using this library impacts your software architecture depending on how you host or render your application.
Please review the architectural requirements below to determine if your website must also be open-sourced under the GPLv3:
1. Blazor Server & Static Rendering Mode (Safe / Proprietary Allowed)
If your application runs via Blazor Server or utilizes Static Rendering (RenderMode.Server or RenderMode.Static), the component's underlying C# logic and library binaries remain strictly on your host hardware.
  • The Rule: Under GPLv3 Section 2, "Mere interaction with a user through a computer network, with no transfer of a copy, is not conveying." Since no compiled assemblies are transferred to the user's browser, the copyleft trigger is not pulled.
  • Obligation: You are not required to open-source your website. Your code can remain completely private, proprietary, and closed-source.
2. Blazor WebAssembly Mode (Triggers Open-Source Mandate)
If you configure this component to load and execute via Blazor WebAssembly (WASM) (RenderMode.WebAssembly), the server transmits the compiled library .dll assemblies to the visitor's computer to execute locally within their browser context.
  • The Rule: Delivering compiled software bundles directly to a client's machine constitutes distribution ("conveying") under the GPLv3. Because your website's proprietary code directly interacts with, packages, or links against the GPLv3 component library to run in the client bundle, the complete client-side application becomes a combined work.
  • Obligation:You MUST make the full source code of your client application available under a GPLv3-compatible open-source license to any users interacting with your application.
About
Waving flags based on https://www.joshwcomeau.com/animation/pride-flags/
Resources
Readme
GPL-3.0 license
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Waving Flags
A Blazor component library providing fluid, CSS-animated waving pride flags. The wave effects use a synchronized columnar delay to achieve a heavy, realistic fabric feel.
This project is inspired by the animation work of Josh W. Comeau.
Installation & Setup
To use these components, ensure your project targets .NET 9.0 or higher and references your Blazor environment. The library layout follows the structure of mrsquirrely/flags and includes the following core files:
  • Flags.csproj - The project configuration file.
  • Components/Flag.razor - The main Blazor component for rendering the flag UI.
  • Components/Flag.razor.css - The scoped CSS file handling the wave animations.
  • FlagColors.cs - The backend C# file containing predefined color palettes and the FlagColor enum.
Add the library namespace to your _Imports.razor file:
@usingFlags
Usage
You can embed the flag component directly into your Razor views, MVC .cshtml pages, or other Blazor components.
Basic Example
<FlagVariant="FlagColor.Transgender"Width="300"/>
Custom Colors Example
<Flag"hsl(120deg "hsl(240deg55%)" 55%)",90%CustomColors="@(new string[] { "NumOfColumns="15"hsl(0deg})"/>
Logo Example
<FlagLogoUrl="/images/my-custom-logo.svg"Variant="FlagColor.RainbowOriginal"/>
Component Parameters
The Components/Flag.razor architecture supports customization through the following parameters:
  • Variant (FlagColor): A predefined flag color scheme from the FlagColor enum. Defaults to FlagColor.RainbowOriginal.
  • CustomColors (string[]?): An optional array of CSS color strings (e.g., HEX, HSL, RGB) to build a custom top-to-bottom striped flag. If provided, this overrides the selected Variant.
  • Width (double): The rendering target width of the flag in pixels. Defaults to 200.
  • NumOfColumns (int): The number of individual vertical elements making up the flag. More columns create a higher-fidelity wave. Defaults to 10.
  • StaggeredDelay (int): The animation delay offset (in milliseconds) added sequentially per column to establish the fluid ripple effect. Defaults to 150.
  • Billow (double): The intensity / peak vertical distance (in pixels) of the ripple animation oscillation. Defaults to 3.
  • LogoUrl (string): An optional URL to an image or SVG to display centered across the waving flag.
Predefined Variants
The library includes built-in color maps in FlagColors.cs for the following flag variants:
FlagColor EnumDescription / Colors Included
FlagColor.Rainbow8-stripe representation (including dark accent bands)
FlagColor.RainbowOriginalClassic 6-stripe layout
FlagColor.TransgenderPastel blue, pastel pink, and white stripes
FlagColor.PansexualBright magenta, yellow, and cyan stripes
FlagColor.BisexualDeep pink, purple, and blue stripes
FlagColor.NonBinaryYellow, white, purple, and dark gray stripes
FlagColor.LesbianSeven-stripe shades of orange, white, and pink
⚖️ License & Open-Source Copyleft Requirements (GPLv3)
This component library is distributed under the GNU General Public License v3 (GPLv3). Because the GPLv3 includes strong copyleft protections, using this library impacts your software architecture depending on how you host or render your application.
Please review the architectural requirements below to determine if your website must also be open-sourced under the GPLv3:
1. Blazor Server & Static Rendering Mode (Safe / Proprietary Allowed)
If your application runs via Blazor Server or utilizes Static Rendering (RenderMode.Server or RenderMode.Static), the component's underlying C# logic and library binaries remain strictly on your host hardware.
  • The Rule: Under GPLv3 Section 2, "Mere interaction with a user through a computer network, with no transfer of a copy, is not conveying." Since no compiled assemblies are transferred to the user's browser, the copyleft trigger is not pulled.
  • Obligation: You are not required to open-source your website. Your code can remain completely private, proprietary, and closed-source.
2. Blazor WebAssembly Mode (Triggers Open-Source Mandate)
If you configure this component to load and execute via Blazor WebAssembly (WASM) (RenderMode.WebAssembly), the server transmits the compiled library .dll assemblies to the visitor's computer to execute locally within their browser context.
  • The Rule: Delivering compiled software bundles directly to a client's machine constitutes distribution ("conveying") under the GPLv3. Because your website's proprietary code directly interacts with, packages, or links against the GPLv3 component library to run in the client bundle, the complete client-side application becomes a combined work.
  • Obligation:You MUST make the full source code of your client application available under a GPLv3-compatible open-source license to any users interacting with your application.
About
Waving flags based on https://www.joshwcomeau.com/animation/pride-flags/
Resources
Readme
GPL-3.0 license
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Waving Flags
A Blazor component library providing fluid, CSS-animated waving pride flags. The wave effects use a synchronized columnar delay to achieve a heavy, realistic fabric feel.
This project is inspired by the animation work of Josh W. Comeau.
Installation & Setup
To use these components, ensure your project targets .NET 9.0 or higher and references your Blazor environment. The library layout follows the structure of mrsquirrely/flags and includes the following core files:
  • Flags.csproj - The project configuration file.
  • Components/Flag.razor - The main Blazor component for rendering the flag UI.
  • Components/Flag.razor.css - The scoped CSS file handling the wave animations.
  • FlagColors.cs - The backend C# file containing predefined color palettes and the FlagColor enum.
Add the library namespace to your _Imports.razor file:
@usingFlags
Usage
You can embed the flag component directly into your Razor views, MVC .cshtml pages, or other Blazor components.
Basic Example
<FlagVariant="FlagColor.Transgender"Width="300"/>
Custom Colors Example
<Flag"hsl(120deg "hsl(240deg55%)" 55%)",90%CustomColors="@(new string[] { "NumOfColumns="15"hsl(0deg})"/>
Logo Example
<FlagLogoUrl="/images/my-custom-logo.svg"Variant="FlagColor.RainbowOriginal"/>
Component Parameters
The Components/Flag.razor architecture supports customization through the following parameters:
  • Variant (FlagColor): A predefined flag color scheme from the FlagColor enum. Defaults to FlagColor.RainbowOriginal.
  • CustomColors (string[]?): An optional array of CSS color strings (e.g., HEX, HSL, RGB) to build a custom top-to-bottom striped flag. If provided, this overrides the selected Variant.
  • Width (double): The rendering target width of the flag in pixels. Defaults to 200.
  • NumOfColumns (int): The number of individual vertical elements making up the flag. More columns create a higher-fidelity wave. Defaults to 10.
  • StaggeredDelay (int): The animation delay offset (in milliseconds) added sequentially per column to establish the fluid ripple effect. Defaults to 150.
  • Billow (double): The intensity / peak vertical distance (in pixels) of the ripple animation oscillation. Defaults to 3.
  • LogoUrl (string): An optional URL to an image or SVG to display centered across the waving flag.
Predefined Variants
The library includes built-in color maps in FlagColors.cs for the following flag variants:
FlagColor EnumDescription / Colors Included
FlagColor.Rainbow8-stripe representation (including dark accent bands)
FlagColor.RainbowOriginalClassic 6-stripe layout
FlagColor.TransgenderPastel blue, pastel pink, and white stripes
FlagColor.PansexualBright magenta, yellow, and cyan stripes
FlagColor.BisexualDeep pink, purple, and blue stripes
FlagColor.NonBinaryYellow, white, purple, and dark gray stripes
FlagColor.LesbianSeven-stripe shades of orange, white, and pink
⚖️ License & Open-Source Copyleft Requirements (GPLv3)
This component library is distributed under the GNU General Public License v3 (GPLv3). Because the GPLv3 includes strong copyleft protections, using this library impacts your software architecture depending on how you host or render your application.
Please review the architectural requirements below to determine if your website must also be open-sourced under the GPLv3:
1. Blazor Server & Static Rendering Mode (Safe / Proprietary Allowed)
If your application runs via Blazor Server or utilizes Static Rendering (RenderMode.Server or RenderMode.Static), the component's underlying C# logic and library binaries remain strictly on your host hardware.
  • The Rule: Under GPLv3 Section 2, "Mere interaction with a user through a computer network, with no transfer of a copy, is not conveying." Since no compiled assemblies are transferred to the user's browser, the copyleft trigger is not pulled.
  • Obligation: You are not required to open-source your website. Your code can remain completely private, proprietary, and closed-source.
2. Blazor WebAssembly Mode (Triggers Open-Source Mandate)
If you configure this component to load and execute via Blazor WebAssembly (WASM) (RenderMode.WebAssembly), the server transmits the compiled library .dll assemblies to the visitor's computer to execute locally within their browser context.
  • The Rule: Delivering compiled software bundles directly to a client's machine constitutes distribution ("conveying") under the GPLv3. Because your website's proprietary code directly interacts with, packages, or links against the GPLv3 component library to run in the client bundle, the complete client-side application becomes a combined work.
  • Obligation:You MUST make the full source code of your client application available under a GPLv3-compatible open-source license to any users interacting with your application.
About
Waving flags based on https://www.joshwcomeau.com/animation/pride-flags/
Resources
Readme
GPL-3.0 license
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Waving Flags
A Blazor component library providing fluid, CSS-animated waving pride flags. The wave effects use a synchronized columnar delay to achieve a heavy, realistic fabric feel.
This project is inspired by the animation work of Josh W. Comeau.
Installation & Setup
To use these components, ensure your project targets .NET 9.0 or higher and references your Blazor environment. The library layout follows the structure of mrsquirrely/flags and includes the following core files:
  • Flags.csproj - The project configuration file.
  • Components/Flag.razor - The main Blazor component for rendering the flag UI.
  • Components/Flag.razor.css - The scoped CSS file handling the wave animations.
  • FlagColors.cs - The backend C# file containing predefined color palettes and the FlagColor enum.
Add the library namespace to your _Imports.razor file:
@usingFlags
Usage
You can embed the flag component directly into your Razor views, MVC .cshtml pages, or other Blazor components.
Basic Example
<FlagVariant="FlagColor.Transgender"Width="300"/>
Custom Colors Example
<Flag"hsl(120deg "hsl(240deg55%)" 55%)",90%CustomColors="@(new string[] { "NumOfColumns="15"hsl(0deg})"/>
Logo Example
<FlagLogoUrl="/images/my-custom-logo.svg"Variant="FlagColor.RainbowOriginal"/>
Component Parameters
The Components/Flag.razor architecture supports customization through the following parameters:
  • Variant (FlagColor): A predefined flag color scheme from the FlagColor enum. Defaults to FlagColor.RainbowOriginal.
  • CustomColors (string[]?): An optional array of CSS color strings (e.g., HEX, HSL, RGB) to build a custom top-to-bottom striped flag. If provided, this overrides the selected Variant.
  • Width (double): The rendering target width of the flag in pixels. Defaults to 200.
  • NumOfColumns (int): The number of individual vertical elements making up the flag. More columns create a higher-fidelity wave. Defaults to 10.
  • StaggeredDelay (int): The animation delay offset (in milliseconds) added sequentially per column to establish the fluid ripple effect. Defaults to 150.
  • Billow (double): The intensity / peak vertical distance (in pixels) of the ripple animation oscillation. Defaults to 3.
  • LogoUrl (string): An optional URL to an image or SVG to display centered across the waving flag.
Predefined Variants
The library includes built-in color maps in FlagColors.cs for the following flag variants:
FlagColor EnumDescription / Colors Included
FlagColor.Rainbow8-stripe representation (including dark accent bands)
FlagColor.RainbowOriginalClassic 6-stripe layout
FlagColor.TransgenderPastel blue, pastel pink, and white stripes
FlagColor.PansexualBright magenta, yellow, and cyan stripes
FlagColor.BisexualDeep pink, purple, and blue stripes
FlagColor.NonBinaryYellow, white, purple, and dark gray stripes
FlagColor.LesbianSeven-stripe shades of orange, white, and pink
⚖️ License & Open-Source Copyleft Requirements (GPLv3)
This component library is distributed under the GNU General Public License v3 (GPLv3). Because the GPLv3 includes strong copyleft protections, using this library impacts your software architecture depending on how you host or render your application.
Please review the architectural requirements below to determine if your website must also be open-sourced under the GPLv3:
1. Blazor Server & Static Rendering Mode (Safe / Proprietary Allowed)
If your application runs via Blazor Server or utilizes Static Rendering (RenderMode.Server or RenderMode.Static), the component's underlying C# logic and library binaries remain strictly on your host hardware.
  • The Rule: Under GPLv3 Section 2, "Mere interaction with a user through a computer network, with no transfer of a copy, is not conveying." Since no compiled assemblies are transferred to the user's browser, the copyleft trigger is not pulled.
  • Obligation: You are not required to open-source your website. Your code can remain completely private, proprietary, and closed-source.
2. Blazor WebAssembly Mode (Triggers Open-Source Mandate)
If you configure this component to load and execute via Blazor WebAssembly (WASM) (RenderMode.WebAssembly), the server transmits the compiled library .dll assemblies to the visitor's computer to execute locally within their browser context.
  • The Rule: Delivering compiled software bundles directly to a client's machine constitutes distribution ("conveying") under the GPLv3. Because your website's proprietary code directly interacts with, packages, or links against the GPLv3 component library to run in the client bundle, the complete client-side application becomes a combined work.
  • Obligation:You MUST make the full source code of your client application available under a GPLv3-compatible open-source license to any users interacting with your application.
About
Waving flags based on https://www.joshwcomeau.com/animation/pride-flags/
Resources
Readme
GPL-3.0 license
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Waving Flags
A Blazor component library providing fluid, CSS-animated waving pride flags. The wave effects use a synchronized columnar delay to achieve a heavy, realistic fabric feel.
This project is inspired by the animation work of Josh W. Comeau.
Installation & Setup
To use these components, ensure your project targets .NET 9.0 or higher and references your Blazor environment. The library layout follows the structure of mrsquirrely/flags and includes the following core files:
  • Flags.csproj - The project configuration file.
  • Components/Flag.razor - The main Blazor component for rendering the flag UI.
  • Components/Flag.razor.css - The scoped CSS file handling the wave animations.
  • FlagColors.cs - The backend C# file containing predefined color palettes and the FlagColor enum.
Add the library namespace to your _Imports.razor file:
@usingFlags
Usage
You can embed the flag component directly into your Razor views, MVC .cshtml pages, or other Blazor components.
Basic Example
<FlagVariant="FlagColor.Transgender"Width="300"/>
Custom Colors Example
<Flag"hsl(120deg "hsl(240deg55%)" 55%)",90%CustomColors="@(new string[] { "NumOfColumns="15"hsl(0deg})"/>
Logo Example
<FlagLogoUrl="/images/my-custom-logo.svg"Variant="FlagColor.RainbowOriginal"/>
Component Parameters
The Components/Flag.razor architecture supports customization through the following parameters:
  • Variant (FlagColor): A predefined flag color scheme from the FlagColor enum. Defaults to FlagColor.RainbowOriginal.
  • CustomColors (string[]?): An optional array of CSS color strings (e.g., HEX, HSL, RGB) to build a custom top-to-bottom striped flag. If provided, this overrides the selected Variant.
  • Width (double): The rendering target width of the flag in pixels. Defaults to 200.
  • NumOfColumns (int): The number of individual vertical elements making up the flag. More columns create a higher-fidelity wave. Defaults to 10.
  • StaggeredDelay (int): The animation delay offset (in milliseconds) added sequentially per column to establish the fluid ripple effect. Defaults to 150.
  • Billow (double): The intensity / peak vertical distance (in pixels) of the ripple animation oscillation. Defaults to 3.
  • LogoUrl (string): An optional URL to an image or SVG to display centered across the waving flag.
Predefined Variants
The library includes built-in color maps in FlagColors.cs for the following flag variants:
FlagColor EnumDescription / Colors Included
FlagColor.Rainbow8-stripe representation (including dark accent bands)
FlagColor.RainbowOriginalClassic 6-stripe layout
FlagColor.TransgenderPastel blue, pastel pink, and white stripes
FlagColor.PansexualBright magenta, yellow, and cyan stripes
FlagColor.BisexualDeep pink, purple, and blue stripes
FlagColor.NonBinaryYellow, white, purple, and dark gray stripes
FlagColor.LesbianSeven-stripe shades of orange, white, and pink
⚖️ License & Open-Source Copyleft Requirements (GPLv3)
This component library is distributed under the GNU General Public License v3 (GPLv3). Because the GPLv3 includes strong copyleft protections, using this library impacts your software architecture depending on how you host or render your application.
Please review the architectural requirements below to determine if your website must also be open-sourced under the GPLv3:
1. Blazor Server & Static Rendering Mode (Safe / Proprietary Allowed)
If your application runs via Blazor Server or utilizes Static Rendering (RenderMode.Server or RenderMode.Static), the component's underlying C# logic and library binaries remain strictly on your host hardware.
  • The Rule: Under GPLv3 Section 2, "Mere interaction with a user through a computer network, with no transfer of a copy, is not conveying." Since no compiled assemblies are transferred to the user's browser, the copyleft trigger is not pulled.
  • Obligation: You are not required to open-source your website. Your code can remain completely private, proprietary, and closed-source.
2. Blazor WebAssembly Mode (Triggers Open-Source Mandate)
If you configure this component to load and execute via Blazor WebAssembly (WASM) (RenderMode.WebAssembly), the server transmits the compiled library .dll assemblies to the visitor's computer to execute locally within their browser context.
  • The Rule: Delivering compiled software bundles directly to a client's machine constitutes distribution ("conveying") under the GPLv3. Because your website's proprietary code directly interacts with, packages, or links against the GPLv3 component library to run in the client bundle, the complete client-side application becomes a combined work.
  • Obligation:You MUST make the full source code of your client application available under a GPLv3-compatible open-source license to any users interacting with your application.
About
Waving flags based on https://www.joshwcomeau.com/animation/pride-flags/
Resources
Readme
GPL-3.0 license
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
Waving Flags
A Blazor component library providing fluid, CSS-animated waving pride flags. The wave effects use a synchronized columnar delay to achieve a heavy, realistic fabric feel.
This project is inspired by the animation work of Josh W. Comeau.
Installation & Setup
To use these components, ensure your project targets .NET 9.0 or higher and references your Blazor environment. The library layout follows the structure of mrsquirrely/flags and includes the following core files:
  • Flags.csproj - The project configuration file.
  • Components/Flag.razor - The main Blazor component for rendering the flag UI.
  • Components/Flag.razor.css - The scoped CSS file handling the wave animations.
  • FlagColors.cs - The backend C# file containing predefined color palettes and the FlagColor enum.
Add the library namespace to your _Imports.razor file:
@usingFlags
Usage
You can embed the flag component directly into your Razor views, MVC .cshtml pages, or other Blazor components.
Basic Example
<FlagVariant="FlagColor.Transgender"Width="300"/>
Custom Colors Example
<Flag"hsl(120deg "hsl(240deg55%)" 55%)",90%CustomColors="@(new string[] { "NumOfColumns="15"hsl(0deg})"/>
Logo Example
<FlagLogoUrl="/images/my-custom-logo.svg"Variant="FlagColor.RainbowOriginal"/>
Component Parameters
The Components/Flag.razor architecture supports customization through the following parameters:
  • Variant (FlagColor): A predefined flag color scheme from the FlagColor enum. Defaults to FlagColor.RainbowOriginal.
  • CustomColors (string[]?): An optional array of CSS color strings (e.g., HEX, HSL, RGB) to build a custom top-to-bottom striped flag. If provided, this overrides the selected Variant.
  • Width (double): The rendering target width of the flag in pixels. Defaults to 200.
  • NumOfColumns (int): The number of individual vertical elements making up the flag. More columns create a higher-fidelity wave. Defaults to 10.
  • StaggeredDelay (int): The animation delay offset (in milliseconds) added sequentially per column to establish the fluid ripple effect. Defaults to 150.
  • Billow (double): The intensity / peak vertical distance (in pixels) of the ripple animation oscillation. Defaults to 3.
  • LogoUrl (string): An optional URL to an image or SVG to display centered across the waving flag.
Predefined Variants
The library includes built-in color maps in FlagColors.cs for the following flag variants:
FlagColor EnumDescription / Colors Included
FlagColor.Rainbow8-stripe representation (including dark accent bands)
FlagColor.RainbowOriginalClassic 6-stripe layout
FlagColor.TransgenderPastel blue, pastel pink, and white stripes
FlagColor.PansexualBright magenta, yellow, and cyan stripes
FlagColor.BisexualDeep pink, purple, and blue stripes
FlagColor.NonBinaryYellow, white, purple, and dark gray stripes
FlagColor.LesbianSeven-stripe shades of orange, white, and pink
⚖️ License & Open-Source Copyleft Requirements (GPLv3)
This component library is distributed under the GNU General Public License v3 (GPLv3). Because the GPLv3 includes strong copyleft protections, using this library impacts your software architecture depending on how you host or render your application.
Please review the architectural requirements below to determine if your website must also be open-sourced under the GPLv3:
1. Blazor Server & Static Rendering Mode (Safe / Proprietary Allowed)
If your application runs via Blazor Server or utilizes Static Rendering (RenderMode.Server or RenderMode.Static), the component's underlying C# logic and library binaries remain strictly on your host hardware.
  • The Rule: Under GPLv3 Section 2, "Mere interaction with a user through a computer network, with no transfer of a copy, is not conveying." Since no compiled assemblies are transferred to the user's browser, the copyleft trigger is not pulled.
  • Obligation: You are not required to open-source your website. Your code can remain completely private, proprietary, and closed-source.
2. Blazor WebAssembly Mode (Triggers Open-Source Mandate)
If you configure this component to load and execute via Blazor WebAssembly (WASM) (RenderMode.WebAssembly), the server transmits the compiled library .dll assemblies to the visitor's computer to execute locally within their browser context.
  • The Rule: Delivering compiled software bundles directly to a client's machine constitutes distribution ("conveying") under the GPLv3. Because your website's proprietary code directly interacts with, packages, or links against the GPLv3 component library to run in the client bundle, the complete client-side application becomes a combined work.
  • Obligation:You MUST make the full source code of your client application available under a GPLv3-compatible open-source license to any users interacting with your application.
About
Waving flags based on https://www.joshwcomeau.com/animation/pride-flags/
Resources
Readme
GPL-3.0 license
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages