Study 04 · Starting soon
Almost time.
A flash of anticipation.
A bright white pulse races around the border. The message stays perfectly still.
Starting soon
If you’ve registered, check your email for your Zoom link
1px border onlyEvery 2.4 secondsA new starting point
Starting soon · repeating border pulse
Developer notes
Build this movement
A pulse, then a breath
- Repeat every 2.4 seconds. One rapid clockwise circuit takes roughly 0.6s on desktop and 0.37s on mobile, followed by a pause.
- Start each pulse from a different, randomly selected point around the border.
- A bright white leading segment and a short fading tail sit exactly on the existing 1px outline.
- Keep the pink border visible underneath. No glow, shadow, blur or change in border thickness.
- Only the border pulse moves. Text, background and layout remain still.
Use the Starting soon state
- Show this variant when the event is less than four hours away. Keep the scheduled start time visible above it.
- Follow the same rounded perimeter on desktop and mobile. Recalculate the path when the component resizes.
- Reduced motion: retain a static pink border. Pause the animation offscreen and while the tab is hidden.
- Copy includes the responsive component and animation. Connect the existing BC fonts, colours and event-state logic.