BlazorFastMarquee 1.0.4

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.

Live Demo

🚀 View the interactive demo

Examples

Highlights

• ⚡ API parity with React Fast Marquee. Drop-in familiar parameters such as speed, gradientColor, pauseOnHover, and lifecycle callbacks like onCycleComplete.
• 🖱️ Interactive drag support. Enable drag-to-pan for desktop and mobile with EnableDrag. Automatically respects direction (horizontal for left/right, vertical for up/down).
• 🪶 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

Installation

Install the package from NuGet:

dotnet add package BlazorFastMarquee

Setup

1. Configure your Blazor app in Program.cs:

For Blazor WebAssembly:

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
// ... rest of your configuration
await builder.Build().RunAsync();

For Blazor Server or Blazor Web App:

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents(); // If using WebAssembly interactivity

2. CSS and JavaScript are automatically included via Blazor's static web assets system. The component's styles (Marquee.razor.css) and JavaScript module (Marquee.razor.js) are bundled and served automatically—no manual script or link tags required.

3. Import the namespace in your _Imports.razor:

@using BlazorFastMarquee

Usage

Basic example:

@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>

With drag support:

<Marquee Speed="50" EnableDrag="true" Direction="MarqueeDirection.Left" Gradient>
    <div class="marquee-chip">🖱️ Drag me!</div>
    <div class="marquee-chip">👆 Click & hold to pan</div>
    <div class="marquee-chip">📱 Touch support included</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