Overview

A collection of visual effects for WinUI 3 controls in the Flowery.Effects namespace.

Installation

Add the namespace to your XAML:

xmlns:fx="using:Flowery.Effects"

Windows Animation Setting

The built-in behaviors follow the Windows animation setting automatically.

No additional public switch is required.

If Windows animations are disabled during an effect, the effect stops and leaves readable content:

Enabled continuous behaviors can resume after Windows animations are enabled again, while their targets remain loaded.

An explicitly stopped slideshow remains stopped.

One-time text reveals keep their completed content.

Unloading a target releases the active behavior subscriptions and animation work.

The built-in controls apply the same setting to decorative loaders, status effects, shimmer, and animated value changes.

Custom application animation code must handle the Windows setting separately.

See DaisyAccessibility for Windows contrast themes and UI Automation.

Effects

RevealBehavior

Entrance animation when element enters the visual tree. Supports 5 modes:

<Border fx:RevealBehavior.IsEnabled="True"
        fx:RevealBehavior.Duration="0:0:0.6"
        fx:RevealBehavior.Direction="Bottom"
        fx:RevealBehavior.Distance="50">
    <TextBlock Text="I fade in from below!"/>
</Border>

<Border fx:RevealBehavior.Mode="SlideIn" .../>

<Border fx:RevealBehavior.Mode="FadeOnly" fx:RevealBehavior.Duration="0:0:0.8"/>

<Border fx:RevealBehavior.Mode="Scale" fx:RevealBehavior.Duration="0:0:0.5"/>

<Border fx:RevealBehavior.Mode="ScaleSlide"
        fx:RevealBehavior.Direction="Bottom"
        fx:RevealBehavior.Distance="60"/>

ScrambleHoverBehavior

Text scramble/reveal effect on hover or click (mobile-friendly).

<TextBlock Text="Secret Message"
           fx:ScrambleHoverBehavior.IsEnabled="True"/>

<TextBlock Text="Glitch Me!"
           fx:ScrambleHoverBehavior.IsEnabled="True"
           fx:ScrambleHoverBehavior.Mode="ScrambleOnHover"/>

<TextBlock Text="DEPARTURES"
           fx:ScrambleHoverBehavior.IsEnabled="True"
           fx:ScrambleHoverBehavior.RevealStyle="SplitFlap"
           fx:ScrambleHoverBehavior.Duration="0:0:2.5"/>

WaveTextBehavior

Infinite sine wave animation on the Y axis. Supports both whole-block and per-character modes.

<!-- Per-character ripple wave (SmoothUI style) -->
<TextBlock Text="Ripple!"
           fx:WaveTextBehavior.IsEnabled="True"
           fx:WaveTextBehavior.IsPerCharacter="True"
           fx:WaveTextBehavior.Amplitude="8"
           fx:WaveTextBehavior.StaggerDelay="0:0:0.05"/>

<!-- Simple whole-block wave -->
<TextBlock Text="Wave!"
           fx:WaveTextBehavior.IsEnabled="True"
           fx:WaveTextBehavior.Amplitude="5"/>

CursorFollowBehavior

Creates a follower element that tracks mouse position with spring physics.

<Grid Background="Transparent"
      fx:CursorFollowBehavior.IsEnabled="True"
      fx:CursorFollowBehavior.FollowerSize="20"
      fx:CursorFollowBehavior.FollowerShape="Circle"
      fx:CursorFollowBehavior.FollowerOpacity="0.75"
      fx:CursorFollowBehavior.FollowerBrush="{ThemeResource DaisyPrimaryBrush}"/>

This effect tracks the mouse pointer in the native Windows application.

<!-- ✅ Correct: Panel receives mouse events everywhere -->
<Grid Background="Transparent" fx:CursorFollowBehavior.IsEnabled="True">
    <TextBlock Text="Content"/>
</Grid>

<!-- ❌ Wrong: Mouse events only fire over the TextBlock -->
<Grid fx:CursorFollowBehavior.IsEnabled="True">
    <TextBlock Text="Content"/>
</Grid>

TypewriterBehavior

Sequential character reveal animation for TextBlock controls. Ideal for terminal simulations, loading messages, or storytelling UI.

