concept-animator

ایده‌ها و مدل‌های ذهنی را به explainer انیمیشنی قابل‌ضبط در React تبدیل می‌کند.

این skill یک مفهوم خام، مقایسه یا مدل ذهنی را به یک انیمیشن explainer کوتاه در قالب artifact ری‌اکت تبدیل می‌کند؛ از انتخاب استعاره و ساختار بصری تا نوشتن پیام نهایی و تولید فایل .jsx آماده اجرا.

انیمیشن‌ها برای ضبط صفحه و انتشار در LinkedIn، X یا ارائه‌ها طراحی می‌شوند: مربع ۵۴۰×۵۴۰، متن کم، حرکت مرحله‌ای، انتقال واضح از وضعیت قبل به بعد و یک punchline قابل‌فهم برای مخاطب عمومی.

چه چیزی می‌گیرید

• تبدیل خودکار ایده به روایت بصری شامل سؤال، وضعیت اول، تغییر، وضعیت دوم و punchline
• انتخاب مناسب‌ترین الگوی بصری مانند bar chart، funnel، timeline، gauge یا Venn diagram
• artifact تک‌فایلی React با CSS keyframes، اجرای خودکار و دکمه Replay
• طراحی خوانا برای مخاطب عمومی با حداکثر ۲۰ کلمه روی صفحه
• فایل `.jsx` آماده ذخیره در `/mnt/user-data/outputs/` و ضبط صفحه

برای چه کاری خوب است

• تولیدکنندگان محتوا و متخصصانی که می‌خواهند یک مفهوم پیچیده را برای LinkedIn یا X قابل‌اشتراک کنند
• تیم‌های محصول، بازاریابی و آموزش که به یک infographic متحرک کوتاه نیاز دارند
• توضیح مدل‌های ذهنی، مقایسه‌های قبل/بعد، آمارهای مهم و ایده‌های کسب‌وکاری با حرکت

برای چه کاری نیست

• ویدیوهای طولانی، تدوین حرفه‌ای یا پروژه‌هایی که به صداگذاری، موسیقی و timeline پیچیده نیاز دارند
• مفاهیم تخصصی یا مبهمی که بدون توضیح زمینه، مخاطب یا مثال واقعی قابل‌درک نیستند
• انیمیشن‌های تعاملی کامل یا محصولاتی که به animation library خارجی و کنترل‌های پیشرفته نیاز دارند

دربارهٔ این اسکیل

Concept Animator

Create stunning 5-7 second animated concept explainers as React (.jsx) artifacts. The user screen-records these for LinkedIn, Twitter, or presentations.

How It Works

The user gives a RAW CONCEPT — just a topic, idea, mental model, or comparison. Examples:

• "80/20 rule"
• "Technical debt"
• "AI replacing jobs"
• "Product-market fit"
• "Compound interest"
• "Dunning-Kruger effect"

Claude's job is to:

1. Interpret the concept — find the core tension, the "most people think X, but actually Y" insight
2. Choose the best visual scheme — pick from the animation patterns below
3. Write the punchline — a single bold reframed insight a common person would understand
4. Generate the animated React artifact — ready to screen-record

The user does NOT need to specify the visual type, animation style, or punchline. Claude figures it all out automatically.

Handling Niche or Ambiguous Concepts

