Screenshot Prompt Analyzer

A screenshot-to-prompt app where a GLSL water wave scans each image, then wipes it away to reveal the prompt underneath.

Built by Peter Bokor

Open preview Build your own

Screenshot Prompt Analyzer, built with Modeinspect

GLSL · Water · Motion · Web Audio

Drop or paste screenshots, press Analyze, and a mocked agent writes a prompt that could recreate them. While it runs, the composer folds into a single "Working" line with a spinner, step text, a live timer and Stop, and the pasted shot sits below under a GLSL water surface that bends the light across it.

The details

The water is analytic. The height field is a sum of seven directional ripples, from broad swell down to 40px capillary waves, with the gradient accumulated term by term. An earlier value-noise field sampled with finite differences only produced soft dark smudges. Exact slopes give crisp refraction, per-channel dispersion and thin specular glints, and the shader only ever adds light.
The wave shape is drawn, not coded. A tuning panel holds a bezier curve editor, and the curve bakes into a 512x1 greyscale LUT the shader samples for both height and slope. Sliders cover shimmer, glint, rim, refraction and dispersion.
The scan is also the transition. Sweeps are scheduled in JS. With several shots, a reading sweep alternates with a hand-over sweep that carries the next image in behind the crest, so the seam bends with the water.
The reveal rides the same line. The shader reports the crest position every frame, and that value writes two complementary CSS masks: the image dissolves exactly where the prompt paper underneath is uncovered.
Sound is synthesised with Web Audio: bandpassed noise for water, plus a hum whose level follows the crest's distance from the centre of the frame.

How it evolved

It started as a static prompt box, then a mocked app with a movie-style scan overlay over the generated text. Both went. The effect moved onto the pasted source, the URL field was dropped for images only, and the lime palette turned light blue near the end. The longest bug was a grey box during hand-overs, which turned out to be the wave LUT itself: the shader canvas uploaded each texture before claiming its unit, so the LUT stayed bound to the slot the outgoing image was read from.

start with a Prompt

Paste it into Modeinspect to start your own version.

Build a screenshot-to-prompt analyzer (Next.js, Tailwind, raw WebGL) on a flat #e0dad5 page with #111110 ink and a light blue accent, #8FD3F4.

Composer: a square drop zone on a pale blue card, capped at 420px, taking drag and drop, click to browse and clipboard paste. Empty state is one huge metallic image glyph at half the frame width, stroked with a gradient that flips hard at its midpoint, several stacked drop shadows, and a small uppercase mono line: "Drop or paste images". Pasted shots fill the frame one at a time and crossfade, under ambient shimmer with no travelling wave. A frosted dark pill reads Analyze; a round frosted button with a mix-blend-difference X clears the stack.

Run: Analyze collapses the composer into one line with a spinner, agent step text, a live timer and Stop. Give the run a random 10 to 15 seconds. The screenshot appears below under a water shader.

Shader: a reusable canvas that compiles a fragment shader, handles DPR resizing, reads uniforms from refs and accepts image and canvas textures. The surface is seven directional sine ripples with gradients accumulated analytically. Displace the image along the slope, sample R, G and B separately for dispersion, add specular glints off the normal, and never darken the content. A crest sweeps top to bottom; its profile comes from a bezier curve baked into a 512x1 greyscale LUT, so height and slope follow the drawn shape. Add a tuning panel: the curve editor plus sliders for shimmer, glint, rim, refraction, dispersion, amplitude and travel time.

Choreography: schedule every sweep yourself instead of looping. With multiple shots, alternate a reading sweep with a hand-over sweep that brings the next image in behind the crest inside the shader. When the timer runs out, let the sweep in flight finish, then fire one final reveal sweep: report the crest position each frame and write two complementary CSS mask gradients so the image dissolves precisely where a paper card holding the generated prompt surfaces. Then grow the frame to the prompt's height and drop its shadow in one 1100ms motion, with the page anchored so nothing shifts.

Audio: Web Audio only, no files. Slowly drifting bandpassed noise for water, and a low hum during sweeps whose level follows the crest's distance from the centre of the frame. Mute toggle bottom left.

iPad Day Calendar

A day-view planner in an iPad frame, with event blocks that carve around each other and slide between days without touching.

GSAP · Calendar · Motion · iPad

Customer Search Menu

A frosted customer search that scans with radar waves, drops avatars in on curved paths and sends a red shockwave when nothing is found.

GSAP · Search · Motion · Empty State

Building it in code.

Code. Modeinspect designs on a canvas and writes working UI code as you go, so what you see here runs in a browser: the layout, the states and the animations.

Copy the prompt above, start a project in Modeinspect and paste it in. Then refine it on the canvas: adjust spacing, colors and motion directly, or keep prompting.

Yes. Connect your repository and Modeinspect builds with your components and tokens, then hands the result over as a pull request your engineers can review.

SHIP TODAY

Get started Join community