<TextBlock Text="System initialized... Ready."
           fx:TypewriterBehavior.IsEnabled="True"
           fx:TypewriterBehavior.Speed="0:0:0.05"/>

ScrollRevealBehavior

Automatically re-triggers entrance animations when an element enters the scroll viewport. Works in conjunction with RevealBehavior.

<ScrollViewer>
    <StackPanel>
        <Border fx:RevealBehavior.IsEnabled="True"
                fx:ScrollRevealBehavior.IsEnabled="True">
            <TextBlock Text="I reveal when you scroll to me!"/>
        </Border>
    </StackPanel>
</ScrollViewer>

Runtime Usage (C#)

All effects can be applied or modified at runtime using static helper methods:

using Flowery.Effects;

// Apply RevealBehavior to any UIElement
RevealBehavior.SetIsEnabled(myBorder, true);
RevealBehavior.SetDuration(myBorder, TimeSpan.FromMilliseconds(800));
RevealBehavior.SetDirection(myBorder, RevealDirection.Left);

// Manually trigger a reveal animation
RevealBehavior.TriggerReveal(myBorder);

// Apply Typewriter effect programmatically
TypewriterBehavior.SetIsEnabled(myTextBlock, true);
TypewriterBehavior.SetSpeed(myTextBlock, TimeSpan.FromMilliseconds(30));

// Apply ScrollReveal behavior
ScrollRevealBehavior.SetIsEnabled(myElement, true);

// Apply ScrambleHover to a TextBlock (default: RevealOnHover)
ScrambleHoverBehavior.SetIsEnabled(myTextBlock, true);
ScrambleHoverBehavior.SetScrambleChars(myTextBlock, "█▓▒░");

// Use ScrambleOnHover mode for decorative glitch effect
ScrambleHoverBehavior.SetMode(myTextBlock, ScrambleMode.ScrambleOnHover);

// Use SplitFlap style for airport departure board effect
ScrambleHoverBehavior.SetRevealStyle(myTextBlock, RevealStyle.SplitFlap);

// Trigger animation programmatically (for demos)
ScrambleHoverBehavior.TriggerScramble(myTextBlock);

// Apply WaveText to a TextBlock
WaveTextBehavior.SetIsEnabled(myTextBlock, true);
WaveTextBehavior.SetAmplitude(myTextBlock, 10);

// Apply CursorFollow to a Panel
CursorFollowBehavior.SetIsEnabled(myGrid, true);
CursorFollowBehavior.SetFollowerBrush(myGrid, new SolidColorBrush(Colors.Red));
CursorFollowBehavior.SetFollowerShape(myGrid, FollowerShape.Ring);

// Programmatically control cursor follower (for demos/automation)
CursorFollowBehavior.ShowFollower(myGrid);
CursorFollowBehavior.SetTargetPosition(myGrid, 100, 50); // Set target x,y
CursorFollowBehavior.HideFollower(myGrid);

Automation Example (Infinity Path)

// Animate cursor follower in a figure-8 pattern
private async Task AnimateInfinityPath(Grid panel, CancellationToken ct)
{
    double t = 0;
    while (!ct.IsCancellationRequested)
    {
        var w = panel.ActualWidth;
        var h = panel.ActualHeight;

        // Lemniscate of Bernoulli
        var sinT = Math.Sin(t);
        var cosT = Math.Cos(t);
        var denom = 1 + sinT * sinT;

        var x = (cosT / denom) * w / 3 + w / 2;
        var y = (sinT * cosT / denom) * h / 2 + h / 2;

        CursorFollowBehavior.SetTargetPosition(panel, x, y);

        t += 0.03;
        await Task.Delay(16, ct);
    }
}

Custom Animations

Applications can use native WinUI storyboards or Windows Composition for custom animations.

The public behavior methods in the Runtime Usage section control the built-in effects.

Native Windows Runtime

The effects run in the native Windows application.

They use UI-thread timers, WinUI storyboards, or Windows Composition, according to the effect.

UI changes use the WinUI dispatcher. The active solution targets Windows.

Future Enhancements

• ScrollableCardStack: 3D stacking effect with scale/blur/opacity (deferred, requires Composition API)

Credits

This library is inspired by smoothui by Eduardo López, a React/Tailwind/Framer Motion component library.