Motion
A set of motion primitives — Marquee, NumberTicker, TextReveal, BlurFade, BorderBeam, ShimmerButton, Sparkles — for building high-energy, Aceternity / Magic UI style interfaces.
Installation
dotnet add package Lumeo.Motion
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
When to Use
- Marquee — showcase logo walls, testimonials, or tickers in an infinite scroll.
- NumberTicker — animate metrics, KPI counters, or pricing numbers on first paint.
- TextReveal — draw attention to hero headlines as the user scrolls them into view.
- BlurFade — progressively unveil cards, sections, or media on viewport entry.
- BorderBeam — highlight premium or featured cards with a moving gradient border.
- ShimmerButton — make a single primary call-to-action feel alive.
- Sparkles — add delight around promotional badges, empty states, or celebratory moments.
Acme
Lumeo
Vercel
Figma
Linear
Stripe
Supabase
OpenAI
0+
Happy users
0.0%
Uptime
$0M
Revenue
Motion brings interfaces to life with clarity and intent.
First
Second
Third
Pro plan
Popular
Unlock premium features with a travelling beam border.
$29
/mo
Magic is in the details.
API Reference
Marquee
| Property | Type | Default | Description |
|---|---|---|---|
| Speed | MarqueeSpeed | Normal | Slow, Normal, or Fast — maps to a CSS animation duration. |
| Direction | MarqueeDirection | Left | Scroll direction. |
| PauseOnHover | bool | false | Pauses the animation while the user hovers the marquee. |
| Reverse | bool | false | Inverts the Direction. |
| Vertical | bool | false | Scrolls vertically instead of horizontally. |
NumberTicker
| Property | Type | Default | Description |
|---|---|---|---|
| Value | double | 0 | Target value to animate to. |
| StartValue | double | 0 | Value the ticker starts from. |
| DurationMs | int | 1500 | Animation duration in milliseconds. |
| Decimals | int | 0 | Number of fractional digits to display. |
| Prefix | string? | — | Text prepended before the number (e.g. $). |
| Suffix | string? | — | Text appended after the number (e.g. %, +, K). |
TextReveal
| Property | Type | Default | Description |
|---|---|---|---|
| Text | string | — | Full string to reveal. Split on whitespace into per-word spans. |
| Stagger | int | 80 | Milliseconds of delay between words. |
| Threshold | double | 0.3 | IntersectionObserver threshold that triggers the reveal. |
BlurFade
| Property | Type | Default | Description |
|---|---|---|---|
| DelayMs | int | 0 | Delay applied before the fade-in after intersection. |
| DurationMs | int | 600 | CSS transition duration. |
| BlurPx | int | 8 | Initial blur in pixels. |
| Yoffset | int | 8 | Initial Y translate in pixels. |
| Once | bool | true | If true, only animates on first entry. |
BorderBeam
| Property | Type | Default | Description |
|---|---|---|---|
| Size | BeamSize | Md | Beam thickness — Sm, Md, or Lg. |
| DurationMs | int | 8000 | Full rotation duration in ms. |
| ColorFrom | string? | var(--color-primary) | Gradient start color. |
| ColorTo | string? | var(--color-primary) | Gradient end color. |
ShimmerButton
| Property | Type | Default | Description |
|---|---|---|---|
| OnClick | EventCallback<MouseEventArgs> | — | Click handler. |
| Shimmer | bool | true | Enables the shimmer sweep. |
| ShimmerColor | string? | rgba white 45% | Color of the sweeping highlight. |
| Variant | Button.ButtonVariant | Default | Reuses Button variants. |
| Size | Button.ButtonSize | Default | Reuses Button sizes. |
| Disabled | bool | false | Disables the button and suppresses the shimmer animation. |
| PressEffect | Button.ButtonPressEffect | None | Press feedback animation. Values: None, Scale, Brightness, Ripple. |
Sparkles
| Property | Type | Default | Description |
|---|---|---|---|
| Count | int | 5 | Number of sparkles to render. |
| MinSize | int | 6 | Minimum sparkle size in px. |
| MaxSize | int | 14 | Maximum sparkle size in px. |
| Color | string | var(--color-primary) | Sparkle color — any CSS color value. |