ASCI X

Create polished animated ASCII visuals from any supplied shape/source or from a prompt-only concept. Prioritize smooth motion, clean silhouettes, ghost trails, and browser-ready previews.

Core Workflow

1. Identify the input type:
   • Image/video/logo/source file: convert the source into per-frame ASCII with scripts/asci_x_render.py.
   • Prompt-only shape: build a procedural density/SDF renderer in HTML/JS, or create a temporary silhouette image/video first and convert it.
   • UI reference style: combine the ASCII renderer with a static product-card or interface shell.
2. Choose the delivery:
   • Direct .html preview for animation and iteration.
   • Screenshots for still review.
   • MP4/GIF only when the user asks for an exported video loop.
3. Verify in a real browser after a 1s delay. Check that the ASCII area is nonblank, centered, unclipped, smooth, and readable on desktop/mobile if relevant.

Smoothness Standard

Do not use a 2-4 frame setInterval flipbook for premium outputs. Use one of:

• Per-frame source conversion at 24-30fps.
• requestAnimationFrame procedural rendering.
• Delayed ghost layers from prior frames.

Recommended visual settings:

• Monospace <pre> with white-space: pre, line-height: 0.85-0.95, letter-spacing: 0.
• 80-120 columns for card heroes; 120-180 columns for full-screen pieces.
• Character ramps like .:-=+*#%@ or ...::---===+++***###@@.
• 2 ghost layers at 0.10-0.18 opacity, delayed 2-7 frames or 0.08-0.22s.
• White/off-white canvas with black/gray glyphs for the Praveen-style product-card look.

Source-To-ASCII

Use the bundled script when the user supplies an image, logo, video, GIF, or generated mask:

python3 /Users/black/.codex/skills/asci-x/scripts/asci_x_render.py \
  --source input.mp4 \
  --out output/asci-x.html \
  --cols 96 \
  --fps 30 \
  --duration 8 \
  --theme card \
  --title "ASCI X"

Useful options:

• --mode dark: darker pixels become denser ASCII, best for black shapes on white.
• --mode light: brighter pixels become denser ASCII, best for white shapes on black.
• --mode auto: choose density direction from average luminance.
• --threshold 0.06: remove faint noise around the silhouette.
• --ramp " ..::--==++**##@@": change glyph density style.
• --ghosts 2: add delayed trail layers.

If ffmpeg is missing, use an available image/video library in the workspace or create a procedural renderer instead.

Prompt-To-Shape

For “make it any shape” without a source file:

1. Convert the concept into a recognizable silhouette: skull, bird, sword, car, face, logo, sigil, product, animal, object, wordmark, etc.
2. Prefer a procedural density field in JS when the shape can be composed from lobes, lines, rings, capsules, waves, or SDFs.
3. Animate continuous parameters: rotation, wing flap, breathing scale, wave phase, pulse, contour drift, scanline phase, or depth offsets.
4. Use texture only inside the shape mask so stray dots do not sparkle outside the silhouette.
5. For detailed real objects, generate or find a silhouette/source image first, then run asci_x_render.py.

Read references/procedural-shapes.md when building a custom prompt-only renderer.

UI Shell Pattern

For the product-card style:

• Static shell: light gray page, off-white cards, large hero box, serif title, monospaced controls.
• Animated layer only inside the hero area.
• Keep UI text small and dense; the ASCII object should be the main signal.
• Use real browser screenshots to check spacing and text overflow.

Quality Bar

• The animation must feel continuous at normal playback speed.
• The silhouette must be readable from a distance.
• Motion should change the shape, not only flicker characters.
• Avoid noisy random scatter outside the subject.
• Do not claim “any shape” from text alone when the shape needs a source or generated mask; make the mask/source first.