Communitygithub.com

delorenj/skills

ASCII video: convert video/audio to colored ASCII MP4/GIF.

Was ist skills?

skills is a Claude Code agent skill that aSCII video: convert video/audio to colored ASCII MP4/GIF.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/delorenj/skills/tree/HEAD/ascii-video

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

ASCII Video Production Pipeline

When to use

Use when users request: ASCII video, text art video, terminal-style video, character art animation, retro text visualization, audio visualizer in ASCII, converting video to ASCII art, matrix-style effects, or any animated ASCII output.

What's inside

Production pipeline for ASCII art video — any format. Converts video/audio/images/generative input into colored ASCII character video output (MP4, GIF, image sequence). Covers: video-to-ASCII conversion, audio-reactive music visualizers, generative ASCII art animations, hybrid video+audio reactive, text/lyrics overlays, real-time terminal rendering.

Creative Standard

This is visual art. ASCII characters are the medium; cinema is the standard.

Before writing a single line of code, articulate the creative concept. What is the mood? What visual story does this tell? What makes THIS project different from every other ASCII video? The user's prompt is a starting point — interpret it with creative ambition, not literal transcription.

First-render excellence is non-negotiable. The output must be visually striking without requiring revision rounds. If something looks generic, flat, or like "AI-generated ASCII art," it is wrong — rethink the creative concept before shipping.

Go beyond the reference vocabulary. The effect catalogs, shader presets, and palette libraries in the references are a starting vocabulary. For every project, combine, modify, and invent new patterns. The catalog is a palette of paints — you write the painting.

Be proactively creative. Extend the skill's vocabulary when the project calls for it. If the references don't have what the vision demands, build it. Include at least one visual moment the user didn't ask for but will appreciate — a transition, an effect, a color choice that elevates the whole piece.

Cohesive aesthetic over technical correctness. All scenes in a video must feel connected by a unifying visual language — shared color temperature, related character palettes, consistent motion vocabulary. A technically correct video where every scene uses a random different effect is an aesthetic failure.

Dense, layered, considered. Every frame should reward viewing. Never flat black backgrounds. Always multi-grid composition. Always per-scene variation. Always intentional color.

Modes

ModeInputOutputReference
Video-to-ASCIIVideo fileASCII recreation of source footagereferences/inputs.md § Video Sampling
Audio-reactiveAudio fileGenerative visuals driven by audio featuresreferences/inputs.md § Audio Analysis
GenerativeNone (or seed params)Procedural ASCII animationreferences/effects.md
HybridVideo + audioASCII video with audio-reactive overlaysBoth input refs
Lyrics/textAudio + text/SRTTimed text with visual effectsreferences/inputs.md § Text/Lyrics
TTS narrationText quotes + TTS APINarrated testimonial/quote video with typed textreferences/inputs.md § TTS Integration

Stack

Single self-contained Python script per project. No GPU required.

LayerToolPurpose
CorePython 3.10+, NumPyMath, array ops, vectorized effects
SignalSciPyFFT, peak detection (audio modes)
ImagingPillow (PIL)Font rasterization, frame decoding, image I/O
Video I/Offmpeg (CLI)Decode input, encode output, mux audio
Parallelconcurrent.futuresN workers for batch/clip rendering
TTSElevenLabs API (optional)Generate narration clips
OptionalOpenCVVideo frame sampling, edge detection

Pipeline Architecture

Every mode follows the same 6-stage pipeline:

INPUT → ANALYZE → SCENE_FN → TONEMAP → SHADE → ENCODE
  1. INPUT — Load/decode source material (video frames, audio samples, images, or nothing)
  2. ANALYZE — Extract per-frame features (audio bands, video luminance/edges, motion vectors)
  3. SCENE_FN — Scene function renders to pixel canvas (uint8 H,W,3). Composes multiple character grids via _render_vf() + pixel blend modes. See references/composition.md
  4. TONEMAP — Percentile-based adaptive brightness normalization. See references/composition.md § Adaptive Tonemap
  5. SHADE — Post-processing via ShaderChain + FeedbackBuffer. See references/shaders.md
  6. ENCODE — Pipe raw RGB frames to ffmpeg for H.264/GIF encoding

Creative Direction

Aesthetic Dimensions

