Shape Tween Lab

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.

Create a browser-based 2D drawing and shape-animation toy titled “Shape Tween Lab,” inspired by Adobe Animate. Use a full-screen dark navy interface with a top header, a large central HTML canvas stage, a timeline strip, and a horizontally scrollable bottom toolbar. The experience is touch-friendly and works with pointer/mouse input.

Layout and visual style: The page fills the viewport with no scrolling. Background is deep navy/charcoal (#1b1c28), text is white or pale lavender, and controls are rounded, bold, colorful buttons with subtle dark drop shadows. The top bar has the bold title “Shape Tween Lab,” a yellow Play button, a pale lavender Clear button, and a hint/instruction line. On narrow screens, put the title and Play/Clear controls on the first row and let the hint wrap underneath. The stage occupies the main area and is an HTML canvas with a warm off-white/light-gray drawing surface, faint 32px grid lines, and an inset rectangular work area outlined subtly. The screenshot’s visible canvas shows a large pink circle toward the left, a blue square near the center-right, and a dark pencil zigzag stroke below them; initialize the app with these useful starter objects: a pink circle, a blue square, and a dark open pencil stroke. Objects have soft shadows and dark outlines; the selected object uses a thicker dark outline.

Core interaction: The user can create vector shapes, draw strokes, select and drag objects, color/fill them, and animate shape morphs. The shape choices are Circle, Square, Triangle, Heptagon, and Hexagon. Clicking a shape button when nothing is selected creates a roughly 92px shape at or near the center of the stage, using the current color, selecting it and returning to Select mode. Clicking a shape button while an object is selected creates a shape tween on that selected object into exactly that target shape, keeping its position and size for an explicit target-shape conversion. The general Tweens button creates a tween on the selected object (or the most recently available object if nothing is selected): shapes morph to the next shape in the cycle circle → square → triangle → hexagon → heptagon → circle, move diagonally about 140px, shift vertically by about 60px depending on their half of the stage, grow about 16%, and transition color. Multiple objects selected with Select All should tween together.

Drawing tools: Select lets the user tap an object and drag it around the stage. Brush is freehand with a round-capped, round-joined stroke about 12px wide. Pencil is freehand with a thinner about 4px stroke. Pen places individual points on successive taps; a double-tap finishes and closes the path. Pen paths are rendered as strokes and can be filled. The stage should support pointer capture and dragging/freehand drawing. Hit testing can use each object’s bounding box. A selected drawing shows a dashed bounding rectangle.

Tween behavior: Store a start and end representation for each tween and animate over a timeline frame range, initially 0–60. Morph shapes by resampling their perimeter points to a common count and interpolating corresponding points with eased interpolation. Drawings tween into clean vector shapes by resampling the drawing to 72 points and interpolating it toward a centered target polygon/circle fitted to the drawing bounds; when complete, convert the drawing into that final shape. Interpolate position, size, stroke width where applicable, and color. Show the label “shape tween” beneath morphing shapes and “drawing tween → [shape]” beneath morphing drawings. When playback reaches the final frame, commit the destination state so the final shape remains on stage, stop playback, and show a completion hint.

Timeline and animation controls: The timeline strip sits above the bottom toolbar and contains “Frame,” a pink-accent range slider, a readout like “0 / 60,” and a mint “+30 Frames” button. Play changes to Pause and starts animation from frame 0; animation advances continuously until the maximum frame, then finalizes all tweens. Scrubbing the slider sets the current frame and pauses playback; scrubbing to the end commits completed tweens. +30 Frames increases the maximum by 30, capped at 240. Clear removes all objects, resets the frame range to 60 and frame to 0, and restores the Play state.

Toolbar, from left to right, should be a horizontally scrolling row of rounded controls: Select (mint when active), Select All, Onion, Circle, Square, Triangle, Heptagon, Hexagon, Brush, Pen, Pencil, Bucket, Color with an HTML color input, a Gradient control containing two color inputs, a plus button, and a pink “Tweens” button. Select All selects every object so Tweens and Bucket operate on all selected objects. Onion toggles onion skinning; when enabled and tweens exist, draw faint nearby tween states around the current frame, using approximately 15 frames before and after with low opacity. Color changes the current color and applies it to the selected object; if a selected object has a tween, change its destination color, otherwise change its current color. New shapes and drawings use the current color. Start with a bright pink palette for the current color and use a small palette including pink, blue, green, amber, purple, and cyan for automatic tween destinations.

Gradient behavior: The two gradient inputs and plus button create a two-color linear gradient object such as pink-to-blue and set it as the current color, applying it to the selected object or making it the color for future objects. Render gradients across each object’s local bounds. Bucket fills a tapped shape or closed Pen drawing with the current solid or gradient color; if multiple objects are selected, fill all selected objects. For tweening, interpolate the two gradient stops when transitioning between colors.

Use instructional hints in the top bar that update with actions, including guidance such as “Pick a shape, draw, then tap Tweens,” tool selection messages, Pen double-tap instructions, color/fill feedback, frame-extension feedback, and tween completion feedback. Expose a lightweight state API if supported: getGameState should report current tool, current color, onion state, frame/maxFrame, playing, selected IDs, object count, and object summaries; setGameState should allow changing tool, color, frame, max frame, playing, onion state, selection, and clearing. Do not add score, enemies, lives, win screens, or other game mechanics; this is an interactive creative laboratory focused on drawing and shape tweening.