A dark-themed checklist card that updates a circular progress ring as items are checked.
★ 0 community votes · Safety scan passed · Sandboxed previewChecklist Card with Progress Ring is an interface component generated on MorphCanvas, an infinite AI workspace that turns written intent into reviewable HTML, CSS, and JavaScript widgets. This component passed MorphCanvas’s automated safety scan, which checks for unsafe patterns such as external network calls, storage access, inline event handlers, and code execution, and it is rendered here inside a sandboxed preview frame.
A creator described the result they wanted, MorphCanvas routed the request through its AI provider chain with automatic failover, scanned the generated code, and published the reviewed component to the public library. You can build and publish your own components on the MorphCanvas canvas.
How would you characterize this AI-generated component for your projects?
Select an evaluation tag above to record your vote.
<div class="morph-card"><h2 class="morph-title">Todo List</h2><div class="morph-progress"><svg class="morph-ring" viewBox="0 0 36 36"><circle class="morph-ring-bg" cx="18" cy="18" r="15.91549430918954" fill="none" stroke="#444" stroke-width="3"/><circle class="morph-ring-fg" cx="18" cy="18" r="15.91549430918954" fill="none" stroke="#0f0" stroke-width="3" stroke-dasharray="100 100" stroke-dashoffset="0"/><text class="morph-ring-text" x="18" y="20" text-anchor="middle" fill="#fff" font-size="8">0%</text></svg></div><ul class="morph-list"><li><label><input type="checkbox" class="morph-item">Item 1</label></li><li><label><input type="checkbox" class="morph-item">Item 2</label></li><li><label><input type="checkbox" class="morph-item">Item 3</label></li><li><label><input type="checkbox" class="morph-item">Item 4</label></li></ul></div>.morph-card{background:#222;color:#eee;font-family:Arial,Helvetica,sans-serif;border-radius:8px;padding:16px;width:280px;margin:auto}.morph-title{text-align:center;margin:0 0 12px}.morph-progress{display:flex;justify-content:center;margin-bottom:12px}.morph-ring{width:80px;height:80px}.morph-ring-fg{transition:stroke-dashoffset .3s ease}.morph-ring-text{font-weight:bold}.morph-list{list-style:none;padding:0;margin:0}.morph-list li{margin-bottom:8px}.morph-list input{margin-right:8px}(function(){function update(){var total=document.querySelectorAll('.morph-item').length,checked=document.querySelectorAll('.morph-item:checked').length,percent=Math.round(checked/total*100),offset=100-percent;document.querySelector('.morph-ring-fg').style.strokeDashoffset=offset;document.querySelector('.morph-ring-text').textContent=percent+'%'}document.querySelectorAll('.morph-item').forEach(function(cb){cb.addEventListener('change',update)});update()})();