Memeified-Main Character Energy (MCE)

Type a handle. Get the vibe. Become the main character.

Comment

Inspiration

We've all seen those anime edits on Instagram and Twitter where someone takes a random person and turns them into a whole protagonist with dramatic music and everything. And honestly? Everyone lowkey wants one. The problem is making that kind of content takes actual editing skills and hours of work. We thought, what if you could just drop your social media handle and get a full anime intro, a fake movie trailer, a roast video, AND a meme pack about your life... all generated by AI in under a minute. That's how Memeified / Main Character Energy (MCE) was born.

What it does

You enter your Twitter/X or Instagram handle. MCE scrapes your public profile (pic, bio, recent posts) and feeds it to AI to figure out your whole vibe. Then it generates four things:

  1. Anime Intro - an AI-generated anime portrait of you with a dramatic celebrity voiceover and an animated video clip. You get assigned an archetype like "The Silent Architect" or "The Chaos Agent."
  2. Fake Trailer - pick a genre (Marvel, Horror, Sci-Fi, etc.) and MCE creates a cinematic movie poster, writes a trailer script, and narrates it with a dramatic voice. Your life is literally a movie now.
  3. Roast Video - AI analyzes your profile and writes a savage (but fun) roast, then narrates it in a celebrity voice over a custom roast card. No punches pulled, but we keep it clean.
  4. Meme Pack - 3 personalized memes using popular templates (Drake, Distracted Boyfriend, This Is Fine, etc.) based on your actual posts and bio.

Every single output has one-click sharing to Twitter, copy link, download, and native mobile share. Anyone who sees your result can click "Make Yours" and generate their own. It's a viral loop.

How we built it

Frontend: Next.js 16 with App Router, TypeScript, and Tailwind CSS v4. The landing page is a full 3D cyberpunk scene built with Three.js (React Three Fiber) with floating meme cards, neon particle effects, and scroll-driven animations powered by GSAP and Framer Motion. We wanted it to feel like entering a meme dimension.

AI Pipeline: The core pipeline works like this. We scrape the user's public profile, send the data to Google Gemini 2.5 Flash which generates creative briefs (anime scene descriptions, roast scripts, meme topics, trailer scripts), then fire those prompts at Magic Hour's API. Magic Hour handles all the heavy lifting: image generation (anime portraits, movie posters, roast cards), meme generation, celebrity voice synthesis, and image-to-video animation.

Social Scraping: Twitter profiles go through the fxtwitter.com API (lightweight, no auth needed). Instagram profiles use Apify's Instagram Profile Scraper since Instagram blocks basically everything server-side.

Architecture: 5 stateless Next.js API routes handle scraping, brief generation, and Magic Hour job creation. The pipeline orchestration lives entirely on the client side using React's useReducer pattern because Vercel serverless functions don't share memory between invocations. Shareable URLs use base64-encoded result data so they work for anyone without needing a database.

Deployment: Vercel with maxDuration: 60 on API routes to handle Magic Hour's generation times.

Challenges we ran into

Vercel's serverless functions are completely stateless. Our original plan was server-side session management where we'd track all the Magic Hour jobs in memory, but each API route invocation runs in a potentially different container. We had to rethink the whole architecture and move pipeline orchestration to the client.

Instagram scraping was a nightmare. Every direct approach gets blocked instantly. We burned a few hours trying different methods before landing on Apify's scraper which actually works reliably.

Magic Hour's API has very specific validation rules that aren't always obvious from the docs. Meme templates need to be exact matches from their supported list. Celebrity voice names need to match exactly. Video durations only work at 5 or 10 seconds. We built sanitization and fallback layers around every Magic Hour call to handle these edge cases gracefully.

Syncing separately generated audio (voice narration) with the animated video was trickier than expected. The video and audio are two different Magic Hour outputs that need to play together. We built a custom SyncedVideoPlayer React component that coordinates playback.

Also, JavaScript's btoa() straight up crashes on Unicode characters that show up in Magic Hour's download URLs. Classic. Switched to TextEncoder/TextDecoder and moved on.

Accomplishments that we're proud of

The full pipeline actually works end to end. You type a handle and get back a personalized anime intro with celebrity voiceover, a fake movie trailer, a roast, and memes, all in under 60 seconds. The fact that it hits 5 different Magic Hour API endpoints (image gen, meme gen, voice gen, image-to-video, file upload) in a single user session and orchestrates them all from the client is something we're really happy with.

The 3D landing page goes hard. Floating meme cards with mouse parallax, cyberpunk grid floor, neon particle field, scroll-triggered animations. It sets the vibe immediately.

The sharing loop is clean. Every result page works as a standalone shareable URL. Someone clicks your anime intro link, sees your result, hits "Make Yours," generates their own, shares it. Every share is basically a free ad for Magic Hour.

What we learned

Client-side orchestration of complex multi-step AI pipelines is doable but you have to be really intentional about state management. useReducer ended up being perfect for tracking which jobs are pending, which completed, and what to fire next.

Working with multiple AI APIs in a single pipeline means dealing with each one's quirks simultaneously. Magic Hour, Gemini, Apify, and fxtwitter all have different response formats, error patterns, and rate limits. Building robust fallback layers for each one was essential.

Three.js performance on mobile requires aggressive optimization. We had to cut particle counts in half, simplify geometries, and add WebGL detection with 2D fallbacks for low-end devices.

What's next for Memeified / Main Character Energy (MCE)

We want to add more output formats like TikTok-style vertical edits and Instagram Reel templates. Face swap integration is partially built but we want to polish it so you can actually see yourself as the movie poster hero. We're also thinking about a "battle mode" where two handles get compared side by side with a versus screen. And honestly, making it work as a Discord bot or Twitter bot where you just tag it in a reply would be the ultimate viral distribution play.

Built With

  • apify
  • framer-motion
  • google-gemini-2.5-flash
  • gsap
  • magic-hour-api
  • next.js-16
  • react-three-fiber
  • tailwind-css-v4
  • three.js
  • typescript
  • vercel
Share this project:

Updates