MorphCanvas
Home › Gallery › Reading Time Estimator
Reading size:

Reading Time Estimator

A dark-themed, dependency-free widget that estimates reading time based on words typed into a textarea.

★ 0 community votes · Safety scan passed · Sandboxed preview
Listen to Component Overview (AI Narration)
Viewport:
Backdrop:
Safety Scan
Verified Safe (0 Violations)
Sandbox Isolation
Active (allow-scripts)
Code Dependencies
Zero / Standalone Vanilla
Last Synthesized
2026-09-08

About this component

Reading Time Estimator 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.

How it was built

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.

Community Evaluation & Feedback

How would you characterize this AI-generated component for your projects?

Select an evaluation tag above to record your vote.

Source Code

HTML
<div class="reading-estimator"><label for="text-input" class="visually-hidden">Text input</label><textarea id="text-input" rows="8" placeholder="Type or paste your text here..."></textarea><p id="reading-time" aria-live="polite">Reading time: 0 min 0 sec</p></div>
CSS
.reading-estimator{background:#1e1e1e;color:#f0f0f0;padding:1rem;border-radius:8px;font-family:Arial,Helvetica,sans-serif}.reading-estimator textarea{width:100%;background:#2e2e2e;color:#f0f0f0;border:none;border-radius:4px;padding:.5rem;font-size:1rem;resize:vertical}.reading-estimator textarea:focus{outline:2px solid #4a90e2}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;border:0;clip:rect(0 0 0 0);white-space:nowrap}
JavaScript
const textarea=document.getElementById('text-input'),output=document.getElementById('reading-time');function update(){const text=textarea.value.trim();const words=text?text.split(/\s+/).filter(Boolean).length:0;const totalSeconds=Math.round(words/200*60);const mins=Math.floor(totalSeconds/60);const secs=totalSeconds%60;output.textContent=`Reading time: ${mins} min ${secs} sec`;};textarea.addEventListener('input',update);update();
Build your own on MorphCanvas
Copied to clipboard!