Creative Tim UICreative Tim UI

Voice-to-text transcription with live recording visualization - shadcn/ui

Voice recorder with a solid circular primary mic button (orange idle, red while recording) with subtle ping rings, a centered symmetric waveform of thin rounded bars animated by layered sine functions (smooth motion, no random jitter), and a mono recording timer. The transcript streams in word by word with a blinking cursor into a bordered text surface (not a textarea), followed by Copy (emerald check feedback), Clear, and a right-aligned translate group with target language select. Translation appears in a muted surface with entrance animation. Source language select lives in the card header.

Preview

Component Details

ID
ai-voice-transcription-01
Type
Block
Access
Free
Category
AI Agents
Published
3 Apr 2026

Files Included

  • app/ai-voice-transcription/page.tsx
  • components/creative-tim/blocks/ai-voice-transcription-01.tsx

Components Used

Explore More Blocks

CRUDs
CRUDsComplete CRUD interface components and data management blocks for React and Next.js. Build admin panels, data tables, forms, and database management interfaces.
Web3 Cards
Web3 CardsModern Web3 and blockchain card components for React and Next.js. Build wallet connection cards, NFT displays, token interfaces, and decentralized application card layouts.
Error
ErrorProfessional error page components for React and Next.js. Build 404 and 500 error pages with various layouts, icons, emoji, background images, and call-to-action buttons for better user experience.
FAQs
FAQsClean and accessible FAQ components and help section layouts for React and Next.js. Build knowledge bases, support pages, and frequently asked questions interfaces.
Pages
PagesComplete, ready-to-use full-page layouts for React and Next.js. Drop in a full page — dashboards, management views, and multi-section layouts composed from multiple blocks. Install with one command and customize to your needs.
Web3 Charts
Web3 ChartsProfessional Web3 and cryptocurrency chart components for React and Next.js. Build crypto price charts, staking metrics, transaction analytics, blockchain data visualizations, and interactive dashboards with Recharts integration for displaying cryptocurrency data and market statistics.
Onboarding
OnboardingProfessional user onboarding and welcome components for React and Next.js. Build multi-step onboarding flows, welcome cards, stepper forms, verification screens, and guided setup experiences with customizable layouts.
Charts
ChartsProfessional chart and data visualization components for React and Next.js. Build bar charts, line charts, area charts, comparison widgets, and interactive data dashboards with Recharts integration for displaying analytics and metrics.