Svelte 5 component · machines-ui · Frame
Frame
The dashed character frame every graph sits inside: a caption on the top edge, corner glyphs, and optional marching-ant, pulse, scan, or hover-draw motion.
Install
Frame is a Svelte 5 ASCII frame component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.
pnpm add @fractaldesign/machines-uiImport
import '@fractaldesign/machines-ui/style.css';
import { Frame } from '@fractaldesign/machines-ui';Usage
<Frame title="USAGE">
<FrameBody>
<p>Content goes inside the frame.</p>
</FrameBody>
</Frame>Props
| Name | Type | Default |
|---|---|---|
title | string Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. | — |
titleAlign | 'center' | 'start' Where the caption sits on the top edge: `center`, or `start` to leave the middle of the edge free (a node's input port sits there). Default 'center'. | 'center' |
corner | string Character at each corner of the frame. Default "+". | '+' |
dash | FrameDash Dash rhythm. Default 'token' (follows `--graph-framer`). | 'token' |
motion | FrameMotion Frame motion. Every loop is off under `prefers-reduced-motion`. Default 'none'. | 'none' |
speed | number Seconds per motion cycle — for `draw`, the hover duration. Defaults per motion (draw 0.3, march 0.7, pulse 2, scan 3). | — |
easing | Easing Curve the motion runs on — an `EASINGS` name or a raw timing function. | — |
pauseOnHover | boolean Pause the loop while hovered. Default false. | false |
cornerBlink | boolean Blink the corner glyphs. Default false. | false |
pad | FramePad Inner padding. Default 'none'. | 'none' |
ink | string Frame colour override. Defaults to `--text-primary`. | — |
accent | string Corner + title colour override. Defaults to `--graph-accent`. | — |
class | string | '' |
children | Snippet Content rendered inside the component. | — |
Snippets
| Name | Type | Default |
|---|---|---|
default | unknown | — |
Related components
FrameBody The content region inside a graph frame, with optional compact spacing for dense layouts.FrameRule A horizontal dashed rule that spans the frame, for separating sections inside a FrameBody.GraphArrow Dashed arrow between flow nodes. `stretch` spans the available row.GraphTick One glyph on a GraphTrack: flexes to fill, stays 1ch wide, centered.GraphTrack Horizontal track that spans the frame.ButtonMachine A button drawn as a dashed frame with the label set in a block of the current accent.