Skip to content

Commit b39ed37

Browse files
windows: calmer static backdrop + improved app icon
- Remove the animated background (drifting blobs + ripple pulses); keep the static glow blobs and cyan top-wash so the backdrop stays calm but with depth. - Replace the weak app icon (near-empty black tile with a tiny off-center ring) with a bolder, on-brand mark: a glowing cyan play-in-ring on a teal->black rounded tile, generated as a multi-resolution .ico (16-256px). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent 140556b commit b39ed37

3 files changed

Lines changed: 6 additions & 140 deletions

File tree

78.7 KB
Binary file not shown.

apps/windows/Cascade/MainWindow.xaml

Lines changed: 6 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -16,96 +16,15 @@
1616
<RowDefinition Height="*" />
1717
</Grid.RowDefinitions>
1818

19-
<!-- Drifting-blob storyboards (started in code-behind on Loaded). The
20-
soft radial blobs fading to transparent approximate the web's
21-
blur(60px); CompositeTransform translate/scale are composition-thread
22-
animations, so no EnableDependentAnimation needed. -->
2319
<Grid.Resources>
24-
<!-- Soft cyan ring (transparent core, glowing mid-radius, fading edge)
25-
used by every ripple pulse; shared since only each Ellipse's
26-
Opacity/scale is animated, never the brush itself. -->
27-
<RadialGradientBrush x:Key="RippleRingBrush">
28-
<GradientStop Color="#006EC9E2" Offset="0.0" />
29-
<GradientStop Color="#006EC9E2" Offset="0.42" />
30-
<GradientStop Color="#806EC9E2" Offset="0.60" />
31-
<GradientStop Color="#006EC9E2" Offset="0.80" />
32-
</RadialGradientBrush>
33-
34-
<Storyboard x:Key="DriftA" RepeatBehavior="Forever" AutoReverse="True">
35-
<DoubleAnimation Storyboard.TargetName="LayerATransform" Storyboard.TargetProperty="TranslateX"
36-
From="-70" To="30" Duration="0:0:14">
37-
<DoubleAnimation.EasingFunction><SineEase EasingMode="EaseInOut" /></DoubleAnimation.EasingFunction>
38-
</DoubleAnimation>
39-
<DoubleAnimation Storyboard.TargetName="LayerATransform" Storyboard.TargetProperty="TranslateY"
40-
From="-40" To="40" Duration="0:0:14">
41-
<DoubleAnimation.EasingFunction><SineEase EasingMode="EaseInOut" /></DoubleAnimation.EasingFunction>
42-
</DoubleAnimation>
43-
<DoubleAnimation Storyboard.TargetName="LayerATransform" Storyboard.TargetProperty="ScaleX"
44-
From="1" To="1.12" Duration="0:0:14" />
45-
<DoubleAnimation Storyboard.TargetName="LayerATransform" Storyboard.TargetProperty="ScaleY"
46-
From="1" To="1.12" Duration="0:0:14" />
47-
</Storyboard>
48-
<Storyboard x:Key="DriftB" RepeatBehavior="Forever" AutoReverse="True">
49-
<DoubleAnimation Storyboard.TargetName="LayerBTransform" Storyboard.TargetProperty="TranslateX"
50-
From="80" To="-20" Duration="0:0:18">
51-
<DoubleAnimation.EasingFunction><SineEase EasingMode="EaseInOut" /></DoubleAnimation.EasingFunction>
52-
</DoubleAnimation>
53-
<DoubleAnimation Storyboard.TargetName="LayerBTransform" Storyboard.TargetProperty="TranslateY"
54-
From="50" To="-30" Duration="0:0:18">
55-
<DoubleAnimation.EasingFunction><SineEase EasingMode="EaseInOut" /></DoubleAnimation.EasingFunction>
56-
</DoubleAnimation>
57-
<DoubleAnimation Storyboard.TargetName="LayerBTransform" Storyboard.TargetProperty="ScaleX"
58-
From="1" To="1.18" Duration="0:0:18" />
59-
<DoubleAnimation Storyboard.TargetName="LayerBTransform" Storyboard.TargetProperty="ScaleY"
60-
From="1" To="1.18" Duration="0:0:18" />
61-
</Storyboard>
62-
<Storyboard x:Key="DriftC" RepeatBehavior="Forever" AutoReverse="True">
63-
<DoubleAnimation Storyboard.TargetName="LayerCTransform" Storyboard.TargetProperty="TranslateY"
64-
From="120" To="-40" Duration="0:0:11">
65-
<DoubleAnimation.EasingFunction><SineEase EasingMode="EaseInOut" /></DoubleAnimation.EasingFunction>
66-
</DoubleAnimation>
67-
<DoubleAnimation Storyboard.TargetName="LayerCTransform" Storyboard.TargetProperty="ScaleX"
68-
From="1" To="1.22" Duration="0:0:11" />
69-
<DoubleAnimation Storyboard.TargetName="LayerCTransform" Storyboard.TargetProperty="ScaleY"
70-
From="1" To="1.22" Duration="0:0:11" />
71-
</Storyboard>
20+
<!-- Slow rotation for the play button's dashed outer ring. -->
7221
<Storyboard x:Key="RingSpin" RepeatBehavior="Forever">
7322
<DoubleAnimation Storyboard.TargetName="OuterRingRotation" Storyboard.TargetProperty="Angle"
7423
From="0" To="360" Duration="0:1:0" />
7524
</Storyboard>
76-
77-
<!-- Water-ripple pulses: each phase expands a soft ring out of the
78-
left + right glow blobs while fading it, on a 6s loop. The three
79-
phases are seeked to 0/2/4s in code-behind so a fresh ripple
80-
emanates every 2s. Scale/Opacity are composition-thread, so no
81-
EnableDependentAnimation is needed. -->
82-
<Storyboard x:Key="RippleP1" RepeatBehavior="Forever">
83-
<DoubleAnimation Storyboard.TargetName="RippleL1T" Storyboard.TargetProperty="ScaleX" From="0.25" To="1.5" Duration="0:0:18" />
84-
<DoubleAnimation Storyboard.TargetName="RippleL1T" Storyboard.TargetProperty="ScaleY" From="0.25" To="1.5" Duration="0:0:18" />
85-
<DoubleAnimation Storyboard.TargetName="RippleL1" Storyboard.TargetProperty="Opacity" From="0.55" To="0" Duration="0:0:18" />
86-
<DoubleAnimation Storyboard.TargetName="RippleR1T" Storyboard.TargetProperty="ScaleX" From="0.25" To="1.5" Duration="0:0:18" />
87-
<DoubleAnimation Storyboard.TargetName="RippleR1T" Storyboard.TargetProperty="ScaleY" From="0.25" To="1.5" Duration="0:0:18" />
88-
<DoubleAnimation Storyboard.TargetName="RippleR1" Storyboard.TargetProperty="Opacity" From="0.55" To="0" Duration="0:0:18" />
89-
</Storyboard>
90-
<Storyboard x:Key="RippleP2" RepeatBehavior="Forever">
91-
<DoubleAnimation Storyboard.TargetName="RippleL2T" Storyboard.TargetProperty="ScaleX" From="0.25" To="1.5" Duration="0:0:18" />
92-
<DoubleAnimation Storyboard.TargetName="RippleL2T" Storyboard.TargetProperty="ScaleY" From="0.25" To="1.5" Duration="0:0:18" />
93-
<DoubleAnimation Storyboard.TargetName="RippleL2" Storyboard.TargetProperty="Opacity" From="0.55" To="0" Duration="0:0:18" />
94-
<DoubleAnimation Storyboard.TargetName="RippleR2T" Storyboard.TargetProperty="ScaleX" From="0.25" To="1.5" Duration="0:0:18" />
95-
<DoubleAnimation Storyboard.TargetName="RippleR2T" Storyboard.TargetProperty="ScaleY" From="0.25" To="1.5" Duration="0:0:18" />
96-
<DoubleAnimation Storyboard.TargetName="RippleR2" Storyboard.TargetProperty="Opacity" From="0.55" To="0" Duration="0:0:18" />
97-
</Storyboard>
98-
<Storyboard x:Key="RippleP3" RepeatBehavior="Forever">
99-
<DoubleAnimation Storyboard.TargetName="RippleL3T" Storyboard.TargetProperty="ScaleX" From="0.25" To="1.5" Duration="0:0:18" />
100-
<DoubleAnimation Storyboard.TargetName="RippleL3T" Storyboard.TargetProperty="ScaleY" From="0.25" To="1.5" Duration="0:0:18" />
101-
<DoubleAnimation Storyboard.TargetName="RippleL3" Storyboard.TargetProperty="Opacity" From="0.55" To="0" Duration="0:0:18" />
102-
<DoubleAnimation Storyboard.TargetName="RippleR3T" Storyboard.TargetProperty="ScaleX" From="0.25" To="1.5" Duration="0:0:18" />
103-
<DoubleAnimation Storyboard.TargetName="RippleR3T" Storyboard.TargetProperty="ScaleY" From="0.25" To="1.5" Duration="0:0:18" />
104-
<DoubleAnimation Storyboard.TargetName="RippleR3" Storyboard.TargetProperty="Opacity" From="0.55" To="0" Duration="0:0:18" />
105-
</Storyboard>
10625
</Grid.Resources>
10726

