Mirra Landing Page: AI Writing Companion Build 🏗️

I kept rewriting the Mirra landing page for a very annoying reason. The page looked good before it felt right. That is the uncomfortable part of landing page design for an AI product. You can make something visually polished very quickly now. Add a soft background, put a mascot on one side, write a headline about productivity, and the page will look like a startup launch. But Mirra is not trying to be another "AI writes everything for you" tool. Mirra is an AI writing companion for solo creators who write on LinkedIn and X. The product idea is simple: help a creator turn rough thoughts into social media posts that still sound like them. That one line shaped almost every decision on the Mirra landing page. The page had to feel warm, personal, and clear. It had to collect beta interest. It also had to show the boundary early: Mirra helps you write, but it does not take your voice or your publish button away. Here is the Mirra landing page recording with that motion in place. The Mirra AI Writing Companion Idea The name Mirra came from the idea of a mirror. Not a mirror in the literal productivity app sense. I did not want a generic task app that reflects your todo list back to you. I wanted the product to help with something more specific: the way creators recognize themselves in their own writing, personal brand, and content creation workflow. That is the hard part of AI writing. AI can generate words. That is no longer impressive by itself. The real product challenge is helping someone write more consistently without making them sound like everyone else using the same model. So the core promise became: Grow your presence without losing your voice. That line gave the landing page its spine. It says what creators want, and it also names what they are afraid of. For Mirra, the shared preview mattered too. I created the Open Graph image so the page would still feel like Mirra when someone saw it outside the website. Small detail. Big surface area. Sometimes the preview image is the first landing page. Building The Mirra App And Next.js Landing Page The Mirra landing page came before the full product experience, but it could not be disconnected from the app. The repo is set up as a product system, not just a marketing page. The web app lives in apps/web . The mobile app lives in apps/mobile . Shared design decisions live in packages/design . Product shaped data and future contracts live in packages/product . That structure matters because Mirra is not only a nice page with a cute character. The product is being built around chat, drafts, persona memory, platform specific writing, and voice match for creator content. But the first public surface still needed restraint. I did not want to show a huge dashboard before the product had earned it. I did not want to promise team workflows, brand automation, or automatic posting. Those features may look good on a landing page, but they would change the trust contract of the product. The boundary became: - Mirra helps you shape the post. - You stay in control of the idea. - You decide what gets published. - No automatic posting. That boundary sounds like product positioning, but it also shaped the layout. The page is intentionally compact: wordmark, headline, short copy, waitlist form, animated Mirra scene, and a quiet footer. And Guess what? The page got better when I removed things. AI Mascot Design For Mirra The mascot was not just decoration. If Mirra is a writing companion, the visual identity needed to feel like a companion too. A cold dashboard would make the product feel like an analytics tool. A generic robot would make it feel like every other AI assistant or AI writing app. I wanted Mirra to feel Gen Z, geeky, warm, and a little playful. Someone who belongs in a creator's world, not a corporate control room. The first concept image was the standing Mirra visual. I created it with Gemini Nano Banana 2. That gave me the foundation: the face, the outfit, the colors, and the overall personality. This image solved identity. But it did not solve presence. A standing mascot still felt like a brand asset. Useful, but not intimate enough for the product. Mirra needed to feel like she was already in the writing moment with you. GPT Image Prompts For Mascot Postures The next step was posture. I used GPT-5.4 Imagen to create a sitting version of the Mirra mascot. Same character, same softness, same color palette, but a different emotional signal for the hero section. This time, she was sitting cross legged on a sofa, holding a phone, relaxed enough to feel approachable and focused enough to feel useful. That posture changed the page. Suddenly Mirra did not feel like a mascot placed beside the product. She felt like the product moment itself. A creator has a rough thought. Mirra is there, quietly helping shape it into something publishable. This is where prompt work became design work. I was not asking the model to create random variations. I was narrowing the degrees of freedom. Identity stays fixed. Posture changes. Motion gets quieter. The page gets calmer. Luma.ai Video Generation For The Landing Page The video was the hardest part to get right. I explored multiple AI video generation tools for the Mirra landing page. Some were good at dramatic movement. Some were good at cinematic shots. But for this specific use case, I needed something much quieter. I needed Mirra to feel alive without stealing attention from the waitlist form. Luma.ai gave me the best balance of quality, control, and cost. It was also the cheapest option I found that still gave me output I could actually use on a landing page. This was the Luma workspace while I was tuning the sofa loop. I kept generating small variations, checking the flash cut, and using the review panel as a scratchpad for what still felt off. The tricky part was the loop. For a landing page video, the first frame and the last frame matter a lot. If they do not feel visually connected, the loop breaks the illusion. You see the cut. Once you see it, you cannot unsee it. So I kept trying to make the first frame and last frame as close as possible. Not perfect, but close enough that the page felt calm. In the final implementation, I used two videos: - mirra-mascot-animation.mp4 , the intro video. Mirra is sitting on the sofa and waving at you. This plays only once when you land on the page. - mirra-sofa-loop.mp4 , the idle loop. After the intro, this video keeps running. Mirra subtly nods her head and moves her legs, just enough to feel present. That split solved a product problem. The first video creates a tiny moment of hello. The second video keeps the page alive without becoming noisy. The component itself lives in apps/web/components/MirraHeroScene.tsx . It starts with a fallback image so the page is never blank while the video loads. Once the intro is close to finishing, the loop video fades in. If playback fails, the fallback image still protects the layout. Flow: The hero starts on a fallback image, plays the intro wave once, then settles into the idle sofa loop. A playback failure leaves the fallback image in place. Done. Cool. That tiny bit of engineering matters because landing pages are fragile. A beautiful hero that fails to load is not a beautiful hero. It is a blank rectangle with ambition. Creator Beta Waitlist UX The Mirra beta waitlist form is not just an email capture. It is the first product interaction. That is why the copy says: Early access for solo creators. No automatic posting. I wanted the boundary to appear at the exact moment someone decides whether to trust the product. Mirra is going to deal with writing, voice, and public presence. That means the waitlist cannot feel like a growth hack. The flow is simple. First, you enter your email. After joining, you can optionally share your LinkedIn or X profile. That second step is useful because Mirra is being built around voice memory, but it is not forced. Email first. Profile later. Skip stays available. Flow: Email is the only required step. Sharing a LinkedIn or X profile is a second, optional step that can be skipped. On the backend, apps/web/app/api/waitlist/route.ts handles both steps. POST saves the email. PATCH adds LinkedIn or X profile URLs after signup. The storage logic in apps/web/lib/waitlist.ts normalizes emails, validates profile URLs, stores signups in Supabase, and handles duplicate submissions gracefully. I also added PostHog for product signals, but emails stay in Supabase. Analytics gets behavior, not the personal identifier someone typed into the form. That is not overthinking. That is the product promise showing up in the plumbing. Mirra Beta Benefits For Solo Creators If you join the beta list right now, the benefit is not just "early access." Early access is table stakes. The more interesting part is getting closer to the product while the product is still shapeable. You get access to the first Mirra AI writing workflows before the public release. The focus is on turning rough thoughts into LinkedIn and X posts without losing your voice. You get a chance to influence how voice memory works. If you share a public creator profile, I can use that signal to understand what a more personal setup should feel like. You get a product that is being built around creator control from day one. No automatic posting. No surprise publishing. No pretending that AI should become you. And if you are an early solo creator, you get to help define the boring but important details: what a good rewrite feels like, when AI becomes too much, what tone matching should preserve, and where the product should stop. That last part is the real beta benefit. You are not only joining a list. You are helping shape the taste of the product. hellomirra.com I'm building an AI writing companion for creators. Join the early beta list. Join beta. The Lesson I Am Taking From This The Mirra landing page taught me the same lesson again: Positioning has to lead design. If the pro