feat: add Time-Lapse City Builder video export

[Goutam-2702]

Description

Fixes #7285

Introduced the "Time-Lapse City Builder" feature to the Customization Studio, allowing users to export a 5-10 second animated .webm video of their CommitPulse city being "built" day-by-day.

This feature was implemented entirely client-side using the native browser MediaRecorder API and the already-fetched SVG snippet. By avoiding server-side video rendering (which is extremely heavy) or large third-party libraries (like Remotion/ffmpeg.wasm), the codebase remains lean while delivering a highly shareable, social-media-ready asset!

Technical Details:

• Parses the existing SVG string using DOMParser.
• Orchestrates an animation loop (3 seconds @ 30fps) where the opacity of chronological .cp-tower elements (sorted by their data-date) is progressively revealed.
• Renders the resulting states onto a hidden <canvas> using new Image().
• Captures the canvas stream (canvas.captureStream(30)) and records it with MediaRecorder(stream, { mimeType: 'video/webm' }).
• Provides an immediate .webm download which is natively supported for uploading to X/Twitter, LinkedIn, and Instagram.

Pillar

• 🎨 Pillar 1 — New Theme Design (Feature)
• 📐 Pillar 2 — Geometric SVG Improvement
• ⚡ Pillar 3 — Timezone Logic Optimization
• 🛠️ Other (Bug fix, refactoring, docs)

Visual Preview

N/A

Checklist before requesting a review:

• I have read the CONTRIBUTING.md file.
• I have tested these changes locally (localhost:3000/api/streak?user=YOUR_USERNAME).
• I have run npm run format and npm run lint locally and resolved all errors (CI will fail otherwise).
• My commits follow the Conventional Commits format (e.g., feat(themes): ..., fix(calculate): ...).
• I have updated README.md if I added a new theme or URL parameter.
• I have started the repo.
• I have made sure that i have only one commit to merge in this PR.
• The SVG output matches the CommitPulse "premium quality" aesthetic standard (no raw elements, smooth animations, correct fonts).
• (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.

[vercel]

@Goutam-2702 is attempting to deploy a commit to the jhasourav07's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Goutam-2702]

@JhaSourav07 pls review and merge my pr.

[github-actions]

📦 Next.js Bundle Size Report (Gzipped Sizes)

Asset	PR Size	Base Size	Difference	Status
static/chunks/app/customize/page-[hash].js	20.04 KB	19.28 KB	+0.76 KB (+3.93%)	🔴 Regression

📊 Summary of Totals

Category	PR Size	Base Size	Difference
Total JS	3969.03 KB	3966.23 KB	+2.79 KB (+0.07%)
Total CSS	330.26 KB	330.26 KB	0 B

[Aamod007]

Hey! Thanks for your contribution. Unfortunately, it looks like this PR is currently blocked (e.g., failing CI checks, merge conflicts, or marked as draft). I can't review or approve it until the build is green. Please resolve these issues so we can proceed with a full review! Let me know if you need any help debugging.

[Goutam-2702]

@Aamod007 pls review again.

[Aamod007]

Hey! Thanks for implementing the Time-Lapse City Builder! The approach of using the native browser \MediaRecorder\ and \canvas.captureStream()\ is really clever and avoids heavy server-side processing, which is fantastic for performance.

I'm assigning level:advanced for the complex canvas manipulation and media recording logic, type:feature, and quality:clean.

However, I noticed that this PR also includes changes to the \locales/\ files (adding keys for support, guidelines, faq) which seem to belong to PR 7287. Please rebase this branch or remove the unrelated commits so we only merge the video export feature here. Let me know once you've updated it!

[Goutam-2702]

@Aamod007 pls review and merge my pr all problem of ci pipeline are resolved.

"Dismissing previous review to provide updated code-specific feedback"

[Aamod007]

Hey! I'm dismissing the previous review to provide an updated one. This PR has changes to the locales/ files that belong to another PR. Please rebase or remove the unrelated commits so we only merge the video export feature. Let me know when it's updated!

[Goutam-2702]

@Aamod007 Pls merge it all problem is resolved.

[Aamod007]

Awesome feature! Adding a Time-Lapse City Builder video export gives users a fantastic new way to showcase their contributions. Note that I am leaving a neutral review because there is currently a repository-level Vercel deployment block preventing full pipeline success, but your feature implementation looks incredible!

Labels assigned:

• \level:advanced: Building an entire video export engine is a massive architectural addition.
• \ ype:feature: Adds a major video export feature.
• \ ype:design: Enhances the visual user output.

[Goutam-2702]

@Aamod007 pls review and merge it.

[Aamod007]

Implementing a Time-Lapse City Builder video export using MediaRecorder is an impressive feature! However, the CI checks are failing. Please resolve the issues and rerun the CI pipeline.

[Goutam-2702]

@Aamod007 pls review and merge it to main.

[Aamod007]

Thanks for pushing the new commits! Since we are currently ignoring the Vercel CI failures repository-wide, and you've updated the PR, everything looks good to go from my end. Approved! 🚀

[Aamod007]

This is an incredible feature! Generating a time-lapse video using \MediaRecorder\ and <canvas>\ is a fantastic addition to the export panel.

However, there's a small blocker before we can merge this:
Your branch currently has merge conflicts with the \main\ branch (indicated by the
eeds-rebase\ label). Please rebase your branch on the latest \main\ to resolve these conflicts.

Once the conflicts are resolved, we can get this merged!

Label Justification:

• \level:advanced: Implementing an in-browser frame-by-frame SVG to Canvas renderer and MediaRecorder pipeline is a highly advanced frontend feature.
• \quality:clean: Applied as default pending full review.
• \ ype:feature\ & \ ype:design: Adds a complex video generation feature to the UI.
• \mentor:Aamod007: Assigned as required.

[github-actions]

⚠️ Hey @Goutam-2702, this pull request has been inactive for 3 days. It will be automatically closed in 2 days if no further activity occurs.

If you are still working on this, please push your latest changes or leave a comment to keep it active.

[github-actions]

🤖 Hey @Goutam-2702, this pull request has been automatically closed because it has been inactive for 5 days.

Why was this PR closed?
To keep the repository manageable, we automatically close pull requests that have had no activity for 5 days.

How to reopen this PR:

1. Pull the latest changes from the upstream repository
2. Resolve any merge conflicts
3. Address any review feedback
4. Push your changes to your branch
5. Reopen this PR by commenting /reopen or creating a new PR

We appreciate your contribution and would love to review your work when it's ready! Thank you! ❤️