Brand Demo/ElectricJolt — Iteration History

ElectricJolt Iteration Timeline

5 iterations · each rendered at 128 px · hover to pause

1
v1Session 13
ElectricJolt
#A8C4E8· blue stroke
#FBE9B5· gold stroke
  • Initial RAF-driven current-band animation via strokeDashoffset
  • 2-stage Gaussian blur glow (stdDeviation 2.4, merged blur + source)
  • Muted pastel stroke palette — #A8C4E8 blue / #FBE9B5 gold
  • Junction nodes flash linearly on head proximity (window = 0.6·band)
  • prefers-reduced-motion: static dim overlays, no filter
2
v2Session 15
ElectricJolt
#7ABFFF· blue stroke
#FFE566· gold stroke
  • Three-stage bloom filter (tight 1 px / mid 3.5 px / wide 9 px)
  • feFlood white-hot core overlay for electric arc intensity
  • feColorMatrix warm-shift on gold channel (R×1.25, B×0.30)
  • sRGB color interpolation on all filters
  • Saturated electric palette — #7ABFFF blue / #FFE566 gold
  • Single uniform overlay band per route (no taper yet)
3
v3Session 16
ElectricJolt
#7ABFFF· blue stroke
#FFE566· gold stroke
  • Comet-tail taper: 3 stacked overlay paths per route (tail / body / head)
  • Shared leading edge — band lengths 2.50× / 1.00× / 0.40× of base
  • Layer opacities: tail 0.30 / body 0.85 / head 1.00
  • Tail-only soft-bloom filter (stdDeviation 12, no white-hot core)
  • Cycle = len + 2·bandMax → tail fully exits before wrap, no snap-off
  • Junction flash window tightened to 0.7·bHead, time-locked to head tip
4
v4Session 17
ElectricJolt
#7ABFFF· blue stroke
#FFE566· gold stroke
  • Single-shot expanding ring fires when jolt head crosses each junction node
  • Sign-change trigger: prevSignedDist < 0 && signedDist >= 0 → triggerTime stamp
  • Ease-out quad expansion: baseR → 5× baseR over 350 ms
  • Linear opacity fade from 0.7 → 0 across ring duration
  • Ring reuses same color-matched glow filter as the node flash
  • prefers-reduced-motion: ring layer skipped entirely (no DOM nodes)
  • Strictly additive — routes, layers, and base geometry unchanged from v3
5
CurrentcurrentSession 18
ElectricJolt
#F0F8FF· blue core
#FFFCF0· gold core
#7ABFFF· blue stroke
#FFE566· gold stroke
  • 4th overlay layer "core" — 10% of base bandFrac — paints on top of head as incandescent tip
  • Near-white stroke palette: #F0F8FF (blue) / #FFFCF0 (gold) reads as arc-welder bead
  • Dedicated core filters with tighter stdDeviations (0.5 / 2.0 / 5.0 px)
  • Pure-white feFlood at 0.85 opacity — hotter & sharper than head/body filter
  • Core leading edge tracks identical phase position as head — shared RAF clock
  • Junction flash & ring-pulse still time-locked to HEAD (index 2), not core
  • prefers-reduced-motion: core layer omitted entirely (reduced path unchanged)