DimensionOptionsReference
Character paletteDensity ramps, block elements, symbols, scripts (katakana, Greek, runes, braille), project-specificarchitecture.md § Palettes
Color strategyHSV, OKLAB/OKLCH, discrete RGB palettes, auto-generated harmony, monochrome, temperaturearchitecture.md § Color System
Background textureSine fields, fBM noise, domain warp, voronoi, reaction-diffusion, cellular automata, videoeffects.md
Primary effectsRings, spirals, tunnel, vortex, waves, interference, aurora, fire, SDFs, strange attractorseffects.md
ParticlesSparks, snow, rain, bubbles, runes, orbits, flocking boids, flow-field followers, trailseffects.md § Particles
Shader moodRetro CRT, clean modern, glitch art, cinematic, dreamy, industrial, psychedelicshaders.md
Grid densityxs(8px) through xxl(40px), mixed per layerarchitecture.md § Grid System
Coordinate spaceCartesian, polar, tiled, rotated, fisheye, Möbius, domain-warpedeffects.md § Transforms
FeedbackZoom tunnel, rainbow trails, ghostly echo, rotating mandala, color evolutioncomposition.md § Feedback
MaskingCircle, ring, gradient, text stencil, animated iris/wipe/dissolvecomposition.md § Masking
TransitionsCrossfade, wipe, dissolve, glitch cut, iris, mask-based revealshaders.md § Transitions

Per-Section Variation

Never use the same config for the entire video. For each section/scene:

  • Different background effect (or compose 2-3)
  • Different character palette (match the mood)
  • Different color strategy (or at minimum a different hue)
  • Vary shader intensity (more bloom during peaks, more grain during quiet)
  • Different particle types if particles are active

Project-Specific Invention

For every project, invent at least one of:

  • A custom character palette matching the theme
  • A custom background effect (combine/modify existing building blocks)
  • A custom color palette (discrete RGB set matching the brand/mood)
  • A custom particle character set
  • A novel scene transition or visual moment

Don't just pick from the catalog. The catalog is vocabulary — you write the poem.

Workflow

Step 1: Creative Vision

Before any code, articulate the creative concept:

  • Mood/atmosphere: What should the viewer feel? Energetic, meditative, chaotic, elegant, ominous?
  • Visual story: What happens over the duration? Build tension? Transform? Dissolve?
  • Color world: Warm/cool? Monochrome? Neon? Earth tones? What's the dominant hue?
  • Character texture: Dense data? Sparse stars? Organic dots? Geometric blocks?
  • What makes THIS different: What's the one thing that makes this project unique?
  • Emotional arc: How do scenes progress? Open with energy, build to climax, resolve?

Map the user's prompt to aesthetic choices. A "chill lo-fi visualizer" demands different everything from a "glitch cyberpunk data stream."

Step 2: Technical Design

  • Mode — which of the 6 modes above
  • Resolution — landscape 1920x1080 (default), portrait 1080x1920, square 1080x1080 @ 24fps
  • Hardware detection — auto-detect cores/RAM, set quality profile. See references/optimization.md
  • Sections — map timestamps to scene functions, each with its own effect/palette/color/shader config
  • Output format — MP4 (default), GIF (640x360 @ 15fps), PNG sequence

Step 3: Build the Script

Single Python file. Components (with references):

  1. Hardware detection + quality profile — references/optimization.md
  2. Input loader — mode-dependent; references/inputs.md
  3. Feature analyzer — audio FFT, video luminance, or synthetic
  4. Grid + renderer — multi-density grids with bitmap cache; references/architecture.md
  5. Character palettes — multiple per project; references/architecture.md § Palettes
  6. Color system — HSV + discrete RGB + harmony generation; references/architecture.md § Color
  7. Scene functions — each returns canvas (uint8 H,W,3); references/scenes.md
  8. Tonemap — adaptive brightness normalization; references/composition.md
  9. Shader pipeline — ShaderChain + FeedbackBuffer; references/shaders.md
  10. Scene table + dispatcher — time → scene function + config; references/scenes.md
  11. Parallel encoder — N-worker clip rendering with ffmpeg pipes
  12. Main — orchestrate full pipeline

Step 4: Quality Verification

  • Test frames first: render single frames at key timestamps before full render
  • Brightness check: canvas.mean() > 8 for all ASCII content. If dark, lower gamma
  • Visual coherence: do all scenes feel like they belong to the same video?
  • Creative vision check: does the output match the concept from Step 1? If it looks generic, go back

Critical Implementation Notes

Brightness — Use tonemap(), Not Linear Multipliers

