SyntaxCircus.FancyBlazor 0.1.3

FancyBlazor

Composable visual effects for Blazor: backgrounds, borders, viewport reveals, pointer motion, parallax, and shimmer—without React islands, a runtime CDN, or consumer JavaScript tooling.

FancyBlazor targets net10.0 and works with static SSR, Interactive Server, Interactive WebAssembly, Interactive Auto, and standalone WebAssembly. It is CSS-framework-agnostic and keeps meaningful child content as ordinary semantic DOM.

Preview software. The API may change before 1.0. Published as-is and maintained on a best-effort basis; there is no support SLA.

Install and register

dotnet add package SyntaxCircus.FancyBlazor

Register the shared runtime in every executable host. Interactive Auto apps register it in both server and client Program.cs files.

using SyntaxCircus.FancyBlazor;

builder.Services.AddFancyBlazor();

Import the root namespace in _Imports.razor:

@using SyntaxCircus.FancyBlazor

No script tag, npm package, CDN, or manual stylesheet import is required.

First effect

<ShaderBackground Effect="ShaderEffect.Nacre"
                  Palette="FancyPalettes.Witchlight">
    <section class="hero">
        <h1>Build something that catches light.</h1>
        <p>This remains semantic HTML before and after WebGL initializes.</p>
    </section>
</ShaderBackground>

Before interactivity—or when WebGL is unavailable—the component displays a palette-derived CSS background and leaves the content usable.

Preview components

Components intentionally compose:

<ShaderBackground>
    <Reveal Effect="RevealEffect.BlurUp">
        <Tilt Glare>
            <GlowBorder Color="currentColor">
                <article>Existing content</article>
            </GlowBorder>
        </Tilt>
    </Reveal>
</ShaderBackground>

Global defaults

builder.Services.AddFancyBlazor(options =>
{
    options.MotionPreference = FancyMotionPreference.RespectSystem;
    options.Quality = FancyQuality.Auto;
    options.PauseWhenHidden = true;
    options.PauseWhenOffscreen = true;
    options.EnableDiagnostics = false;
});

Reduced motion is respected by default. Decorative canvases and glare layers are hidden from assistive technology, wrapper components add no tab stops, and continuous rendering stops while hidden or offscreen.

Documentation and examples

• Getting started
• Component guides and API tables
• Palettes and styling
• Accessibility
• Performance
• Hosting modes
• Deploy the interactive demo container
• Troubleshooting
• Expressive effects: what to expect
• Expressive-effects demo
• Spatial surfaces
• Spatial-surfaces demo
• Changelog
• Compiling Interactive Auto demo

Validation

dotnet restore SyntaxCircus.FancyBlazor.slnx
dotnet build SyntaxCircus.FancyBlazor.slnx --no-restore --configuration Release
dotnet test SyntaxCircus.FancyBlazor.slnx --no-build --configuration Release
dotnet pack src/SyntaxCircus.FancyBlazor/SyntaxCircus.FancyBlazor.csproj --no-build --configuration Release
pwsh eng/verify-docs.ps1
pwsh eng/verify-package.ps1

Install the Playwright browser once before the first local browser-test run; the exact command is documented in AGENTS.md.

Contributing and license

Read AGENTS.md before changing public behavior or vendored assets. FancyBlazor is MIT licensed; see LICENSE. Bundled shader.gallery notices are in THIRD-PARTY-NOTICES.md.