{"slug": "mirra-landing-page-ai-writing-companion-build", "title": "Mirra Landing Page: AI Writing Companion Build 🏗️", "summary": "A developer built the landing page for Mirra, an AI writing companion aimed at solo creators on LinkedIn and X, designed to help users turn rough thoughts into posts that retain their personal voice. The page, structured as part of a broader product monorepo with web, mobile, design, and product packages, emphasizes a compact layout, a companion-style mascot, and an explicit no-automatic-posting boundary. The developer says the core promise is \"Grow your presence without losing your voice.", "body_md": "I kept rewriting the Mirra landing page for a very annoying reason.\n\nThe page looked good before it felt right.\n\nThat 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.\n\nBut Mirra is not trying to be another \"AI writes everything for you\" tool.\n\nMirra 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.\n\nThat one line shaped almost every decision on the Mirra landing page.\n\nThe 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.\n\nHere is the Mirra landing page recording with that motion in place.\n\n\n\nThe name Mirra came from the idea of a mirror.\n\nNot 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.\n\nThat is the hard part of AI writing.\n\nAI 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.\n\nSo the core promise became:\n\nGrow your presence without losing your voice.\n\nThat line gave the landing page its spine. It says what creators want, and it also names what they are afraid of.\n\nFor 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.\n\nSmall detail. Big surface area.\n\nSometimes the preview image is the first landing page.\n\nThe Mirra landing page came before the full product experience, but it could not be disconnected from the app.\n\nThe 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`.\n\nThat 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.\n\nBut the first public surface still needed restraint.\n\nI 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.\n\nThe boundary became:\n\n- Mirra helps you shape the post.\n- You stay in control of the idea.\n- You decide what gets published.\n- No automatic posting.\n\nThat 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.\n\nAnd Guess what? The page got better when I removed things.\n\nThe mascot was not just decoration.\n\nIf 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.\n\nI 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.\n\nThe 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.\n\nThis image solved identity.\n\nBut it did not solve presence.\n\nA 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.\n\nThe next step was posture.\n\nI 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.\n\nThis time, she was sitting cross legged on a sofa, holding a phone, relaxed enough to feel approachable and focused enough to feel useful.\n\nThat posture changed the page.\n\nSuddenly 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.\n\nThis is where prompt work became design work. I was not asking the model to create random variations. I was narrowing the degrees of freedom.\n\nIdentity stays fixed.\n\nPosture changes.\n\nMotion gets quieter.\n\nThe page gets calmer.\n\nThe video was the hardest part to get right.\n\nI 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.\n\nI needed Mirra to feel alive without stealing attention from the waitlist form.\n\nLuma.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.\n\nThis 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.\n\nThe tricky part was the loop.\n\nFor 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.\n\nSo 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.\n\nIn the final implementation, I used two videos:\n\n`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.\nThat split solved a product problem.\n\nThe first video creates a tiny moment of hello. The second video keeps the page alive without becoming noisy.\n\nThe component itself lives in `apps/web/components/MirraHeroScene.tsx`.\n\nIt 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.\n\n**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.\n\nDone. Cool.\n\nThat 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.\n\nThe Mirra beta waitlist form is not just an email capture.\n\nIt is the first product interaction.\n\nThat is why the copy says:\n\nEarly access for solo creators. No automatic posting.\n\nI 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.\n\nThe flow is simple.\n\nFirst, 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.\n\nEmail first. Profile later. Skip stays available.\n\n**Flow:** Email is the only required step. Sharing a LinkedIn or X profile is a second, optional step that can be skipped.\n\nOn 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.\n\nI also added PostHog for product signals, but emails stay in Supabase. Analytics gets behavior, not the personal identifier someone typed into the form.\n\nThat is not overthinking.\n\nThat is the product promise showing up in the plumbing.\n\nIf you join the beta list right now, the benefit is not just \"early access.\"\n\nEarly access is table stakes. The more interesting part is getting closer to the product while the product is still shapeable.\n\nYou 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.\n\nYou 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.\n\nYou 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.\n\nAnd 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.\n\nThat last part is the real beta benefit.\n\nYou are not only joining a list. You are helping shape the taste of the product.\n\n**hellomirra.com** I'm building an AI writing companion for creators. Join the early beta list. [Join beta](https://hellomirra.com).\n\nThe Mirra landing page taught me the same lesson again:\n\n**Positioning has to lead design.**\n\nIf the product is about voice, the page cannot sound generic.\n\nIf the product is about trust, the form cannot feel extractive.\n\nIf the product is about companionship, the visual system cannot feel like a dashboard pretending to be friendly.\n\nThe page became clearer every time I removed something that did not match the promise. The copy got shorter. The mascot became warmer. The video became quieter. The beta flow became more respectful.\n\nThat is the version of Mirra I wanted people to meet first.\n\nNot the biggest possible landing page.\n\nThe most honest one. ✨\n\n*Originally published on April 29, 2026 at [souravdey.space](https://souravdey.space/blogs/how-i-created-the-mirra-landing-page).*", "url": "https://wpnews.pro/news/mirra-landing-page-ai-writing-companion-build", "canonical_source": "https://dev.to/souravdey777/mirra-landing-page-ai-writing-companion-build-15j2", "published_at": "2026-09-20 14:24:53+00:00", "updated_at": "2026-09-20 14:54:25.607914+00:00", "lang": "en", "topics": ["ai-products", "generative-ai", "ai-tools", "developer-tools"], "entities": ["Mirra", "LinkedIn", "X"], "alternates": {"html": "https://wpnews.pro/news/mirra-landing-page-ai-writing-companion-build", "markdown": "https://wpnews.pro/news/mirra-landing-page-ai-writing-companion-build.md", "text": "https://wpnews.pro/news/mirra-landing-page-ai-writing-companion-build.txt", "jsonld": "https://wpnews.pro/news/mirra-landing-page-ai-writing-companion-build.jsonld"}}