@page "/components/motion"

<PageTitle>Motion — Lumeo</PageTitle>

<PageHeader Title="Motion" Description="A set of motion primitives — Marquee, NumberTicker, TextReveal, BlurFade, BorderBeam, ShimmerButton, Sparkles — for building high-energy, Aceternity / Magic UI style interfaces." />

<div class="mt-10 space-y-3">
    <Heading Id="when-to-use" Level="2" Class="scroll-mt-20">When to Use</Heading>
    <ul class="list-disc list-inside space-y-1 text-muted-foreground text-sm">
        <li><strong>Marquee</strong> — showcase logo walls, testimonials, or tickers in an infinite scroll.</li>
        <li><strong>NumberTicker</strong> — animate metrics, KPI counters, or pricing numbers on first paint.</li>
        <li><strong>TextReveal</strong> — draw attention to hero headlines as the user scrolls them into view.</li>
        <li><strong>BlurFade</strong> — progressively unveil cards, sections, or media on viewport entry.</li>
        <li><strong>BorderBeam</strong> — highlight premium or featured cards with a moving gradient border.</li>
        <li><strong>ShimmerButton</strong> — make a single primary call-to-action feel alive.</li>
        <li><strong>Sparkles</strong> — add delight around promotional badges, empty states, or celebratory moments.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Marquee" Code="@_marqueeCode">
        <div class="w-full max-w-xl">
            <Marquee PauseOnHover="true" Class="py-2">
                @foreach (var brand in _brands)
                {
                    <div class="mx-3 inline-flex h-10 items-center justify-center rounded-md border border-border/40 bg-background px-4 text-sm font-medium text-foreground whitespace-nowrap">
                        @brand
                    </div>
                }
            </Marquee>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="NumberTicker" Code="@_tickerCode">
        <div class="relative w-full">
            <button type="button" @onclick="ReplayTicker" class="@ReplayButtonClass" title="Replay animation">
                <Blazicon Svg="Lucide.RotateCcw" class="h-3.5 w-3.5" />
            </button>
            <div @key="@($"ticker-{_tickerKey}")" class="grid grid-cols-1 sm:grid-cols-3 gap-8 text-center">
                <div>
                    <div class="text-3xl font-bold text-foreground">
                        <NumberTicker Value="12450" Suffix="+" />
                    </div>
                    <div class="mt-1 text-xs text-muted-foreground">Happy users</div>
                </div>
                <div>
                    <div class="text-3xl font-bold text-foreground">
                        <NumberTicker Value="99.9" Decimals="1" Suffix="%" />
                    </div>
                    <div class="mt-1 text-xs text-muted-foreground">Uptime</div>
                </div>
                <div>
                    <div class="text-3xl font-bold text-foreground">
                        <NumberTicker Value="48" Prefix="$" Suffix="M" DurationMs="2000" />
                    </div>
                    <div class="mt-1 text-xs text-muted-foreground">Revenue</div>
                </div>
            </div>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="TextReveal" Code="@_revealCode">
        <div class="relative w-full flex items-center justify-center">
            <button type="button" @onclick="ReplayReveal" class="@ReplayButtonClass" title="Replay animation">
                <Blazicon Svg="Lucide.RotateCcw" class="h-3.5 w-3.5" />
            </button>
            <div @key="@($"reveal-{_revealKey}")" class="max-w-xl text-center">
                <div class="text-2xl font-semibold leading-snug text-foreground">
                    <TextReveal Text="Motion brings interfaces to life with clarity and intent." />
                </div>
            </div>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="BlurFade" Code="@_blurFadeCode">
        <div class="relative w-full flex items-center justify-center">
            <button type="button" @onclick="ReplayBlurFade" class="@ReplayButtonClass" title="Replay animation">
                <Blazicon Svg="Lucide.RotateCcw" class="h-3.5 w-3.5" />
            </button>
            <div @key="@($"blurfade-{_blurFadeKey}")" class="grid grid-cols-1 sm:grid-cols-3 gap-4 w-full max-w-2xl">
                <BlurFade DelayMs="0">
                    <Card Class="p-5 h-32 flex items-center justify-center text-sm">First</Card>
                </BlurFade>
                <BlurFade DelayMs="120">
                    <Card Class="p-5 h-32 flex items-center justify-center text-sm">Second</Card>
                </BlurFade>
                <BlurFade DelayMs="240">
                    <Card Class="p-5 h-32 flex items-center justify-center text-sm">Third</Card>
                </BlurFade>
            </div>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="BorderBeam" Code="@_borderBeamCode">
        <BorderBeam Class="w-full max-w-sm">
            <Card Class="bg-card">
                <CardHeader>
                    <Flex Align="center" Justify="between">
                        <Heading Level="3" Size="lg">Pro plan</Heading>
                        <Badge Variant="Badge.BadgeVariant.Secondary">Popular</Badge>
                    </Flex>
                    <Lumeo.Text Size="sm" Color="muted">
                        Unlock premium features with a travelling beam border.
                    </Lumeo.Text>
                </CardHeader>
                <CardContent>
                    <Flex Align="baseline" Gap="1">
                        <Lumeo.Text As="span" Class="text-3xl font-bold text-foreground">$29</Lumeo.Text>
                        <Lumeo.Text As="span" Size="sm" Color="muted">/mo</Lumeo.Text>
                    </Flex>
                </CardContent>
                <CardFooter>
                    <Button FullWidth="true">Start free trial</Button>
                </CardFooter>
            </Card>
        </BorderBeam>
    </ComponentDemo>

    <ComponentDemo Title="ShimmerButton" Code="@_shimmerCode">
        <Flex Gap="3" Wrap="true">
            <ShimmerButton>Get started</ShimmerButton>
            <ShimmerButton Size="Button.ButtonSize.Lg">Upgrade to Pro</ShimmerButton>
            <ShimmerButton Variant="Button.ButtonVariant.Secondary">Learn more</ShimmerButton>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="ShimmerButton Size — interactive preview" Description="Pick a size to see the ShimmerButton scale live. One button is shown at a time." Code="@_shimmerSizeCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Switch sizes to see the ShimmerButton resize live.</Lumeo.Text>
            <Segmented @bind-Value="_shimmerSize">
                <SegmentedItem Value="Sm">Sm</SegmentedItem>
                <SegmentedItem Value="Default">Default</SegmentedItem>
                <SegmentedItem Value="Lg">Lg</SegmentedItem>
            </Segmented>
            <ShimmerButton Size="_shimmerSizeEnum">Get started</ShimmerButton>
            <Lumeo.Text Size="sm" Color="muted">Current size: @_shimmerSize</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Sparkles" Code="@_sparklesCode">
        <div class="relative w-full flex items-center justify-center">
            <button type="button" @onclick="ReplaySparkles" class="@ReplayButtonClass" title="Replay animation">
                <Blazicon Svg="Lucide.RotateCcw" class="h-3.5 w-3.5" />
            </button>
            <div @key="@($"sparkles-{_sparklesKey}")">
                <Sparkles Count="8">
                    <span class="text-3xl font-bold text-foreground px-4">Magic is in the details.</span>
                </Sparkles>
            </div>
        </div>
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="8" Class="mt-12">
    <Heading Level="2">API Reference</Heading>

    <Stack Gap="3">
        <Heading Level="3">Marquee</Heading>
        <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
            <table class="w-full min-w-[600px] text-sm">
                <thead>
                    <tr class="border-b border-border/40 bg-muted/40">
                        <th class="text-left p-3 font-medium text-foreground">Property</th>
                        <th class="text-left p-3 font-medium text-foreground">Type</th>
                        <th class="text-left p-3 font-medium text-foreground">Default</th>
                        <th class="text-left p-3 font-medium text-foreground">Description</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-border/40">
                    <tr><td class="p-3 font-mono text-xs text-primary">Speed</td><td class="p-3 font-mono text-xs text-muted-foreground">MarqueeSpeed</td><td class="p-3 font-mono text-xs text-muted-foreground">Normal</td><td class="p-3 text-muted-foreground">Slow, Normal, or Fast — maps to a CSS animation duration.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">Direction</td><td class="p-3 font-mono text-xs text-muted-foreground">MarqueeDirection</td><td class="p-3 font-mono text-xs text-muted-foreground">Left</td><td class="p-3 text-muted-foreground">Scroll direction.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">PauseOnHover</td><td class="p-3 font-mono text-xs text-muted-foreground">bool</td><td class="p-3 font-mono text-xs text-muted-foreground">false</td><td class="p-3 text-muted-foreground">Pauses the animation while the user hovers the marquee.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">Reverse</td><td class="p-3 font-mono text-xs text-muted-foreground">bool</td><td class="p-3 font-mono text-xs text-muted-foreground">false</td><td class="p-3 text-muted-foreground">Inverts the Direction.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">Vertical</td><td class="p-3 font-mono text-xs text-muted-foreground">bool</td><td class="p-3 font-mono text-xs text-muted-foreground">false</td><td class="p-3 text-muted-foreground">Scrolls vertically instead of horizontally.</td></tr>
                </tbody>
            </table>
        </Stack>
    </Stack>

    <Stack Gap="3">
        <Heading Level="3">NumberTicker</Heading>
        <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
            <table class="w-full min-w-[600px] text-sm">
                <thead>
                    <tr class="border-b border-border/40 bg-muted/40">
                        <th class="text-left p-3 font-medium text-foreground">Property</th>
                        <th class="text-left p-3 font-medium text-foreground">Type</th>
                        <th class="text-left p-3 font-medium text-foreground">Default</th>
                        <th class="text-left p-3 font-medium text-foreground">Description</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-border/40">
                    <tr><td class="p-3 font-mono text-xs text-primary">Value</td><td class="p-3 font-mono text-xs text-muted-foreground">double</td><td class="p-3 font-mono text-xs text-muted-foreground">0</td><td class="p-3 text-muted-foreground">Target value to animate to.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">StartValue</td><td class="p-3 font-mono text-xs text-muted-foreground">double</td><td class="p-3 font-mono text-xs text-muted-foreground">0</td><td class="p-3 text-muted-foreground">Value the ticker starts from.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">DurationMs</td><td class="p-3 font-mono text-xs text-muted-foreground">int</td><td class="p-3 font-mono text-xs text-muted-foreground">1500</td><td class="p-3 text-muted-foreground">Animation duration in milliseconds.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">Decimals</td><td class="p-3 font-mono text-xs text-muted-foreground">int</td><td class="p-3 font-mono text-xs text-muted-foreground">0</td><td class="p-3 text-muted-foreground">Number of fractional digits to display.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">Prefix</td><td class="p-3 font-mono text-xs text-muted-foreground">string?</td><td class="p-3 font-mono text-xs text-muted-foreground">—</td><td class="p-3 text-muted-foreground">Text prepended before the number (e.g. $).</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">Suffix</td><td class="p-3 font-mono text-xs text-muted-foreground">string?</td><td class="p-3 font-mono text-xs text-muted-foreground">—</td><td class="p-3 text-muted-foreground">Text appended after the number (e.g. %, +, K).</td></tr>
                </tbody>
            </table>
        </Stack>
    </Stack>

    <Stack Gap="3">
        <Heading Level="3">TextReveal</Heading>
        <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
            <table class="w-full min-w-[600px] text-sm">
                <thead>
                    <tr class="border-b border-border/40 bg-muted/40">
                        <th class="text-left p-3 font-medium text-foreground">Property</th>
                        <th class="text-left p-3 font-medium text-foreground">Type</th>
                        <th class="text-left p-3 font-medium text-foreground">Default</th>
                        <th class="text-left p-3 font-medium text-foreground">Description</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-border/40">
                    <tr><td class="p-3 font-mono text-xs text-primary">Text</td><td class="p-3 font-mono text-xs text-muted-foreground">string</td><td class="p-3 font-mono text-xs text-muted-foreground">—</td><td class="p-3 text-muted-foreground">Full string to reveal. Split on whitespace into per-word spans.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">Stagger</td><td class="p-3 font-mono text-xs text-muted-foreground">int</td><td class="p-3 font-mono text-xs text-muted-foreground">80</td><td class="p-3 text-muted-foreground">Milliseconds of delay between words.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">Threshold</td><td class="p-3 font-mono text-xs text-muted-foreground">double</td><td class="p-3 font-mono text-xs text-muted-foreground">0.3</td><td class="p-3 text-muted-foreground">IntersectionObserver threshold that triggers the reveal.</td></tr>
                </tbody>
            </table>
        </Stack>
    </Stack>

    <Stack Gap="3">
        <Heading Level="3">BlurFade</Heading>
        <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
            <table class="w-full min-w-[600px] text-sm">
                <thead>
                    <tr class="border-b border-border/40 bg-muted/40">
                        <th class="text-left p-3 font-medium text-foreground">Property</th>
                        <th class="text-left p-3 font-medium text-foreground">Type</th>
                        <th class="text-left p-3 font-medium text-foreground">Default</th>
                        <th class="text-left p-3 font-medium text-foreground">Description</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-border/40">
                    <tr><td class="p-3 font-mono text-xs text-primary">DelayMs</td><td class="p-3 font-mono text-xs text-muted-foreground">int</td><td class="p-3 font-mono text-xs text-muted-foreground">0</td><td class="p-3 text-muted-foreground">Delay applied before the fade-in after intersection.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">DurationMs</td><td class="p-3 font-mono text-xs text-muted-foreground">int</td><td class="p-3 font-mono text-xs text-muted-foreground">600</td><td class="p-3 text-muted-foreground">CSS transition duration.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">BlurPx</td><td class="p-3 font-mono text-xs text-muted-foreground">int</td><td class="p-3 font-mono text-xs text-muted-foreground">8</td><td class="p-3 text-muted-foreground">Initial blur in pixels.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">Yoffset</td><td class="p-3 font-mono text-xs text-muted-foreground">int</td><td class="p-3 font-mono text-xs text-muted-foreground">8</td><td class="p-3 text-muted-foreground">Initial Y translate in pixels.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">Once</td><td class="p-3 font-mono text-xs text-muted-foreground">bool</td><td class="p-3 font-mono text-xs text-muted-foreground">true</td><td class="p-3 text-muted-foreground">If true, only animates on first entry.</td></tr>
                </tbody>
            </table>
        </Stack>
    </Stack>

    <Stack Gap="3">
        <Heading Level="3">BorderBeam</Heading>
        <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
            <table class="w-full min-w-[600px] text-sm">
                <thead>
                    <tr class="border-b border-border/40 bg-muted/40">
                        <th class="text-left p-3 font-medium text-foreground">Property</th>
                        <th class="text-left p-3 font-medium text-foreground">Type</th>
                        <th class="text-left p-3 font-medium text-foreground">Default</th>
                        <th class="text-left p-3 font-medium text-foreground">Description</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-border/40">
                    <tr><td class="p-3 font-mono text-xs text-primary">Size</td><td class="p-3 font-mono text-xs text-muted-foreground">BeamSize</td><td class="p-3 font-mono text-xs text-muted-foreground">Md</td><td class="p-3 text-muted-foreground">Beam thickness — Sm, Md, or Lg.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">DurationMs</td><td class="p-3 font-mono text-xs text-muted-foreground">int</td><td class="p-3 font-mono text-xs text-muted-foreground">8000</td><td class="p-3 text-muted-foreground">Full rotation duration in ms.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">ColorFrom</td><td class="p-3 font-mono text-xs text-muted-foreground">string?</td><td class="p-3 font-mono text-xs text-muted-foreground">var(--color-primary)</td><td class="p-3 text-muted-foreground">Gradient start color.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">ColorTo</td><td class="p-3 font-mono text-xs text-muted-foreground">string?</td><td class="p-3 font-mono text-xs text-muted-foreground">var(--color-primary)</td><td class="p-3 text-muted-foreground">Gradient end color.</td></tr>
                </tbody>
            </table>
        </Stack>
    </Stack>

    <Stack Gap="3">
        <Heading Level="3">ShimmerButton</Heading>
        <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
            <table class="w-full min-w-[600px] text-sm">
                <thead>
                    <tr class="border-b border-border/40 bg-muted/40">
                        <th class="text-left p-3 font-medium text-foreground">Property</th>
                        <th class="text-left p-3 font-medium text-foreground">Type</th>
                        <th class="text-left p-3 font-medium text-foreground">Default</th>
                        <th class="text-left p-3 font-medium text-foreground">Description</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-border/40">
                    <tr><td class="p-3 font-mono text-xs text-primary">OnClick</td><td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;MouseEventArgs&gt;</td><td class="p-3 font-mono text-xs text-muted-foreground">—</td><td class="p-3 text-muted-foreground">Click handler.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">Shimmer</td><td class="p-3 font-mono text-xs text-muted-foreground">bool</td><td class="p-3 font-mono text-xs text-muted-foreground">true</td><td class="p-3 text-muted-foreground">Enables the shimmer sweep.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">ShimmerColor</td><td class="p-3 font-mono text-xs text-muted-foreground">string?</td><td class="p-3 font-mono text-xs text-muted-foreground">rgba white 45%</td><td class="p-3 text-muted-foreground">Color of the sweeping highlight.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">Variant</td><td class="p-3 font-mono text-xs text-muted-foreground">Button.ButtonVariant</td><td class="p-3 font-mono text-xs text-muted-foreground">Default</td><td class="p-3 text-muted-foreground">Reuses Button variants.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">Size</td><td class="p-3 font-mono text-xs text-muted-foreground">Button.ButtonSize</td><td class="p-3 font-mono text-xs text-muted-foreground">Default</td><td class="p-3 text-muted-foreground">Reuses Button sizes.</td></tr>
                                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Disabled</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Disables the button and suppresses the shimmer animation.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">PressEffect</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Button.ButtonPressEffect</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">None</td>
                            <td class="p-3 text-muted-foreground">Press feedback animation. Values: None, Scale, Brightness, Ripple.</td>
                        </tr>
