One color at one position along a color ramp — the building block you place,
offset, and animate to shape a sk-ramp-color-map's gradient.
JavaScript API:
ColorStop
This is the stop element of the ColorMap family, the typed child of
sk-ramp-color-map: a ramp is built from a sequence of these stops, each
pinning a color to a position on the ramp. It is modeled on SVG's <stop>
(hence the stop-offset / stop-color names). Unlike an inert keyframe, a
color stop is itself a SkenraAnimatable, so its own values can change at
runtime; each change notifies the owning ramp, which re-sorts its stops and
rewrites GPU uniforms without recompiling (stops are shader data).
Key attributes. stop-offset is the position on the ramp in [0, 1] —
driven through a sk-tonemap, 0 is full shadow and 1 is full light.
stop-color is the color at that position. interpolation is the blend mode
for the ramp segment that starts at this stop (linear | step | smooth),
so a step stop produces a hard color band rather than a gradient.
Related. Its parent is always a sk-ramp-color-map; that ramp is
typically driven by a sk-tonemap. Animating a stop uses the same
<sk-animation> / <sk-keyframe> mechanism as any other animatable.
Serve these docs to run the live example.
WebGPU needs a secure context — open this page via grunt serve
rather than double-clicking the file. The Markup tab works from disk.
<!-- ONE ramp — with an animated middle stop — painted onto three different
surfaces as a base-color source, each driven by a different field. The
shared stop pulses ember red -> gold and back, and every surface shifts
together: proof that a color-stop is a general building block, independent
of the surface, the paint, or of what drives it — the three paint types all
appear. LEFT: a thick 3D helix STROKE driven by stroke progress. CENTER: a
capsule WIREFRAME (edge paint) driven by a vertical linear field. RIGHT: an
elongated cube SURFACE driven by a spherical field. -->
<sk-scene>
<sk-directional-light p="42deg" h="130deg" intensity="1.0"></sk-directional-light>
<sk-ambient-light intensity="0.35"></sk-ambient-light>
<!-- The one shared ramp. Its middle stop animates — watch all three
surfaces' mid-band shift in lockstep while the end stops hold. -->
<sk-ramp-color-map id="ramp">
<sk-color-stop stop-offset="0" stop-color="#833AB4"></sk-color-stop>
<sk-color-stop stop-offset="0.5" stop-color="#FD1D89" interpolation="smooth">
<sk-animation duration="2000ms" iterations="Infinity" direction="alternate">
<sk-keyframe offset="0" stop-color="#FD1D89"></sk-keyframe>
<sk-keyframe offset="1" stop-color="#F61DFD"></sk-keyframe>
</sk-animation>
</sk-color-stop>
<sk-color-stop stop-offset="1" stop-color="#FCB045"></sk-color-stop>
</sk-ramp-color-map>
<!-- LEFT — a thick 3D helix, defined as a cubic-Bézier curve: each 90°
segment is the standard circular-arc Bézier (handle length
(4/3)·tan(45°/2)·radius) in X-Z, with the anchors and handles rising
linearly in Y by the pitch. A progress-stroke-field drives the ramp
along the stroke's length. -->
<sk-progress-stroke-field id="along" clamp="true"></sk-progress-stroke-field>
<sk-color-map-source id="stroke-src" intensity-field="#along" color-map="#ramp"></sk-color-map-source>
<sk-plain-material id="stroke-mat" base-color="white" base-color-darken-factor="0" base-color-source="#stroke-src"></sk-plain-material>
<sk-points-spline x="-5.5" basis="bezier" wrap="open"
points="[[1.2,-1.8,0],[1.2,-1.6,0.663],[0.663,-1.4,1.2],[0,-1.2,1.2],[-0.663,-1,1.2],[-1.2,-0.8,0.663],[-1.2,-0.6,0],[-1.2,-0.4,-0.663],[-0.663,-0.2,-1.2],[0,0,-1.2],[0.663,0.2,-1.2],[1.2,0.4,-0.663],[1.2,0.6,0],[1.2,0.8,0.663],[0.663,1,1.2],[0,1.2,1.2],[-0.663,1.4,1.2],[-1.2,1.6,0.663],[-1.2,1.8,0]]">
<sk-stroke-paint material="#stroke-mat" width-space="world" width="1" line-cap="round"></sk-stroke-paint>
</sk-points-spline>
<!-- CENTER — a capsule along Y, drawn as a WIREFRAME (edge paint). A
vertical linear field (its +Z ramp rotated to +Y with p="-90deg")
drives the ramp up the capsule's edges. -->
<sk-linear-gradient-field id="up" y="-2.5" extent="5" p="-90deg"></sk-linear-gradient-field>
<sk-color-map-source id="cap-src" intensity-field="#up" color-map="#ramp"></sk-color-map-source>
<sk-plain-material id="cap-mat" base-color="white" base-color-source="#cap-src"></sk-plain-material>
<sk-capsule radius="0.9" height="3" cap-segments="8" height-segments="8" rotation-segments="24">
<sk-edge-paint material="#cap-mat"></sk-edge-paint>
</sk-capsule>
<!-- RIGHT — a cube elongated along Z. A spherical field centered on it
drives the ramp radially outward from its middle. -->
<sk-spherical-gradient-field id="radial" x="5.5" inner-radius="0" outer-radius="3.2"></sk-spherical-gradient-field>
<sk-color-map-source id="cube-src" intensity-field="#radial" color-map="#ramp"></sk-color-map-source>
<sk-plain-material id="cube-mat" base-color="white" base-color-source="#cube-src"></sk-plain-material>
<sk-cube x="5.5" size-x="1.4" size-y="1.4" size-z="4.5">
<sk-surface-paint material="#cube-mat"></sk-surface-paint>
</sk-cube>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
id |
<id> |
— | The element's unique identifier — the standard HTML global id attribute. |
stop-offsetrequiredanimatable |
<number> |
0 |
Gets the stop position on the ramp, returning the animated value |
stop-colorrequiredanimatable |
<color> |
— | Gets the stop color, returning the animated value when animating. |
interpolationanimatable |
<stop-interpolation> ("step" | "linear" | "smooth") |
"linear" |
Gets the interpolation mode for the segment starting at this stop, |