Skip to content

No.256 · Media

Image Compare

Two pictures of the same object in one frame, split by a jelly line that bows when you drag fast and wobbles back straight.

The prompt

Written for the variant you picked above: X-ray

Build a before/after image comparison whose divider behaves like jelly. Both pictures are the same scene at the same size, stacked in one 8:5 frame (18px radius, deep shadow); the left picture is clipped to the left of the divider. The knob sets x. The divider's ends chase it on a soft spring integrated every frame — v += ((x − e)·620 − v·44)·dt, e += v·dt (slightly under-damped, so it overshoots once) — and the curve is a quadratic from (e, 0) to (e, h) whose control point is 2x − e, so the middle always passes through the knob. The left picture is cut along exactly that curve with clip-path: path("M0 0 L e 0 Q (2x−e) h/2 e h L0 h Z"), and an SVG path draws the same curve as a 2px seam with a soft shadow. The loop stops once the ends settle. Pointer down anywhere jumps the knob there and drags it (pointer capture; touch-action pan-y so vertical scrolling still works). The knob is a 44px round handle with ⟨ ⟩ chevrons that grows slightly while hovered or dragged, and two frosted mono pills label the sides. The demo pictures are one illustrated camera drawn twice from the same SVG geometry — a colour product shot and a second "inside" render that shows the battery, board, shutter and sensor — so the halves line up exactly. Selected variant — X-ray: Inside render as an x-ray: near-black navy (#03070f) with glowing pale blue-white lines (#dff1ff) and a blue glow (#6fb6ff) through a blur-and-merge filter; seam and knob in #e8f4ff; left label "X-ray".

Notes

Interaction
Drag anywhere in the frame (or click to jump) to move the divider; fast moves bow the line and it springs straight.
Motion
Divider ends: spring k 620, damping 44, integrated per frame with dt; knob scale 200ms.
Accessibility
The knob is a role="slider" (0–100) labelled with both sides, with arrows (Shift ×5), Page Up/Down, Home and End. Reduced motion moves the line rigidly with no spring.
Responsive
Keeps its 8:5 aspect at any width; the clip path is rebuilt from measured size on resize.
On touch
Touch drags move the divider horizontally while vertical swipes still scroll the page.

Featured

01Glassbreak ButtonA solid plate that fractures from one impact point, cracks racing outward as the shards drift apart.04Liquid GlassA capsule of glass that bends what's behind it, carries a specular highlight around its rim toward your pointer, and squashes like a drop of liquid when pressed.07Phosphor Glass ButtonA liquid-glass pill that senses you coming: its rim light turns to face the cursor and the pill leans in to meet it.08Iris ShutterAn async button with a camera iris for a status light — blades close and turn while it works, then open onto the result.
81Atmosphere CardSmoked-glass link cards: colour pooled in the corners, slow contour currents underneath, a field that leans toward you.93Eclipse Event CardAn editorial event plate with an oversized date and an orbital eclipse bleeding in from the right, alive with slow drift.94Specimen CardAn object mounted under glass: hover lifts the pane with a sweep of reflection and swings out a paper catalogue tag.
95Silk FieldDomain-warped light that pours like liquid silk, with an optional glass lens that refracts the flow under your cursor.106IsobarA living weather map — contour lines traced over a drifting pressure field, with your cursor as a system of its own.
151Prompt ComposerA chat composer where attached files tuck into its top edge like tabs in a folder — they rise from behind it when added and sink back when removed. Send turns into stop while the reply streams.157Aura FieldA writing field where colour only exists while the AI is touching your text: the edge becomes a turning band of light and the words are rewritten in place, one by one, out of a soft blur.
205Halftone CTAA tall CTA banner where slow gold paint drifts beneath a fixed halftone grid, visible only through the dots.
212Nocturne Sign-inA single quiet column on near-black with a breathing seam of frost light behind it — email, password, magic link, nothing more.222Sigil Sign-inA split sign-in whose left half grows a geometric mark from your email — the same address always draws the same sigil.
275Voices CarouselA testimonial exhibition: one large quote at a time on frosted glass, crossfading between voices without ever resizing.
279Feral TitleA brutal condensed wordmark — heartbeat in the dark, letters slam in, a gash tears through and the word bleeds.
301 components