machines-ui
animated

Life

Conway's Game of Life in block glyphs, framed. Alive is accent, the dead leave a faint trail.

Install

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

Preview

[ LIFE ]
██     █  ██  █     █ ███   █        ██  ██ 
        ██  █  █      █          █          
   ███   █    █     █   █ █         █   █   
██  █████  ██               ██      █       
             █      █    ██     █          █
  █      ██       █        ██ ██ █ █  █  ██ 
  █ █   █    ██      ██  █ █   █ ███ ██     
█ █   █  █ ██               █     █     █   
 █       █  █ █    █ ██  ██         █ █     
              ██ █ █   ██    █  ███ █ █     
 █       ██ █ █ █      ███  █  ██   █       
            █  █    █  ██ █                 
          █  █       █ █       ██ █     ██  
█ █  █   ██ █  ██       █    ███   █      ██

gen 000 · pop 152

<GraphLife title="LIFE" />

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`.
cols number 44Columns of the board. Default 44.
rows number 14Rows of the board. Default 14.
density number 0.28Random fill probability when no `seed` is given. Default 0.28.
seed boolean[][] —Explicit initial board. Padded/cropped to `cols` x `rows`.
seedNum number 7PRNG seed for the random board, reproducible. Default 7.
speedMs number 220Milliseconds per generation. Default 220.
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-muted
  • --text-primary
  • --text-secondary

Related

Built from

src/lib/components/animated/GraphLife.svelte

machines-ui