Glow border

Default density Compact density Restart from the initial state Show the copyable source

Tide station 7

Readings every ten minutes from the north pier.

Water level 2.4 m and rising. Move the pointer toward the edge.

Usage

Wrap one surface in Glow border: a Card, a Button, an Input, a Text area, a Select, an Input group, a Toggle, or any element with a border. Glow border hides that surface’s border and draws its own line at exactly the same place, radius and width, so nothing around it moves. It also draws the focus ring and shows an invalid control in the destructive color; the surface keeps its behavior. The drawing lets pointer events through and is hidden from assistive technology.

The glow colors each point of the line from a list of colors spread around the border, and turns it white-hot where its light is closest, with a soft bloom around it. By default the light is the pointer: the stretch of line nearest a mouse or pen lights up as it comes near and fades out after it leaves. Under reduced motion the light jumps instead of following, comets and glints rest, and fades are instant.

Controls and fields

Glow border follows each surface’s own shape, from a small Button to a multi-line Text area. On fields, trigger="focus" lights only the field being edited; the glow is then the focus indicator, so no separate focus ring is drawn.

Default density Compact density Restart from the initial state Show the copyable source

Report a sighting

Logged to the harbor master's desk.

Send report

Comets

With trigger="always" the glow runs on its own. Comets travel around the border continuously, always evenly spaced, each with a white-hot head and a tail that takes the colors it passes. lights sets how many, light-spacing bunches them, and rotation sets the way they go. --tp-mo-glow-border-loop-delay fades them out between laps and --tp-mo-glow-border-loop-easing eases each lap.

Default density Compact density Restart from the initial state Show the copyable source

Relay A

Two comets, the default.

Relay B

Three comets, counterclockwise, resting between laps.

Sweep, pulse and glint

motion picks what the glow does, and a named motion plays on its own. sweep lights the whole border and turns its colors around it, pulse makes the whole glow breathe, and glint sends a band of light across the surface once a lap, like a reflection. Motions combine: sweep pulse turns and breathes.

Default density Compact density Restart from the initial state Show the copyable source

Syncing

Uploading 18 of 42 readings.

Listening

Waiting for the next buoy signal.

New report

Tide tables for November are ready.

Hover

trigger="hover" runs the motion while the surface is hovered, fading in and out, like trigger="focus" on the fields above. trigger="none" keeps the glow off.

Default density Compact density Restart from the initial state Show the copyable source

Harbor cam

Live from the east breakwater.

Hover to light the frame.

Fading

The glow fades in and out over --tp-mo-glow-border-fade-duration with --tp-mo-glow-border-fade-easing. --tp-mo-glow-border-fade-out-delay keeps it lit for a moment after the light leaves, holding where it last shone; a light that comes back fades in at once and never waits. --tp-mo-glow-border-fill adds a wash of the light’s color inside the surface.

Default density Compact density Restart from the initial state Show the copyable source

Lighthouse

Leave the edge: the light lingers, then fades.

Colors

--tp-mo-glow-border-colors takes the colors to spread around the border, each blending into the next along the hue circle and the last back into the first; --tp-mo-glow-border-angle sets where the first one sits. Neighboring hues blend best, like the warm chart colors on the plan below; a single color, like the ring color on the prompt, lights the whole line in that color. --tp-mo-glow-border-core is the color the line turns toward where the light is hottest: white on dark color schemes and none on light ones by default. --tp-mo-glow-border-width, --tp-mo-glow-border-spread and --tp-mo-glow-border-intensity set the line, the bloom and the strength.

Default density Compact density Restart from the initial state Show the copyable source

Observer

For crews logging every tide.

Popular

$18 per month

Start observing Send

Light sources

The light follows the pointer by default. track-target names an element whose center lights the border instead, followed as it moves, and the trackPoint property takes a point in viewport coordinates. track-reach sets how far the light carries.

Default density Compact density Restart from the initial state Show the copyable source

Beacon 12

Lit from the beacon beside it.

Limits

• Glow border draws over one surface, its first child element.
• The bloom reaches outside the surface, so an ancestor that clips its overflow cuts it off.
• An element light source is measured on every frame while the border is in view.

API Reference

Every element also accepts motion-policy.