# Motion

Source: https://lumeo.nativ.sh/components/motion

# Motion

A set of motion primitives — Marquee, NumberTicker, TextReveal, BlurFade, BorderBeam, ShimmerButton, Sparkles — for building high-energy, Aceternity / Magic UI style interfaces.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo.Motion

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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.

Preview Code

Marquee

Acme

Lumeo

Vercel

Figma

Linear

Stripe

Supabase

OpenAI

Acme

Lumeo

Vercel

Figma

Linear

Stripe

Supabase

OpenAI

Preview Code

NumberTicker

0+

Happy users

0.0%

Uptime

$0M

Revenue

Preview Code

TextReveal

Motion brings interfaces to life with clarity and intent.

Preview Code

BlurFade

First

Second

Third

Preview Code

BorderBeam

### Pro plan

Popular

Unlock premium features with a travelling beam border.

$29 /mo

Start free trial

Preview Code

ShimmerButton

Get started Upgrade to Pro Learn more

Preview Code

ShimmerButton Size — interactive preview

Switch sizes to see the ShimmerButton resize live.

Sm Default Lg

Get started

Current size: Default

Pick a size to see the ShimmerButton scale live. One button is shown at a time.

Preview Code

Sparkles

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.