What you’ll build
This project turns two aligned AI portraits into a minimal fashion landing page with a cursor-controlled reveal. The original portrait stays fixed while a soft spotlight uncovers the armored version underneath—without WebGL or a heavy animation library.
The downloadable kit includes the two Gemini image prompts and the complete Skill used to build the page in Codex.
The workflow
- Generate the base portrait. Lock the camera, centered face, white studio background, close crop, and open space for the interface.
- Create the reveal portrait. Use the first image as the reference so Gemini preserves the face, gaze, crop, and head position while changing only the outfit.
- Register both layers. Compare the eyes, nose, mouth, chin, and hairline before building the mask. For this pair, the reveal layer uses
background-size: auto 117.5%andbackground-position: center 16%. - Build the interaction in Codex. A canvas-generated radial mask follows an eased cursor and reveals the second image inside a feathered circle.
Why alignment matters
The spotlight is the simple part. The effect feels believable only when both faces occupy the same visual coordinates. If the portraits drift, the cursor reveals doubled eyes and facial outlines immediately.
Start with the same cover center treatment on both layers. Add registration values only when a temporary 50% opacity comparison shows a real mismatch.
Use the project kit
Download all three files from the project-files panel, or get Prompt for Image 1, Prompt for Image 2, and Skill separately.
Use the files as a starting point, replace the portraits with your own aligned pair, and keep the same reveal system for fashion, product, character, or before-and-after concepts.