Daybreak
A signature ident for the brand pattern. Light catches the edge of each arc rather than the shapes moving: the top arc sweeps down, the bottom right arc follows close behind, and daybreak rises behind the band before the pattern settles. Tune the pace here, then hand the values below to the developers.
Your device asks for reduced motion, so the pattern stays still. That is how it should ship for these visitors.
How long one rim kick takes to run its curve. Slower reads as more premium.
Point in the top sweep when the bottom right arc kicks in.
Stillness after both sweeps fade. This is what keeps it calm.
Length of the light, as a share of the panel height.
Soft bloom around the core line, in screen pixels at desktop size.
The bright line that sits on the edge.
Highest opacity the streak reaches mid-sweep.
Share of each sweep spent fading the light in and out. Lower arrives faster.
How speed changes along the curve. Soft drift is the default: no moment where it visibly speeds up.
A thin, crisp line of light inside the glow. Keep it a touch, never a stroke.
Seafoam keeps it on brand; cool white is quieter.
The band becomes a horizon: its top edge catches a hairline of light and a low, wide glow spreads along it, then recedes before the next cycle.
A faint lift toward Dynamic Blue around the horizon as daybreak peaks, then settles. The darks stay dark.
Moving dither at 6% so soft gradients never band on dark blue. Invisible on its own, missed when it is gone.
Trails each sweep by 180ms at 50% brightness on the arc's inner curve.
One cycle
Values for the developers
Build rules
- Draw the light on a canvas (or SVG) layered over the static pattern. The shapes never move; only the light travels along the edge paths.
- Arc paths are in Pattern 21 units (520 × 618), traced from the original artwork, so they fit the desktop panel and the 75% mobile crop with the same transform as the image.
- This is a signature ident, so the timing is fixed and identical everywhere it appears. Top arc sweeps down, bottom right arc follows upward 18% into the top sweep, and daybreak rises behind the band as they travel, then settles back.
- Motion uses the soft drift curve, cubic-bezier(0.45, 0, 0.2, 1): unhurried in, a long settle, no visible acceleration. Each streak ramps in and out over 12% of its run. The light is tinted from the surface, never pure white, with a wide soft bloom and a softened core.
- Start the first sweep when the section enters view, then loop. Pause when it leaves the viewport or the tab is hidden.
- The whole scene responds to daybreak: a subtle exposure lift and a shift toward Dynamic Blue near the horizon. Fine moving grain sits over everything to stop gradients banding.
- Reduced motion: no sweep, no lift, no grain movement; the pattern stays exactly as it is now.
- Animate on the GPU-friendly path only (canvas redraw or stroke-dashoffset with a gradient mask). Target 60fps on a mid-range phone; never block the page from becoming usable.