BlazorFastMarquee 1.0.0

Blazor Fast Marquee

Blazor Fast Marquee is a high-performance marquee component for Blazor inspired by the battle-tested react-fast-marquee library. It delivers the same API surface while embracing .NET's ahead-of-time (AOT) compilation and aggressive trimming so your applications remain lean without sacrificing fidelity.

Why another marquee? Because shipping to WebAssembly or native ahead-of-time targets demands components that are deterministic, trimming safe, and optimized from the first render. Blazor Fast Marquee was built from the ground up with those goals in mind.

Highlights

• ⚡ API parity with React Fast Marquee. Drop-in familiar parameters such as speed, gradientColor, pauseOnHover, and lifecycle callbacks like onCycleComplete.
• 🪶 Trimming-friendly by design. The library is marked as trimmable, ships without reflection, and has analyzers enabled so you can confidently publish with PublishTrimmed=true.
• 🚀 AOT ready. RunAOTCompilation is enabled so the component is validated against Native AOT constraints during publish.
• 🧭 Deterministic layout. A lightweight JavaScript module only measures the rendered width/height and falls back gracefully when observers are unavailable.
• 🧩 Composable. Works with any child content—text, components, images, or complex layouts.

Getting Started

Install the package from NuGet:

 dotnet add package BlazorFastMarquee

Then register the static web assets (for JS and CSS) in your Program.cs when using Blazor WebAssembly or Server:

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

Include the component in your Razor file:

@page "/marquee-demo"
@using BlazorFastMarquee

<Marquee Speed="80" Gradient GradientColor="#111827" GradientWidth="128">
    <div class="marquee-chip">🚀 Blazor Fast Marquee</div>
    <div class="marquee-chip">🔥 AOT-ready animations</div>
    <div class="marquee-chip">🧭 Deterministic layout</div>
</Marquee>

Add some styling (optional):

.marquee-chip {
    padding: 0.5rem 1rem;
    margin-right: 1rem;
    border-radius: 9999px;
    background: rgba(59, 130, 246, 0.12);
}

Production Builds with Trimming & AOT

Blazor Fast Marquee is validated with trimming analyzers and Native AOT so you can ship the smallest possible payloads. When publishing your application run:

 dotnet publish -c Release -p:PublishTrimmed=true -p:TrimMode=link -p:RunAOTCompilation=true

The library opts into invariant globalization to minimize ICU payload size. If your app requires full globalization data, override InvariantGlobalization in your project file.

Props

Accessibility & Performance Tips

• Prefer semantic markup inside ChildContent and provide aria-labels when the marquee conveys essential information.
• Keep Speed within a comfortable range and consider offering controls to pause for accessibility compliance.
• Combine marquees with prefers-reduced-motion to disable animations for users who request it.

Testing

The solution includes automated BUnit tests covering layout measurement, callbacks, and attribute forwarding. Run them locally with:

 dotnet test

License

MIT