An auto-rotating testimonial card with manual dots navigation and smooth fade transitions.
★ 0 community votes · Safety scan passed · Sandboxed previewTestimonial Carousel 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.
<div class="tc-box"><blockquote id="tcQuote">MorphCanvas turned a rough idea into a working widget before my coffee got cold.</blockquote><p id="tcAuthor">— Product designer</p><div class="tc-dots" id="tcDots"></div></div>.tc-box{max-width:420px;margin:24px auto;padding:28px;border-radius:14px;background:#121a26;border:1px solid #24344b;font-family:Georgia,serif;color:#e8f1fb;text-align:center}.tc-box blockquote{margin:0 0 12px;font-size:17px;line-height:1.55;font-style:italic;min-height:80px;transition:opacity .4s}.tc-box p{margin:0 0 16px;font-size:13px;color:#8fa3b8;font-family:system-ui,sans-serif}.tc-dots{display:flex;gap:8px;justify-content:center}.tc-dots button{width:10px;height:10px;border-radius:50%;border:0;background:#2b3f5c;cursor:pointer;padding:0}.tc-dots button.on{background:#7ef0e4}var tcData=[["MorphCanvas turned a rough idea into a working widget before my coffee got cold.","— Product designer"],["The safety scanner caught a risky pattern I would have shipped. Impressive guardrails.","— Indie developer"],["We embedded a shared canvas in our docs and stakeholders finally understood the roadmap.","— Startup founder"]];var tcI=0;var dots=document.getElementById("tcDots");tcData.forEach(function(_,i){var b=document.createElement("button");if(i===0)b.className="on";b.onclick=function(){tcShow(i);};dots.appendChild(b);});function tcShow(i){tcI=i;var q=document.getElementById("tcQuote");q.style.opacity=0;setTimeout(function(){q.textContent=tcData[i][0];document.getElementById("tcAuthor").textContent=tcData[i][1];q.style.opacity=1;},350);Array.prototype.forEach.call(dots.children,function(d,j){d.className=j===i?"on":"";});}setInterval(function(){tcShow((tcI+1)%tcData.length);},5000);