REFERENCE
- Gallery page: https://magpui.com/en/i/timer-with-glowing-dot-waves-e74d6e
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/timer-with-glowing-dot-waves-e74d6e/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/timer-with-glowing-dot-waves-e74d6e/clip.mp4
- Original post: https://x.com/sashabirukoff/status/2109689050043236593 by @sashabirukoff
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD: Build a compact elapsed-time pill with a red glowing dot matrix on the left and a white minutes:seconds readout on the right. Build this component only, not a whole page.
DESIGN SYSTEM: Approximately 160 by 70px capsule, near-black #141518, radius 35px, horizontal padding 16px and gap 20px. Clean sans-serif white #F5F5F5 numerals at 28px, weight 500, tabular figures. Use a roughly 40px square dot matrix with a rounded silhouette, small 4px circles on 6px centers. Dim red #421421, bright red #FF103D, restrained static glow. An optional preview sits on a lavender #C7BCFF to pale pink #F8E0FA gradient; do not force this onto the host application.
MOTION: During running state, increment elapsed time each 1000ms. A localized bright band moves through the dot grid. Reconstruction timing targets: each dot fades from 0.2 to 1 opacity and back over 600ms, spatial stagger 50ms, cubic-bezier(0.4,0,0.2,1); offset rows for a rounded moving wave. Repeat each second. Keep numerals and capsule geometry stationary.
SECTIONS: Decorative dot matrix and elapsed readout. Running advances both; paused freezes the count and dims the matrix. Expose elapsedSeconds and running inputs, without inventing visible controls.
IMPLEMENTATION: Use SVG circles and Motion for opacity animation. Keep glow filters static; avoid per-frame framework renders and limit the grid to around 50 dots. Use a monotonic clock to avoid interval drift. Suspend animations when hidden or offscreen. With prefers-reduced-motion use steady red dots while the time continues updating. Hide decorative dots from assistive technology and supply a timer label without live announcements every second. If interactive in the host project, use native keyboard semantics and a visible focus ring.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts, mapping colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original; use placeholders.
SUCCESS CHECK:
- Digits advance without changing capsule width or shifting alignment.
- Brightness travels across the red dots without moving surrounding UI.
- Pausing stops animation and reduced motion replaces the wave with a steady pattern.
