Zap LED Animations

Animation library for M5Stack Atom Matrix 5x5 LED grid

Hardware Target

M5Stack Atom Matrix - 5x5 WS2812C RGB LEDs
ESP32-PICO-D4 @ 240MHz
Ultra-compact: 24x24x13.8mm
Recommended brightness: 20 (FastLED scale)

Zap Gateway Purpose

Local energy coordination gateway (~$20 BOM)
200ms response time (vs 2-5s cloud APIs)
Protocols: P1, Modbus-TCP/RTU, MQTT, OCPP
Offline-capable, data sovereignty

Interactive Demo

Preview any animation in the library with customizable colors.

Animation

Color

zap-ready

Diamond pulse - indicates device is ready for operation

Animation Library

86 animations in 13 categories

Boot/Power On

Spiral expanding from center - indicates device powering up

green

zap-boot

/**
 * Boot/Power On
 * Spiral expanding from center - indicates device powering up
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapBootAnimation() {
  return (
    <PixelGrid
      pattern="zap-boot"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapBootAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-boot"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  )...

Cycle: 2500msFrames: 10Frame: 250ms

Ready/Hello

Diamond pulse - indicates device is ready for operation

green

zap-ready

/**
 * Ready/Hello
 * Diamond pulse - indicates device is ready for operation
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapReadyAnimation() {
  return (
    <PixelGrid
      pattern="zap-ready"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapReadyAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-ready"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
...

Cycle: 2000msFrames: 10Frame: 200ms

Lightning Bolt

Custom lightning bolt shape - Zap brand identity

green

zap-logo

/**
 * Lightning Bolt
 * Custom lightning bolt shape - Zap brand identity
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapLogoAnimation() {
  return (
    <PixelGrid
      pattern="zap-logo"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapLogoAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-logo"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// St...

Cycle: 2500msFrames: 13Frame: 192ms

Pairing/WiFi Setup

Checkerboard alternating - indicates pairing mode active

blue

zap-pairing

/**
 * Pairing/WiFi Setup
 * Checkerboard alternating - indicates pairing mode active
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapPairingAnimation() {
  return (
    <PixelGrid
      pattern="zap-pairing"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapPairingAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-pairing"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused...

Cycle: 1500msFrames: 6Frame: 250ms

Connecting

Expanding rings from center - indicates connection attempt

blue

zap-connecting

/**
 * Connecting
 * Expanding rings from center - indicates connection attempt
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapConnectingAnimation() {
  return (
    <PixelGrid
      pattern="zap-connecting"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapConnectingAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-connecting"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={...

Cycle: 1800msFrames: 8Frame: 225ms

Connected

Quick pulse then steady center - indicates successful connection

green

zap-connected

/**
 * Connected
 * Quick pulse then steady center - indicates successful connection
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapConnectedAnimation() {
  return (
    <PixelGrid
      pattern="zap-connected"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapConnectedAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-connected"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      pause...

Cycle: 2000msFrames: 8Frame: 250ms

No Network

Frame blink warning (orange->red suggested) - indicates network loss

pink

zap-no-network

/**
 * No Network
 * Frame blink warning (orange->red suggested) - indicates network loss
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapNoNetworkAnimation() {
  return (
    <PixelGrid
      pattern="zap-no-network"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapNoNetworkAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-no-network"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      ...

Cycle: 1200msFrames: 8Frame: 150ms

Active

Gentle center heartbeat - indicates active operation

green

zap-active

/**
 * Active
 * Gentle center heartbeat - indicates active operation
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapActiveAnimation() {
  return (
    <PixelGrid
      pattern="zap-active"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapActiveAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-active"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

/...

Cycle: 2500msFrames: 8Frame: 313ms

Standby/Idle

Slow corners pulse - indicates standby mode

green

zap-standby

/**
 * Standby/Idle
 * Slow corners pulse - indicates standby mode
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapStandbyAnimation() {
  return (
    <PixelGrid
      pattern="zap-standby"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapStandbyAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-standby"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

...

Cycle: 3000msFrames: 8Frame: 375ms

Offline

Single pixel breathing (gray suggested) - indicates offline mode

blue

zap-offline

/**
 * Offline
 * Single pixel breathing (gray suggested) - indicates offline mode
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapOfflineAnimation() {
  return (
    <PixelGrid
      pattern="zap-offline"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapOfflineAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-offline"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
 ...

Cycle: 4000msFrames: 8Frame: 500ms

Data Transferring

Spiral flow - indicates data transmission

blue

zap-data-tx

/**
 * Data Transferring
 * Spiral flow - indicates data transmission
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapDataTxAnimation() {
  return (
    <PixelGrid
      pattern="zap-data-tx"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapDataTxAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-data-tx"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

/...

Cycle: 1200msFrames: 9Frame: 133ms

Syncing

Frame rotation - indicates sync in progress

blue

zap-syncing

/**
 * Syncing
 * Frame rotation - indicates sync in progress
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapSyncingAnimation() {
  return (
    <PixelGrid
      pattern="zap-syncing"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapSyncingAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-syncing"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Stat...

Cycle: 1000msFrames: 8Frame: 125ms

No Data

X pattern pulse (yellow suggested) - indicates no data received

pink

zap-no-data

/**
 * No Data
 * X pattern pulse (yellow suggested) - indicates no data received
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapNoDataAnimation() {
  return (
    <PixelGrid
      pattern="zap-no-data"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapNoDataAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-no-data"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    ...

Cycle: 1500msFrames: 6Frame: 250ms

Grid Import

Lines flowing inward (yellow suggested) - indicates power import from grid

pink

zap-importing

/**
 * Grid Import
 * Lines flowing inward (yellow suggested) - indicates power import from grid
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapImportingAnimation() {
  return (
    <PixelGrid
      pattern="zap-importing"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapImportingAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-importing"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
 ...

Cycle: 1000msFrames: 8Frame: 125ms

Grid Export

Lines flowing outward (green) - indicates power export to grid

green

zap-exporting

/**
 * Grid Export
 * Lines flowing outward (green) - indicates power export to grid
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapExportingAnimation() {
  return (
    <PixelGrid
      pattern="zap-exporting"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapExportingAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-exporting"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      pause...

Cycle: 1000msFrames: 8Frame: 125ms

Battery Charging

Fill from bottom up (blue->green) - indicates battery charging

blue

zap-charging

/**
 * Battery Charging
 * Fill from bottom up (blue->green) - indicates battery charging
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapChargingAnimation() {
  return (
    <PixelGrid
      pattern="zap-charging"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapChargingAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-charging"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused...

Cycle: 2500msFrames: 8Frame: 313ms

Battery Discharging

Drain from top (green->yellow) - indicates battery discharging

green

zap-discharging

/**
 * Battery Discharging
 * Drain from top (green->yellow) - indicates battery discharging
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapDischargingAnimation() {
  return (
    <PixelGrid
      pattern="zap-discharging"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapDischargingAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-discharging"
      dimension={5}
      color={color}
      size={size}
      speed={sp...

Cycle: 2500msFrames: 8Frame: 313ms

Peak Approaching

Fast frame pulse (orange) - indicates peak pricing/demand approaching

pink

zap-peak-alert

/**
 * Peak Approaching
 * Fast frame pulse (orange) - indicates peak pricing/demand approaching
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapPeakAlertAnimation() {
  return (
    <PixelGrid
      pattern="zap-peak-alert"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapPeakAlertAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-peak-alert"
      dimension={5}
      color={color}
      size={size}
      speed={speed}...

Cycle: 800msFrames: 6Frame: 133ms

Grid Event Active

Rapid corners sync (bright green) - indicates grid event participation

green

zap-grid-event

/**
 * Grid Event Active
 * Rapid corners sync (bright green) - indicates grid event participation
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapGridEventAnimation() {
  return (
    <PixelGrid
      pattern="zap-grid-event"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapGridEventAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-grid-event"
      dimension={5}
      color={color}
      size={size}
      speed={sp...

Cycle: 600msFrames: 4Frame: 150ms

Local Control

L shape indicator (green) - indicates local control mode

green

zap-local

/**
 * Local Control
 * L shape indicator (green) - indicates local control mode
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapLocalAnimation() {
  return (
    <PixelGrid
      pattern="zap-local"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapLocalAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-local"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  ...

Cycle: 2000msFrames: 9Frame: 222ms

Remote Control

Cloud-like pattern (blue) - indicates remote/cloud control mode

blue

zap-remote

/**
 * Remote Control
 * Cloud-like pattern (blue) - indicates remote/cloud control mode
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapRemoteAnimation() {
  return (
    <PixelGrid
      pattern="zap-remote"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapRemoteAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-remote"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}...

Cycle: 2000msFrames: 8Frame: 250ms

Scheduled Mode

Clock rotation (purple suggested) - indicates scheduled/timer mode

blue

zap-scheduled

/**
 * Scheduled Mode
 * Clock rotation (purple suggested) - indicates scheduled/timer mode
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapScheduledAnimation() {
  return (
    <PixelGrid
      pattern="zap-scheduled"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapScheduledAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-scheduled"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      ...

Cycle: 2000msFrames: 8Frame: 250ms

Error

X pattern (red) - indicates error state

pink

zap-error

/**
 * Error
 * X pattern (red) - indicates error state
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapErrorAnimation() {
  return (
    <PixelGrid
      pattern="zap-error"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapErrorAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-error"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (no...

Cycle: 1200msFrames: 8Frame: 150ms

Warning

Triangle blink (orange) - indicates warning state

pink

zap-warning

/**
 * Warning
 * Triangle blink (orange) - indicates warning state
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapWarningAnimation() {
  return (
    <PixelGrid
      pattern="zap-warning"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapWarningAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-warning"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

/...

Cycle: 1500msFrames: 9Frame: 167ms

Firmware Update

Progress bar fill (blue) - indicates firmware update in progress

blue

zap-updating

/**
 * Firmware Update
 * Progress bar fill (blue) - indicates firmware update in progress
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapUpdatingAnimation() {
  return (
    <PixelGrid
      pattern="zap-updating"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapUpdatingAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-updating"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      pause...

Cycle: 1500msFrames: 8Frame: 188ms

Vehicle Connected

Plug icon pattern (blue) - indicates EV connected

blue

zap-ev-connected

/**
 * Vehicle Connected
 * Plug icon pattern (blue) - indicates EV connected
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapEvConnectedAnimation() {
  return (
    <PixelGrid
      pattern="zap-ev-connected"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapEvConnectedAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-ev-connected"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paus...

Cycle: 2000msFrames: 10Frame: 200ms

EV Charging

Upward flow (blue->green) - indicates EV is charging

blue

zap-ev-charging

/**
 * EV Charging
 * Upward flow (blue->green) - indicates EV is charging
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapEvChargingAnimation() {
  return (
    <PixelGrid
      pattern="zap-ev-charging"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapEvChargingAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-ev-charging"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={pau...

Cycle: 800msFrames: 6Frame: 133ms

V2X Bidirectional

Alternating flow (green+blue) - indicates V2X bidirectional mode

green

zap-v2x-active

/**
 * V2X Bidirectional
 * Alternating flow (green+blue) - indicates V2X bidirectional mode
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapV2xActiveAnimation() {
  return (
    <PixelGrid
      pattern="zap-v2x-active"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapV2xActiveAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-v2x-active"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
 ...

Cycle: 600msFrames: 4Frame: 150ms

Charge Complete

Checkmark/success (green) - indicates charging complete

green

zap-ev-complete

/**
 * Charge Complete
 * Checkmark/success (green) - indicates charging complete
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapEvCompleteAnimation() {
  return (
    <PixelGrid
      pattern="zap-ev-complete"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapEvCompleteAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-ev-complete"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      pa...

Cycle: 2500msFrames: 11Frame: 227ms

Meter Reading

Horizontal scan (cyan) - indicates meter reading in progress

blue

zap-meter-reading

/**
 * Meter Reading
 * Horizontal scan (cyan) - indicates meter reading in progress
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapMeterReadingAnimation() {
  return (
    <PixelGrid
      pattern="zap-meter-reading"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapMeterReadingAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-meter-reading"
      dimension={5}
      color={color}
      size={size}
      speed={speed}...

Cycle: 1200msFrames: 8Frame: 150ms

P1 Connected

P indicator (green) - indicates P1 meter connected

green

zap-meter-connected

/**
 * P1 Connected
 * P indicator (green) - indicates P1 meter connected
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapMeterConnectedAnimation() {
  return (
    <PixelGrid
      pattern="zap-meter-connected"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapMeterConnectedAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-meter-connected"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
...

Cycle: 2000msFrames: 6Frame: 333ms

Phase Indicator

3 vertical columns (RGB suggested) - indicates 3-phase balance

blue

zap-phase-balance

/**
 * Phase Indicator
 * 3 vertical columns (RGB suggested) - indicates 3-phase balance
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapPhaseBalanceAnimation() {
  return (
    <PixelGrid
      pattern="zap-phase-balance"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapPhaseBalanceAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-phase-balance"
      dimension={5}
      color={color}
      size={size}
      speed={sp...

Cycle: 2000msFrames: 7Frame: 286ms

SoC 0-20%

1 row lit (red) - indicates critical battery level

pink

zap-soc-0

/**
 * SoC 0-20%
 * 1 row lit (red) - indicates critical battery level
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapSoc0Animation() {
  return (
    <PixelGrid
      pattern="zap-soc-0"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapSoc0AnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-soc-0"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Stati...

Cycle: 1000msFrames: 6Frame: 167ms

SoC 20-40%

2 rows lit (orange) - indicates low battery level

pink

zap-soc-25

/**
 * SoC 20-40%
 * 2 rows lit (orange) - indicates low battery level
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapSoc25Animation() {
  return (
    <PixelGrid
      pattern="zap-soc-25"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapSoc25AnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-soc-25"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// S...

Cycle: 2000msFrames: 4Frame: 500ms

SoC 40-60%

3 rows lit (yellow) - indicates medium battery level

pink

zap-soc-50

/**
 * SoC 40-60%
 * 3 rows lit (yellow) - indicates medium battery level
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapSoc50Animation() {
  return (
    <PixelGrid
      pattern="zap-soc-50"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapSoc50AnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-soc-50"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

/...

Cycle: 3000msFrames: 4Frame: 750ms

SoC 60-80%

4 rows lit (light green) - indicates good battery level

green

zap-soc-75

/**
 * SoC 60-80%
 * 4 rows lit (light green) - indicates good battery level
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapSoc75Animation() {
  return (
    <PixelGrid
      pattern="zap-soc-75"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapSoc75AnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-soc-75"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );...

Cycle: 4000msFrames: 4Frame: 1000ms

SoC 80-100%

5 rows lit (green) - indicates full battery

green

zap-soc-100

/**
 * SoC 80-100%
 * 5 rows lit (green) - indicates full battery
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapSoc100Animation() {
  return (
    <PixelGrid
      pattern="zap-soc-100"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapSoc100AnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-soc-100"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// ...

Cycle: 5000msFrames: 4Frame: 1250ms

Smiley Face

Happy face - for success or celebration

green

zap-smiley

/**
 * Smiley Face
 * Happy face - for success or celebration
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapSmileyAnimation() {
  return (
    <PixelGrid
      pattern="zap-smiley"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapSmileyAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-smiley"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static...

Cycle: 2000msFrames: 6Frame: 333ms

Winking Smiley

Playful winking face animation

green

zap-smiley-wink

/**
 * Winking Smiley
 * Playful winking face animation
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapSmileyWinkAnimation() {
  return (
    <PixelGrid
      pattern="zap-smiley-wink"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapSmileyWinkAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-smiley-wink"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
...

Cycle: 1500msFrames: 6Frame: 250ms

Heart

Heart shape - for love and favorites

pink

zap-heart

/**
 * Heart
 * Heart shape - for love and favorites
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapHeartAnimation() {
  return (
    <PixelGrid
      pattern="zap-heart"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapHeartAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-heart"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-a...

Cycle: 1500msFrames: 5Frame: 300ms

Heart Beat

Pulsing heart - for health or love

pink

zap-heart-beat

/**
 * Heart Beat
 * Pulsing heart - for health or love
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapHeartBeatAnimation() {
  return (
    <PixelGrid
      pattern="zap-heart-beat"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapHeartBeatAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-heart-beat"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// ...

Cycle: 1200msFrames: 6Frame: 200ms

Star

Star shape - for ratings and favorites

pink

zap-star

/**
 * Star
 * Star shape - for ratings and favorites
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapStarAnimation() {
  return (
    <PixelGrid
      pattern="zap-star"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapStarAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-star"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-anim...

Cycle: 1500msFrames: 5Frame: 300ms

Spinning Star

Rotating star animation

pink

zap-star-spin

/**
 * Spinning Star
 * Rotating star animation
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapStarSpinAnimation() {
  return (
    <PixelGrid
      pattern="zap-star-spin"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapStarSpinAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-star-spin"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static displ...

Cycle: 800msFrames: 5Frame: 160ms

Fireworks

Explosive celebration animation

pink

zap-fireworks

/**
 * Fireworks
 * Explosive celebration animation
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapFireworksAnimation() {
  return (
    <PixelGrid
      pattern="zap-fireworks"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapFireworksAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-fireworks"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static...

Cycle: 1500msFrames: 8Frame: 188ms

Confetti

Random celebration sparkles

blue

zap-confetti

/**
 * Confetti
 * Random celebration sparkles
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapConfettiAnimation() {
  return (
    <PixelGrid
      pattern="zap-confetti"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapConfettiAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-confetti"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display ...

Cycle: 1000msFrames: 5Frame: 200ms

Flower

Blooming flower animation

pink

zap-flower

/**
 * Flower
 * Blooming flower animation
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapFlowerAnimation() {
  return (
    <PixelGrid
      pattern="zap-flower"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapFlowerAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-flower"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animate...

Cycle: 2500msFrames: 8Frame: 313ms

Sun

Radiating sun - for solar energy

pink

zap-sun

/**
 * Sun
 * Radiating sun - for solar energy
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapSunAnimation() {
  return (
    <PixelGrid
      pattern="zap-sun"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapSunAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-sun"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
expor...

Cycle: 1500msFrames: 5Frame: 300ms

Moon

Crescent moon - for night mode

blue

zap-moon

/**
 * Moon
 * Crescent moon - for night mode
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapMoonAnimation() {
  return (
    <PixelGrid
      pattern="zap-moon"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapMoonAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-moon"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
ex...

Cycle: 3000msFrames: 6Frame: 500ms

Cloud

Fluffy cloud shape

blue

zap-cloud

/**
 * Cloud
 * Fluffy cloud shape
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapCloudAnimation() {
  return (
    <PixelGrid
      pattern="zap-cloud"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapCloudAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-cloud"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
export fu...

Cycle: 2000msFrames: 5Frame: 400ms

Rain

Falling raindrops animation

blue

zap-rain

/**
 * Rain
 * Falling raindrops animation
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapRainAnimation() {
  return (
    <PixelGrid
      pattern="zap-rain"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapRainAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-rain"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
expor...

Cycle: 900msFrames: 6Frame: 150ms

Snow

Falling snowflakes

blue

zap-snow

/**
 * Snow
 * Falling snowflakes
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapSnowAnimation() {
  return (
    <PixelGrid
      pattern="zap-snow"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapSnowAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-snow"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
export functio...

Cycle: 1500msFrames: 6Frame: 250ms

Waves

Ocean wave animation

blue

zap-waves

/**
 * Waves
 * Ocean wave animation
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapWavesAnimation() {
  return (
    <PixelGrid
      pattern="zap-waves"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapWavesAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-waves"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
export ...

Cycle: 1000msFrames: 4Frame: 250ms

Fire

Flickering flames

pink

zap-fire

/**
 * Fire
 * Flickering flames
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapFireAnimation() {
  return (
    <PixelGrid
      pattern="zap-fire"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapFireAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-fire"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
export function...

Cycle: 600msFrames: 5Frame: 120ms

Tree

Simple tree shape - for nature/eco

green

zap-tree

/**
 * Tree
 * Simple tree shape - for nature/eco
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapTreeAnimation() {
  return (
    <PixelGrid
      pattern="zap-tree"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapTreeAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-tree"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animat...

Cycle: 2000msFrames: 5Frame: 400ms

House

Home icon - for home automation

green

zap-house

/**
 * House
 * Home icon - for home automation
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapHouseAnimation() {
  return (
    <PixelGrid
      pattern="zap-house"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapHouseAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-house"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-anim...

Cycle: 2000msFrames: 5Frame: 400ms

Car

Simple car shape - side view

blue

zap-car

/**
 * Car
 * Simple car shape - side view
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapCarAnimation() {
  return (
    <PixelGrid
      pattern="zap-car"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapCarAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-car"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
export fu...

Cycle: 800msFrames: 4Frame: 200ms

Rocket

Rocket launch animation

pink

zap-rocket

/**
 * Rocket
 * Rocket launch animation
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapRocketAnimation() {
  return (
    <PixelGrid
      pattern="zap-rocket"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapRocketAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-rocket"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)...

Cycle: 600msFrames: 4Frame: 150ms

Ghost

Spooky ghost animation

blue

zap-ghost

/**
 * Ghost
 * Spooky ghost animation
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapGhostAnimation() {
  return (
    <PixelGrid
      pattern="zap-ghost"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapGhostAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-ghost"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
expor...

Cycle: 1000msFrames: 3Frame: 333ms

Skull

Skull icon - for danger/death

pink

zap-skull

/**
 * Skull
 * Skull icon - for danger/death
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapSkullAnimation() {
  return (
    <PixelGrid
      pattern="zap-skull"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapSkullAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-skull"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated...

Cycle: 1200msFrames: 6Frame: 200ms

Cat

Cat face with animated ears

pink

zap-cat

/**
 * Cat
 * Cat face with animated ears
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapCatAnimation() {
  return (
    <PixelGrid
      pattern="zap-cat"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapCatAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-cat"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
export fun...

Cycle: 1500msFrames: 4Frame: 375ms

Fish

Swimming fish animation

blue

zap-fish

/**
 * Fish
 * Swimming fish animation
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapFishAnimation() {
  return (
    <PixelGrid
      pattern="zap-fish"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapFishAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-fish"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
export fu...

Cycle: 800msFrames: 4Frame: 200ms

Music Note

Musical note animation

blue

zap-music

/**
 * Music Note
 * Musical note animation
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapMusicAnimation() {
  return (
    <PixelGrid
      pattern="zap-music"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapMusicAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-music"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
...

Cycle: 1500msFrames: 5Frame: 300ms

Checkmark

Success/done indicator

green

zap-checkmark

/**
 * Checkmark
 * Success/done indicator
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapCheckmarkAnimation() {
  return (
    <PixelGrid
      pattern="zap-checkmark"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapCheckmarkAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-checkmark"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static displa...

Cycle: 1500msFrames: 8Frame: 188ms

Cross/X

Cancel/error indicator

pink

zap-cross

/**
 * Cross/X
 * Cancel/error indicator
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapCrossAnimation() {
  return (
    <PixelGrid
      pattern="zap-cross"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapCrossAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-cross"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
exp...

Cycle: 1000msFrames: 5Frame: 200ms

Question Mark

Help/unknown indicator

blue

zap-question

/**
 * Question Mark
 * Help/unknown indicator
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapQuestionAnimation() {
  return (
    <PixelGrid
      pattern="zap-question"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapQuestionAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-question"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display ...

Cycle: 1500msFrames: 5Frame: 300ms

Exclamation Mark

Alert/important indicator

pink

zap-exclaim

/**
 * Exclamation Mark
 * Alert/important indicator
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapExclaimAnimation() {
  return (
    <PixelGrid
      pattern="zap-exclaim"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapExclaimAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-exclaim"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static displa...

Cycle: 1000msFrames: 6Frame: 167ms

Arrow Up

Upward direction indicator

green

zap-arrow-up

/**
 * Arrow Up
 * Upward direction indicator
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapArrowUpAnimation() {
  return (
    <PixelGrid
      pattern="zap-arrow-up"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapArrowUpAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-arrow-up"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (...

Cycle: 1000msFrames: 4Frame: 250ms

Arrow Down

Downward direction indicator

green

zap-arrow-down

/**
 * Arrow Down
 * Downward direction indicator
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapArrowDownAnimation() {
  return (
    <PixelGrid
      pattern="zap-arrow-down"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapArrowDownAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-arrow-down"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Stat...

Cycle: 1000msFrames: 4Frame: 250ms

Arrow Left

Leftward direction indicator

green

zap-arrow-left

/**
 * Arrow Left
 * Leftward direction indicator
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapArrowLeftAnimation() {
  return (
    <PixelGrid
      pattern="zap-arrow-left"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapArrowLeftAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-arrow-left"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Stat...

Cycle: 1000msFrames: 4Frame: 250ms

Arrow Right

Rightward direction indicator

green

zap-arrow-right

/**
 * Arrow Right
 * Rightward direction indicator
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapArrowRightAnimation() {
  return (
    <PixelGrid
      pattern="zap-arrow-right"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapArrowRightAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-arrow-right"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

/...

Cycle: 1000msFrames: 4Frame: 250ms

Play

Media play button

green

zap-play

/**
 * Play
 * Media play button
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapPlayAnimation() {
  return (
    <PixelGrid
      pattern="zap-play"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapPlayAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-play"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
export functi...

Cycle: 1500msFrames: 5Frame: 300ms

Pause

Media pause button

blue

zap-pause

/**
 * Pause
 * Media pause button
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapPauseAnimation() {
  return (
    <PixelGrid
      pattern="zap-pause"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapPauseAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-pause"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
export fu...

Cycle: 1500msFrames: 5Frame: 300ms

Stop

Media stop button

pink

zap-stop

/**
 * Stop
 * Media stop button
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapStopAnimation() {
  return (
    <PixelGrid
      pattern="zap-stop"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapStopAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-stop"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
export function...

Cycle: 1500msFrames: 5Frame: 300ms

Power

Power button symbol

green

zap-power

/**
 * Power
 * Power button symbol
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapPowerAnimation() {
  return (
    <PixelGrid
      pattern="zap-power"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapPowerAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-power"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
export...

Cycle: 2000msFrames: 5Frame: 400ms

WiFi Bars

WiFi signal strength animation

blue

zap-wifi-bars

/**
 * WiFi Bars
 * WiFi signal strength animation
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapWifiBarsAnimation() {
  return (
    <PixelGrid
      pattern="zap-wifi-bars"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapWifiBarsAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-wifi-bars"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static di...

Cycle: 1500msFrames: 5Frame: 300ms

Signal Bars

Cellular signal strength

green

zap-signal

/**
 * Signal Bars
 * Cellular signal strength
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapSignalAnimation() {
  return (
    <PixelGrid
      pattern="zap-signal"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapSignalAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-signal"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-a...

Cycle: 1500msFrames: 5Frame: 300ms

Hourglass

Loading/waiting animation

blue

zap-hourglass

/**
 * Hourglass
 * Loading/waiting animation
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapHourglassAnimation() {
  return (
    <PixelGrid
      pattern="zap-hourglass"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapHourglassAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-hourglass"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static displ...

Cycle: 1200msFrames: 4Frame: 300ms

Clock

Time/clock face animation

blue

zap-clock

/**
 * Clock
 * Time/clock face animation
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapClockAnimation() {
  return (
    <PixelGrid
      pattern="zap-clock"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapClockAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-clock"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
ex...

Cycle: 2000msFrames: 4Frame: 500ms

Bell

Notification bell animation

pink

zap-bell

/**
 * Bell
 * Notification bell animation
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapBellAnimation() {
  return (
    <PixelGrid
      pattern="zap-bell"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapBellAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-bell"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
expor...

Cycle: 800msFrames: 4Frame: 200ms

Mail/Envelope

Message/email indicator

blue

zap-mail

/**
 * Mail/Envelope
 * Message/email indicator
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapMailAnimation() {
  return (
    <PixelGrid
      pattern="zap-mail"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapMailAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-mail"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
...

Cycle: 2000msFrames: 5Frame: 400ms

Pac-Man

Classic arcade chomping animation

pink

zap-pacman

/**
 * Pac-Man
 * Classic arcade chomping animation
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapPacmanAnimation() {
  return (
    <PixelGrid
      pattern="zap-pacman"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapPacmanAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-pacman"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (no...

Cycle: 500msFrames: 2Frame: 250ms

Space Invader

Classic arcade alien animation

green

zap-space-invader

/**
 * Space Invader
 * Classic arcade alien animation
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapSpaceInvaderAnimation() {
  return (
    <PixelGrid
      pattern="zap-space-invader"
      dimension={5}
      color="green"
      size="lg"
    />
  );
}

// With customization
export function zapSpaceInvaderAnimationCustom({
  color = "green",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-space-invader"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    /...

Cycle: 800msFrames: 2Frame: 400ms

Tetris

Falling tetris blocks

blue

zap-tetris

/**
 * Tetris
 * Falling tetris blocks
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapTetrisAnimation() {
  return (
    <PixelGrid
      pattern="zap-tetris"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapTetrisAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-tetris"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
e...

Cycle: 1500msFrames: 6Frame: 250ms

Dice

Rolling dice animation

blue

zap-dice

/**
 * Dice
 * Rolling dice animation
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapDiceAnimation() {
  return (
    <PixelGrid
      pattern="zap-dice"
      dimension={5}
      color="blue"
      size="lg"
    />
  );
}

// With customization
export function zapDiceAnimationCustom({
  color = "blue",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-dice"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
export fun...

Cycle: 1800msFrames: 6Frame: 300ms

Crown

Royal crown icon

pink

zap-crown

/**
 * Crown
 * Royal crown icon
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapCrownAnimation() {
  return (
    <PixelGrid
      pattern="zap-crown"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapCrownAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-crown"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
export func...

Cycle: 2000msFrames: 5Frame: 400ms

Trophy

Winner trophy icon

pink

zap-trophy

/**
 * Trophy
 * Winner trophy icon
 *
 * Using Sourceful Design System PixelGrid component
 */