This is the #1 visual issue. ASCII on black is inherently dark. Never use canvas * N multipliers — they clip highlights. Use adaptive tonemap:

def tonemap(canvas, gamma=0.75):
    f = canvas.astype(np.float32)
    lo, hi = np.percentile(f[::4, ::4], [1, 99.5])
    if hi - lo < 10: hi = lo + 10
    f = np.clip((f - lo) / (hi - lo), 0, 1) ** gamma
    return (f * 255).astype(np.uint8)

Pipeline: scene_fn() → tonemap() → FeedbackBuffer → ShaderChain → ffmpeg

Per-scene gamma: default 0.75, solarize 0.55, posterize 0.50, bright scenes 0.85. Use screen blend (not overlay) for dark layers.

Font Cell Height

macOS Pillow: textbbox() returns wrong height. Use font.getmetrics(): cell_height = ascent + descent. See references/troubleshooting.md.

ffmpeg Pipe Deadlock

Never stderr=subprocess.PIPE with long-running ffmpeg — buffer fills at 64KB and deadlocks. Redirect to file. See references/troubleshooting.md.

Font Compatibility

Not all Unicode chars render in all fonts. Validate palettes at init — render each char, check for blank output. See references/troubleshooting.md.

Per-Clip Architecture

For segmented videos (quotes, scenes, chapters), render each as a separate clip file for parallel rendering and selective re-rendering. See references/scenes.md.

Performance Targets

ComponentBudget
Feature extraction1-5ms
Effect function2-15ms
Character render80-150ms (bottleneck)
Shader pipeline5-25ms
Total~100-200ms/frame

References

FileContents
references/architecture.mdGrid system, resolution presets, font selection, character palettes (20+), color system (HSV + OKLAB + discrete RGB + harmony generation), _render_vf() helper, GridLayer class
references/composition.mdPixel blend modes (20 modes), blend_canvas(), multi-grid composition, adaptive tonemap(), FeedbackBuffer, PixelBlendStack, masking/stencil system
references/effects.mdEffect building blocks: value field generators, hue fields, noise/fBM/domain warp, voronoi, reaction-diffusion, cellular automata, SDFs, strange attractors, particle systems, coordinate transforms, temporal coherence
references/shaders.mdShaderChain, _apply_shader_step() dispatch, 38 shader catalog, audio-reactive scaling, transitions, tint presets, output format encoding, terminal rendering
references/scenes.mdScene protocol, Renderer class, SCENES table, render_clip(), beat-synced cutting, parallel rendering, design patterns (layer hierarchy, directional arcs, visual metaphors, compositional techniques), complete scene examples at every complexity level, scene design checklist
references/inputs.mdAudio analysis (FFT, bands, beats), video sampling, image conversion, text/lyrics, TTS integration (ElevenLabs, voice assignment, audio mixing)
references/optimization.mdHardware detection, quality profiles, vectorized patterns, parallel rendering, memory management, performance budgets
references/troubleshooting.mdNumPy broadcasting traps, blend mode pitfalls, multiprocessing/pickling, brightness diagnostics, ffmpeg issues, font problems, common mistakes

Creative Divergence (use only when user requests experimental/creative/unique output)

If the user asks for creative, experimental, surprising, or unconventional output, select the strategy that best fits and reason through its steps BEFORE generating code.

  • Forced Connections — when the user wants cross-domain inspiration ("make it look organic," "industrial aesthetic")
  • Conceptual Blending — when the user names two things to combine ("ocean meets music," "space + calligraphy")
  • Oblique Strategies — when the user is maximally open ("surprise me," "something I've never seen")

Forced Connections

  1. Pick a domain unrelated to the visual goal (weather systems, microbiology, architecture, fluid dynamics, textile weaving)
  2. List its core visual/structural elements (erosion → gradual reveal; mitosis → splitting duplication; weaving → interlocking patterns)
  3. Map those elements onto ASCII characters and animation patterns
  4. Synthesize — what does "erosion" or "crystallization" look like in a character grid?

Conceptual Blending

  1. Name two distinct visual/conceptual spaces (e.g., ocean waves + sheet music)
  2. Map correspondences (crests = high notes, troughs = rests, foam = staccato)
  3. Blend selectively — keep the most interesting mappings, discard forced ones
  4. Develop emergent properties that exist only in the blend

