Getting Started

SKELETORAMA creates CSS-animated puppet characters from layered images. Each part (head, hands, body) can be independently positioned and animated.

1. Click + Add to create a new part
2. Upload an image for the part
3. Drag to position on the stage
4. Configure animation in the Animation tab
5. Copy generated CSS from the Export tab

Parts Tab

• Name — Identifies the part in exports (e.g., "head" → .puppet-head)
• Type — Organizational label (body, head, hand, etc.)
• Static — Check for non-animated parts (backgrounds)
• Z-Index — Layering order (higher = on top)
• Position — X/Y coordinates from bottom-left
• ↑/↓ buttons — Reorder layer stack

Animation Tab

Select an animated part, then configure its motion:

• Presets — Quick-start animation templates (flap, shiver, laugh, etc.)
• Pivot Point — The rotation/transform origin (X%, Y%)
• Rotate — Degrees of rotation at animation peak
• Translate X/Y — Pixel movement at animation peak
• Speed — Animation cycle duration in seconds
• Easing — Animation timing function

Saving Animations: Enter a name and click + Save to store the current settings. Saved animations appear in CSS export and work with {move:name} tags.

Animation Presets

flap

Rotation + slight lift — talking/jaw

chatter

Vertical bounce — nervous energy

shiver

Horizontal shake — scared/cold

laugh

Tilt back + lift — laughing

accordion

Move right — right hand gesture

accordion-left

Move left — left hand gesture

bounce

Vertical bob — full body

sway

Gentle rotation — idle motion

nod

Rotation from top — head nod

wave

Rotation from bottom-left — waving

Preview Tab

Test animations with typewriter-style text playback. Animation tags control the puppet:

{move:name}

Switch to named animation

{speed:N}

Typing speed in ms (50 = normal)

{anim:N}

Animation speed in seconds

{wait:N}

Pause for N milliseconds

{reset}

Return to default animation

Example: Hello! {move:laugh}Ha ha!{reset}

Export Tab

• Copy CSS — Copy generated styles to clipboard
• Save JSON — Download project file for later
• Load JSON — Restore a saved project

The exported CSS uses CSS variables for animation switching. Set --partname-anim and --partname-speed via JavaScript to change animations at runtime.

Keyboard Shortcuts

Space

Toggle animation preview

↑ ↓ ← →

Move selected part 1px

Shift + Arrows

Move selected part 10px

Esc

Close this help

Tips

• Start with the body/background as a static part
• Set the pivot point where joints naturally hinge (jaw = bottom-center)
• Save multiple animations per part (talk, laugh, shiver) for variety
• Use the light/dark stage toggle to check against different backgrounds
• Export subtracts 4px from bottom positions — adjust if needed