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