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
pnpm add @fractaldesign/machines-uiimport '@fractaldesign/machines-ui/style.css';
import { Frame } from '@fractaldesign/machines-ui';Preview
Content goes inside the frame.
<Frame title="USAGE">
<FrameBody>
<p>Content goes inside the frame.</p>
</FrameBody>
</Frame>Content goes inside the frame.
<Frame title="MARCH" motion="march" dash="long" pad="md">
<FrameBody>…</FrameBody>
</Frame>Content goes inside the frame.
<Frame title="SCAN" motion="scan" dash="dot" corner="◆" cornerBlink pad="md">
<FrameBody>…</FrameBody>
</Frame>Content goes inside the frame.
<Frame title="DRAW" motion="draw" dash="solid" pad="lg">
<FrameBody>Hover to draw the frame.</FrameBody>
</Frame>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. |
| titleAlign | 'center' | 'start' | 'center' | 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'. |
| corner | string | '+' | Character at each corner of the frame. Default "+". |
| dash | FrameDash | 'token' | Dash rhythm. Default 'token' (follows `--graph-framer`). |
| motion | FrameMotion | 'none' | Frame motion. Every loop is off under `prefers-reduced-motion`. Default '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 | false | Pause the loop while hovered. Default false. |
| cornerBlink | boolean | false | Blink the corner glyphs. Default false. |
| pad | FramePad | 'none' | Inner padding. Default 'none'. |
| ink | string | — | Frame colour override. Defaults to `--text-primary`. |
| accent | string | — | Corner + title colour override. Defaults to `--graph-accent`. |
| class | string | '' |
API
- snippet children Content rendered inside the component.
- class forwarded to the outer element
- a11y honours prefers-reduced-motion
Types
| Name | Kind | Description |
|---|---|---|
| FrameDash | type | Dash rhythm of the frame. `token` follows the theme's `--graph-framer`. Dash |
| FrameMotion | type | Frame motion. - `march` marching ants, clockwise - `reverse` marching ants, counter-clockwise - `pulse` dashes drift out and back - `scan` a sweep of light travels around the frame - `draw` frame draws itself in on hover (no loop) Motion |
| FramePad | type | Inner padding. Pad |
Theming
CSS custom properties this component reads.
- --bg
- --bg-surface
- --fg-dash
- --fg-ink
- --fg-on
- --fg-period
- --fg-speed
- --fg-timing
- --font-mono
- --graph-accent
- --graph-framer
- --text-primary
Related
Used by
- Agni
- Aum
- Boot
- Cron
- Damru
- Deps
- Diya
- Fire
- Flame
- FlowPlayer
- Ganga
- Hash
- Japa
- Life
- Mandala
- Mandel
- Pulse
- Rain
- Scatter
- Scope
- Sequence
- Spinners
- State
- Stream
- Surya
- Terminal
- Ticker
- Typewriter
- Workflow
- FlowNode
- Activity
- Bars
- Bullet
- Calendar
- Cells
- Compare
- Countdown
- Diff
- Flow
- Funnel
- Gantt
- Heatmap
- Invoice
- Kpi
- Latency
- Meter
- Plot
- Quota
- Rank
- Slo
- Slope
- Spark
- Spec
- Stack
- Stat
- Table
- Timeline
- Timer
- Tree
- Uptime
- Waffle
- Waterfall
src/lib/components/frame/Frame.svelte