Hack #7: v0 · v0
6 May, 20:09
SafeSpace is X (Twitter) reimagined as a wellness app for emotional toddlers. Same product — feeds, profiles, replies, blocks — completely reinvented as a kindergarten-coded sanctuary where you argue with AI replicas of anyone via voice, then they "set a boundary" and disappear into your Healing tab. Forever. _________________________________ What we built SafeSpace is a parody redesign of X (Twitter) as a wellness app. Same content layer — feeds, replies, profiles, the right-column trends, the blocking mechanic — completely reimagined visually and tonally. Where X is dark blue and combative, SafeSpace is sage and pastel and Comic Sans. Every word of UI chrome ("Healing tab," "feelings going around today," "people who hurt others like you") translates platform mechanics into wellness-cult language. The redesign isn't decorative. It's the joke. The aesthetic and the microcopy reveal what the platform's mechanics already encourage: blocking framed as "setting a boundary," timelines framed as "your truth," confrontation framed as something to be filtered out. What it does Type any X handle. SafeSpace generates an AI replica of that person — personality, posting voice, tweet corpus — using the Claude API. ElevenLabs Voice Design generates a unique voice from a personality description. Within 30 seconds, the user is in a session with a fully argument-capable replica of @elonmusk, @joerogan, or anyone else. The argument loop is voice-driven. The user speaks; the browser transcribes; Claude refines the venom into a postable tweet; the user releases it; the replica generates a reply (in character, escalating as the user pushes harder); ElevenLabs streams back the audio in the replica's generated voice. Victoria, the wellness facilitator, narrates the experience. A pastel "patience meter" rings the replica's avatar and drains as venom accumulates. When the user pushes too far, the replica blocks them. The conversation freezes, gets archived in the Healing tab forever, and Victoria congratulates the user. "@elonmusk needs some quiet time. you're so brave." _________________________ How it uses ElevenLabs Voice Design generates a unique voice for each dynamically built replica from a personality description. The same architecture pre-bakes voices for the six built-in replicas. TTS streaming delivers replica replies in real time during arguments. Pre-generated narration for Victoria's onboarding tour, where she introduces the user to their safe space across five visual beats. _____________________ How it uses v0 v0 generated the initial scaffold — the Twitter-style three-column layout, the modal compose flow, the right-column suggestions, the action bars, the trending section. From there, the visual reinvention was applied: pastel palette, Comic Sans, cloud-shaped cards with hand-drawn lumpy borders, marshmallow buttons, soft cloud-pattern wallpaper. Same product, completely different visual world. What makes it special SafeSpace works at two layers simultaneously. As a redesign, it's a clean reinterpretation of X's UI in an unexpected visual style — exactly what the brief asks for. As a piece of art, it's a comment on what the platform already is: a tool for cataloging the people who've made you feel small, dressed up as connection. Every replica you build is fully voice-capable. The dynamic build flow is real engineering — Claude generating personality + corpus, ElevenLabs Voice Design generating a matching voice, retry logic for transient API errors, in-session escalation that hardens the replica's tone as the patience meter drains. The whole pipeline runs in under 30 seconds per replica. The real product fits the fake one perfectly. The wellness-cult skin makes the architecture make sense. ________________________ Tech stack / built with v0 by Vercel Next.js 16 Claude API (claude-haiku-4-5) ElevenLabs TTS ElevenLabs Voice Design Tailwind v4 TypeScript Web Speech API localStorage