108-
<!-- ============================================ animated waterfall backdrop -->
27+
<!-- ============================================ static waterfall backdrop -->
10928
<Grid x:Name="BackdropRoot" Grid.RowSpan="2" Opacity="0.55" IsHitTestVisible="False">
11029
<!-- Cyan top-glow wash (web: radial-gradient ellipse at 50% 0%). -->
11130
<Rectangle>
@@ -119,8 +38,7 @@
11938
<!-- Layer A: deep teal tint. -->
12039
<Ellipse x:Name="BackdropLayerA" Width="640" Height="640"
12140
HorizontalAlignment="Left" VerticalAlignment="Top"
122-
Margin="-120,-120,0,0" RenderTransformOrigin="0.5,0.5">
123-
<Ellipse.RenderTransform><CompositeTransform x:Name="LayerATransform" /></Ellipse.RenderTransform>
41+
Margin="-120,-120,0,0">
12442
<Ellipse.Fill>
12543
<RadialGradientBrush>
12644
<GradientStop Color="#FF0B3A4B" Offset="0" />
@@ -131,60 +49,25 @@
13149
<!-- Layer B: accent cyan. -->
13250
<Ellipse x:Name="BackdropLayerB" Width="560" Height="560"
13351
HorizontalAlignment="Right" VerticalAlignment="Center"
134-
Margin="0,0,-100,0" RenderTransformOrigin="0.5,0.5">
135-
<Ellipse.RenderTransform><CompositeTransform x:Name="LayerBTransform" /></Ellipse.RenderTransform>
52+
Margin="0,0,-100,0">
13653
<Ellipse.Fill>
13754
<RadialGradientBrush>
13855
<GradientStop Color="#596EC9E2" Offset="0" />
13956
<GradientStop Color="#006EC9E2" Offset="0.7" />
14057
</RadialGradientBrush>
14158
</Ellipse.Fill>
14259
</Ellipse>
143-
<!-- Layer C: pale highlight (drifts up from the bottom). -->
60+
<!-- Layer C: pale highlight. -->
14461
<Ellipse x:Name="BackdropLayerC" Width="520" Height="520"
14562
HorizontalAlignment="Center" VerticalAlignment="Bottom"
146-
Margin="0,0,0,-120" RenderTransformOrigin="0.5,0.5">
147-
<Ellipse.RenderTransform><CompositeTransform x:Name="LayerCTransform" /></Ellipse.RenderTransform>
63+
Margin="0,0,0,-120">
14864
<Ellipse.Fill>
14965
<RadialGradientBrush>
15066
<GradientStop Color="#2EB4EAF8" Offset="0" />
15167
<GradientStop Color="#00B4EAF8" Offset="0.7" />
15268
</RadialGradientBrush>
15369
</Ellipse.Fill>
15470
</Ellipse>
155-
156-
<!-- Ripple pulses emanating from the left + right glow blobs. Three
157-
phase-staggered rings per side (driven by RippleP1/2/3). -->
158-
<Ellipse x:Name="RippleL1" Width="380" Height="380" Opacity="0" IsHitTestVisible="False"
159-
HorizontalAlignment="Left" VerticalAlignment="Center" Margin="-60,0,0,0"
160-
RenderTransformOrigin="0.5,0.5" Fill="{StaticResource RippleRingBrush}">
161-
<Ellipse.RenderTransform><CompositeTransform x:Name="RippleL1T" ScaleX="0.25" ScaleY="0.25" /></Ellipse.RenderTransform>
162-
</Ellipse>
163-
<Ellipse x:Name="RippleL2" Width="380" Height="380" Opacity="0" IsHitTestVisible="False"
164-
HorizontalAlignment="Left" VerticalAlignment="Center" Margin="-60,0,0,0"
165-
RenderTransformOrigin="0.5,0.5" Fill="{StaticResource RippleRingBrush}">
166-
<Ellipse.RenderTransform><CompositeTransform x:Name="RippleL2T" ScaleX="0.25" ScaleY="0.25" /></Ellipse.RenderTransform>
167-
</Ellipse>
168-
<Ellipse x:Name="RippleL3" Width="380" Height="380" Opacity="0" IsHitTestVisible="False"
169-
HorizontalAlignment="Left" VerticalAlignment="Center" Margin="-60,0,0,0"
170-
RenderTransformOrigin="0.5,0.5" Fill="{StaticResource RippleRingBrush}">
171-
<Ellipse.RenderTransform><CompositeTransform x:Name="RippleL3T" ScaleX="0.25" ScaleY="0.25" /></Ellipse.RenderTransform>
172-
</Ellipse>
173-
<Ellipse x:Name="RippleR1" Width="380" Height="380" Opacity="0" IsHitTestVisible="False"
174-
HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,-60,0"
175-
RenderTransformOrigin="0.5,0.5" Fill="{StaticResource RippleRingBrush}">
176-
<Ellipse.RenderTransform><CompositeTransform x:Name="RippleR1T" ScaleX="0.25" ScaleY="0.25" /></Ellipse.RenderTransform>
177-
</Ellipse>
178-
<Ellipse x:Name="RippleR2" Width="380" Height="380" Opacity="0" IsHitTestVisible="False"
179-
HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,-60,0"
180-
RenderTransformOrigin="0.5,0.5" Fill="{StaticResource RippleRingBrush}">
181-
<Ellipse.RenderTransform><CompositeTransform x:Name="RippleR2T" ScaleX="0.25" ScaleY="0.25" /></Ellipse.RenderTransform>
182-
</Ellipse>
183-
<Ellipse x:Name="RippleR3" Width="380" Height="380" Opacity="0" IsHitTestVisible="False"
184-
HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,-60,0"
185-
RenderTransformOrigin="0.5,0.5" Fill="{StaticResource RippleRingBrush}">
186-
<Ellipse.RenderTransform><CompositeTransform x:Name="RippleR3T" ScaleX="0.25" ScaleY="0.25" /></Ellipse.RenderTransform>
187-
</Ellipse>
18871
</Grid>
18972

