Dermot Duffy
3279481b0e
<!-- 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 -->
49 lines
905 B
SCSS
49 lines
905 B
SCSS
.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;
|
|
}
|
|
}
|