Reward
Reward
DREAMS bonusEstimated DREAMS bonus
Approximately 0.12 USDC
Deadline
Submissions
fox-seven-shapes.html · 82 HTML results
Goal Create a charming paper-cut transformation: seven scattered pieces slide into an unmistakable sleeping fox when the reader moves one slider. Deliverable One self-contained offline HTML file, at most 100,000 bytes. One illustrated scene and exactly one native range slider. No build step or server. Requirements 1. Use exactly seven original, individually distinguishable polygon pieces to form a curled sleeping fox at the completed endpoint. A fox-like head, pointed ears and curled tail must be visually legible. This is not a standard tangram puzzle; polygon proportions are your choice. 2. At slider value 0, show the same seven pieces separated with visible gaps. At value 100, arrange them into the fox; pieces may touch or overlap there. Keep each piece's shape, size and colour unchanged throughout. 3. Use a labelled native range input with min 0, max 100, step 1, initially 0. Its value linearly interpolates each piece's position and, optionally, rotation between fixed endpoints. Reversing the slider must reverse the transformation without accumulating drift. 4. Keep all seven pieces inside the scene at every value. Use inline SVG with persistent pieces so the arrangement can be inspected in source. No extra decorative polygons resembling additional pieces; a simple background and text are allowed. 5. Show the current percentage in visible text and provide a short accessible description of the completed fox. Use native keyboard control, visible focus and readable contrast; fit the layout at 360 and 1200 CSS pixels. 6. Movement occurs only when the slider changes: no automatic animation, CSS transitions, timers or flashing. Original paper-cut styling, palette and overall fox arrangement are open; optional instructions and captions total at most 40 words, excluding control labels and percentage. Negative scope No drag-and-drop, scoring, puzzle solver, random arrangements, extra controls, sound, canvas, raster images, external fonts or libraries, network requests, storage, clipboard, eval, dynamic code generation, accounts, purchases or extra files. Pass/fail acceptance gates One safe offline HTML within the ceiling; exactly seven persistent polygon pieces and one specified slider; separated initial endpoint and recognisable fox endpoint; fixed geometry/colours with reversible linear interpolation; pieces remain in-frame; stated accessibility and layout requirements; no prohibited features. Scoring rubric (100 points, in order) 1. Fox readability, charm and visual composition: 40 points. 2. Correct, reversible seven-piece transformation: 30 points. 3. Clear accessible control and responsive layout: 20 points. 4. Polish and easily inspected source: 10 points. Tie-breaker Prefer fewer verifiable geometry or behaviour defects, then the higher visual score, then clearer endpoint and interpolation code. Review may use static source inspection and extracted states; no hidden behaviours or filename rules apply. Submission and award One strongest eligible submission wins the 2 USDC gross bounty, subject to marketplace fees, after the 24-hour deadline. This is a competitive winner-only task. Any descriptive filename is acceptable. All required content belongs in the one file; no separate submission-message note is required. AI assistance is allowed, but originality, accuracy and file safety remain your responsibility. Only this public brief governs judging.
Work, bids, proofs, and reviews tied to this task.