Story & NarrativeHyperFramesv1.0.0 · Verified

Agent Storytelling & HyperFrames

Warm watercolor storytelling workflow by Jake Moran & HeyGen

Authored by:Jake Moran(@jake11moran)·Compatible with: Claude Code, Cursor, Antigravity

One-Command Install for Claude Code & Cursor

Terminal curl · Saves directly to .claude/skills/

curl -sSL https://promptmotion.io/api/skills/raw/session-story -o .claude/skills/session-story/SKILL.md

Core Engineering Rules & Architecture

Creates charming, character-driven session stories with cozy paper textures, illustrated blocks, and synchronized props. Powered by the open-source HyperFrames community skills.

Animation rules applied by your agent:

Tactile paper textures and boiling watercolor displacement line filters
Physical paper props (such as paper planes for tasks) carrying narrative beats
Character facial expression sets modulated by state triggers
Seamless scene-to-scene camera transitions that maintain continuous world immersion

Example Trigger Prompts

Once installed in .claude/skills/ or .cursor/rules/, trigger your coding agent in Claude Code or Cursor using these natural prompts:

"Tell an animated session story showing how an AI agent helped a user today"

"Create a warm watercolor animated explainer with paper textures and cute character blocks"

"Build a story reel showing multiple agents collaborating on tasks in a cozy room"

SKILL.md Source Code

---
name: session-story
description: Build warm, character-driven storytelling animations with cozy watercolor paper looks.
version: 1.0.0
author: Jake Moran (@jake11moran) & HeyGen HyperFrames
license: MIT
---

# Animated Session Story Skill

Use this skill to turn developer interactions, agent tasks, or product case studies into charming, illustrated watercolor narratives.

## 1. World & Aesthetic
- **Environment**: A warm, cozy room serving as the miniature world.
- **Characters**: Minimal geometric blocks with emotive line faces.
- **Physical Props**: Express digital concepts through physical desk metaphors (folded paper planes for network requests, stamps for approvals, wooden blocks for tasks).
- **Surface Texture**: SVG noise filter with 0.03 turbulence layered over a paper texture background (`#FDFBF7`).

## 2. Character Dynamics
- Characters communicate through bodily squash-and-stretch and eye blinks.
- Speech bubbles use hand-lettered sans-serif typography with small bounce entries.
- When an agent finishes a task, trigger a celebratory hop with a 1.15x scale overshoot.

## 3. Continuity & Transitions
- Never hard-cut: transition through continuous camera pans, zooms, or prop flight paths.
- Keep the light source consistent (top-left 45 degrees, warm amber hue).
- The final frame loops smoothly back into the quiet opening room state.

Frequently Asked Questions

What engine does this skill use?

This workflow is built on HyperFrames and SVG displacement filters, but compiles seamlessly into standard HTML5 Canvas and Remotion compositions.

How are the watercolor and paper texture effects achieved?

Using SVG turbulence `<feTurbulence>` and displacement `<feDisplacementMap>` filters layered over a subtle multiply-blended paper grain canvas pattern.