STEP 1: Image generation with ChatGPT

1. Take a clear picture where your face is visible
2. Here’s the prompt:

<aside> 💡

Use the uploaded image as the identity and facial reference.

Create a high-quality, realistic die-cut sticker featuring only the person’s face and polished hair.

Identity preservation:

• Preserve the person’s recognizable facial identity, face shape, eyes, eyebrows, nose, lips, skin tone, hairstyle, hair color, and distinctive features.
• Do not beautify or modify them into a different person.
• Maintain realistic facial proportions and natural skin texture.

Hair:

• Keep the person’s original hairstyle and color.
• Make the hair look smooth, glossy, neatly shaped, and professionally polished.
• Remove distracting flyaways and uneven strands.
• Retain individual strand detail and natural volume.
• Do not make the hair look plastic, artificial, excessively airbrushed, or dramatically restyled.

Sticker treatment:

• Include only the head, face, and enough hair to create a complete silhouette.
• Do not include the neck, shoulders, body, hands, clothing, objects, or original environment.
• Add a clean, moderately thick white die-cut sticker border around the complete silhouette.
• Use subtle dimensional shading for a premium realistic-sticker appearance.
• Keep the face photorealistic rather than cartoonish.

Composition:

• Front-facing or preserve the natural face angle from the reference.
• Center the face in a square canvas.
• Keep the entire hair silhouette inside the frame.
• Leave even transparent padding around the sticker border.

Output:

• Genuine transparent background.
• High-resolution PNG with a clean alpha channel.
• Crisp, polished edges.
• No text, logo, watermark, scenery, extra facial features, duplicated hair, checkerboard pattern, or colored background. </aside>

STEP 2: Video generation with Google Flow

1. Upload image generated from step 1
2. Use the prompt here (you can alter it as per your requirement):

<aside> 💡

Use the uploaded sticker image as the exact visual reference and starting frame.

Create a seamless 6–8 second square animation. Keep the head, face, hair, red headband, expression, white sticker border, position, size, lighting, and photorealistic sticker style completely fixed.

Animate only the eyes:

• Start looking straight ahead.
• Look left, then return to center.
• Look right, then return to center.
• Look up, then return to center.
• Look down, then return to center.
• Finish looking straight ahead.
• Add one subtle natural blink.

Both pupils must move together in perfect synchronization and remain correctly aligned at all times. Maintain natural spacing between the pupils. The eyes must never cross, diverge, drift independently, or point in different directions.

No head, face, mouth, eyebrow, hair, sticker-border, camera, or background movement. No zooming, rotation, shaking, warping, morphing, cropping, or identity changes.

Audio: Generate the video completely silent. No music, sound effects, voice, ambience, or audio track.

Negative prompt: cross-eyed gaze, converging pupils, diverging pupils, independently moving eyes, lazy eye, uneven gaze, distorted pupils, enlarged eyes, excessive blinking, facial movement, lip movement, head movement, hair movement, camera movement, morphing, text, logo, watermark, music, sound effects, voice, audio.

</aside>

STEP 3: Landing page with any ai coding assistant

1. Upload the video generated in step 2 to Claude, Codex, Devin etc and ask it to convert it to image sequence
2. Use the prompt here to turn it into a hero section for your landing page

<aside> 💡

Build a single full-screen hero page: a plain flat blue background (no gradients, no texture, no noise) with one centered image that tracks the cursor.

IMAGE SEQUENCE

• Use the image sequence I've provided (a set of frames of the same subject, each frame captured at a different gaze/rotation angle, ordered left-to-right).
• Preload every frame before the hero becomes interactive. Show frame 0 (or the middle frame) as the resting state while loading; never let a frame pop in blank.
• Prefer a single sprite sheet over N separate <img> requests if the frames are small enough — one image, shifted with background-position, so swapping frames costs nothing.

CURSOR TRACKING BEHAVIOUR

• Map the pointer's position to a frame index. Horizontal position across the viewport maps to the frame sequence: pointer at far left = first frame, far right = last frame, centre = middle frame. Use the image's own centre as the origin, not the viewport's.
• If the sequence also varies vertically, treat it as a 2D grid and map Y the same way; otherwise ignore Y entirely.
• Clamp at both ends — no wrapping around from last frame back to first.
• Ease the frame index toward its target with a lerp (~0.12–0.18 per frame) instead of snapping, so fast cursor moves read as a smooth follow rather than a strobe.
• Drive it all from a single requestAnimationFrame loop. The pointermove handler should only store the latest coordinates — no DOM writes inside it. Cancel the RAF loop on unmount.
• Add a small dead zone around the resting frame so tiny jitters near centre don't cause visible flicker.

FALLBACKS AND EDGE CASES

• Touch / no-hover devices: no tracking. Show the resting frame statically, or a slow idle loop through 3–4 frames. Gate on (hover: hover) and (pointer: fine).
• prefers-reduced-motion: reduce: static resting frame, no tracking at all.
• When the pointer leaves the window, ease back to the resting frame over ~400ms.
• Image must never stretch or distort — fixed aspect ratio, object-fit: contain.

LAYOUT

• Full viewport height, image vertically and horizontally centred.
• Image sized in viewport units with a max-width cap so it doesn't get gigantic on wide screens and doesn't get tiny on mobile.
• Nothing else on the page — no nav, no heading, no scroll indicator, no copy. Just the blue field and the image.

CONSTRAINTS

• No animation libraries. Vanilla RAF + transform/background-position only.
• No layout-triggering properties in the loop (no top/left/width) — transforms and background-position only.
• Keep it to one component file plus its styles.

Show me the result running in the browser when it's done.

</aside>