> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ducky.wiki/llms.txt
> Use this file to discover all available pages before exploring further.

# Now Playing Card

> Displays the current song and album art in a card format

### Preview

<Frame
  caption={`Now Playing Card Overlay | Default Settings

https://&lt;you&gt;.spoofify.live/overlays/now-playing`}
>
  <img src="https://mintcdn.com/ducky-c8b7b49a/EoBkUv6cP6f7HIey/images/spoofify_nowplaying_card.png?fit=max&auto=format&n=EoBkUv6cP6f7HIey&q=85&s=bc6b0ad3b95f7703d7aac7dbb5731dcc" width="750" height="191" data-path="images/spoofify_nowplaying_card.png" />
</Frame>

<Warning>
  Anyone using Spoofify hosted through Ducky may fully customize the Now Playing Card by request. The design may vary from user to user.
</Warning>

## Browser Source URL

```url theme={null}
https://<you>.spoofify.live/overlays/now-playing
```

<ResponseField name="you" type="Your Spoofify Subdomain" required />

#### Browser Source Dimensions

<ResponseField name="width" type="800" required />

<ResponseField name="height" type="200" required />

### Customization

Customization options can be found on the Spoofify dashboard. Head to the home page and click "Dashboard" at the top, or navigate to the url below.

```url theme={null}
https://<you>.spoofify.live/dashboard
```

<ResponseField name="you" type="Your Spoofify Subdomain" required />

#### Customization Options

<ResponseField name="Background Mode" type="Gradient | Solid" default="Gradient">
  Whether the background is one solid color or a gradient.
</ResponseField>

<ResponseField name="Animation Style" type="Slide | Flip | Turn" default="Slide">
  Whether the background is one solid color or a gradient.
</ResponseField>

<ResponseField name="Show Album" type="boolean" default="true">
  Show or hide the album name
</ResponseField>

<ResponseField name="Border Radius" type="number" default={4} post={["min 0", "max 40"]}>
  Corner roundness, in pixels.
</ResponseField>

<ResponseField name="Border Width" type="number" default={4} post={["min 0", "max 10"]}>
  Border thickness, in pixels.
</ResponseField>

<ResponseField name="Background Color 1" type="HEX Code" default="#9055a1">
  <Frame caption="Default Background Color 1">
    <Color variant="compact">
      <Color.Item value="#9055a1b3" />
    </Color>
  </Frame>

  **Gradient**: The first color of the gradient

  **Solid**: The solid background color
</ResponseField>

<ResponseField name="Background Color 2" type="HEX Code" default="#27132c">
  <Frame caption="Default Background Color 2">
    <Color variant="compact">
      <Color.Item value="#27132cb3" />
    </Color>
  </Frame>

  **Gradient**: The second color of the gradient

  **Solid**: Not used
</ResponseField>

<ResponseField name="Border Color" type="HEX Code" default="#27132c">
  <Frame caption="Default Border Color">
    <Color variant="compact">
      <Color.Item value="#27132c" />
    </Color>
  </Frame>

  The color of the border.
</ResponseField>

<ResponseField name="Accent Text Color" type="HEX Code" default="#e7aaff">
  <Frame caption="Default Accent Text Color">
    <Color variant="compact">
      <Color.Item value="#e7aaff" />
    </Color>
  </Frame>

  The color of the "Now Playing" and album texts.
</ResponseField>

<ResponseField name="Shadow Color" type="HEX Code" default="#561269">
  <Frame caption="Default Shadow Color">
    <Color variant="compact">
      <Color.Item value="#561269b9" />
    </Color>
  </Frame>

  The color of the shadow behind the album art.
</ResponseField>

### Customization Examples