19073
<!-- Extended-titlebar drag region (transparent; SetTitleBar in code-behind). -->

apps/windows/Cascade/MainWindow.xaml.cs

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -75,15 +75,7 @@ private Microsoft.UI.Windowing.AppWindow GetAppWindow()
7575
/// </summary>
7676
private void OnRootLoaded(object sender, RoutedEventArgs e)
7777
{
78-
BeginLoop("DriftA");
79-
BeginLoop("DriftB");
80-
BeginLoop("DriftC");
8178
BeginLoop("RingSpin");
82-
// Three identical 18s ripple loops, seeked 6s apart so a fresh ring leaves
83-
// each blob every 6s and expands slowly.
84-
BeginRipple("RippleP1", 0);
85-
BeginRipple("RippleP2", 6);
86-
BeginRipple("RippleP3", 12);
8779
UpdateAmbientVisuals();
8880
}
8981

@@ -92,15 +84,6 @@ private void BeginLoop(string key)
9284
if (RootGrid.Resources[key] is Storyboard sb) sb.Begin();
9385
}
9486

95-
private void BeginRipple(string key, double offsetSeconds)
96-
{
97-
if (RootGrid.Resources[key] is Storyboard sb)
98-
{
99-
sb.Begin();
100-
sb.Seek(TimeSpan.FromSeconds(offsetSeconds));
101-
}
102-
}
103-
10487
private void OnViewModelPropertyChanged(object? sender, PropertyChangedEventArgs e)
10588
{
10689
// Snapshot is swapped wholesale on every core update; repaint the ambient

0 commit comments

Comments
 (0)