Lenticular Print Shift
Two photographs interleaved in hard-edged strips that wipe between each other as the pointer crosses the plate.
DOM + CSS0 deps1 file · 7 KB TSX
Props
"use client";
import { useRef } from "react";
/**
* A lenticular print: two images interleaved in fine vertical strips, with
* which one you see depending on where you stand.
*
* The physical version uses a ridged plastic lens; the screen version masks one
* image with a striped mask and slides the mask's phase. What makes it read as
* lenticular rather than as a crossfade is that the switch is HARD.
*/
/* The two inks the plates are printed in. Change these to move the whole
component into another palette; they are the only colour it carries.
Saturation comes entirely from the ink (see the blend mode below), so keep
them muted — a fully saturated value here reads as neon, not as print. */
const SHADOW = "#4a72a8";
const INK = "#c9d16b";
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this background
A lenticular print interleaves two images in fine strips behind a ridged lens, so the one you see depends on where you stand. On screen the lens becomes a striped mask whose phase slides with the pointer, and three details decide whether it reads as a print or as a bug. The switch has to be hard: the mask uses the double-position gradient syntax so the change happens at a single point with no ramp, because a soft gradient cross-fades the two images and cross-fading is exactly what a lenticular does not do — the whole illusion rests on the transition being instantaneous. The pitch has to be an integer number of pixels, because a fractional strip width beats against the device pixel grid and throws off broad moiré bands that crawl as the mask moves; that one artefact is what makes the effect look like a rendering fault. And the travel is capped at a single pitch, since the mask is periodic and anything further just repeats the same transition — mapping the full width of the plate to exactly one pitch turns it into a single continuous wipe. A one-pixel bright rule on the same pitch, blended in overlay, gives the ridges their catch of light, without which the strips read as a digital mask rather than as a surface.
Curator’s note
A fractional strip pitch beats against the pixel grid and throws off crawling moiré. Round it and the artefact disappears.
