open-index/open-npm huggingface dataset:
npm package: @nimbl/site-castpromo
Description: ## Shimmer Effect System
Latest version: 0.0.1

# CastPromo

## Shimmer Effect System

The application uses a standardized shimmer effect system for loading states, controlled through CSS custom properties with the `nimbl-sys` prefix. This system ensures consistent loading animations across all components.

### Global Variables

```css
:root {
  /* Colors */
  --nimbl-sys-shimmer-color-start: var(--md-sys-color-surface, transparent);
  --nimbl-sys-shimmer-color-middle: var(
    --md-sys-color-surface-variant,
    #e0e0e0
  );
  --nimbl-sys-shimmer-color-end: var(
    --nimbl-sys-shimmer-color-start,
    transparent
  );
  --nimbl-sys-shimmer-base-color: var(
    --md-sys-color-surface-container,
    #f5f5f5
  );
  --nimbl-sys-shimmer-item-color: var(--md-sys-color-outline, #e0e0e0);

  /* Animation */
  --nimbl-sys-shimmer-duration: 1.2s;
  --nimbl-sys-shimmer-timing: linear;
  --nimbl-sys-shimmer-iteration: infinite;
  --nimbl-sys-shimmer-background-size: 250% 100%;
}
```

### Fallback Chain

The shimmer system follows a three-level fallback chain:

1. `nimbl-sys` variables (if defined)
2. Material Design `md-sys` variables (if nimbl-sys not defined)
3. Hardcoded values (if neither defined)

### Components Using Shimmer

- `episode-item`: Loading state for episode cards
- `podcast-result-item`: Loading state for podcast search results
- `lazy-image`: Loading state for images

### Customization

To override shimmer effects globally, set the `nimbl-sys` variables in your CSS. For example:

```css
:root {
  --nimbl-sys-shimmer-color-middle: #your-color;
  --nimbl-sys-shimmer-duration: 2s;
}
```

The shimmer animation uses background-position for consistent velocity across different element widths.