PIXLIFY / COMPONENTS LAB
PREMIUM COMPONENT · $24
IMAGE EFFECT · CANVAS 2D · ZERO DEPENDENCIES
A cursor-following lens that turns any photo into Bayer dither, halftone, ASCII, pixels or a line screen - live, at 60fps. Retro print aesthetics, revealed exactly where your visitor looks.
LIVE PREVIEW - THE LENS ORBITS ON ITS OWN · MOVE YOUR CURSOR TO TAKE OVER
FOCUS + ARROW KEYS ALSO MOVE THE LENS
VARIANTS & PRESETS
01 - HALFTONE
Newsprint halftone
Dark ink on warm paper - the classic print-dot look for editorial and architecture.
02 - ASCII
Terminal ASCII
Characters in acid green on black. Great for dev tools, agencies and tech brands.
03 - IMAGE COLOURS
Pixel · original colours
Colours sampled from the photo with chunky 12px cells for a playful 8-bit reveal.
04 - INVERTED AREA
Line screen around the lens
Effect In → Around: the photo stays clean inside the lens and the screen surrounds it.
HOW TO USE
01
Drop it on the canvas
Insert Dither Lens from the Assets panel and size it like any image frame - Fill, Fixed or Relative all work.
02
Pick your image
Set Image in the right panel. Uploaded Framer images and CMS image fields work out of the box; add Alt Text for screen readers.
03
Choose an effect
Effect switches between Bayer Dither, Halftone, ASCII, Pixelate and Line Screen. Effect In flips it: stylised inside the lens, or everywhere except the lens.
04
Tune the look & lens
Open Look for cell size, contrast, ink and paper colours. Open Lens for size, smoothing, idle behaviour and the outline ring.
05
Bind to CMS (optional)
Inside a Collection List, connect Image to an image field - every card gets its own lens effect.
06
Preview and publish
The canvas shows a static lens at centre. Hit Preview to feel the motion; reduced-motion visitors get a still, fully readable image.
PROPERTY CONTROLS
Image
Source image (ResponsiveImage). Framer-hosted or CMS images recommended for pixel access.
Alt Text
Accessible description used in the component’s aria-label.
Fit
Cover crops to fill the frame; Contain letterboxes using the Paper colour.
Effect
Bayer Dither · Halftone · ASCII · Pixelate · Line Screen.
Effect In
Lens = effect inside the lens. Around = effect everywhere except inside the lens.
Look → Cell Size
Size of each dither cell, dot, glyph or pixel (2-32 px).
Look → Contrast
Pushes mid-tones apart before the effect (0.5-3).
Look → Colors
Ink uses your two-tone palette; Image samples original pixel colours.
Look → Ink / Paper
Foreground and background colours of the effect.
Lens → Size
Lens radius in px (20-600).
Lens → Smoothing
How softly the lens trails the cursor (0 = instant, 0.97 = very floaty).
Lens → Idle
What the lens does without a cursor: Orbit, rest at Center, or Hide.
Lens → Ring / Ring Color
Thin outline around the lens and its colour.
Radius
Corner radius of the component.
PERFORMANCE
The effect is pre-rendered once per resize into an offscreen canvas; each frame is just two draws and a clip. Rendering pauses off-screen and DPR is capped at 1.5 on phones.
MOBILE
Touch drags the lens; without touch it gently orbits. Use a larger Cell Size on mobile breakpoints for a crisper look.
ACCESSIBILITY
Focusable with a visible focus ring, arrow keys move the lens (Shift = bigger steps), Esc releases it. prefers-reduced-motion disables the idle orbit and smoothing.
© 2026 PIXLIFY - MADE IN WARSAW
DITHER LENS · PREMIUM COMPONENT · $24