BlazzyMotion.Marquee 1.0.0

BlazzyMotion.Marquee

A CSS-driven infinite scrolling marquee component for Blazor with logo bars, testimonials, and text tickers.

Table of Contents

• Features
• Live Demo
• Quick Start
• Display Modes
• Multi-Row
• API Reference
• Themes
• CSS Customization
• How It Works
• Performance
• Troubleshooting
• Browser Support
• Contributing
• License
• Author
• Support

Features

• Zero Configuration - Just add [BzImage] and [BzTitle] attributes to your model and the Source Generator handles the rest
• 3 Display Modes - Logo Bar, Testimonials (auto-detected), and Text Ticker
• Multi-Row Support - Up to 10 rows with alternating directions and speed variation
• Staggered Entrance - Items fade in sequentially using IntersectionObserver
• Pause on Hover + Keyboard - Space/Enter to pause, mouse hover support
• Multiple Themes - Glass, Dark, Light, and Minimal themes included out of the box
• Optional Item Click - OnItemClick EventCallback for clickable items
• Gradient Edge Overlays - Smooth fade-out effect at container edges
• CSS-Driven Animation - Pure CSS transforms, no JavaScript animation loop

Live Demo

Experience BlazzyMotion.Marquee in action: View Live Demo

Quick Start

Installation

dotnet add package BlazzyMotion.Marquee

Or via Package Manager Console:

Install-Package BlazzyMotion.Marquee

No CSS links or service registration needed — everything loads automatically.

Basic Usage

Logo Bar (Zero Config)

Just mark your model with [BzImage] and the component auto-renders logos — no template needed:

@using BlazzyMotion.Marquee.Components
@using BlazzyMotion.Core.Models

<BzMarquee Items="brands" Theme="BzTheme.Glass" />

@code {
    private List<Brand> brands = new()
    {
        new() { LogoUrl = "/logos/github.svg", Name = "GitHub" },
        new() { LogoUrl = "/logos/azure.svg", Name = "Azure" },
        new() { LogoUrl = "/logos/aws.svg", Name = "AWS" }
    };

    public class Brand
    {
        [BzImage] public string LogoUrl { get; set; } = "";
        [BzTitle] public string Name { get; set; } = "";
    }
}

Logo Bar (Custom Template)

Use ItemTemplate for full control over logo rendering:

<BzMarquee Items="brands" Theme="BzTheme.Glass">
    <ItemTemplate Context="brand">
        <img src="@brand.LogoUrl" alt="@brand.Name" style="height: 40px;" />
    </ItemTemplate>
</BzMarquee>

Text Ticker

<BzMarquee Text="Breaking news: BlazzyMotion v1.0 released!"
           Theme="BzTheme.Minimal"
           Speed="40" />

Testimonials

Items with [BzTitle] + [BzDescription] auto-render as testimonial cards:

<BzMarquee Items="reviews" Theme="BzTheme.Dark" Speed="30" />

@code {
    private List<Review> reviews = new()
    {
        new() { Author = "Jane Doe", Quote = "Best Blazor library!", Avatar = "/avatars/jane.jpg" },
        new() { Author = "John Smith", Quote = "Easy to integrate, beautiful results." }
    };

    public class Review
    {
        [BzTitle] public string Author { get; set; } = "";
        [BzDescription] public string Quote { get; set; } = "";
        [BzImage] public string? Avatar { get; set; }
    }
}

Display Modes

Logo Bar Mode

When items have only [BzImage] (and optionally [BzTitle]), the component auto-renders logos with built-in styling. No template needed — zero configuration. Use ItemTemplate for custom rendering when you need full control.

Testimonial Mode

When items have Title + Description mapped via attributes, the component auto-detects and renders testimonial cards with avatar, name, and blockquote. No template needed.

Text Ticker Mode

Set the Text parameter for simple scrolling text. No items, model, or template required. Perfect for news tickers and announcements.

