---
metadata:
  - name: generator
    content: Diplodoc Platform v5.70.0
alternate:
  - https://divkit.tech/docs/en/concepts/extensions/shine.md
  - https://divkit.tech/docs/ru/concepts/extensions/shine.md
  - href: https://divkit.tech/docs/en/concepts/extensions/shine.md
    type: text/markdown
    title: Markdown version
  - href: https://divkit.tech/docs/en/llms.txt?revision=r22102947
    rel: describedby
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/en/llms.txt?revision=r22102947

# Shine effect for images

The `shine` extension adds an animated shine to the image in the [div-image](https://divkit.tech/docs/en/concepts/divs/2/div-image.md) element: a gradient band passes over the image. The extension is supported on Android and iOS.

{% cut "Example" %}

```json translate=no
{
  "type": "image",
  "image_url": "https://example.com/image.png",
  "width": {
    "type": "fixed",
    "value": 100
  },
  "height": {
    "type": "fixed",
    "value": 100
  },
  "extensions": [
    {
      "id": "shine",
      "params": {
        "colors": [
          "#00FFFFFF",
          "#FFFFFFFF",
          "#00FFFFFF"
        ],
        "locations": [
          0,
          0.5,
          1
        ],
        "angle": 45,
        "duration": 1000,
        "interval": 1000,
        "delay": 500,
        "cycle_count": 3,
        "on_cycle_start_actions": [
          {
            "log_id": "shine_cycle_started",
            "url": "div-action://set_variable?name=shine_cycles&value=@{shine_cycles+1}"
          }
        ]
      }
    }
  ]
}
```

In this example, the shine passes over the image three times, and the `shine_cycles` integer variable is incremented at the start of each pass.

{% endcut %}

## Parameters {#params}

All parameters are optional. The parameters, except `on_cycle_start_actions`, support expressions.

#|
||
**Parameters**
|
**Description**
||

||
`id`
|
Extension ID.
||

||
`is_enabled`
|
Enables the shine. If set to `false`, the image is displayed without the shine. Default: `true`.
||

||
`colors`
|
Array of gradient colors.
||

||
`locations`
|
Positions of the colors in the gradient: numbers from `0` to `1`, one for each color in `colors`.
||

||
`angle`
|
Gradient angle in degrees. Default: `45`.
||

||
`duration`
|
Duration of one shine pass in milliseconds.
||

||
`interval`
|
Pause between passes in milliseconds. Default: `0`.
||

||
`delay`
|
Delay before the first pass in milliseconds. Default: `0`.
||

||
`cycle_count`
|
The number of shine passes. The `0` value means infinite repetition. Default: `0`.
||

||
`on_cycle_start_actions`
|
Array of [actions](https://divkit.tech/docs/en/concepts/divs/2/div-action.md) that run at the start of each pass.
||
|#

Specify `colors` and `locations` together and with the same number of values: if the numbers differ, the shine isn't displayed. The default colors, color positions, and duration differ on Android and iOS, so specify these parameters explicitly.

## How it works {#behavior}

- The extension is applied only to the `div-image` element.
- The shine is visible only over the opaque areas of the image.

## Connection {#connect}

{% list tabs %}

- Android

  build.gradle

  ```groovy translate=no
  dependencies {
      implementation "com.yandex.div:div-shine:${versions.divkit}"
  }
  ```

  In the code:

  ```kotlin translate=no
  val divConfiguration = DivConfiguration.Builder(imageLoader)
      .extension(DivShineExtensionHandler())
      .build()
  ```

  Optional constructor parameters:

  - `logger`: Receives the errors of parsing the extension parameters.
  - `pauseShineObservable`: Lets the application pause and resume the shine animation.

- iOS

  ```swift translate=no
  DivKitComponents(
    ...
    extensionHandlers: [
      ShineExtensionHandler()
    ]
  )
  ```

{% endlist %}

<!-- source: en/_includes/index/troubleshooting.md -->
## Learn more {#troubleshooting}

You can discuss topics of interest in the DivKit user community in Telegram: [https://t.me/divkit_community_en](https://t.me/divkit_community_en).



[DivKit Repository](https://github.com/divkit/divkit)
<!-- endsource: en/_includes/index/troubleshooting.md -->