Prepare a Countdown
Choose the announcement and target time
Open the announcement controls and choose the countdown style. Add a label that tells the audience what is about to happen, then select the target date and time. The form design includes shortcuts for 10 minutes, 1 hour, 1 day, and 1 week from the time you configure it. Check the selected date, time, and timezone before saving.Choose the displayed units
Use Auto mode for the display to adjust as the event approaches. Use Manual mode to choose which units remain visible.Set the appearance and placement
Choose the placement, card background, text colour, and font size. Leave room for the rest of the stream, including captions, participant names, and sponsor material.Preview, save, and check the overlay
Use the form preview to review the countdown while editing. Save the announcement, enable its visibility, and check it in the actual stream layout. Use the announcement management controls to edit or remove an entry when the schedule changes. Check the overlay again after saving a change.Time Display
Auto Mode
The documented Auto mode design:- Hides days when less than one day remains.
- Hides hours when less than one hour remains.
- Keeps minutes and seconds visible.
Manual Mode
Manual mode provides separate visibility controls for days, hours, minutes, and seconds. Choose the combination that fits the event and available space.Target-Time Validation
The form design includes a minimum selectable date and a warning for a past target. Both the form and the service need to validate the target time for a countdown announcement. The target date and time determine the countdown. The announcement’s display-duration setting is a separate presentation setting.Placement Options
The documented placement design includes:
Preview the placement at the output size your audience will see. A countdown that fits an editing window may need a different size or position in the stream layout.
Styling
The card background and text colours control the contrast between the digits, labels, and surrounding stream. The typography design uses Panchang-Bold, proportional scaling with the selected font size, and tabular numbers to keep digit widths consistent. Each digit has its own flip card. The animation design uses a 0.6-second transition with easing, perspective transforms, shadows, and depth effects. Check the whole countdown as well as an individual card: the label, visible units, spacing, and contrast should remain readable as the digits change.Components and Data Flow
The documented architecture separates editing, storage, distribution, and rendering.
An announcement begins in the management form. The service validates and stores it, and the control panel makes the saved state available to the overlay. The overlay selects visible announcements and renders the countdown style through the countdown component.
The communication design includes BroadcastChannel for compatible pages in the same browser and WebSocket transport for a separate overlay client, such as an OBS browser source. Use the overlay connection supplied by the stream integration.
Countdown calculation and announcement updates are separate responsibilities. The countdown component uses the target time to calculate the remaining time; the overlay connection carries changes to the announcement’s settings.
Announcement Data
The documented frontend model uses the following fields. API and storage representations need an explicit mapping to these fields.
The handler design uses “Countdown” as the fallback label when the text is empty. A countdown still needs a valid target time.
Troubleshooting
Countdown is missing from the overlay
Countdown is missing from the overlay
Check that the announcement is saved and visibility is enabled. Confirm that the overlay belongs to the intended stream and uses the connection supplied by that integration.Check the placement and size in case the countdown is outside the visible layout. If a saved change has not appeared, refresh the overlay and check its connection to the control panel.
Preview does not match the saved countdown
Preview does not match the saved countdown
Keep the editing form open and check its visibility and unit settings while using the preview. Save the current values, then compare them with the countdown in the stream layout.For an integration, check that the form, saved announcement, and overlay use consistent field mappings.
The target date or time is rejected
The target date or time is rejected
Confirm that a target is set, that it is in the future, and that the date, time, and timezone represent the intended event.For an integration, check the target-time format and the countdown-specific validation in both the form and service.
Settings change in the control panel but not in the overlay
Settings change in the control panel but not in the overlay
Check the update connection separately from the countdown display. A countdown can continue calculating time while showing older announcement settings.Confirm the correct overlay connection, reload the overlay, and check any reported connection or validation error.