Oblique Strategies

  1. Draw one: "Honor thy error as a hidden intention" / "Use an old idea" / "What would your closest friend do?" / "Emphasize the flaws" / "Turn it upside down" / "Only a part, not the whole" / "Reverse"
  2. Interpret the directive against the current ASCII animation challenge
  3. Apply the lateral insight to the visual design before writing code

Individual skills in this repo

This repo contains 14 individual skills — each has its own dedicated page.

delorenj/skills

Plan and generate terminal ASCII animations/screensaver-style output (FPS, refresh rules, loop policy, low-flicker guidance), with a static poster frame and an optional local demo script.

delorenj/skills

Plan, build and quality-check a premium short commercial for a real business (roofing, property, ecommerce, B2B software) using AI-generated footage, code-built motion (HTML/GSAP), selective Three.js and an independent-critic "Gauntlet" loop. Use when asked to make a launch-style / SaaS-style video, business ad, explainer, sample reel or pitch video, or to review and improve one. Encodes motion principles distilled from 28 professional launch films, a quality bar, audio rules and a business-offer playbook.

delorenj/skills

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

delorenj/skills

Generate professional voiceovers using ElevenLabs AI. Use when the user needs to create voiceovers for videos, audio narration, or text-to-speech content. Supports multiple voices with character presets (narrator, salesperson, expert) for natural delivery. Includes single scene regeneration for fine-tuning.

delorenj/skills

HyperFrames CLI dev loop — `npx hyperframes` for scaffolding (init), validation (lint, inspect), preview, render, and environment troubleshooting (doctor, browser, info, upgrade). Use when running any of these commands or troubleshooting the HyperFrames build/render environment. For asset preprocessing commands (`tts`, `transcribe`, `remove-background`), invoke the `hyperframes-media` skill instead.

delorenj/skills

Asset preprocessing for HyperFrames compositions — text-to-speech narration (Kokoro), audio/video transcription (Whisper), and background removal for transparent overlays (u2net). Use when generating voiceover from text, transcribing speech for captions, removing the background from a video or image to use as a transparent overlay, choosing a TTS voice or whisper model, or chaining these (TTS → transcribe → captions). Each command downloads its own model on first run.

delorenj/skills

Install and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add, installing a block or component, wiring an installed item into index.html, or working with hyperframes.json. Covers the add command, install locations, block sub-composition wiring, component snippet merging, and registry discovery.

delorenj/skills

Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For dev-loop CLI commands (init, lint, inspect, preview, render) see the hyperframes-cli skill; for asset preprocessing commands (tts, transcribe, remove-background) see the hyperframes-media skill.

delorenj/skills

Manim CE animations: 3Blue1Brown math/algo videos.

delorenj/skills

Join a Google Meet or Zoom call as a video meeting agent via PikaStreaming. Trigger: user drops a Google Meet or Zoom link, or asks to join a meeting.

delorenj/skills

Translate an existing Remotion (React-based) video composition into a HyperFrames HTML composition. Use ONLY when the user explicitly asks to port, convert, migrate, translate, or rewrite a Remotion composition as HyperFrames (e.g. "port my Remotion project to HyperFrames"). Do NOT use when (a) authoring a NEW HyperFrames composition (even if A/B-testing a Remotion video); (b) Remotion is mentioned in passing; (c) Remotion code is shared as reference, not for translation; (d) the user wants "the same video as my Remotion one" without explicitly asking to migrate the source — treat as a fresh HyperFrames build. When in doubt, default to the `hyperframes` skill. Detects unsupported patterns (useState, useEffect side effects, async calculateMetadata, third-party React component libraries, `@remotion/lambda`) and recommends the runtime interop escape hatch instead of a lossy translation.

delorenj/skills

Generate speech using the self-hosted voxxy (vox) TTS service at https://vox.delo.sh. Use when the user asks to speak, say, narrate, synthesize speech, clone a voice, create a voice, add or register a voice, pipe TTS, or control voice qualities by description (e.g. "a young woman with a cheerful voice"). Handles HTTP API usage, voice profile management, description-based voice design, cloning, MCP registration, and integration patterns for new platforms.

delorenj/skills

Capture a website and create a HyperFrames video from it. Use when: (1) a user provides a URL and wants a video, (2) someone says "capture this site", "turn this into a video", "make a promo from my site", (3) the user wants a social ad, product tour, or any video based on an existing website, (4) the user shares a link and asks for any kind of video content. Even if the user just pastes a URL — this is the skill to use.

delorenj/skills

YouTube transcripts to summaries, threads, blogs.

Verwandte Skills