import { PixelGrid } from "@sourceful-energy/ui";

// Basic usage
export function zapTrophyAnimation() {
  return (
    <PixelGrid
      pattern="zap-trophy"
      dimension={5}
      color="pink"
      size="lg"
    />
  );
}

// With customization
export function zapTrophyAnimationCustom({
  color = "pink",
  size = "md",
  speed = "normal",
  paused = false,
}: {
  color?: "green" | "blue" | "pink";
  size?: "sm" | "md" | "lg";
  speed?: "slow" | "normal" | "fast";
  paused?: boolean;
}) {
  return (
    <PixelGrid
      pattern="zap-trophy"
      dimension={5}
      color={color}
      size={size}
      speed={speed}
      paused={paused}
    />
  );
}

// Static display (non-animated)
expo...

Cycle: 2000msFrames: 5Frame: 400ms

Color System

Colors convey meaning. Use consistently across all Zap devices.

Green

Success, active, healthy states
Energy export (selling to grid)
Local control mode
Sourceful brand identity

Blue

Connecting, syncing, updating
EV/V2X charging states
Remote/cloud control mode
Data transfer

Pink/Orange/Red

Errors, warnings, alerts
Energy import (buying from grid)
Low battery states
Peak pricing alerts

Accessibility Note

Never rely on color alone to convey status. Each animation pattern is distinct enough to be recognizable regardless of color. Users with color blindness can distinguish states by the animation pattern shape and movement.

