Background Runtime v1.0.1

Scape.js

Lightweight (~5KB) animated background engine.
19 shape primitives, image nodes, config-driven motion.
Zero dependencies. Drop in and go.

Get Started Open Demo View Source
● Live Preview
~5
KB Gzipped
19
Shape Primitives
0
Dependencies
// How It Works

Drop.
Config.
Done.

Scape resolves your config object, mounts DOM-backed shape nodes, and drives them with lightweight CSS animation hooks. No canvas API to wrestle with. No build step required.

01
Include the script
One CDN tag. That's the entire install surface.
02
Set window.ScapeConfig
Declare shape type, count, colors, animation timing before the script loads.
03
Background initializes
Scape auto-mounts on DOMContentLoaded and responds to window resize.
config.js
// Set this BEFORE loading scape.js
window.ScapeConfig = {
  type: 'shape',
  shape: 'star',
  count: 30,
  size: 24,
  fillColor: 'hsla(200, 90%, 60%, 0.8)',
  strokeColor: 'rgba(255, 255, 255, 0.5)',
  strokeWidth: 2,
  animationDuration: '6s',
  floatDistance: 16,
  rotationRange: 180,
  opacity: 0.8
};

// For image-based backgrounds:
window.ScapeConfig = {
  type: 'image',
  imageUrl: 'path/to/logo.png',
  count: 20,
  size: 50
};
index.html
<!-- 1. Config first -->
<script src="config.js"></script>

<!-- 2. Then Scape -->
<script src="https://cdn.jsdelivr.net/gh/
  Ali-Cheikh/scape.js@main/scape.js"
></script>
// Shape Primitives

Every shape
you need.

19 Primitives
// Runtime API

Control at
runtime.

Every method is available on the global Scape object. Call them after DOMContentLoaded.

runtime.js
document.addEventListener('DOMContentLoaded', () => {

  // Swap to hearts on a button click
  Scape.updateConfig({ shape: 'heart' });

  // Pause on modal open
  Scape.pause();

  // Resume on modal close
  Scape.resume();

  // Swap background image
  Scape.setImage('logo.png');

});
Scape.refresh()
Regenerates the background
Scape.updateConfig(obj)
Merges config and re-renders
Scape.destroy()
Removes all mounted nodes
Scape.setImage(url)
Swaps image at runtime
Scape.pause()
Freezes all animations
Scape.resume()
Restores animation playback
// Use Cases

Where it lives.

01
Brand Motion Layers
Make product surfaces feel premium. Ambient geometry that reads as designed, not decorative noise.
02
Error Surfaces
Turn 404s and empty states into intentional experiences with reactive floating shapes.
03
Portfolio Systems
Showcase creative work with custom shapes and animation profiles that reflect your aesthetic.