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

# Birthday countdown timer — live days to go

> The home page countdown ticks down days, hours, minutes, and seconds to the next birthday, then transforms into a full celebration screen on the day itself.

The home page is built around a live countdown that updates every second directly in the browser. It reads the birthday date from your configuration and calculates the exact time remaining. When the birthday arrives, the entire countdown display is replaced with a full celebration message — no page refresh required.

## How the countdown works

The countdown updates every second directly in the browser. On each tick it computes the difference between the current time and the next occurrence of the configured birthday.

```
Days  :  Hours  :  Minutes  :  Seconds
 042      08        31          07
```

The minutes unit is rendered in emerald green to draw the eye. All four units are zero-padded to two digits so the layout never shifts as the numbers change.

### Auto-roll to next year

Once the birthday has passed, the target date automatically advances to the same month and day in the following year. You do not need to update any configuration after each birthday.

```typescript theme={null}
if (today > thisYearBirthday) {
  thisYearBirthday = new Date(today.getFullYear() + 1, month - 1, day);
}
```

## Birthday day celebration screen

When all four countdown units reach zero — meaning today is the birthday — the timer is hidden and replaced with:

* A large **生日快乐** (Happy Birthday) heading
* The `greeting` message you set in your config, or the default `"祝你生日快乐"`
* A **送上祝福** button that links directly to `/write` so visitors can leave a wish immediately

## Floating lyrics animation

Throughout the home page, short song lyric snippets float up from random positions and fade out over five seconds. A new snippet appears every two seconds. These ambient lyrics are rendered with a CSS animation that floats them upward before fading out.

<Tip>
  The lyrics shown on the home page are separate from the per-song lyrics configured in `lib/music-config.ts`. To change which snippets float across the home page background, edit the home page source file directly.
</Tip>

## Configuring the birthday date

The birthday date and display name are set in `lib/birthday-config.ts`. The file exports a `BirthdayPerson` interface and a `birthdayConfig` object.

```typescript theme={null}
export interface BirthdayPerson {
  name: string;
  nickname?: string;
  birthday: {
    month: number; // 1-12
    day: number;   // 1-31
  };
  greeting?: string;
}
```

| Field            | Required | Description                                                          |
| ---------------- | -------- | -------------------------------------------------------------------- |
| `name`           | Yes      | Displayed as the page heading on the home page.                      |
| `nickname`       | No       | Optional short name used in other parts of the app.                  |
| `birthday.month` | Yes      | Month as a number (1 = January, 12 = December).                      |
| `birthday.day`   | Yes      | Day of the month.                                                    |
| `greeting`       | No       | Custom message shown below the countdown and on the birthday screen. |

<Note>
  The countdown uses the local system time of the visitor's browser, not a server clock. If the birthday lands at midnight in a specific timezone, visitors in other timezones will see the celebration screen at a slightly different local time.
</Note>