Skip to content

pablomg-dev/v0-elevenlabs-y2k-redesign

Repository files navigation

██╗   ██╗██████╗ ██╗  ██╗    ██████╗ ███████╗██████╗ ███████╗██╗ ██████╗ ███╗   ██╗
╚██╗ ██╔╝╚════██╗██║ ██╔╝    ██╔══██╗██╔════╝██╔══██╗██╔════╝██║██╔════╝ ████╗  ██║
 ╚████╔╝  █████╔╝█████╔╝     ██████╔╝█████╗  ██║  ██║█████╗  ██║██║  ███╗██╔██╗ ██║
  ╚██╔╝  ██╔═══╝ ██╔═██╗     ██╔══██╗██╔══╝  ██║  ██║██╔══╝  ██║██║   ██║██║╚██╗██║
   ██║   ███████╗██║  ██╗    ██║  ██║███████╗██████╔╝███████╗██║╚██████╔╝██║ ╚████║
   ╚═╝   ╚══════╝╚═╝  ╚═╝    ╚═╝  ╚═╝╚══════╝╚═════╝ ╚══════╝╚═╝ ╚═════╝ ╚═╝  ╚═══╝

What if ElevenLabs was built in 2001?

Live Site ElevenHacks #6 Next.js Vercel


A full aesthetic reimagining of the ElevenLabs homepage — same product, completely different era. Electric cyan. Beveled buttons. Blinking cursors. Internet Explorer 6 meets cutting-edge voice AI.

Built in 48 hours for the ElevenHacks #6 — Redesign the Web challenge.


✨ What's Inside

🎨 Authentic Y2K Aesthetics

Windows XP-era beveled buttons, animated marquee text, scanline overlay, retro grid background, and a color palette straight out of a 2001 tech conference CD-ROM — electric cyan #00FFFF, hot pink #FF00FF, chrome silver, and pure black.

🎙️ AI Voice Tour

A floating button that narrates each section of the page using the ElevenLabs TTS API with a deep synthetic voice. A Y2K site explaining AI voice tech — with AI voice tech.

▶️ Interactive Audio Demo

An embedded audio demo powered by ElevenLabs, playable directly on the page. No redirects, no friction.


🛠️ Tech Stack

Technology Role
v0 by Vercel UI generation & design iteration
ElevenLabs API Text-to-speech & voice tour
Next.js 14 React framework
Tailwind CSS Styling
Vercel Deployment

🚀 Run Locally

Prerequisites: Node.js 18+ and an ElevenLabs API key

git clone https://github.com/pablomg-dev/v0-elevenlabs-y2k-redesign
cd v0-elevenlabs-y2k-redesign
pnpm install

Create a .env.local in the root:

NEXT_PUBLIC_ELEVEN_API_KEY=your_api_key_here
pnpm dev
# → http://localhost:3000

🎨 Design Reference

Element Choice
Primary color Electric cyan #00FFFF
Accent Hot pink #FF00FF
Background Pure black + retro grid
Display font Impact / Comic Sans
Body font Courier New
UI Beveled 3D buttons, blinking cursors, animated marquee, scanlines

🏆 Hackathon Context

Built for ElevenHacks #6Redesign the Web.

The challenge: Take an existing product website and reimagine it in a completely different visual style using v0, then layer in ElevenLabs voice features.

The take: Y2K. The era when the internet was young, loud, and absolutely not subtle.


🔧 Continue Developing

This repo is linked to a v0 project — open new chats to iterate and v0 will push commits directly.

Continue on v0 →

Open in Kiro

About

I redesigned the ElevenLabs homepage in a full Y2K / early-2000s aesthetic using v0 by Vercel — keeping all the original content intact while completely transforming the visual style with Windows XP-style beveled buttons, animated marquee, glowing cyan typography, and retro scanline effects.

Topics

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors