Svelte 5 component · machines-ui · Animated

GraphDeps

A dependency tree drawn with ASCII branch lines, cascading package by package and showing each name with its version tag.

All components Source

Install

GraphDeps is a Svelte 5 animated ASCII deps component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.

pnpm add @fractaldesign/machines-ui

Import

import

import '@fractaldesign/machines-ui/style.css';
import { GraphDeps } from '@fractaldesign/machines-ui';

Usage

Example

<script lang="ts">
	import { GraphDeps, type DepNode } from '@fractaldesign/machines-ui';

	const deps: DepNode[] = [
	  { name: 'machines-ui', version: '0.9.0', accent: true, children: [
	    { name: 'svelte', version: '^5.0.0' },
	    { name: 'shiki', version: '^4.0.0' }
	  ]}
	];
</script>

<GraphDeps title="DEPS" {deps} />

Props

Name	Type	Default
`title`	`string` Caption drawn on the top edge as `[ TITLE ]`.	`—`
`deps`	`DepNode[]` Root-level dependencies, each with a name and version.	`—`
`depth`	`number` Maximum depth to render. Default 6. Clamped 1..16.	`6`
`animated`	`boolean` Animate the cascade. Default true. Reduced motion shows the full tree.	`true`
`speedMs`	`number` Milliseconds between cascading reveals. Default 80.	`80`
`label`	`string` Caption rendered muted under the tree.	`''`
`class`	`string`	`''`

GraphDiya A row of diyas that light one by one and then breathe, drawn as character-art candle flames over a dark…GraphFire A looping character-art fire animation with adjustable dimensions, cooling, and speed.GraphFlame A flame graph drawn in ASCII, cycling which leaf of the call tree is lit as the hot path.GraphFlowPlayer Plays through an ordered list of process steps, typing on the active step's label and revealing its detail…GraphGanga Three stepped river lines cascading down the frame while a lit diya rides the bottom flow; purely decorative.GraphHash A character-art hashing animation that transforms an input string into a changing digest.

Install

Import

Usage

Props

Related components