Voicely — AI Voice Generator

Interactive Voice Sample Player

• Play voice samples directly on the page — no modal, no redirect
• Single-active-track state — starting one sample stops the others
• On-demand streaming with metadata preloading for instant response
• GSAP-morphed play/pause icon transitions
• Animated waveform visualisation
• Full audio teardown on unmount — no memory leaks, no orphaned playback
• Zero impact on scroll performance or page animation

Modern Stack

• Next.js 16 with App Router and Turbopack
• React 19 Server Components
• TypeScript throughout — fully typed props and content schemas
• Tailwind CSS v4 with a tokenised design system in a shared style layer
• Route groups separating marketing and auth layouts

Component Library

• 95 reusable, typed components
• Shared UI primitives — buttons, cards, badges, inputs, section wrappers
• Consistent spacing scale and typographic rhythm across every route
• Drop-in sections you can reorder to assemble new pages in minutes

Content System

• Blog posts and team profiles driven by markdown with typed front matter
• JSON-backed FAQ and testimonials — edit in one file, updates everywhere
• Powered by gray-matter + react-markdown
• Publish and edit without touching a component

Motion & Interaction

• Typewriter headline animations
• GSAP reveal animations and scroll-triggered sequences
• Animated number counters for stats and results
• Infinite marquees and Lenis smooth scroll
• Swiper carousels, tabs, and accordions
• Interactive Leaflet map on the contact page
• Motion layered on top — never blocks interaction or first paint

SEO & Performance

• Centralised SEO utility generating per-page metadata
• OpenGraph and Twitter card support on every route
• Complete app icon and web manifest set included
• Semantic markup and accessible navigation throughout
• Optimised for Core Web Vitals out of the box

Responsive Design

• Mobile-first, tested from 360px to wide desktop
• Audio player adapts cleanly to small screens