Framer Agent: a day-and-night interactive hero

solitary curly-haired person seen from behind, seated on a small folding chair at a narrow metal table in an empty field at night, oversized muted powder-blue work shirt, one bulky vintage CRT computer monitor, blank overexposed pale blue-white screen with subtle amber glow along the bottom, powerful diffused backlight directly behind the monitor, large soft halo in blue atmospheric haze, silver rim light around the hair and shoulders, sparse grass and dark soil, distant minimal hill silhouettes, enormous muted steel-blue starry sky occupying 80 percent of the vertical frame, tiny naturally scattered stars, subject and workstation grouped at the extreme bottom center, vast negative space, surreal conceptual editorial photography, underexposed cinematic lighting, soft 35mm film grain, subtle halation, restrained colors, quiet isolation, photorealistic,

Use the attached image as the exact edit target. Preserve the original camera, crop, horizon, hills, table, keyboard, vintage CRT computer monitor and folding chair in precisely the same positions. Transform the scene into a bright daytime base version. Remove the teenager completely, leaving the folding chair empty. Reconstruct all previously hidden parts of the chair, grass and landscape naturally. Turn the CRT computer off. Its thick convex glass screen should be dark gray, slightly reflective and completely unlit. Replace the starry night sky with a clear pale-blue daytime sky containing a few soft atmospheric clouds. Add warm diagonal sunlight and visible sun rays entering from the upper-left, producing gentle natural shadows around the empty workstation. Transform the dry dark field into dense, richly saturated green grass moving softly in the breeze. Maintain the original distant hills with fresh green tones and light atmospheric haze. Add exactly one small bird flying naturally across the upper sky. Keep the image photorealistic, cinematic and peaceful, with subtle 35mm film grain, soft highlight bloom and warm natural daylight.

Build a spotlight reveal code component that stacks two content layers and reveals the top one through a soft-edged shape that follows the cursor. ## Layers - Two content slots the user fills on canvas: "Base" (bottom, always visible) and "Reveal" (top). - Both fill the component box completely and sit exactly on top of each other. Anything outside the component bounds is clipped. - The Reveal layer never captures pointer input. All cursor tracking happens on the container itself. - Default size 600 x 600, but it must resize freely to any width and height set on the canvas. ## The mask - The Reveal layer is visible only inside a shape centred on the cursor. Everywhere else the Base layer shows through. - Shape: Circle or Ellipse. Circle uses a single Radius. Ellipse uses Radius X and Radius Y — hide the Y field when Circle is selected. - Radius: 20 to 800, default 180. - Feather: 0 to 1, default 0.3. At 0 the edge is a hard cut. At 1 the shape fades out gradually all the way from its centre. Values in between control how far the solid core extends before the fade starts. - Reveal opacity: 0 to 100, default 100. Controls how strongly the Reveal layer shows inside the shape. - Invert: off by default. When on, the shape hides the Reveal layer instead — the Reveal layer covers everything except a hole under the cursor. ## Follow behaviour - Every frame the mask centre eases toward the real cursor position by a fraction of the remaining distance, so it trails behind rather than snapping. - Follow speed: 0.05 to 1, default 0.18. At 1 it locks to the cursor instantly. Low values give a heavy, laggy drag. - Cursor position is measured relative to the component's own top-left corner, so it stays correct at any position or scroll offset on the page. ## Reveal mode (dropdown) - Hover only (default): the spotlight exists only while the cursor is inside the component. On leave, the Reveal layer disappears entirely and pure Base is shown. The Reveal layer must never flash fully visible when the mask turns off. - Always on: the spotlight stays active. When the cursor leaves, it eases toward the resting position instead of vanishing. - Click to lock: follows the cursor normally, a click freezes the spotlight in place, another click resumes following. ## Resting position - Where the mask sits when no cursor is present: Centre (default), or a custom X and Y expressed as a percentage of the component width and height. ## Enter and exit transition - On cursor enter, the shape scales up from zero to full size over the Enter duration. On leave, it scales back down over the Exit duration. - Enter duration: 0 to 2000ms, default 250. Exit duration: 0 to 2000ms, default 350. Setting both to 0 gives instant on and off. ## Touch devices - Touch behaviour: Follow touch (default) so the mask tracks a finger drag, Fixed at the resting position, or Disabled so only the Base layer shows. ## Edge ring (optional) - Off by default. When enabled, draws a thin outline along the edge of the shape. Controls: colour, thickness 0 to 8 (default 1), opacity 0 to 100. ## Performance requirements - The continuous animation loop must pause when the component scrolls out of view using an IntersectionObserver, and restart when it comes back into view. - When the eased position has caught up to its target and nothing is animating, stop the loop entirely until the next cursor input, instead of running every frame forever. - Position updates must write directly to the element's style rather than triggering a full component re-render on every frame. ## Canvas behaviour - Expose every control above in the properties panel, grouped logically, with the stated defaults and ranges. - In the static canvas preview, render the mask at the resting position so the effect is visible without hovering.

Add click-to-toggle behavior to the cursor-reveal component. By default, show the base frame while the circular mask previews the reveal frame under the cursor. When the user clicks anywhere inside the component, smoothly expand the circle from the cursor position until the reveal frame covers the entire component. Keep the reveal frame active after the animation finishes. On the next click, reverse the transition and return to the base frame with the circular cursor preview. Use a smooth ease-in-out transition and keep the entire frame—including its video, navigation, text, and other elements—inside the reveal mask.