<Expandable title="Ducky Theme">
  <Frame
    caption={`Theme: "Ducky" | [Raw JSON](https://files.ducky.wiki/share/spoofify_presets/duckytheme.json)

`}
  >
    <img src="https://mintcdn.com/ducky-c8b7b49a/eF_nWx_kxkw6PbT3/images/spoofify_examples/ducky.png?fit=max&auto=format&n=eF_nWx_kxkw6PbT3&q=85&s=999adb4ad9a7618f20dfa4bd9ada87b0" width="570" height="190" data-path="images/spoofify_examples/ducky.png" />
  </Frame>

  <Frame>
    <Column>
      <Color variant="compact">
        <Color.Row>
          <Color.Item value="#dfc050" name="BG 1" />

          <Color.Item value="#f2cd51" name="BG 2" />
        </Color.Row>

        <Color.Row>
          <Color.Item value="#2E1200" name="SHADOW" />

          <Color.Item value="#d3ae19" name="ACC TEXT" />

          <Color.Item value="#2E1200" name="BORDER" />
        </Color.Row>
      </Color>

      <br />

      <hr />

      <ResponseField name="Background Mode" type="Gradient" />

      <ResponseField name="Border Width" type="4px" post={["DEFAULT"]} />

      <ResponseField name="Border Radius" type="16px" />

      <ResponseField name="Show Album?" type="Yes" />
    </Column>
  </Frame>
</Expandable>

<Expandable title="Green Theme">
  <Frame
    caption={`Theme: "Green" | [Raw JSON](https://files.ducky.wiki/share/spoofify_presets/green.json)

`}
  >
    <img src="https://mintcdn.com/ducky-c8b7b49a/eF_nWx_kxkw6PbT3/images/spoofify_examples/green.png?fit=max&auto=format&n=eF_nWx_kxkw6PbT3&q=85&s=083904d50684c3686da38621717c87a8" width="705" height="190" data-path="images/spoofify_examples/green.png" />
  </Frame>

  <Frame>
    <Column>
      <Color variant="compact">
        <Color.Row>
          <Color.Item value="#6ca155" name="BACKGROUND" />

          <Color.Item value="#186117" name="SHADOW" />

          <Color.Item value="#54ab49" name="ACC TEXT" />

          <Color.Item value="#083c07" name="BORDER" />
        </Color.Row>
      </Color>

      <br />

      <hr />

      <ResponseField name="Background Mode" type="Solid" />

      <ResponseField name="Border Width" type="4px" post={["DEFAULT"]} />

      <ResponseField name="Border Radius" type="40px" post={["MAX"]} />

      <ResponseField name="Show Album?" type="No" />
    </Column>
  </Frame>
</Expandable>

<Expandable title="TikTok Theme">
  <Frame
    caption={`Theme: "TikTok" | [Raw JSON](https://files.ducky.wiki/share/spoofify_presets/tiktok.json)

`}
  >
    <img src="https://mintcdn.com/ducky-c8b7b49a/eF_nWx_kxkw6PbT3/images/spoofify_examples/tiktok.png?fit=max&auto=format&n=eF_nWx_kxkw6PbT3&q=85&s=428693b82d6b09138eeb6ab6e8978b60" width="705" height="190" data-path="images/spoofify_examples/tiktok.png" />
  </Frame>

  <Frame>
    <Column>
      <Color variant="compact">
        <Color.Row>
          <Color.Item value="#B31543" name="BG 1" />

          <Color.Item value="#060005" name="BG 2" />
        </Color.Row>

        <Color.Row>
          <Color.Item value="#54051A" name="SHADOW" />

          <Color.Item value="#6cb2af" name="ACC TEXT" />

          <Color.Item value="#F6004D" name="BORDER" />
        </Color.Row>
      </Color>

      <br />

      <hr />

      <ResponseField name="Background Mode" type="Gradient" />

      <ResponseField name="Border Width" type="4px" post={["DEFAULT"]} />

      <ResponseField name="Border Radius" type="4px" post={["DEFAULT"]} />

      <ResponseField name="Show Album?" type="Yes" />
    </Column>
  </Frame>
</Expandable>