Framer code component
ASCII Filter
Lays tone mapped characters over your image or video. The picture stays visible underneath, so the type reads as texture on the photo instead of replacing it.
01
Getting started
1. In the Assets panel, find ASCII Filter under Code and drag it onto any frame.
2. Give it a size. It fills whatever frame it sits in, so set the frame to the shape you want. A full bleed hero and a small card both work.
3. Drop in your own image, then pick a preset and tune anything you like. Presets set starting values and never lock a control.
02
Image or video
Set Media to Image or Video. Video is traced live, one pass per decoded frame, and the characters follow the footage as it plays.
Upload video through Framer so it is served with the headers the tracing needs. A video pointed at an outside host that omits them will play normally but show no characters. 720p at 30fps is plenty, since everything is reduced to the character grid anyway.
03
Eight presets
A preset is a complete look: character set, where the characters sit, colour, blend, cell size and motion, all in one pick. Every value stays editable afterwards.
Bloom
White characters on the highlights with a soft glow. The default look.
Truecolor
Fine characters across the whole frame, coloured from the photo itself.
Ink
Dark characters pressed into the shadows. Flat and unlit, like letterpress.
Ghost
Faint white characters everywhere at low opacity. A quiet background texture.
Blur
The photo goes soft while the characters stay sharp and carry the detail.
Neon
Hot pink on the highlights with heavy glow and a flicker.
Datastream
Large binary digits raining down through the midtones in pale green.
Editorial
Big flat red numerals sitting in the shadows. Print like and static.
04
Eighteen character sets
Each set is tuned by measured ink weight so its characters spread evenly from light to dark. That is what lets the type read as shading rather than noise.
Symbols
Standard · Detailed · Minimal · Signal · Code · Math
Numeric
Hex · Binary · Digits
Type
Letters · Greek · Katakana
Marks
Dots · Braille · Stars · Geometric · Arrows · Blocks
Your own
Pick Custom and type any characters you like. They are sorted by weight automatically.
05
The controls
Characters
Charset picks the family. Cell Size sets how big each character is, and it is the strongest control here: smaller cells mean more characters and more detail, at more cost.
Coverage
Decides where characters appear: Highlights, Midtones, Shadows or Full. Threshold moves the cut off and Softness feathers it. Opacity fades the whole layer.
Colour
White, Source, which takes each character colour from the photo underneath, or Custom. Blend sets how the layer mixes: Normal, Screen, Add, Multiply or Overlay. Contrast shapes the spread and Bloom adds glow.
Blur
Softens the photo while the characters stay sharp, so the type carries the detail the blur removes. The framing does not move when you raise it.
Motion
Shimmer · Pulse · Wave · Scan · Rain · Sparkle · Flicker, plus None. Speed scales all of them.
06
The in canvas panel
Turn on Overlay to show a control panel on the component itself, like the one in the demo above. Visitors can switch presets, swap character sets and upload their own image or video without leaving the page.
Box Position moves it to any corner, and each menu group has its own toggle so you can strip the panel down to only what you want shown. Leave Overlay off for a normal published component.
07
Performance
Cell Size is the dial that matters. Cost rises with the square of how small it gets, so moving from 8 to 12 removes more than half the work for a modest change in look. If a page feels heavy, raise it before touching anything else.
The component stops completely when it scrolls off screen, holds still for anyone who prefers reduced motion, and draws a clean static frame in the editor so the canvas stays quick while you work.
Need a hand
If anything does not behave the way this guide describes, email support@premshandilya.com and I will fix it fast.