Pulse Demo Skill

A Claude skill for creating demo videos of polling/voting dApps using Remotion with ElevenLabs voiceover.

Built on top of remotion-best-practices, this skill provides domain-specific patterns for poll/vote visualization, privacy mode animations, reward claiming flows, and multi-chain branding.

Features

• Poll Lifecycle Visualization: ACTIVE → CLAIMING → CLOSED → FINALIZED states
• Privacy Mode Animations: Anonymous, Semi-private, Identified modes
• Reward Animations: Token icons, claiming flows, distribution visuals
• Multi-chain Support: Aleo, Ethereum, Solana presets (or create your own)
• ElevenLabs Integration: Generate professional voiceovers from scripts
• Configurable Branding: Colors, fonts, logos, taglines

Installation

As a Claude Skill

# Create .claude directory
mkdir -p .claude/skills

# Install skill (can be invoked as /pulse-demo-skill)
ln -s /path/to/pulse-demo-skill/skill .claude/skills/pulse-demo-skill

As a CLI Tool

# Initialize a new demo video project
npx @blurtopian/pulse-demo-skill init my-poll-demo

cd my-poll-demo
npm install

Using the /pulse-demo-skill Command

The /pulse-demo-skill command guides you through a structured workflow with user confirmations:

/pulse-demo-skill my-demo

Workflow Checkpoints

| Step | Checkpoint | Description | |------|------------|-------------| | 0 | Workflow Confirmation | Review and approve the production plan | | 3 | Script Review | Approve voiceover text before sending to API | | 4 | Voice Selection | Choose from recommended voices (Rachel, Josh, etc.) |

Voice Options

| Voice | Gender | Style | Best For | |-------|--------|-------|----------| | Rachel | Female | Professional | Product demos (default) | | Josh | Male | Casual | Tech tutorials | | Bella | Female | Friendly | Approachable content | | Adam | Male | Neutral | Corporate, formal |

SSML Support

The command generates SSML markup for professional audio quality:

<speak>
  <p>
    Introducing <emphasis level="moderate">MyPolls</emphasis>
    <break time="200ms"/>
    decentralized voting on Aleo.
  </p>
</speak>

Quick Start

1. Initialize a new project

npx @blurtopian/pulse-demo-skill init my-poll-demo
cd my-poll-demo
npm install

2. Configure your brand (src/config/theme.ts)

export const theme: ThemeConfig = {
  colors: {
    primary: "#6366f1",
    secondary: "#8b5cf6",
    accent: "#a855f7",
    background: "#0a0a0a",
    text: "#fafafa",
    muted: "#a1a1aa",
  },
  fonts: {
    heading: "system-ui, sans-serif",
    body: "system-ui, sans-serif",
  },
  logo: {
    text: "MyPolls",
    gradient: ["#6366f1", "#a855f7"],
  },
  tagline: "Decentralized Voting",
  url: "mypolls.app",
};

3. Configure your chain (src/config/chain.ts)

import { chainPresets } from "pulse-demo-skill";

export const chain = chainPresets.aleo;
// Or customize:
// export const chain: ChainConfig = { ... }

4. Write your script (scripts/demo-script.md)

# Demo Script

## Scene 1: Intro (0:00 - 0:05)
**VO:** "Introducing MyPolls - decentralized voting on Aleo."
**Visual:** Logo animation

## Scene 2: Problem (0:05 - 0:12)
**VO:** "Traditional voting lacks privacy and transparency."
**Visual:** TextScene with problem statement

5. Generate voiceover

# Set your ElevenLabs API key
export ELEVENLABS_API_KEY=your_key_here

npm run generate:voiceover

6. Preview and render

npm run dev        # Preview in browser
npm run render     # Export MP4

Project Structure

my-poll-demo/
├── package.json
├── remotion.config.ts
├── tsconfig.json
├── scripts/
│   ├── demo-script.md          # Your video script
│   └── generate-voiceover.ts   # Voiceover generator
├── src/
│   ├── index.ts
│   ├── Root.tsx
│   ├── DemoVideo.tsx           # Main composition
│   ├── config/
│   │   ├── theme.ts            # Brand configuration
│   │   ├── chain.ts            # Blockchain settings
│   │   └── timings.ts          # Scene durations
│   ├── components/
│   │   ├── Logo.tsx
│   │   ├── TextScene.tsx
│   │   ├── PrivacyModes.tsx
│   │   ├── PollCreation.tsx
│   │   ├── VotingFlow.tsx
│   │   ├── RewardsClaim.tsx
│   │   └── CallToAction.tsx
│   └── lib/
│       └── elevenlabs.ts
└── public/
    └── audio/                  # Generated voiceovers

Configuration

Theme Configuration

interface ThemeConfig {
  colors: {
    primary: string;    // Main brand color
    secondary: string;  // Secondary accent
    accent: string;     // Highlights
    background: string; // Scene backgrounds
    text: string;       // Primary text
    muted: string;      // Secondary text
  };
  fonts: {
    heading: string;    // Title font
    body: string;       // Body text font
  };
  logo: {
    text: string;       // Logo text
    gradient?: [string, string]; // Optional gradient
  };
  tagline: string;      // Shown below logo
  url: string;          // Call-to-action URL
}

Chain Configuration

interface ChainConfig {
  name: string;           // "aleo", "ethereum", "solana"
  displayName: string;    // "Aleo Blockchain"
  primaryColor: string;
  secondaryColor: string;
  networkName: string;    // "Testnet", "Mainnet"
  privacyFeature?: string; // "Zero-Knowledge Proofs"
}

Built-in Chain Presets

import { chainPresets } from "pulse-demo-skill";

chainPresets.aleo      // Aleo - ZK-native
chainPresets.ethereum  // Ethereum - Solidity
chainPresets.solana    // Solana - High performance
chainPresets.polygon   // Polygon - L2
chainPresets.base      // Base - Coinbase L2

Available Components

| Component | Description | |-----------|-------------| | Logo | Animated logo with tagline and network badge | | TextScene | Title + text with animated gradient background | | PrivacyModes | Three privacy mode cards with icons | | PollCreation | Poll setup flow visualization | | VotingFlow | Voting interaction demo | | RewardsClaim | Reward claiming animation | | CallToAction | Final CTA with URL and button |

Commands

# Development
npm run dev              # Start Remotion Studio

# Rendering
npm run render           # Export as MP4
npm run render:gif       # Export as GIF
npm run thumbnail        # Export thumbnail PNG

# Voiceover
npm run generate:voiceover  # Generate from script

# Quality
npm run lint             # TypeScript check

Requirements

• Node.js 18+
• ElevenLabs API key (for voiceover generation)

Related

• remotion-best-practices - Core Remotion patterns
• Remotion Documentation
• ElevenLabs API

License

MIT