Turn a chest image into an interactive reward

Use the attached chest illustration as the reference for an interactive reward demo. Use the available image-editing tool to create a square transparent PNG of the closed chest. Preserve its mint-green panels, blue frame, gold trim, round front lock, three-quarter camera view and full-object framing. Remove the white background and floor shadow. Keep transparent margins around the entire object. Do not add lettering, a watermark, particles or other objects. The background must have real alpha transparency, not a painted checkerboard. Return the image as chest-closed.png if file naming is supported.

Use case: background-extraction
Asset type: transparent PNG for an interactive tap-to-open treasure chest React component.
Input image 1 is the edit target.
Primary request: remove ONLY the white background and floor shadow; retain exactly this closed stylized 3D treasure chest, its perspective, geometry, mint green panels, blue structure, gold trims and round front lock. No redesign.
Composition: square canvas, centered full chest, preserve the original framing with transparent margins and the exact chest silhouette. Keep all sharp detail, highlights and original material colors.
Background: genuinely transparent alpha, no white background, no checkerboard painted into the image, no opaque floor, no drop shadow outside the object.
Constraints: one chest only, closed lid, no added objects, no lettering, no text, no watermark.

Create a second transparent PNG state for the attached chest. Show the same chest with its lid hinged open backward, a warm glow inside and a modest pile of gold coins. Preserve the lower body's position and scale, camera angle, materials, colors, feet and front medallion. Keep the full object inside the same square canvas with margins, including the raised lid. Use real alpha transparency with no floor, external shadow, painted checkerboard, floating particles, text or watermark. This image will crossfade with the closed state, so alignment matters. Return it as chest-open.png if file naming is supported.

Use case: precise-object-edit
Asset type: second animation state, transparent PNG of an OPEN treasure chest, matching the closed input image for a web game.
Input image 1 is the edit target: closed mint-green, royal-blue and gold stylized 3D treasure chest.
Primary request: render this SAME chest with its lid hinged open backwards at about 75 degrees, showing a warm golden interior glow and a modest pile of gold coins inside. The round gold front medallion remains on the front lower body.
Keep identical design language, colors, materials, lighting, front/right three-quarter camera view, all lower body details and feet. Keep the lower body approximately at the same scale and location in the square canvas; the open lid rises into the upper portion. Full object with margin, no cropping.
Background: true transparent alpha, no white, no checkerboard, no floor, no external drop shadow. Warm light must be contained inside the chest, no huge opaque glow outside. No floating particles or floating coins, we add those in code.
Constraints: single chest only, no text, no watermark, no extra objects. Faithful same character identity and perspective.

Build an English-only interactive reward demo in Next.js with React and TypeScript using my two transparent chest images. Inspect the existing project before editing and follow its conventions. Use a client component with five taps by default. Add a progress indicator, tap bounce, particles and a short opening transition that crossfades from the closed image to the open image. Do not require Rive or a 3D model.

Model idle, opening, revealed, claiming and claimed states explicitly. Require an asynchronous onClaim callback, prevent duplicate claims and handle failure with a retry action. Start the demo balance at 1,250 points and simulate a 250-point reward. Clearly label these as demo points with no real rewards. Provide a replay control and a way to test claim failure. Do not imply a backend exists.

Use a cream background, dark-green typography and a responsive layout that makes the chest the focal point. Support keyboard activation, accessible progress and status text, visible focus and reduced motion. Keep all copy and labels in English. Explain which files changed and how to run the app. If you cannot edit or run files in this environment, provide the complete files and commands and clearly mark checks as not run.

Add procedural sound to the chest demo using Web Audio, without downloaded audio samples. Make successive taps rise in pitch, play an opening arpeggio and give successful collection and errors distinct short cues. Add an accessible mute toggle that remembers the user's preference. Initialize or resume audio only following a user gesture; do not autoplay. Stop active and scheduled cues when muted, when the page becomes hidden and when the component unmounts. Ensure stale asynchronous work cannot play a sound after mute or disposal. If audio is unavailable, the demo should still work. Verify the lifecycle behavior and explain what still needs listening tests on a real phone.

Turn this Next.js demo into a PWA. Add an English web manifest, appropriate regular and maskable icons, theme colors and installation guidance suited to browser support. Register a production service worker and precache a complete versioned demo build, including both chest images and required scripts, styles and fonts. Make installation atomic: a failed cache fill must not replace a working version. Keep the cached page and its assets from the same build. Exclude real APIs, non-GET requests and unrelated origins from caching. Activate an update only when the user chooses to update, avoiding interruption during chest interaction.

Explain that offline play uses simulated rewards; a real loyalty balance needs server-side validation. Verify a production build, then load it online, disable the network and reload before trying five taps and reward collection. Report checks actually performed and remaining device tests. Do not claim Android or iOS verification without evidence. Provide clear installation steps and a concise explanation of the caching and update design.

Prepare this demo for deployment through a private Git repository connected to Vercel. Inspect the existing repository and deployment setup first. Run the relevant checks and production build, document the required build settings and deploy when the environment has the necessary authorization and access. Keep credentials out of source files, logs and documentation. If deployment access is unavailable, give the exact remaining steps instead of claiming success.

Document the two image states, animation flow, sound design, PWA caching, deployment and test results. Distinguish actual verification from suggestions. Preserve the original asset prompts and label newly reconstructed prompts honestly. Keep the repository private. The public AxionAI tutorial should contain its own explanation and prompts, with an embedded live demo and an optional full-app link; do not direct tutorial readers to GitHub.