</tbody>
            </table>
        </Stack>
    </Stack>

    <Stack Gap="3">
        <Heading Level="3">Sparkles</Heading>
        <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
            <table class="w-full min-w-[600px] text-sm">
                <thead>
                    <tr class="border-b border-border/40 bg-muted/40">
                        <th class="text-left p-3 font-medium text-foreground">Property</th>
                        <th class="text-left p-3 font-medium text-foreground">Type</th>
                        <th class="text-left p-3 font-medium text-foreground">Default</th>
                        <th class="text-left p-3 font-medium text-foreground">Description</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-border/40">
                    <tr><td class="p-3 font-mono text-xs text-primary">Count</td><td class="p-3 font-mono text-xs text-muted-foreground">int</td><td class="p-3 font-mono text-xs text-muted-foreground">5</td><td class="p-3 text-muted-foreground">Number of sparkles to render.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">MinSize</td><td class="p-3 font-mono text-xs text-muted-foreground">int</td><td class="p-3 font-mono text-xs text-muted-foreground">6</td><td class="p-3 text-muted-foreground">Minimum sparkle size in px.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">MaxSize</td><td class="p-3 font-mono text-xs text-muted-foreground">int</td><td class="p-3 font-mono text-xs text-muted-foreground">14</td><td class="p-3 text-muted-foreground">Maximum sparkle size in px.</td></tr>
                    <tr><td class="p-3 font-mono text-xs text-primary">Color</td><td class="p-3 font-mono text-xs text-muted-foreground">string</td><td class="p-3 font-mono text-xs text-muted-foreground">var(--color-primary)</td><td class="p-3 text-muted-foreground">Sparkle color — any CSS color value.</td></tr>
                </tbody>
            </table>
        </Stack>
    </Stack>
