Vertical line

Stopped

Read as Markdown

Full-page experience · Open playground

Build dividers, ticks, and rhythm with a one-axis line helper.

Try it

Move through the striped field and find each target.

What to learn

Draw a rule from top to bottom.
Use optional bounds and pixel-grid alignment.

Integration boundaries

Omitted top or bottom values use the Canvas bounds.
Event props and cursor styling work the same way as on Line.

This is a Pibbl Canvas example. Its mount owns its runtime resources; call its controller’s dispose method when removing it. The preview starts automatically unless reduced motion is enabled; Stop disposes the mount. Preserve the source’s logical canvas size and aspect ratio. Native HTML is not captured by Canvas filters.

VerticalLine

Complete source

Host setup for this source: use a canvas with width 720 and height 420, compile with jsx: "react-jsx" and jsxImportSource: "@pibbl/core", import its default mount, and call const controller = mount(canvas) after attaching the canvas. Call controller.dispose() before removing it.

vertical-line.example.tsx

import {
  pibbl,
  useSignal,
  Rectangle,
  Text,
  VerticalLine,
  type PibblController,
} from "@pibbl/core";
function VerticalStudy() {
  const stripe = useSignal(0);
  const colors = ["#1f4bd8", "#ff6b57", "#f7c948", "#74d3ae"];
  return [
    <Rectangle
      style={{
        left: 0,
        top: 0,
        width: 720,
        height: 420,
        fill: "#f7f0df",
      }}
    />,
    ...colors.map((color, index) => (
      <VerticalLine
        style={{
          x: 160 + index * 132,
          y1: 74 + index * 18,
          y2: 346 - index * 18,
          stroke: color,
          strokeWidth: stripe.get() === index + 1 ? 26 : 10,
          lineInteractionWidth: 40,
          alignToPixelGrid: "round",
          cursor: "col-resize",
        }}
        onMouseOver={() => stripe.set(index + 1)}
        onMouseOut={() => stripe.set(0)}
      />
    )),
    <Text
      style={{
        left: 360,
        top: 370,
        fill: "#17211d",
        font: "800 17px monospace",
        textAlign: "center",
      }}
    >
      {stripe.get() ? `STRIPE ${stripe.get()}` : "VERTICAL FIELD"}
    </Text>,
  ];
}
export default function mount(canvas: HTMLCanvasElement): PibblController {
  return pibbl(canvas, <VerticalStudy />);
}

Documentation version

Documentation built with @pibbl/core 0.0.2, revision 2dccb19. ALPHA — NOT FOR PRODUCTION USE.