Pixel Personagem

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Recreate a small interactive pixel-art character showcase titled “Pixel Personagem,” not a conventional game with levels or combat. Build a responsive dark-themed single-page layout in Brazilian Portuguese: center a card on a very dark navy page background (#101827), with a navy panel (#19243a), 3px blue border, substantial padding, and a dark bottom drop shadow. The card should have a header reading “PIXEL PERSONAGEM” in uppercase, large bold lettering with about 2px letter spacing and golden-yellow text (#ffd166). Under it show the subtitle: “Um design 2D em pixels — silhueta simples, cores fortes e bordas nítidas.” in small muted light blue-gray text.

The main stage is a centered framed area with a dark blue background (#243452), 3px medium-blue border, and a small uppercase label in its upper-left corner reading “SPRITE 128 × 128” in pale blue. Center inside it a 128×128 logical pixel canvas, displayed enlarged responsively (roughly up to 430px square, no more than 80% of the stage), with nearest-neighbor/crisp pixel scaling. Give the canvas a thick dark navy border (8px) and a golden-yellow outer outline effect. The canvas itself is a flat pixel-art scene: fill the upper area with muted purple (#6c5b8d), fill the bottom 22 logical pixels with a darker purple (#5a4777), and add a repeating dashed ground decoration made of short golden tan horizontal rectangles around y=104 (6×2 pixels, beginning near x=8 and repeating every 18 pixels).

Draw a single front-facing cute beige/tan pixel character centered in the canvas, using a chunky low-resolution pixel-art sprite with hard, unsmoothed edges. The visible reference character is a small astronaut/space-suited person: a large rounded dark outline around the head and body, a pale blue-white circular helmet ring, a beige face with a simple dark horizontal visor across the eyes and a tiny curved brown smile, and a compact beige suit/body with stubby arms and two short legs. The sprite fills most of the canvas height and is positioned at the top-left origin of the canvas; preserve the bold nearly-black outline, warm beige body/face, pale cyan-white helmet ring, and dark visor. Do not use smoothing when scaling or rendering it. If the exact source image is unavailable, recreate this same chunky astronaut-like silhouette as pixel art rather than substituting a detailed or realistic character.

Make the display animate continuously with a very subtle one-to-two-pixel vertical bob using a sine wave (rounded integer offset, approximately sin(time*0.004)*1.2). There are exactly two visual pose states. Add a golden button below the stage labeled “Mudar pose” (Change pose), with dark navy bold text, and on each click toggle between pose 0 and pose 1. Pose 1 should visibly shift the character approximately 2 logical pixels to the right and switch the canvas’s upper purple background from #6c5b8d to a slightly lighter #806aa6; pose 0 uses no horizontal shift and the darker purple. Keep the ground strip and character style otherwise consistent. The button should have no border, padding around 10px 14px, a slight pressed-down movement on activation, and work on touch screens.

Below the stage, lay out a responsive information row: left side has three dark navy chips with medium-blue borders and pale text reading exactly “jaqueta azul”, “calça marrom”, and “lenço vermelho”; right side has the pose button. On narrow screens, wrap the row and make the button full width. Use a responsive centered card that fits the viewport, hides page overflow, and keeps the stage/canvas visible. The only interaction is the pose toggle; there is no score, health, timer, inventory, movement, enemies, or win/lose state. Include accessible canvas labeling such as “Personagem em pixel art.”