Overview

A collection of pluggable visual effects for Avalonia controls (namespace: Flowery.Effects), designed for cross-platform compatibility including Browser/WASM.

Installation

Add the namespace to your AXAML:

xmlns:fx="clr-namespace:Flowery.Effects;assembly=Flowery.NET"

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.

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

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

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

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 Visual
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(myPanel, true);
CursorFollowBehavior.SetFollowerBrush(myPanel, Brushes.Red);
CursorFollowBehavior.SetFollowerShape(myPanel, FollowerShape.Ring);

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

Automation Example (Infinity Path)

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

        // 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);
    }
}

AnimationHelper

Core utility for WASM-compatible animations. Use this for custom effects:

using Flowery.Effects;

// Animate a single value
await AnimationHelper.AnimateAsync(
    value => element.Opacity = value,
    from: 0.0,
    to: 1.0,
    duration: TimeSpan.FromMilliseconds(500),
    easing: new CubicEaseOut());

// Animate with progress callback (t = 0 to 1, eased)
await AnimationHelper.AnimateAsync(
    t =>
    {
        element.Opacity = t;
        transform.X = AnimationHelper.Lerp(startX, endX, t);
    },
    duration: TimeSpan.FromMilliseconds(500),
    easing: new CubicEaseInOut());

Cross-Platform Compatibility

All effects use manual Task.Delay + Dispatcher.UIThread interpolation instead of Avalonia's declarative Animation keyframes. This pattern ensures consistent behavior across:

• ✅ Windows / macOS / Linux (Desktop)
• ✅ Browser / WebAssembly
• ✅ iOS / Android

The Pattern

// Standard Avalonia Animation - may have WASM issues
var animation = new Animation { Duration = duration, ... };
await animation.RunAsync(target);

// WASM-compatible pattern (used by Flowery.Effects)
for (int i = 0; i <= steps; i++)
{
    var t = easing.Ease((double)i / steps);
    await Dispatcher.UIThread.InvokeAsync(() => ApplyValue(t));
    if (i < steps) await Task.Delay(stepDuration, ct);
}

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.