Skip to content

Add Bmotion tool (#12447) #12448

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
msynk wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

Add Bmotion tool (#12447) #12448

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ee041c4
add Bmotion tool #12447
msynk Jun 13, 2026
a812a9f
code formatting
msynk Jun 13, 2026
e79d03a
resolve review comments
msynk Jun 14, 2026
4ae6e2d
reolve local review findings
msynk Jun 14, 2026
e7c9a7a
add missing code snippets
msynk Jun 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions src/Bmotion/Bit.Bmotion.Demos/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
26 changes: 26 additions & 0 deletions src/Bmotion/Bit.Bmotion.Demos/Bit.Bmotion.Demos.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

<PropertyGroup>
<TargetFramework>net10.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
<NoDefaultLaunchSettingsFile>true</NoDefaultLaunchSettingsFile>
<!--
Disable static web asset fingerprinting for this dev/sample app so the running
dev server and the browser's cached boot manifest can't drift and trigger SRI
integrity 404s on fingerprinted _framework assets.
-->
<WasmFingerprintAssets>false</WasmFingerprintAssets>
<StaticWebAssetFingerprintingEnabled>false</StaticWebAssetFingerprintingEnabled>
</PropertyGroup>

<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.8" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.8" PrivateAssets="all" />
</ItemGroup>

<ItemGroup>
<ProjectReference Include="..\Bit.Bmotion\Bit.Bmotion.csproj" />
</ItemGroup>

</Project>
19 changes: 19 additions & 0 deletions src/Bmotion/Bit.Bmotion.Demos/Layout/MainLayout.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
@inherits LayoutComponentBase

<div class="bm-nav">
<span class="logo">Bmotion</span>
<NavLink href="" Match="NavLinkMatch.All">Home</NavLink>
<NavLink href="basic">Basics</NavLink>
<NavLink href="springs">Springs</NavLink>
<NavLink href="gestures">Gestures</NavLink>
<NavLink href="variants">Variants</NavLink>
<NavLink href="keyframes">Keyframes</NavLink>
<NavLink href="presence">AnimatePresence</NavLink>
<NavLink href="drag">Drag</NavLink>
<NavLink href="scroll">Scroll</NavLink>
<NavLink href="layout">Layout</NavLink>
</div>

<div class="bm-page">
@Body
</div>
65 changes: 65 additions & 0 deletions src/Bmotion/Bit.Bmotion.Demos/Pages/AnimatePresencePage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
@page "/presence"

<div class="demo-section">
<h2>AnimatePresence</h2>
<p>
Wrap conditional content in <strong>AnimatePresence</strong>. When
<c>IsPresent</c> becomes <c>false</c> the children play their <c>Exit</c>
animation before being removed from the DOM.
</p>

<div class="demo-row">
<div class="demo-card" style="min-height:200px; position:relative; overflow:hidden;">
<AnimatePresence IsPresent="@_visible">
<Motion Tag="div"
Class="box"
Initial="@(new AnimationProps { Opacity = 0, Y = 40, Scale = 0.8 })"
Animate="@(new AnimationProps { Opacity = 1, Y = 0, Scale = 1 })"
Exit="@(new AnimationProps { Opacity = 0, Y = -40, Scale = 0.8 })"
Transition="@TransitionConfig.Spring(stiffness:220, damping:18)" />
</AnimatePresence>
</div>
</div>

<button class="btn-bm" style="margin-top:1rem" @onclick="@(() => _visible = !_visible)">
@(_visible ? "Remove" : "Add")
</button>
</div>

<div class="demo-section">
<h2>List Items</h2>
<p>Add and remove items from a list with staggered enter/exit animations.</p>

<div class="demo-row">
<div class="demo-card" style="flex-direction:column;gap:.5rem;align-items:stretch;width:100%;min-width:280px;">
@foreach (var item in _items)
{
<AnimatePresence IsPresent="true" @key="item.Id">
<Motion Tag="div"
Style="display:flex;justify-content:space-between;align-items:center;background:rgba(108,71,255,.12);border:1px solid rgba(108,71,255,.25);border-radius:8px;padding:.6rem 1rem;"
Initial="@(new AnimationProps { Opacity = 0, X = -30 })"
Animate="@(new AnimationProps { Opacity = 1, X = 0 })"
Exit="@(new AnimationProps { Opacity = 0, X = 30 })"
Transition="@TransitionConfig.Spring(stiffness:300, damping:25)">
<span>@item.Label</span>
<button style="background:none;border:none;color:#ff4785;cursor:pointer;font-size:1.1rem"
@onclick="@(() => RemoveItem(item.Id))">✕</button>
</Motion>
</AnimatePresence>
}
Comment on lines +37 to +51

@coderabbitai coderabbitai Bot Jun 14, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

List item exit animation is bypassed by per-item AnimatePresence usage.

On Line 37, each item uses <AnimatePresence IsPresent="true">, so removed items are dropped from the loop before IsPresent can transition to false. This prevents the intended exit lifecycle for list removals. Use a single parent AnimatePresence around the collection and key each Motion item, or keep a presence flag per item and flip it before removal.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/Bmotion/Bit.Bmotion.Demos/Pages/AnimatePresencePage.razor` around lines
35 - 49, The AnimatePresence component with IsPresent="true" is currently placed
inside the foreach loop wrapping each individual item. When RemoveItem is
called, the item is removed from the _items collection before IsPresent can
transition to false, preventing the exit animation from playing. Move the
AnimatePresence wrapper outside the foreach loop to wrap the entire collection,
and ensure each Motion component has a unique `@key` attribute. Alternatively,
maintain a presence flag for each item in your data model and set it to false
before removing the item from the collection, allowing the exit animation to
complete before the item is dropped from the loop.

</div>
</div>

<button class="btn-bm" style="margin-top:1rem" @onclick="AddItem">Add item</button>
</div>

@code {
private bool _visible = true;
private int _nextId = 4;

private record Item(int Id, string Label);
private List<Item> _items = [new(1,"Item One"), new(2,"Item Two"), new(3,"Item Three")];

void AddItem() => _items.Add(new(_nextId++, $"Item {_nextId - 1}"));
void RemoveItem(int id) => _items.RemoveAll(i => i.Id == id);
}
57 changes: 57 additions & 0 deletions src/Bmotion/Bit.Bmotion.Demos/Pages/BasicAnimations.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
@page "/basic"

<div class="demo-section">
<h2>Basic Animations</h2>
<p>
Use <strong>Initial</strong> to set the starting state and <strong>Animate</strong>
for the target. Each property transitions automatically on mount and whenever
<c>Animate</c> changes.
</p>

<div class="demo-row">
<div class="demo-card">
<Motion Tag="div"
Class="box"
Initial="@(new AnimationProps { Opacity = 0, X = -60 })"
Animate="@(new AnimationProps { Opacity = 1, X = 0 })"
Transition="@(new TransitionConfig { Duration = 0.6, Ease = Easing.BackOut })" />
</div>
<div class="demo-card">
<Motion Tag="div"
Class="box"
Initial="@(new AnimationProps { Scale = 0 })"
Animate="@(_toggled ? new AnimationProps { Scale = 1.3, Rotate = 45, BackgroundColor = "#ff4785" }
: new AnimationProps { Scale = 1, Rotate = 0, BackgroundColor = "#6c47ff" })"
Transition="@(new TransitionConfig { Duration = 0.4 })"
OnTap="@(() => _toggled = !_toggled)" />
</div>
</div>

<button class="btn-bm" style="margin-top:1rem" @onclick="@(() => _toggled = !_toggled)">
Toggle animate
</button>
</div>

<div class="demo-section">
<h2>CSS Property Animations</h2>
<p>Animate any CSS property - colors, border-radius, box-shadow, and more.</p>
<div class="demo-row">
<div class="demo-card">
<Motion Tag="div"
Class="box"
Animate="@(_rounded
? new AnimationProps { BorderRadius = "50%", BackgroundColor = "#ff4785", Scale = 1.1 }
: new AnimationProps { BorderRadius = "10px", BackgroundColor = "#6c47ff", Scale = 1 })"
Transition="@(new TransitionConfig { Duration = 0.5, Ease = Easing.EaseInOut })"
OnTap="@(() => _rounded = !_rounded)" />
</div>
</div>
<button class="btn-bm" style="margin-top:1rem" @onclick="@(() => _rounded = !_rounded)">
Toggle shape
</button>
</div>

@code {
private bool _toggled;
private bool _rounded;
}
65 changes: 65 additions & 0 deletions src/Bmotion/Bit.Bmotion.Demos/Pages/DragPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
@page "/drag"

<div class="demo-section">
<h2>Drag</h2>
<p>
Enable drag on any axis with <strong>Drag="true"</strong>.
Add <strong>DragOptions</strong> to constrain movement, tune elasticity, and momentum.
</p>

<div class="demo-row">
<div class="demo-card" style="position:relative;overflow:hidden;height:200px;">
<Motion Tag="div"
Class="box"
Style="position:absolute;top:50%;left:50%;margin:-40px 0 0 -40px;cursor:grab;"
Animate="@(new AnimationProps { Scale = 1 })"
WhileDrag="@(new AnimationProps { Scale = 1.1, BoxShadow = "0 15px 35px rgba(0,0,0,.5)" })"
WhileHover="@(new AnimationProps { Scale = 1.05 })"
Drag="true"
DragOptions="@(new DragOptions { Elastic = 0.5, Momentum = true })"
Transition="@TransitionConfig.Spring(stiffness:200, damping:20)" />
</div>

<div class="demo-card" style="position:relative;overflow:hidden;height:200px;">
<p style="position:absolute;top:.5rem;left:50%;transform:translateX(-50%);font-size:.75rem;color:#888;white-space:nowrap">
X-axis only + constraints
</p>
<Motion Tag="div"
Class="box box-sm"
Style="position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;"
Drag="true"
DragOptions="@(new DragOptions
{
Axis = DragAxis.X,
Constraints = DragConstraints.Horizontal(-120, 120),
Elastic = 0.3
})"
WhileDrag="@(new AnimationProps { Scale = 1.15 })" />
</div>
</div>
</div>

<div class="demo-section">
<h2>Drag Events</h2>
<p>Listen to <c>OnDragStart</c>, <c>OnDrag</c>, <c>OnDragEnd</c> for real-time position feedback.</p>
<div class="demo-row">
<div class="demo-card" style="flex-direction:column;gap:1rem;position:relative;overflow:hidden;height:220px;">
<Motion Tag="div"
Class="box box-sm"
Style="cursor:grab"
Drag="true"
OnDrag="@HandleDrag"
OnDragEnd="@HandleDragEnd" />
<div style="position:absolute;bottom:.75rem;left:50%;transform:translateX(-50%);font-size:.78rem;color:#888;white-space:nowrap">
@_dragInfo
</div>
</div>
</div>
</div>

@code {
private string _dragInfo = "Drag the box";

void HandleDrag() => _dragInfo = "Dragging…";
void HandleDragEnd() => _dragInfo = "Released";
}
79 changes: 79 additions & 0 deletions src/Bmotion/Bit.Bmotion.Demos/Pages/Gestures.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
@page "/gestures"

<div class="demo-section">
<h2>Hover &amp; Tap</h2>
<p>
<strong>WhileHover</strong> and <strong>WhileTap</strong> overlay animation states
on top of the base <c>Animate</c> state. They automatically revert on pointer-up / leave.
</p>
<div class="demo-row">
<div class="demo-card">
<Motion Tag="div"
Class="box"
Animate="@(new AnimationProps { Scale = 1 })"
WhileHover="@(new AnimationProps { Scale = 1.15, Y = -6, BoxShadow = "0 20px 40px rgba(108,71,255,.5)" })"
WhileTap="@(new AnimationProps { Scale = 0.92 })"
Transition="@TransitionConfig.Spring(stiffness:400, damping:25)" />
</div>

<div class="demo-card">
<Motion Tag="button"
Class="btn-bm"
Animate="@(new AnimationProps { Scale = 1 })"
WhileHover="@(new AnimationProps { Scale = 1.07, BackgroundColor = "#8a66ff" })"
WhileTap="@(new AnimationProps { Scale = 0.95 })"
Transition="@(new TransitionConfig { Duration = 0.15 })">
Animated Button
</Motion>
</div>
</div>
</div>

<div class="demo-section">
<h2>Focus</h2>
<p><strong>WhileFocus</strong> plays while an element or its descendants are focused.</p>
<div class="demo-row">
<div class="demo-card">
<Motion Tag="input"
Style="background:#1e1e2e;border:2px solid #333;color:#eee;border-radius:8px;padding:.5rem 1rem;outline:none;width:240px"
Animate="@(new AnimationProps { Scale = 1 })"
WhileFocus="@(new AnimationProps { Scale = 1.03, BorderColor = "#6c47ff" })"
Transition="@(new TransitionConfig { Duration = 0.2 })"
AdditionalAttributes="@(new Dictionary<string,object>{ ["placeholder"] = "Click to focus…", ["type"] = "text" })" />
</div>
</div>
</div>

<div class="demo-section">
<h2>Events</h2>
<p>Listen to gesture callbacks: <c>OnHoverStart</c>, <c>OnTap</c>, <c>OnTapCancel</c>, etc.</p>
<div class="demo-row">
<div class="demo-card" style="flex-direction:column;gap:1rem;">
<Motion Tag="div"
Class="box"
WhileHover="@(new AnimationProps { Scale = 1.1 })"
WhileTap="@(new AnimationProps { Scale = 0.9 })"
OnHoverStart="@(() => AddEvent("HoverStart"))"
OnHoverEnd="@(() => AddEvent("HoverEnd"))"
OnTapStart="@(() => AddEvent("TapStart"))"
OnTap="@(() => AddEvent("Tap"))"
OnTapCancel="@(() => AddEvent("TapCancel"))" />
<div style="font-size:.8rem;color:#888;max-height:120px;overflow:auto;">
@foreach (var e in _events.TakeLast(8).Reverse())
{
<div>@e</div>
}
</div>
</div>
</div>
</div>

@code {
private readonly List<string> _events = new();

void AddEvent(string name)
{
_events.Add($"[{DateTime.Now:HH:mm:ss.ff}] {name}");
StateHasChanged();
}
}
64 changes: 64 additions & 0 deletions src/Bmotion/Bit.Bmotion.Demos/Pages/Home.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
@page "/"

<div class="page-hero">
<Motion Tag="h1"
Initial="@(new AnimationProps { Opacity = 0, Y = 30 })"
Animate="@(new AnimationProps { Opacity = 1, Y = 0 })"
Transition="@TransitionConfig.Spring(stiffness:80, damping:15)">
Bmotion
</Motion>

<Motion Tag="p"
Initial="@(new AnimationProps { Opacity = 0, Y = 20 })"
Animate="@(new AnimationProps { Opacity = 1, Y = 0 })"
Transition="@(new TransitionConfig { Type = TransitionType.Tween, Duration = 0.6, Delay = 0.2 })">
A Blazor-native animation library inspired by Framer Motion.
Springs, gestures, layout animations, variants &mdash; zero external dependencies.
</Motion>

<Motion Tag="div"
Class="badge-list"
Initial="@(new AnimationProps { Opacity = 0, Y = 15 })"
Animate="@(new AnimationProps { Opacity = 1, Y = 0 })"
Transition="@(new TransitionConfig { Duration = 0.5, Delay = 0.4 })">
@foreach (var f in _features)
{
<span class="badge">@f</span>
}
</Motion>
</div>

<div class="demo-section">
<h2>Quick start</h2>
<div class="demo-row">
<div class="demo-card">
<Motion Tag="div"
Class="box"
Initial="@(new AnimationProps { Scale = 0, Opacity = 0 })"
Animate="@(new AnimationProps { Scale = 1, Opacity = 1 })"
WhileHover="@(new AnimationProps { Scale = 1.15, Rotate = 5 })"
WhileTap="@(new AnimationProps { Scale = 0.9 })"
Transition="@TransitionConfig.Spring(stiffness:300, damping:20)" />
</div>

<div class="code-block">@_quickStart</div>
</div>
</div>

@code {
private readonly string[] _features =
[
"Spring physics", "Tween", "Inertia", "Keyframes",
"Gestures", "Drag", "AnimatePresence", "Variants",
"whileInView", "Layout FLIP", "MotionValue", "Scroll tracking",
".NET 8+", "Zero JS deps"
];

private const string _quickStart =
"<Motion Tag=div\n" +
" Initial=(new AnimationProps { Scale=0, Opacity=0 })\n" +
" Animate=(new AnimationProps { Scale=1, Opacity=1 })\n" +
" WhileHover=(new AnimationProps { Scale=1.15, Rotate=5 })\n" +
" WhileTap=(new AnimationProps { Scale=0.9 })\n" +
" Transition=TransitionConfig.Spring(300, 20) />";
}
Loading