💀 Logo Reaper

Logos enter from the right, get stamped at the trigger point, and pile up on the left.

Click any logo to stamp & kill it instantly (clickToKill=true) · Spacing enforced by gapPx

🚀 Easy Install

One <script> tag in your Squarespace footer or code block.

🎨 Fully Configurable

Speed, size, colours, stamp position/rotation – all set via URL query-string params.

♿ Accessible

Respects prefers-reduced-motion and disables heavy animations.

📏 No Overlap

Logos maintain a constant minimum gap (gapPx) edge-to-edge, even with mixed aspect ratios.

🖱️ Click to Kill

Enable clickToKill=true to let visitors stamp & kill logos on click.

📏 Spacing + Click-to-Kill Demo

The instance below uses gapPx=28 (constant minimum gap between logos) and clickToKill=true (click any logo to stamp & kill it immediately). Open the browser console to see [LogoReaper] log messages.

<!-- Gap-based spacing + click-to-kill -->
<script src="…/logo-reaper.min.js
  ?selector=%23logo-stage
  &gapPx=28
  &clickToKill=true
  &logos=…
"></script>

✨ New in v1.3 – Constant Spacing & Click-to-Kill

Use gapPx (fixed pixels) or gapScale (fraction of logoH) to guarantee logos never overlap. Enable clickToKill=true so users can click any live logo to trigger the death sequence immediately. Click any logo below to stamp & kill it!

<!-- Constant spacing: 28px fixed gap, click any logo to kill -->
<script src="…/logo-reaper.min.js
  ?selector=%23logo-stage
  &gapPx=28
  &clickToKill=true
  &logos=…
"></script>

🖱️ Live Demo: gapPx=28, clickToKill=true

Click any logo to kill it instantly!

🐛 New in v1.2 – Debug Mode

Add debug=true to your script URL to enable: a visible red trigger guide line + [LogoReaper]-prefixed console logs (config, triggerX in px, spawn & death events). The line stays aligned on resize via ResizeObserver.

<!-- Debug mode: trigger guide line visible at 42% + console logs -->
<script src="…/logo-reaper.min.js
  ?selector=%23logo-stage
  &triggerX=42
  &debug=true
  &logos=…
"></script>

🔴 Live Debug Demo (triggerX=42, debug=true)

📋 New in v1.1 – Parameter Examples

<!-- Dark background with custom logo height and stamp position -->
<script src="…/logo-reaper.min.js
  ?selector=%23logo-stage
  &height=240
  &logoH=80
  &bgColor=1a1a2e
  &stampColor=e94560
  &stampX=50
  &stampY=40
  &stampRotate=-15
  &stampScale=1.1
"></script>
<!-- Transparent background, trigger shifted left, stamps disabled -->
<script src="…/logo-reaper.min.js
  ?selector=%23logo-stage
  &height=180
  &bgColor=transparent
  &stampEnabled=false
  &triggerX=40
  &logos=…
"></script>
<!-- Semi-transparent RGBA background -->
<script src="…/logo-reaper.min.js
  ?selector=%23logo-stage
  &bgColor=rgba(0%2C0%2C0%2C0.5)
  &logos=…
"></script>
<!-- Squarespace Installation (basic) -->
<script src="https://cdn.jsdelivr.net/gh/clonegarden/squarespaceplugins@latest/
  logo-reaper/logo-reaper.min.js
  ?selector=%23logo-stage
  &height=220
  &logoH=80
  &logos=%5B%22https%3A%2F%2Fexample.com%2Flogo1.svg%22%5D
  &speed=90
  &bgColor=1a1a2e
  &stampColor=e94560
  &stampX=50
  &stampY=45
  &stampRotate=-12
  &triggerX=50
"></script>