Code Implementation

Web Applications

Use the PixelGrid component from @sourceful-energy/ui

import { PixelGrid } from "@sourceful-energy/ui"

// Use any Zap animation pattern
<PixelGrid
  pattern="zap-ready"
  dimension={5}
  color="green"
  size="lg"
/>

// Dynamic state rendering
const ZapStatus = ({ status }) => (
  <PixelGrid
    pattern={`zap-${status}`}
    dimension={5}
    color={status === 'error' ? 'pink' : 'green'}
  />
)

Download Full Library

Download all 86 animations in your preferred format.

Timing Recommendations

Quick Reference

Pattern ID	State	Color	Cycle
zap-boot	Boot/Power On	green	2500ms
zap-ready	Ready/Hello	green	2000ms
zap-logo	Lightning Bolt	green	2500ms
zap-pairing	Pairing/WiFi Setup	blue	1500ms
zap-connecting	Connecting	blue	1800ms
zap-connected	Connected	green	2000ms
zap-no-network	No Network	pink	1200ms
zap-active	Active	green	2500ms
zap-standby	Standby/Idle	green	3000ms
zap-offline	Offline	blue	4000ms
zap-data-tx	Data Transferring	blue	1200ms
zap-syncing	Syncing	blue	1000ms
zap-no-data	No Data	pink	1500ms
zap-importing	Grid Import	pink	1000ms
zap-exporting	Grid Export	green	1000ms
zap-charging	Battery Charging	blue	2500ms
zap-discharging	Battery Discharging	green	2500ms
zap-peak-alert	Peak Approaching	pink	800ms
zap-grid-event	Grid Event Active	green	600ms
zap-local	Local Control	green	2000ms
zap-remote	Remote Control	blue	2000ms
zap-scheduled	Scheduled Mode	blue	2000ms
zap-error	Error	pink	1200ms
zap-warning	Warning	pink	1500ms
zap-updating	Firmware Update	blue	1500ms
zap-ev-connected	Vehicle Connected	blue	2000ms
zap-ev-charging	EV Charging	blue	800ms
zap-v2x-active	V2X Bidirectional	green	600ms
zap-ev-complete	Charge Complete	green	2500ms
zap-meter-reading	Meter Reading	blue	1200ms
zap-meter-connected	P1 Connected	green	2000ms
zap-phase-balance	Phase Indicator	blue	2000ms
zap-soc-0	SoC 0-20%	pink	1000ms
zap-soc-25	SoC 20-40%	pink	2000ms
zap-soc-50	SoC 40-60%	pink	3000ms
zap-soc-75	SoC 60-80%	green	4000ms
zap-soc-100	SoC 80-100%	green	5000ms
zap-smiley	Smiley Face	green	2000ms
zap-smiley-wink	Winking Smiley	green	1500ms
zap-heart	Heart	pink	1500ms
zap-heart-beat	Heart Beat	pink	1200ms
zap-star	Star	pink	1500ms
zap-star-spin	Spinning Star	pink	800ms
zap-fireworks	Fireworks	pink	1500ms
zap-confetti	Confetti	blue	1000ms
zap-flower	Flower	pink	2500ms
zap-sun	Sun	pink	1500ms
zap-moon	Moon	blue	3000ms
zap-cloud	Cloud	blue	2000ms
zap-rain	Rain	blue	900ms
zap-snow	Snow	blue	1500ms
zap-waves	Waves	blue	1000ms
zap-fire	Fire	pink	600ms
zap-tree	Tree	green	2000ms
zap-house	House	green	2000ms
zap-car	Car	blue	800ms
zap-rocket	Rocket	pink	600ms
zap-ghost	Ghost	blue	1000ms
zap-skull	Skull	pink	1200ms
zap-cat	Cat	pink	1500ms
zap-fish	Fish	blue	800ms
zap-music	Music Note	blue	1500ms
zap-checkmark	Checkmark	green	1500ms
zap-cross	Cross/X	pink	1000ms
zap-question	Question Mark	blue	1500ms
zap-exclaim	Exclamation Mark	pink	1000ms
zap-arrow-up	Arrow Up	green	1000ms
zap-arrow-down	Arrow Down	green	1000ms
zap-arrow-left	Arrow Left	green	1000ms
zap-arrow-right	Arrow Right	green	1000ms
zap-play	Play	green	1500ms
zap-pause	Pause	blue	1500ms
zap-stop	Stop	pink	1500ms
zap-power	Power	green	2000ms
zap-wifi-bars	WiFi Bars	blue	1500ms
zap-signal	Signal Bars	green	1500ms
zap-hourglass	Hourglass	blue	1200ms
zap-clock	Clock	blue	2000ms
zap-bell	Bell	pink	800ms
zap-mail	Mail/Envelope	blue	2000ms
zap-pacman	Pac-Man	pink	500ms
zap-space-invader	Space Invader	green	800ms
zap-tetris	Tetris	blue	1500ms
zap-dice	Dice	blue	1800ms
zap-crown	Crown	pink	2000ms
zap-trophy	Trophy	pink	2000ms

Pixel Grid

Sites Map

Zap LED Animations

Hardware Target

Zap Gateway Purpose

Interactive Demo

Animation Library

Color System

Accessibility Note

Code Implementation

Download Full Library

Timing Recommendations

Animation Timing Guidelines

Brightness Guidelines

Power Considerations

Quick Reference