BEZE - Animation Engine

Stick figure animation engine with advanced character movement mechanics.

Features

• Stick Figure Character (circle head, oval torso, stick limbs)
• Walk/Run/Jump/Wave Animations
• 5 Walk Styles (Normal, Confident, Sad, Sneaky, Tired)
• Head Customization (hair, hats, expressions)
• Advanced Mechanics: Opposition, Overlap, Squash & Stretch

Kinetic Chain - Motion Hierarchy

flowchart TD
    HIPS["HIPS (Root)"] --> SPINE["SPINE"]
    SPINE --> CHEST["CHEST (Counter-rotate)"]
    CHEST --> HEAD["HEAD (Lag)"]
    CHEST --> SHOULDERS["SHOULDERS"]
    SHOULDERS --> ARMS["ARMS (Pendulum)"]
    HIPS --> LEGS["LEGS"]
    ARMS --> HANDS["HANDS (Follow-through)"]
    LEGS --> FEET["FEET (Contact)"]

    style HIPS fill:#e94560,color:#fff

Loading

Walk Cycle Phases

flowchart LR
    CONTACT["CONTACT\nHeel strike"] --> DOWN["DOWN\nWeight absorb"]
    DOWN --> PASS["PASSING\nLeg swings"]
    PASS --> UP["UP\nPush off"]
    UP --> CONTACT

    style CONTACT fill:#e94560,color:#fff

Loading

Opposition Principle

flowchart TB
    subgraph RULE["When RIGHT LEG forward"]
        R_LEG["Right Leg FORWARD"]
        L_ARM["Left Arm FORWARD"]
    end
    R_LEG <--> L_ARM

    style R_LEG fill:#e94560
    style L_ARM fill:#61dafb

Loading

Animation Data Flow

flowchart TD
    TIME["Delta Time"] --> KEYFRAMES["Interpolate Keyframes"]
    KEYFRAMES --> POSE["Calculate Pose"]

    POSE --> BODY["Body Mechanics\n- Hip rotation\n- Chest counter\n- Spine compress"]
    POSE --> HEAD["Head Mechanics\n- Bob (delayed)\n- Tilt (oppose)\n- Nod (pivot)"]
    POSE --> OVERLAP["Overlap\n- Hand lag\n- Foot rotation"]

    BODY --> RENDER["Render"]
    HEAD --> RENDER
    OVERLAP --> RENDER

    style TIME fill:#e94560
    style RENDER fill:#61dafb

Loading

Body Mechanics Flow

flowchart TD
    FEET["FEET (Ground)"] --> HIPS2["HIPS\nFigure-8 pattern"]
    HIPS2 --> SPINE2["SPINE\nCompression"]
    SPINE2 --> CHEST2["CHEST\nCounter-rotation"]
    CHEST2 --> HEAD2["HEAD\nLag + Stabilize"]
    CHEST2 --> ARMS2["ARMS\nPendulum"]

    style HIPS2 fill:#e94560,color:#fff

Loading

Walk Styles

Style	Head	Hip Sway	Weight
Normal	Neutral	Normal	Normal
Confident	HIGH	Swagger	Light
Sad	LOW	Minimal	Heavy
Sneaky	Forward	Suppressed	Light
Tired	Drooping	Lazy	Heavy

Usage

npm install
npm run dev

Controls

• Animations: Walk, Run, Jump, Wave, Stop
• Walk Style: Normal, Confident, Sad, Sneaky, Tired
• Expression: 12 facial expressions
• Eye Direction: 9 directions
• Head Direction: Left, Center, Right
• Hair/Hat: Multiple styles
• Blink: Auto or Manual

Animation Principles

1. Squash & Stretch
2. Anticipation
3. Follow-through & Overlap
4. Slow In/Slow Out (Easing)
5. Arcs
6. Secondary Action
7. Timing
8. Exaggeration

License

ISC License