Multi-Row

Display multiple scrolling rows with different directions and speeds:

<BzMarquee Items="brands"
           Rows="3"
           AlternateDirection="true"
           SpeedVariation="0.3"
           Theme="BzTheme.Glass" />

API Reference

Data Parameters

Appearance Parameters

Behavior Parameters

Themes

BlazzyMotion.Marquee includes four professionally designed themes:

Glass Theme (Default)

Modern glassmorphism design with blur effect and transparency:

<BzMarquee Items="brands" Theme="BzTheme.Glass" />

Dark Theme

Solid dark background with subtle gradient border:

<BzMarquee Items="brands" Theme="BzTheme.Dark" />

Light Theme

Clean light theme with soft shadows:

<BzMarquee Items="brands" Theme="BzTheme.Light" />

Minimal Theme

No background container, borderless design:

<BzMarquee Items="brands" Theme="BzTheme.Minimal" />

CSS Customization

Override CSS variables for custom styling:

.my-marquee {
    --bzm-speed: 30;
    --bzm-gap: 60px;
    --bzm-gradient-size: 120px;
    --bzm-logo-height: 50px;
    --bzm-logo-opacity: 0.8;
    --bzm-testimonial-width: 400px;
}

<BzMarquee Items="brands" CssClass="my-marquee" />

Available CSS Variables

How It Works

Source Generator Magic

When you mark a property with [BzImage], the BlazzyMotion Source Generator automatically creates a registration function during compilation:

// Auto-generated at compile-time
internal static class BzMappingRegistration_Brand
{
    [ModuleInitializer]
    internal static void Register()
    {
        BzRegistry.Register<Brand>(item => new BzItem
        {
            ImageUrl = item.LogoUrl,
            Title = item.Name,
            OriginalItem = item
        });
    }
}

Rendering Pipeline

1. Items are mapped via BzRegistry.ToBzItems() using the generated mapper
2. JavaScript module clones content for seamless infinite scroll
3. IntersectionObserver triggers stagger entrance animation
4. CSS @keyframes handles continuous scroll — no JS animation loop

Performance

• Zero Runtime Overhead - Mapping functions generated at compile-time
• Zero Reflection - Uses [ModuleInitializer] for automatic registration
• CSS-Only Animation - Pure CSS transforms, no requestAnimationFrame loop
• GPU Accelerated - Uses transform: translate3d() for compositor-layer animation
• Lazy Loading - Images use loading="lazy" for deferred loading

Troubleshooting

Template Not Generated:

• Ensure [BzImage] or [BzTitle] is on a public string property
• Rebuild the project to trigger Source Generator
• Add @using BlazzyMotion.Core.Attributes

Marquee Not Scrolling:

• Verify content width exceeds container width (cloning needs enough content)
• Check that JavaScript interop loaded correctly

Items Not Visible:

• Check that Items is not null or empty
• Verify image URLs are accessible
• For testimonials, ensure model has both [BzTitle] and [BzDescription]

Stagger Animation Not Working:

• Verify StaggerEntrance="true" (default)
• Check browser IntersectionObserver support
• Ensure container is visible in viewport

Browser Support

Requires CSS animation and @keyframes support. Backdrop-filter for Glass theme gracefully degrades on mobile.

Contributing

Contributions are welcome! Please feel free to submit issues or pull requests.

Building from Source

git clone https://github.com/Blazzy-Motion/BlazzyMotion.git
cd BlazzyMotion
dotnet build

Running Tests

dotnet test

License

MIT License - see LICENSE for details.

Author

• GitHub: @nenad0707
• LinkedIn: Nenad Ristic

Support

If you find BlazzyMotion.Marquee useful, please consider:

• Giving it a star on GitHub
• Sharing it with other Blazor developers
• Reporting bugs or suggesting features via GitHub Issues

For questions or support, please open an issue on GitHub.

Part of the BlazzyMotion component ecosystem.