BlazzyMotion

A collection of modern, high-performance UI components for Blazor with zero-configuration support through Source Generators.

Live Demo

Experience BlazzyMotion components in action: View Live Demo

Components

| Package | Description | NuGet | | ------------------------------------------------------------ | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | | BlazzyMotion.Carousel | 3D coverflow carousel powered by Swiper.js | | | BlazzyMotion.Gallery | Photo gallery with lightbox, filtering, and masonry grid | | | BlazzyMotion.Bento | Bento Grid with Composition Mode for dashboards | | | BlazzyMotion.Marquee | CSS-driven infinite scrolling marquee for logos & text | | | BlazzyMotion.Core | Shared infrastructure (attributes, themes, registry) | |

Key Features

• Zero Configuration - Source Generators create item templates from your models at compile-time
• Type-Safe - Full IntelliSense support with strongly-typed generic components
• Multiple Themes - Glass, Dark, Light, and Minimal themes included
• Performance Optimized - No runtime reflection, compiled delegates, template caching
• Responsive Design - Built-in adaptive behavior for all screen sizes

Quick Start

Installation

# For 3D Carousel
dotnet add package BlazzyMotion.Carousel

# For Photo Gallery
dotnet add package BlazzyMotion.Gallery

# For Bento Grid
dotnet add package BlazzyMotion.Bento

# For Infinite Scrolling Marquee
dotnet add package BlazzyMotion.Marquee

Define Your Model

using BlazzyMotion.Core.Attributes;

public class Movie
{
    [BzImage]
    public string ImageUrl { get; set; } = "";

    [BzTitle]
    public string Title { get; set; } = "";
}

Use the Components

Carousel:

@using BlazzyMotion.Carousel.Components
@using BlazzyMotion.Core.Models

<BzCarousel TItem="Movie"
            Items="movies"
            Theme="BzTheme.Glass" />

Bento Grid (Composition Mode):

@using BlazzyMotion.Bento.Components
@using BlazzyMotion.Core.Models

<BzBento TItem="object" Theme="BzTheme.Glass" Columns="4">

    <BzBentoCard ColSpan="2" RowSpan="2"
                 Image="images/hero.jpg"
                 Title="Featured" />

    <BzBentoMetric Value="1,234" Label="Users" Trend="+12%" />
    <BzBentoMetric Value="99.9%" Label="Uptime" />

    <BzBentoFeature ColSpan="2" IconText="⚡" Label="Fast" Description="Built for speed" />

</BzBento>

Note: Use Composition Mode to build dashboards with metrics, cards, and embedded components. See Bento README for full documentation.

Gallery:

@using BlazzyMotion.Gallery.Components
@using BlazzyMotion.Core.Models

<BzGallery TItem="Photo"
           Items="photos"
           Theme="BzTheme.Glass"
           Layout="BzGalleryLayout.Masonry"
           EnableLightbox="true"
           EnableFilter="true" />

Note: Gallery supports grid, masonry, and columns layouts with built-in lightbox, category filtering, and full keyboard/screen reader accessibility. See Gallery README for full documentation.

Marquee:

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

<BzMarquee TItem="Brand"
           Items="brands"
           Theme="BzTheme.Glass"
           Speed="30" />

Note: Marquee auto-detects logos from [BzImage] attributes — zero configuration needed. Use ItemTemplate for custom rendering. Supports testimonials, text tickers, and multi-row layout. See Marquee README for full documentation.

How It Works

BlazzyMotion uses Source Generators to automatically create mapping functions at compile-time. When you mark a property with [BzImage], the generator creates optimized code that runs at application startup via [ModuleInitializer]. This means:

• Zero runtime overhead
• Zero reflection
• Full type safety
• Automatic template generation

Browser Support

| Browser | Version | | ------- | ------- | | Chrome | 88+ | | Firefox | 78+ | | Safari | 14+ | | Edge | 88+ |

Contributing

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

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

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

• GitHub: @nenad0707
• LinkedIn: Nenad Ristic

Support

If you find BlazzyMotion useful, please consider giving it a star on GitHub.

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