machines-ui
animated

Mandel

ASCII Mandelbrot with a slow cinematic zoom into seahorse valley.

Install

pnpm add @fractaldesign/machines-ui
import '@fractaldesign/machines-ui/style.css';
import { GraphMandel } from '@fractaldesign/machines-ui';

Preview

[ SEAHORSE ]
                                           .:@:                   
                                          .@@@@@.                 
                                    .   ...@@@@:..                
                                  ..@*.:@@@@@@@@@@@..-.:.         
                                  ..:@@@@@@@@@@@@@@@@@@:          
                    .           ..@@@@@@@@@@@@@@@@@@@@@+          
                     ............@@@@@@@@@@@@@@@@@@@@@@@@:        
                     .:@@@@@@+..=@@@@@@@@@@@@@@@@@@@@@@@+.        
                 ....:@@@@@@@@@:@@@@@@@@@@@@@@@@@@@@@@@@-         
          .     ..-@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@.          
          .     ..-@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@.          
                 ....:@@@@@@@@@:@@@@@@@@@@@@@@@@@@@@@@@@-         
                     .:@@@@@@+..=@@@@@@@@@@@@@@@@@@@@@@@+.        
                     ............@@@@@@@@@@@@@@@@@@@@@@@@:        
                    .           ..@@@@@@@@@@@@@@@@@@@@@+          
                                  ..:@@@@@@@@@@@@@@@@@@:          
                                  ..@*.:@@@@@@@@@@@..-.:.         
                                    .   ...@@@@:..                
                                          .@@@@@.                 
                                           .:@:

zoom 1.0x · iter 090

<GraphMandel title="SEAHORSE" />

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`.
cols number 66Columns of the grid. Default 66.
rows number 20Rows of the grid. Default 20.
charset string ' .:-=+*#%@'Escape count -> glyph, low to high. Keep it ASCII for grid alignment.
speedMs number 140Milliseconds per zoom tick. Default 140.
zoomPerTick number 1.06Window shrink factor per tick. Default 1.06.
maxIter number 90Starting iteration budget; grows +2 per tick, capped at 300. Default 90.
animated boolean trueStart playing on mount. Default true. Reduced motion starts paused.
showControls boolean trueShow the playback controls. Default true.
corner string —Character at each corner of the frame. Default "+".
class string ''

API

  • class forwarded to the outer element
  • motion runs live; set animated={false} to freeze
  • a11y honours prefers-reduced-motion

Types

NameKindDescription
ArtSeginterface

Theming

CSS custom properties this component reads.

  • --border
  • --graph-accent
  • --text-primary
  • --text-secondary

Related

Built from

src/lib/components/animated/GraphMandel.svelte

machines-ui