</Stack>

@code {
    private int _tickerKey;
    private int _revealKey;
    private int _blurFadeKey;
    private int _sparklesKey;
    private string _shimmerSize = "Default";

    private void ReplayTicker() => _tickerKey++;
    private void ReplayReveal() => _revealKey++;
    private void ReplayBlurFade() => _blurFadeKey++;
    private void ReplaySparkles() => _sparklesKey++;

    private Button.ButtonSize _shimmerSizeEnum =>
        Enum.TryParse<Button.ButtonSize>(_shimmerSize, out var s) ? s : Button.ButtonSize.Default;

    // Small circular icon button pinned top-right of each one-shot demo's preview.
    private const string ReplayButtonClass =
        "absolute right-0 top-0 z-10 inline-flex h-7 w-7 items-center justify-center rounded-full border border-border/40 bg-background/80 text-muted-foreground shadow-sm backdrop-blur hover:text-foreground hover:bg-accent transition-colors";

    private readonly string[] _brands = new[]
    {
        "Acme", "Lumeo", "Vercel", "Figma", "Linear", "Stripe", "Supabase", "OpenAI"
    };

    private const string _marqueeCode = @"<Marquee PauseOnHover=""true"">
    @foreach (var brand in brands)
    {
        <div class=""mx-3 inline-flex h-10 items-center rounded-md border border-border/40 bg-background px-4 text-sm font-medium"">
            @brand
        </div>
    }
</Marquee>";

    private const string _tickerCode = @"<NumberTicker Value=""12450"" Suffix=""+"" />
<NumberTicker Value=""99.9"" Decimals=""1"" Suffix=""%"" />
<NumberTicker Value=""48"" Prefix=""$"" Suffix=""M"" DurationMs=""2000"" />";

    private const string _revealCode = @"<TextReveal Text=""Motion brings interfaces to life with clarity and intent."" />";

    private const string _blurFadeCode = @"<BlurFade DelayMs=""0""><Card>First</Card></BlurFade>
<BlurFade DelayMs=""120""><Card>Second</Card></BlurFade>
<BlurFade DelayMs=""240""><Card>Third</Card></BlurFade>";

    private const string _borderBeamCode = @"<BorderBeam Class=""w-full max-w-sm"">
    <Card Class=""bg-card"">
        <CardHeader>
            <Flex Align=""center"" Justify=""between"">
                <Heading Level=""3"" Size=""lg"">Pro plan</Heading>
                <Badge Variant=""Badge.BadgeVariant.Secondary"">Popular</Badge>
            </Flex>
            <Lumeo.Text Size=""sm"" Color=""muted"">
                Unlock premium features with a travelling beam border.
            </Lumeo.Text>
        </CardHeader>
        <CardContent>
            <Flex Align=""baseline"" Gap=""1"">
                <Lumeo.Text As=""span"" Class=""text-3xl font-bold text-foreground"">$29</Lumeo.Text>
                <Lumeo.Text As=""span"" Size=""sm"" Color=""muted"">/mo</Lumeo.Text>
            </Flex>
        </CardContent>
        <CardFooter>
            <Button FullWidth=""true"">Start free trial</Button>
        </CardFooter>
    </Card>
</BorderBeam>";

    private const string _shimmerCode = @"<ShimmerButton>Get started</ShimmerButton>
<ShimmerButton Size=""Button.ButtonSize.Lg"">Upgrade to Pro</ShimmerButton>
<ShimmerButton Variant=""Button.ButtonVariant.Secondary"">Learn more</ShimmerButton>";

    private const string _sparklesCode = @"<Sparkles Count=""8"">
    <span class=""text-3xl font-bold"">Magic is in the details.</span>
</Sparkles>";

    private string _shimmerSizeCode = @"<Segmented @bind-Value=""_size"">
    <SegmentedItem Value=""Sm"">Sm</SegmentedItem>
    <SegmentedItem Value=""Default"">Default</SegmentedItem>
    <SegmentedItem Value=""Lg"">Lg</SegmentedItem>
</Segmented>
<ShimmerButton Size=""@Enum.Parse<Button.ButtonSize>(_size)"">Get started</ShimmerButton>

@code {
    private string _size = ""Default"";
}";
}
