Digital Sanctum / Skunkworks

Sanctum Visual Labs

Generative SVG patterns and scroll-driven compositing for the modern web.

Explore
Pattern / Grid

Structural geometry

Precision-engineered gridlines that breathe with subtle animation. Ideal for technical interfaces, dashboards, and data-driven layouts.

<sanctum-visual
  pattern="grid"
  animate
  seed="42"
  accent="#2563EB" />
Pattern / Circuit

Living circuit board

Energy pulses flow along PCB traces with layered glow effects. Nodes bloom on contact. Fully procedural, seed-driven, and animated.

<sanctum-visual
  pattern="circuit"
  animate
  seed="77"
  accent="#10B981" />
Pattern / Isometric

Dimensional depth

Tetris-style cube assembly from three isometric axes. Cubes drop, slide, and lock into place with staggered wave rhythm, then dissolve and rebuild in a seamless loop.

<sanctum-visual
  pattern="isometric"
  animate
  seed="99"
  accent="#8B5CF6" />
Pattern / Dataflow

Flowing connections

A network of data nodes and junction points linked by curved bezier paths. Directional arrows show flow, while comet pulses carry energy between nodes with layered glow effects.

<sanctum-visual
  pattern="dataflow"
  animate
  seed="55"
  accent="#C0A062" />
Pattern / Fortress

Defensive geometry

Concentric octagonal boundaries with battlement notches, corner towers, gate openings, and a central shield keep. A rotating sentry sweep illuminates tower beacons in sequence while walls pulse with guarded energy.

<sanctum-visual
  pattern="fortress"
  animate
  seed="33"
  accent="#DC143C" />
Hero / Pooch Parade

Pixel art scenes

Sprite-based animated hero backgrounds with parallax scrolling. Procedurally generated pixel art characters walk through a sunny park. Canvas-rendered at 60fps with crisp pixelated scaling.

<sanctum-hero
  theme="pooch-parade"
  aspect="21:9" />
Hero / Photo Overlay

Living photographs

Static hero images brought to life with composited environmental effects. Drifting fog, bird silhouettes, and god rays overlay a valley vista with Ken Burns zoom. Canvas-rendered effects at 60fps on a shared overlay.

<sanctum-hero
  theme="tania-ruddick"
  aspect="16:9" />

Get Started

Ship visuals, not boilerplate

Drop-in Web Components. No framework lock-in. ES modules with full TypeScript support.

Integration Guide (coming soon)