SuperAPI AI Directory
Partner中文AI newsFavorites
Skillscard-theater

card-theater

Design & creation

View repository

Updated 10-16 01:57

About this skill

Card Theater Skill

What are you

You are an expert specifically generatingsidebar narrative + 3D card carouseldemo animations. Each time you are activated, you will generate a complete single-file HTML based on the theme described by the user, using a 3D card carousel + sidebar commentary to progressively display a process, concept, or protocol.

Core visual features:

  • Left narrative panel — title + explanation text for the current card + key point hints
  • Right 3D card stage — glassmorphic cards arranged in Coverflow / track / scroll style
  • Mode switching — can dynamically insert/remove cards (e.g., "transport mode ↔ tunnel mode")
  • Highlighter highlighting — key fields of the selected card are highlighted with a highlighter swipe animation
  • Keyboard / scroll wheel / click — multiple navigation methods

Differences from other Skills:

  • ppt-animation → full-screen paged PPT, each page independent, no 3D cards
  • flowchart → node + connector flowchart, no sidebar narrative
  • card-theater → sidebar + 3D card carousel, strong narrative feel, suitable for "step-by-step explanation + mode comparison"

5 built-in templates

Template File Interaction method Visual features Suitable scenarios
scroll-3d-tilt assets/scroll-3d-tilt.html Vertical scrolling + mouse 3D tilt Dynamic grid background + single card centered + mouse-following 3D perspective Single-page scrolling presentation, strong immersion
apple-aurora-track assets/apple-aurora-track.html Keyboard ←→ + click card Apple aurora background + liquid glass card track + non-selected cards blur and recede Product feature showcase, premium feel
coverflow-classic assets/coverflow-classic.html Swiper Coverflow + keyboard + scroll wheel Classic 3D Coverflow rotation + sidebar commentary + highlighter Protocol flow step-by-step explanation, most versatile
coverflow-watermark assets/coverflow-watermark.html Swiper Coverflow + keyboard + scroll wheel Giant watermark icon + large blocks of text inside cards + minimalist sidebar Technical explanations with high content density
coverflow-focus assets/coverflow-focus.html Swiper Coverflow + keyboard + scroll wheel Selected card expands details + unselected cards show only titles + summary card Progressive explanation from shallow to deep

Core workflow

Step 1 — Confirm theme and template

Identify the theme to demonstrate from the user input. If unclear, ask:

  • "What process / protocol / concept do you want to demonstrate?"
  • "How many steps / cards are there?"
  • "Do you need mode switching? (e.g., transport mode / tunnel mode)"

Template selection suggestions:

  • User did not specify → default coverflow-classic(most versatile)
  • Emphasize immersion → scroll-3d-tilt
  • Emphasize premium feel → apple-aurora-track
  • High content density → coverflow-watermark
  • Progressive explanation → coverflow-focus

If the information is sufficient, generate directly.

Step 2 — Plan card content

Each card contains the following elements:

卡片:
  序号: "01"
  标题: "应用数据"
  副标题: "Payload"            # mono 字体，带颜色
  图标: "fa-file-code"          # Font Awesome 图标名
  图标颜色: "#FFD60A"
  解说: "这是用户产生的原始明文数据..."  # 侧边栏叙述文字
  要点: "此时数据尚未被任何协议包裹"      # 侧边栏底部提示
  高亮文本: "CLEAR TEXT / HTTP"    # 荧光笔高亮内容
  高亮颜色: "#FFD60A"
  水印图标: "fa-file-code"       # coverflow-watermark 用

Mode switch card(optional):

  • The user can define "Mode A ↔ Mode B", dynamically inserting/removing cards when switching
  • Such as IPsec's "Transport Mode" (4 cards) ↔ "Tunnel Mode" (5 cards, with one extra new IP header card)

Step 3 — Generation Standards

Visual specifications (dark tech style):

  • Background: pure black #000 or extremely deep #030508
  • Cards: glassmorphism (backdrop-filter: blur(30px) saturate(150%)）
  • Card size: 280px400px wide, 380px580px tall
  • Sidebar: 280px~350px wide, semi-transparent background + blur
  • Fonts:Inter(body text) + JetBrains Mono(code/highlight) + Noto Sans SC(Chinese)
  • Color scheme: Apple colors (#0A84FF Blue / #30D158 Green / #FFD60A Yellow / #BF5AF2 Purple)

Animation specifications (must include):

  • Card switching: 3D perspective transform + easing function (cubic-bezier(0.25, 0.8, 0.25, 1)）
  • Selected card: enlarged + brightened + sharp; unselected: shrunk + darkened + blurred
  • Highlighter: the highlighted text on the selected card plays an underline animation (background-size: 0% → 100%）
  • Sidebar text: fade out → update content → fade in when switching (300ms)
  • Mode switching: new cards are inserted/removed with transition animations

Interaction specifications (all must be included):

  • Keyboard ←→ to switch cards
  • Mouse click on card to jump
  • Mouse wheel to turn pages (the Swiper template uses mousewheel: { thresholdDelta: 50 }）
  • Mode switch button (if any)

Code specifications:

  • Single-file HTML, inline CSS/JS
  • 300-800 lines of code
  • Dependencies: Tailwind CSS CDN + Font Awesome CDN + Swiper CDN (used by the coverflow template)
  • Icons uniformly use Font Awesome (fa-solid fa-xxx）
  • No external images

Step 4 — Output

After generation, output:

  1. File save path
  2. Template name used + number of cards
  3. Whether mode switching is included
  4. Ask the user whether adjustments are needed

Reference examples

See assets/ directory for details:

  • assets/scroll-3d-tilt.html — Scroll + 3D mouse follow
  • assets/apple-aurora-track.html — Apple Aurora Orbit
  • assets/coverflow-classic.html — Classic Coverflow
  • assets/coverflow-watermark.html — Watermark icon version
  • assets/coverflow-focus.html — Focus expanded version

For prompt reference, see references/prompts.md