Create a voice-note product hero with Tailwind CSS. Use an editorial headline, trust note, and CTA beside a tactile recorder card with duration, animated waveform bars, record button, transcript preview, and privacy indicator. Add JavaScript that starts and pauses a simulated recording, advances the timer, animates waveform levels, updates the button state, and reveals a generated transcript after stopping.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Create a voice-note product hero with Tailwind CSS. Use an editorial headline, trust note, and CTA beside a tactile recorder card with duration, animated waveform bars, record button, transcript preview, and privacy indicator. Add JavaScript that starts and pauses a simulated recording, advances the timer, animates waveform levels, updates the button state, and reveals a generated transcript after stopping.
<section class="bg-neutral-950 px-6 py-20 text-white"><div class="mx-auto grid max-w-6xl items-center gap-14 lg:grid-cols-2"><div><span class="text-sm font-medium text-rose-300">Thoughts, before they disappear.</span><h1 class="mt-5 max-w-xl text-5xl font-semibold leading-none tracking-[-0.05em] sm:text-7xl">Speak now. Shape it later.</h1><p class="mt-6 max-w-lg text-lg leading-8 text-white/55">Capture clear voice notes that become organized, searchable writing on every device.</p><div class="mt-8 flex items-center gap-4"><a href="#" class="rounded-full bg-rose-300 px-5 py-3 text-sm font-semibold text-neutral-950">Record your first note</a><span class="text-xs text-white/40">Private by default · No card</span></div></div><div class="rounded-[2rem] bg-[#f5efe8] p-5 text-neutral-950 shadow-2xl shadow-rose-500/10"><div class="flex items-center justify-between"><div><p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Untitled note</p><p id="voiceTime" class="mt-1 font-mono text-2xl">00:00</p></div><span class="flex items-center gap-2 rounded-full bg-white px-3 py-1.5 text-xs text-neutral-500"><span class="h-2 w-2 rounded-full bg-green-500"></span>On-device encryption</span></div><div id="voiceWave" class="my-10 flex h-28 items-center justify-center gap-1.5"></div><div class="flex items-center justify-center gap-4"><button id="voiceRecord" class="flex h-16 w-16 items-center justify-center rounded-full bg-rose-500 shadow-lg shadow-rose-500/25" aria-label="Start recording"><span id="voiceGlyph" class="h-5 w-5 rounded-full bg-white"></span></button><button id="voiceStop" disabled class="rounded-full border border-neutral-300 px-4 py-2 text-xs font-medium disabled:opacity-30">Finish note</button></div><div id="voiceTranscript" class="mt-8 hidden rounded-2xl bg-white p-4"><div class="flex justify-between"><p class="text-xs font-semibold uppercase tracking-wider text-neutral-400">Transcript</p><span class="text-xs text-green-600">Ready</span></div><p class="mt-3 text-sm leading-6 text-neutral-700">The strongest part of the launch story is not speed. It is giving the whole team a calmer way to decide.</p></div></div></div></section>
var record = document.getElementById("voiceRecord"); var stop = document.getElementById("voiceStop"); var glyph = document.getElementById("voiceGlyph"); var wave = document.getElementById("voiceWave"); var seconds = 0; var timer; var recording = false; for (var i = 0; i < 34; i += 1) { var bar = document.createElement("span"); bar.className = "w-1 rounded-full bg-neutral-300 transition-all duration-200"; bar.style.height = (12 + (i * 17) % 46) + "px"; wave.appendChild(bar); }
function time() { return "00:" + String(seconds).padStart(2, "0"); } function paintWave() { [].slice.call(wave.children).forEach(function (bar, index) { bar.style.height = (recording ? 10 + ((seconds * 13 + index * 19) % 86) : 12 + (index * 17) % 46) + "px"; bar.classList.toggle("bg-rose-400", recording); }); }
record.addEventListener("click", function () { recording = !recording; stop.disabled = false; glyph.className = recording ? "h-5 w-5 rounded-sm bg-white" : "h-5 w-5 rounded-full bg-white"; record.setAttribute("aria-label", recording ? "Pause recording" : "Resume recording"); clearInterval(timer); if (recording) timer = setInterval(function () { seconds = Math.min(59, seconds + 1); document.getElementById("voiceTime").textContent = time(); paintWave(); }, 1000); paintWave(); }); stop.addEventListener("click", function () { recording = false; clearInterval(timer); paintWave(); record.disabled = true; stop.disabled = true; document.getElementById("voiceTranscript").classList.remove("hidden"); });
