feat: Add festive visual effects (#2252)
<!-- CURSOR_SUMMARY --> > [!NOTE] > Introduces an effects system (fireworks, ghost, hearts, shamrocks, snow), a new `effect` action, and optional date-based loading effects, integrated into the card with docs, schema, editor, and tests. > > - **Effects System**: > - Add `EffectsController` and `advanced-camera-card-effects` host with lazy-loaded effect modules (`fireworks`, `ghost`, `hearts`, `shamrocks`, `snow`). > - New base effect component with fade-in/out; SCSS and z-index updates. > - **Actions**: > - New custom action `advanced_camera_card_action: effect` with `effect_action` (`start`|`stop`|`toggle`). > - Wire into `ActionFactory` and add `EffectAction` executor. > - **Card Integration**: > - Mount effects host in `advanced-camera-card` and expose `getEffectsControllerAPI()` via `CardController`. > - Loading component can trigger date-based effects (e.g., New Year fireworks) when enabled. > - **Configuration & Editor**: > - Add `performance.features.card_loading_effects` (default `true`) alongside `card_loading_indicator`. > - Update schemas, defaults, low-performance profile (disables effects), and editor toggles. > - **Docs & Examples**: > - Document `effect` action parameters and add menu example. > - Update performance docs with new option. > - **Localization & Tests**: > - Update i18n strings for new performance option. > - Add comprehensive tests for effects controller, action, factory, config defaults/profiles, and utilities. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit cffd4304fe3bd22340316f9cec53e341379b1756. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
This commit is contained in:
Dermot Duffy
@@ -0,0 +1,6 @@
|
||||
:host {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 1;
|
||||
transition: opacity 1.5s ease-in;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
@import './z-index.scss';
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
|
||||
pointer-events: none;
|
||||
z-index: #{$z-index-effect};
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
:host {
|
||||
position: absolute;
|
||||
left: var(--pos-x, 50%);
|
||||
top: var(--pos-y, 50%);
|
||||
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
|
||||
opacity: 0;
|
||||
animation: burst-appear 0.01s linear forwards;
|
||||
animation-delay: var(--delay, 0s);
|
||||
}
|
||||
|
||||
@keyframes burst-appear {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
:host {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
|
||||
will-change: transform, opacity;
|
||||
animation: explode var(--duration) ease-out forwards;
|
||||
animation-delay: var(--delay);
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.spark {
|
||||
font-size: var(--size, 4px);
|
||||
color: var(--color, #ffcc00);
|
||||
text-shadow:
|
||||
0 0 4px #fff,
|
||||
0 0 8px var(--color),
|
||||
0 0 16px var(--color),
|
||||
0 0 32px var(--color),
|
||||
0 0 48px var(--color);
|
||||
filter: brightness(1.3);
|
||||
}
|
||||
|
||||
@keyframes explode {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
55% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translate(var(--end-x), var(--end-y)) scale(0.3);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
:host {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity 1.5s ease-in;
|
||||
}
|
||||
|
||||
.ghost {
|
||||
font-size: 10em;
|
||||
color: #ffffff;
|
||||
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
|
||||
opacity: 0.5;
|
||||
filter: drop-shadow(0 0 20px #ffffff) drop-shadow(0 0 40px #e0e0e0)
|
||||
drop-shadow(0 0 60px #c0c0c0);
|
||||
animation: ghost-float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes ghost-float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
filter: drop-shadow(0 0 20px #ffffff) drop-shadow(0 0 40px #e0e0e0)
|
||||
drop-shadow(0 0 60px #c0c0c0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
filter: drop-shadow(0 0 30px #ffffff) drop-shadow(0 0 60px #e0e0e0)
|
||||
drop-shadow(0 0 90px #c0c0c0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
:host {
|
||||
position: absolute;
|
||||
|
||||
left: var(--start-x);
|
||||
top: var(--start-y);
|
||||
|
||||
font-size: var(--size, 1em);
|
||||
color: hsl(var(--hue, 340), var(--saturation, 80%), var(--lightness, 55%));
|
||||
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
|
||||
will-change: transform;
|
||||
animation: pulse var(--pulse-duration) ease-in-out infinite;
|
||||
animation-delay: var(--pulse-delay);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
15% {
|
||||
opacity: var(--max-opacity, 1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
85% {
|
||||
opacity: var(--max-opacity, 1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
.heart {
|
||||
position: absolute;
|
||||
|
||||
left: var(--start-x);
|
||||
top: var(--start-y);
|
||||
|
||||
font-size: var(--size, 1em);
|
||||
color: hsl(var(--hue, 340), var(--saturation, 80%), var(--lightness, 55%));
|
||||
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
|
||||
will-change: transform;
|
||||
animation: pulse var(--pulse-duration) ease-in-out infinite;
|
||||
animation-delay: var(--pulse-delay);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
15% {
|
||||
opacity: var(--max-opacity, 1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
85% {
|
||||
opacity: var(--max-opacity, 1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
:host {
|
||||
position: absolute;
|
||||
|
||||
left: var(--start-x);
|
||||
top: var(--start-y);
|
||||
|
||||
font-size: var(--size, 1em);
|
||||
|
||||
// Center the shamrock on its position.
|
||||
transform-origin: center center;
|
||||
translate: -50% -50%;
|
||||
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
|
||||
will-change: transform, opacity;
|
||||
animation: shamrock-pulse var(--pulse-duration) ease-in-out infinite;
|
||||
animation-delay: var(--pulse-delay);
|
||||
}
|
||||
|
||||
@keyframes shamrock-pulse {
|
||||
0% {
|
||||
scale: 0;
|
||||
rotate: -20deg;
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: var(--max-opacity, 1);
|
||||
}
|
||||
50% {
|
||||
scale: 1;
|
||||
rotate: 10deg;
|
||||
}
|
||||
80% {
|
||||
opacity: var(--max-opacity, 1);
|
||||
}
|
||||
100% {
|
||||
scale: 0;
|
||||
rotate: 25deg;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
.snowflake {
|
||||
position: absolute;
|
||||
|
||||
left: var(--start-x);
|
||||
|
||||
color: white;
|
||||
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
|
||||
will-change: transform;
|
||||
animation: fall var(--fall-duration) linear infinite;
|
||||
animation-delay: var(--fall-delay);
|
||||
}
|
||||
|
||||
@keyframes fall {
|
||||
0% {
|
||||
// Start above the card.
|
||||
top: -2em;
|
||||
|
||||
transform: translateX(0);
|
||||
|
||||
opacity: var(--max-opacity, 1);
|
||||
}
|
||||
25% {
|
||||
top: 25%;
|
||||
transform: translateX(calc(var(--end-x) - var(--start-x) + 8px));
|
||||
}
|
||||
50% {
|
||||
top: 50%;
|
||||
transform: translateX(calc(var(--end-x) - var(--start-x) - 10px));
|
||||
}
|
||||
75% {
|
||||
top: 75%;
|
||||
transform: translateX(calc(var(--end-x) - var(--start-x) + 20px));
|
||||
}
|
||||
90% {
|
||||
opacity: var(--max-opacity, 1);
|
||||
}
|
||||
100% {
|
||||
// 100% ensures snowflakes fall through the entire card height
|
||||
top: 100%;
|
||||
|
||||
transform: translateX(calc(var(--end-x) - var(--start-x)));
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
:host {
|
||||
position: absolute;
|
||||
|
||||
left: var(--start-x);
|
||||
|
||||
color: white;
|
||||
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
|
||||
will-change: transform;
|
||||
animation: fall var(--fall-duration) linear infinite;
|
||||
animation-delay: var(--fall-delay);
|
||||
}
|
||||
|
||||
@keyframes fall {
|
||||
0% {
|
||||
// Start above the card.
|
||||
top: -2em;
|
||||
|
||||
transform: translateX(0);
|
||||
|
||||
opacity: var(--max-opacity, 1);
|
||||
}
|
||||
25% {
|
||||
top: 25%;
|
||||
transform: translateX(calc(var(--end-x) - var(--start-x) + 8px));
|
||||
}
|
||||
50% {
|
||||
top: 50%;
|
||||
transform: translateX(calc(var(--end-x) - var(--start-x) - 10px));
|
||||
}
|
||||
75% {
|
||||
top: 75%;
|
||||
transform: translateX(calc(var(--end-x) - var(--start-x) + 20px));
|
||||
}
|
||||
90% {
|
||||
opacity: var(--max-opacity, 1);
|
||||
}
|
||||
100% {
|
||||
// 100% ensures snowflakes fall through the entire card height
|
||||
top: 100%;
|
||||
|
||||
transform: translateX(calc(var(--end-x) - var(--start-x)));
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -10,6 +10,7 @@
|
||||
// More-info dialog box has a z-index of 8, so everything meaningful needs to be
|
||||
// below that.
|
||||
|
||||
$z-index-effect: 7;
|
||||
$z-index-loading: 6;
|
||||
$z-index-submenu: 5;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user