Draws pieces of line over the border of the surface it wraps, each moving through its own states while hovered, focused or in view, as a plain line or a glow.
<tp-mo-segment-border>
Segment border
Default density
Compact density
Restart from the initial state
Show the copyable source
Wrap one surface in Segment border, a Card, a Button, an Input, a Text area, a Select, an Input group, a Toggle or any element with a border, and add tp-mo-border-segment children. Segment border hides the surface’s border and draws its own line at exactly the same place, radius and width, so nothing around it moves, then draws the segments over it. It also draws the focus ring and shows an invalid control in the destructive color. The drawing lets pointer events through and is hidden from assistive technology.
Each segment is a stretch of the border from a start to an end, measured clockwise from its origin, in percent of the border’s length or in pixels. draw lists the states it moves through while the border is hovered, and it plays back when the pointer leaves. Above, one segment starts at the top center, origin="top", with no length, and grows both ways to -50% 50%: it runs along the top, down both sides and closes at the bottom center. Values below 0% or past 100% wrap through the origin.
Each segment has its own duration, delay and easing; the steps between its states share the duration. Plain segments are lines in the theme’s primary color, changed with --tp-mo-border-segment-color, --tp-mo-border-segment-width and --tp-mo-border-segment-cap on a segment or on the border. Under reduced motion the segments jump to their last state and back.
Patterns
Where segments start and which way they grow make the pattern. A position can also name a point of the box: a corner, top-left, top-right, bottom-right or bottom-left, or the middle of an edge, top, right, bottom or left. Points keep lines meeting exactly at the corners whatever the surface’s proportions. A point is reached the short way round from the segment’s previous state, and a stretch that ends at a point runs clockwise to it.
Each of these Buttons draws the same full border on hover: one segment traced all the way round from a corner, two running edge by edge from opposite corners, two spreading both ways from opposite corners, and four growing out from the middle of each edge.
Patterns
Default density
Compact density
Restart from the initial state
Show the copyable source
leave gives a segment states to run from where it is when the pointer leaves, before it rests; without it, the segment plays back. Here each line enters its edge at one corner on hover and, on leaving, runs on out through the other corner instead of retracting, so the lines keep turning the same way: across the top and bottom, up and down the sides, or all the way round.
Leave path
Default density
Compact density
Restart from the initial state
Show the copyable source
trigger="always" plays the segments once the border is in view and holds their last state. With --tp-mo-segment-border-color: transparent the line under the segments is gone, so a segment in the border color that grows to the whole border traces it in. A short segment with glow, drawn as light in --tp-mo-segment-border-glow-colors, leads the trace on the same timing and settles into the corner.
Traced in
Default density
Compact density
Restart from the initial state
Show the copyable source
trigger="focus" plays the segments while focus is inside the surface. The segments are then the focus indicator, so the border draws no separate focus ring; give them the ring color and a width that stands out. trigger="none" keeps them at their first state.
Focus
Default density
Compact density
Restart from the initial state
Show the copyable source
repeat loops a segment, a number of times or infinite, and alternate plays every other run backwards. A short glowing segment looping around a search field shows that a search is running.
Scanner
Default density
Compact density
Restart from the initial state
Show the copyable source
Segment border draws over one surface, its first child element other than a segment.
The light of glowing segments reaches outside the surface, so an ancestor that clips its overflow cuts it off.
Segments play from their trigger, not from the scroll position.
API Reference
Every element also accepts motion-policy.
Attributes
AttributePropertyTypeDefaultDescriptiontriggertriggerSegmentBorderTrigger | ''''When the segments play: hover (default), focus (while focus is inside), always (once the
border is in view) or none (they rest at their first state).
Methods
MethodReturnsDescriptionrefresh()voidMeasures the surface again (after a change the element cannot observe).
Slots
SlotDescriptiondefaultOne surface (a Card, Button, Input, Text area, Select, Input group, Toggle or any element), and the tp-mo-border-segment children that describe the pieces.
CSS parts
PartDescription::part(mo-segment-border-ring)The drawing over the surface border, hidden from assistive technology.::part(mo-segment-border-focus)The focus ring, outside the border, while keyboard focus is inside and the effect does not show it.::part(mo-segment-border-line)The border line under the segments.::part(mo-segment-border-glow)The canvas of the glowing segments.::part(mo-segment-border-bloom)The canvas of the blurred light around the glowing segments.::part(mo-segment-border-segment-line)The drawn piece of a plain segment, one per plain segment.
CSS custom properties
PropertyDefaultDescription--tp-mo-segment-border-color—Color of the line under the segments; transparent leaves only the segments. Default: the border role.--tp-mo-segment-border-width—Line width. Default the surface's border width.--tp-mo-segment-border-radius—Corner radius without a surface child. Default var(--tp-radius-lg).--tp-mo-segment-border-glow-colors—Colors of glowing segments, spread evenly around the border, each blending into the next along the hue circle. Default the theme's sky, violet and pink chart colors (--tp-chart-2, --tp-chart-1, --tp-chart-5).--tp-mo-segment-border-glow-angle—Where the first glow color sits, 0deg at the top and clockwise. Default 315deg (the top-left corner).--tp-mo-segment-border-glow-core—The color glowing segments turn toward at their ends. Default white on dark color schemes, none on light ones.--tp-mo-segment-border-glow-intensity—Glow opacity, 0 to 1. Default 1.--tp-mo-segment-border-glow-spread—Width of the bloom around glowing segments. Default 12px.
<tp-mo-border-segment>
Attributes
AttributePropertyTypeDefaultDescriptiondrawdrawstring''The states the segment moves through, comma-separated: each start end, or a single end
starting at 0. A position is a percentage of the border or pixels from the origin, clockwise,
or a point of the box: top-left, top, top-right, right, bottom-right, bottom,
bottom-left or left. A point is reached the short way round from the previous state, and
a stretch ending at a point runs clockwise to it. Below 0% or past 100% it wraps through the
origin. Unset, 0% 0%, 0% 100%.leaveleavestring''The states it runs from where it is when its trigger turns off, written like draw; unset, it
plays backwards.durationdurationstring''Time of the whole run: a CSS time, a number of milliseconds, or a var().delaydelaystring''Wait before the run: a CSS time, a number of milliseconds, or a var().easingeasingstring''Easing of each step between two states.repeatrepeatstring''Repeats after the first run: a number, or infinite.alternatealternatebooleanfalseEvery other repeat runs backwards.glowglowbooleanfalseDraws the segment as glow, in the Segment border's glow colors, instead of a plain line.originoriginstring''Where 0% sits on the border: top-left (default), top, top-right, right,
bottom-right, bottom, bottom-left, left, or a percentage. Percentages run clockwise.
CSS custom properties
PropertyDefaultDescription--tp-mo-border-segment-duration—Time of the whole run of states. Default var(--tp-duration-slow).--tp-mo-border-segment-delay—Wait before the run. Default 0s.--tp-mo-border-segment-easing—Easing of each step between two states. Default var(--tp-easing-standard).--tp-mo-border-segment-color—Color of a plain segment. Default var(--tp-primary).--tp-mo-border-segment-width—Width of a plain segment. Default the line width.--tp-mo-border-segment-cap—Line cap of a plain segment: butt or round. Default butt.