If the concept is NOT universally known (e.g., a proprietary framework, an obscure theory, a domain-specific mental model, or something Claude isn't confident about), Claude MUST ask clarifying questions BEFORE generating. Never guess at a concept you don't fully understand.

Ask 2-3 of these (whichever are most relevant):

1. What's the core idea in one sentence? — "Explain it like I'm 10"
2. What's the common misconception vs the reality? — This gives you the before/after
3. Who's the audience? — Founders? Engineers? General public?
4. Can you give a real-world analogy? — Helps pick the visual scheme

For well-known concepts (Pareto principle, sunk cost, compound interest, network effects, etc.), skip the questions and generate immediately.

Design Principles

For a Common Audience

• NO jargon. Every label, title, and punchline should be understood by someone who has never heard of the concept.
• Use relatable real-world examples in the visual (e.g., "effort" not "resource allocation", "results" not "output yield")
• The punchline should make someone stop scrolling and think "huh, that's true"

Visual Style

• Dark background (#0a0a0a or #111) — optimized for LinkedIn/Twitter feeds where dark stands out
• One accent color — use a single vibrant accent (electric blue #4F8EF7, amber #F59E0B, emerald #10B981, or coral #F97066) plus white/gray for contrast
• Clean sans-serif typography — use system fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
• Square aspect ratio (1:1) — works best on LinkedIn mobile. Set the container to a fixed 540px x 540px
• No clutter — maximum 20 words on screen at any time
• Subtle grain/texture optional for premium feel

Animation Rules

• Use CSS keyframes via a style tag inside the component — NOT external animation libraries
• Every element should animate in (fade, slide, scale, draw) — nothing should just "appear"
• Easing: use cubic-bezier(0.16, 1, 0.3, 1) for smooth, satisfying motion
• Stagger related elements by 100-200ms for visual rhythm
• The transformation moment (State A to State B) should feel like a "reveal" — this is the dopamine hit

The Narrative Arc

EVERY animation follows this structure:

PROVOCATIVE QUESTION then STATE A then TRANSFORMATION then STATE B then PUNCHLINE

Timing Contract

Total: about 8 seconds. Animation auto-starts on mount via useEffect. Include a small Replay button in the bottom-right corner.

Visual Scheme Selection Guide

Claude MUST pick the BEST scheme for the concept. DO NOT default to pie charts for everything.

1. PIE CHART SHIFT

Best for: How time / effort / attention / budget is redistributed.
Examples: AI replacing PM execution, Where engineers spend time.
Visual: Two pie charts. Left = before, right = after. Arrow in middle.

2. BAR CHART COMPARISON

Best for: Magnitude comparisons, what matters more, surprising ratios.
Examples: 80/20 rule, 5G vs 4G speed, Startup cost then vs now.
Visual: Horizontal or vertical bars with animated growth. Labels clear.

3. SCALE / BALANCE

Best for: Trade-offs, imbalanced effort-to-result ratios.
Examples: Pareto principle, Input vs output, Work smarter not harder.
Visual: A visual balance/seesaw that tips or rebalances during the transformation.

4. FUNNEL

Best for: Filtering, conversion, narrowing down.
Examples: Why startups fail, Hiring funnel, Sales pipeline.
Visual: Animated funnel with sections dropping away.

5. STACKED BLOCKS / WATERFALL

Best for: Composition shifts, what makes up a whole.
Examples: Technical debt, Where your money goes, Time breakdown.
Visual: Stacked rectangles that rearrange or shift proportions.

6. COUNTER / NUMBER MORPH

Best for: Surprising statistics, did you know facts.
Examples: Compound interest, How fast AI is growing, Cost of delay.
Visual: Large numbers that count up or morph with a dramatic reveal.

7. PATH / TIMELINE

Best for: Evolution, progression, journey.
Examples: Career path, Product stages, Tech generations.
Visual: Horizontal path with milestones that light up sequentially.

8. VENN DIAGRAM SHIFT

Best for: Overlap changes, convergence or divergence.
Examples: Design + engineering, Product-market fit.
Visual: Two or three circles that animate their overlap.

9. METER / GAUGE

Best for: Threshold concepts, tipping points.
Examples: When to pivot, Burnout, Technical debt threshold.
Visual: A gauge needle that sweeps from safe to danger zone.

10. GRID / HIGHLIGHT

Best for: Vital few vs trivial many, spotlighting the important minority.
Examples: 80/20 rule, Focus, Signal vs noise.
Visual: A grid of equal items where only a few light up to show disproportionate impact.

Watermark

EVERY animation must include a small watermark at the bottom-left corner:

<div style={{
  position: "absolute", bottom: 10, left: 16, zIndex: 10,
  fontSize: 10, fontWeight: 500, letterSpacing: 1.5,
  color: "rgba(255,255,255,0.2)", textTransform: "lowercase",
}}>
  serin paul
</div>

This must appear on every generated animation. It fades in with the punchline (same timing as punchline phase).

React Artifact Template

The output must be a single .jsx file saved to /mnt/user-data/outputs/. Structure:

import { useState, useEffect } from "react";

export default function ConceptAnimation() {
  const [key, setKey] = useState(0);
  const replay = () => setKey(k => k + 1);

  return (
    <div style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh", background: "#000" }}>
      <div key={key} style={{ position: "relative", width: 540, height: 540, background: "#0a0a0a", borderRadius: 12, overflow: "hidden", fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" }}>
        <style>{`
          /* All @keyframes here */
        `}</style>
        {/* Title, State A, Transform, State B, Punchline layers */}
        <button onClick={replay} style={{
          position: "absolute", bottom: 16, right: 16, zIndex: 10,
          background: "rgba(255,255,255,0.1)", border: "none",
          color: "#666", fontSize: 12, padding: "5px 12px",
          borderRadius: 20, cursor: "pointer", letterSpacing: 0.5
        }}>↻ Replay</button>
      </div>
    </div>
  );
}

Process Checklist (Claude follows for every request)

1. Read the concept from the user
2. Research if needed (web search for data/stats that make it more compelling)
3. Identify the core tension (most people think X, but actually Y)
4. Write the provocative question (max 6 words)
5. Choose the visual scheme from the 10 options above
6. Design State A and State B with specific labels and values
7. Write the punchline (max 12 words, punchy, no jargon)
8. Build the React artifact following the timing contract exactly
9. Ensure it renders at 540x540 with dark background
10. Save to /mnt/user-data/outputs/ and present to user

دانلود ZIP