Overview

Sprite Video ASCII converts video into a live ASCII render using WebGL in Framer. It is designed for hero sections, ambient backgrounds, retro interfaces, and interactive visual experiments where motion needs a distinctive terminal-style look.

Features

Real-Time ASCII Rendering Convert moving video into animated ASCII output directly inside Framer with responsive sizing and live property control updates.

Flexible Source Input Use either Framer-uploaded files or direct .mp4, .webm, .ogg, or .mov URLs that allow cross-origin access.

Advanced Visual Controls Tune density, character ramps, brightness, contrast, saturation, background color, fit mode, and color treatment for very different moods.

True Color Mode Preserve source color in the ASCII output with an adjustable color boost slider for more vivid results.

Retro Scanline Overlay Layer in CRT-inspired scanlines with adjustable opacity and spacing for a stronger analog display feel.

Playback and Quality Controls Control speed, loop, autoplay, and rendering quality to balance look and performance across devices.

Use Cases

Hero Sections - Build instantly memorable landing pages with animated ASCII motion graphics.

Portfolio Websites - Give personal or studio sites a technical, experimental visual identity.

Music and Fashion Promos - Reframe short clips into stylized editorial backgrounds.

Retro UI Concepts - Create terminal, CRT, and cyber-inspired interfaces with live motion.

Properties

• Source: Toggle between Upload and URL modes
• Video File: Upload MP4, WebM, OGG, or MOV files
• Video URL: Use a direct video file URL with CORS enabled
• Visual: Group containing Density, Characters, Color, Background, Fit, Brightness, Contrast, Saturation, Invert, True Color, Color Boost, Scanlines, Line Opacity, and Line Spacing
• Playback: Group containing Speed, Loop, and Autoplay
• Quality: Auto, Performance, Balanced, and Quality modes

Important Notes

• YouTube and Vimeo page or embed URLs are not supported for ASCII frame sampling
• URL mode requires a direct video file URL, not a page link
• External video hosts must allow cross-origin access or the browser will block frame reading

Customization

Configure the source and styling to match the project.

Source Settings

• Upload a local video into Framer for the most reliable result
• Or paste a direct video file URL from a CORS-enabled CDN

Visual Settings

• Increase density for more detail
• Change the character ramp for different texture styles
• Use Fit controls to contain, cover, or stretch the source
• Fine-tune Brightness, Contrast, and Saturation before ASCII conversion
• Enable True Color for full-color ASCII or keep a single-color look for classic terminal styling
• Add scanlines and control their opacity and spacing

License

Single Use License - Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

Version

1.1.0