auto-clipping

byD'Ahmad

Tolong buatkan aku aplikasi seperti miqla.app yang berfungsi sebagai berikut : Auto-Clipping: Mengubah video panjang (podcast, webinar, YouTube) menjadi beberapa video pendek vertikal secara otomatis. ​Fitur Utama: ​Virality Scoring: Memilih dan memberi skor pada momen video yang paling berpotensi viral. ​Auto Captions & Formatting: Menambahkan teks otomatis, menyesuaikan posisi wajah pembicara (reframing), dan memotong bagian jeda hening. ​AI MCP Integration: Memungkinkan pembuatan klip langsung lewat perintah instruksi (prompt) di asisten AI (seperti Claude atau ChatGPT). Dan berikan nama yang baru jangan miqla.app lagi

Landing
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirements Document for auto-clipping

1. Introduction

auto-clipping is a web application that turns long-form video — podcasts, webinars, YouTube uploads — into multiple short vertical clips automatically. The product is built for creators who publish on short-form feeds and need to find, score, format, and export the moments most likely to travel. It is a new product with a new name; it is not miqla.app and carries no miqla.app branding.

The product delivers four accepted capabilities:

  • Auto-Clipping — automatic conversion of a long video into several short vertical clips.
  • Virality Scoring — selection and scoring of the video moments with the highest viral potential.
  • Auto Captions & Formatting — automatic captions and text, speaker face reframing, and removal of silent pauses.
  • AI MCP Integration — clip creation directly through prompt instructions inside AI assistants such as Claude or ChatGPT.

The audience is two accepted roles: the Content Creator / Podcaster, who submits long videos and reviews ranked clips in the application, and the AI Assistant User (MCP client), who drives clip creation from inside an AI assistant through MCP. Both roles are served by the same application-owned projects and clips.

Page 1 of 28

2. System Overview

auto-clipping is delivered as a first-party web application with a React frontend, a shared FastAPI backend, MariaDB for application-owned persistent data, Redis for shared caching/state/queue coordination, and a LiteLLM gateway (backed by its own PostgreSQL) for model-provider calls used by moment analysis and captioning. Clip rendering and analysis run as background automation behind the backend.

The current delivery covers: an anonymous Landing page that explains the product and accepts a pasted video link; self-service Sign Up and returning Login; a protected Dashboard summarizing the creator's projects; a New Project page for submitting a long video; a Clips page for reviewing generated vertical clips with virality scores and ranking and choosing which to keep; and an MCP Integration page for connecting an AI assistant so clips can be created by prompt.

Actors: the Content Creator / Podcaster (application user) and the AI Assistant User (MCP client), who connects an AI assistant to the same account and issues natural-language prompts. Claude and ChatGPT are external provider surfaces; the MCP connection is authorized against the user's auto-clipping account.

Narrow exclusions: the product is not named miqla.app and does not reuse miqla.app identity, copy, or branding. No other capability from the reference site is adopted beyond the accepted four features and the supporting identity, project, clip-review, and MCP-connection surfaces listed above.

Removed from scope

  • miqla.app as the product name (also: Miqla, Moment IQ as a product name)
Page 2 of 28

2a. Product Interpretation and Delivery Boundary

auto-clipping owns the full creator lifecycle in its own interface: a visitor lands on the public page, can paste a link to see what the product does, and signs up to keep durable projects and clips. Signed-in creators submit long videos, watch automatic clipping run in the background, and return to a revisitable Clips surface where ranked vertical clips with virality scores, captions, reframing, and silence-trimmed pacing can be reviewed and kept.

The MCP path is first-party in its authorization but provider-hosted in its conversation: the creator connects Claude or ChatGPT from the MCP Integration page, authorizes that connection against their auto-clipping account, and thereafter issues prompts inside the assistant. The assistant calls auto-clipping through MCP; the resulting clips land in the same durable project and clip state the creator sees in the application. The assistant is an external surface; auto-clipping owns the connection, the authorization, and the resulting clips.

Identity is application-owned and required: durable projects, clips, and MCP connections must remain bound to the correct creator across sessions. Landing, Sign Up, and Login are anonymously reachable; Dashboard, New Project, Clips, and MCP Integration require login. No differentiated roles or permission tiers are established by the source; every signed-in creator sees only their own projects, clips, and MCP connections.

2b. Source Content Inventory

The reference directive for miqla.app is inspiration_only for feature_reference and structure_reference; it supplies no authoritative content source. No source content inventory is included.

Page 3 of 28

2c. Page Content and Component Coverage

Page 4 of 28

Landing

  • Information/state: anonymous public entry. Product name auto-clipping; explanation of auto-clipping, virality scoring, auto captions and formatting (including speaker reframing and silent-pause removal), and AI MCP integration with Claude and ChatGPT; who the product is for (podcasters, webinar hosts, YouTube channels); a paste-a-link field labeled for a YouTube, podcast, or stream link; entry points to Sign Up and Login.
  • Primary actions: paste a video link and submit to begin (routing an unauthenticated visitor into Sign Up with the link carried forward, or a signed-in creator into New Project with the link prefilled); navigate to Sign Up; navigate to Login.
  • Supporting actions: read the three-step explanation (paste a link → get ranked clips → download & post); read the "why it works" spread; read the feature comparison; read proof quotes; read the under-the-hood explanation of moment scoring; use the footer paste-a-link field and closing call to action.
  • Domain entities: pasted video link (transient), product capability descriptions.
  • Component responsibilities: hero with oversized display headline and a bleeding 9:16 vertical video frame with a burned-in caption and an acid score figure; paste-a-link input with validation; three-step numbered rule grid; two-column editorial spread; ruled comparison table with the auto-clipping column marked by an acid rule; large pull-quote proof block; numbered technical spread; full-viewport footer band with repeated paste-a-link field.
  • States: loading — none required beyond static render; empty — paste field empty with placeholder label; success — valid link accepted and routed forward; error — invalid or unsupported link shows an inline message and keeps the entered value; recovery — the visitor can correct the link or proceed to Sign Up without a link.
Page 5 of 28

Sign Up

  • Information/state: anonymous enrollment form for a new creator; fields for the creator's identifying credentials; carried-forward pasted link shown if the visitor arrived from Landing.
  • Primary actions: submit enrollment to create the account and establish a session; continue into New Project with the carried link prefilled when one was supplied.
  • Supporting actions: navigate to Login if already enrolled; return to Landing.
  • Domain entities: creator account, session.
  • Component responsibilities: enrollment form with inline field validation; submit control; link to Login; carried-link summary.
  • States: loading — submit disabled with progress indication while the account is created; empty — blank form; success — session established and redirect to Dashboard or New Project; error — duplicate identity or invalid input shown inline with the form preserved; recovery — correct and resubmit, or switch to Login.
Page 6 of 28

Login

  • Information/state: anonymous returning-verification form; carried-forward pasted link shown if present.
  • Primary actions: submit credentials to verify identity and establish a session; continue to Dashboard, or to New Project with the carried link prefilled.
  • Supporting actions: navigate to Sign Up; return to Landing.
  • Domain entities: creator account, session.
  • Component responsibilities: credential form with inline validation; submit control; link to Sign Up; carried-link summary.
  • States: loading — submit disabled with progress indication; empty — blank form; success — session established and redirect; error — invalid credentials shown inline without revealing which field failed; recovery — retry or switch to Sign Up.
Page 7 of 28

Dashboard

  • Information/state: protected hub for the signed-in creator. Lists the creator's clipping projects with source title or link, submission time, processing status (queued, analyzing, rendering, ready, failed), and clip count; surfaces the highest virality score per project; entry points to New Project, each project's Clips, and MCP Integration.
  • Primary actions: open New Project; open a project's Clips; open MCP Integration.
  • Supporting actions: refresh project status; resume a failed project's retry.
  • Domain entities: project, source video, clip (count and top score), processing status.
  • Component responsibilities: project list as sharp-cornered ruled rows with score numerals; status indicators; empty-state block with a call to submit a first video; retry control on failed rows.
  • States: loading — skeleton ruled rows; empty — no projects yet, with a prompt to paste a link or open New Project; success — populated rows with live status; error — list load failure with retry; recovery — retry a failed project or resubmit the source.
Page 8 of 28

New Project

  • Information/state: protected submission surface. Paste-a-link field for a YouTube, podcast, or stream link, or a file upload for a long video; a submit control; a status region that reflects the background pipeline (queued → analyzing → rendering → ready, or failed).
  • Primary actions: submit a link or file to start automatic clipping; on completion, continue to Clips for that project.
  • Supporting actions: cancel a submission before processing begins; retry a failed submission.
  • Domain entities: project, source video (link or uploaded file), processing status, generated clips.
  • Component responsibilities: link input with validation; file picker; submit control; progress/status region; failure message with retry; link onward to Clips.
  • States: loading — submission in progress with status updates; empty — no source entered; success — project created and clips generated, with a route to Clips; error — unsupported link, unreadable file, or pipeline failure shown with retry; recovery — correct the source or retry the failed project.
Page 9 of 28

Clips

  • Information/state: protected, revisitable review surface for a project's generated vertical clips. Each clip shows its 9:16 thumbnail, virality score as an editorial numeral, rank order, caption text, reframed framing, and silence-trimmed duration; a keep/select control per clip; a download action per kept clip.
  • Primary actions: review ranked clips; keep or discard individual clips; download kept clips with captions, reframing, and adjusted pacing.
  • Supporting actions: hover a clip to crossfade between original and reframed framing; reorder or filter by score; return to Dashboard.
  • Domain entities: clip, virality score, rank, caption, reframed framing, trimmed duration, keep state, download artifact.
  • Component responsibilities: ranked clip rows with score numerals and acid underline; thumbnail with hover crossfade; caption preview; keep/discard toggle; download control; empty and processing states.
  • States: loading — rows with placeholder thumbnails while rendering completes; empty — no clips yet for the project, with status and a route back to the project; success — ranked clips with scores and downloads available; error — render or download failure shown per clip with retry; recovery — retry a failed clip or return to the project.
Page 10 of 28

MCP Integration

  • Information/state: protected connection surface for the signed-in creator. Explains that clips can be created by prompt in Claude or ChatGPT; shows the current MCP connection state (not connected, connected, revoked); provides the connection authorization step bound to the creator's account; shows which assistant is connected.
  • Primary actions: authorize an MCP connection for the creator's account; revoke an existing connection.
  • Supporting actions: copy connection details for pasting into the assistant; return to Dashboard.
  • Domain entities: MCP connection, creator account binding, connected assistant.
  • Component responsibilities: connection state panel; authorize control; revoke control; copyable connection details; status messaging.
  • States: loading — connection state resolving; empty — no connection yet with an authorize prompt; success — connected state with the assistant named; error — authorization failure shown with retry; recovery — re-authorize or revoke and reconnect.
Page 11 of 28

3. Functional Requirements

FR-1 — Automatic conversion of long video into short vertical clips (explicit) As a Content Creator / Podcaster, I should submit a long video (podcast, webinar, or YouTube link, or an uploaded file) and have the application automatically produce multiple short vertical clips, so that I get publishable short-form output without manual editing.

  • Trigger/input: a submitted link or file on New Project (or a pasted link on Landing carried through Sign Up/Login).
  • Observable result: a project is created, background processing runs, and multiple vertical clips appear on Clips for that project.
  • Access: login required for New Project and Clips.
  • Failure/recovery: unsupported link, unreadable file, or pipeline failure shows an error with retry; the creator can resubmit.
  • Continuation: the creator proceeds to Clips to review the generated clips.

FR-2 — Virality scoring and moment selection (explicit) As a Content Creator / Podcaster, I should see the video's moments selected and scored by viral potential, so that I can pick the clips most likely to perform.

  • Trigger/input: completed analysis of a submitted video.
  • Observable result: each generated clip carries a virality score and clips are ranked by that score on Clips and summarized on Dashboard.
  • Access: login required.
  • Failure/recovery: if scoring fails for a project, the project shows a failed state with retry.
  • Continuation: the creator reviews ranked clips and keeps the highest-scoring ones.
Page 12 of 28

FR-3 — Automatic captions and text formatting (explicit) As a Content Creator / Podcaster, I should have captions and text automatically added to each clip, so that clips are readable and formatted for short-form feeds without manual captioning.

  • Trigger/input: clip generation for a submitted video.
  • Observable result: each clip displays its caption text on Clips and includes captions in the downloaded clip.
  • Access: login required.
  • Failure/recovery: a clip whose captioning fails is flagged on Clips with retry.
  • Continuation: the creator keeps and downloads the captioned clip.

FR-4 — Speaker face reframing (explicit) As a Content Creator / Podcaster, I should have each clip reframed to adjust the speaker's face position for vertical format, so that the speaker stays well framed in 9:16.

  • Trigger/input: clip generation for a submitted video.
  • Observable result: each clip shows reframed vertical framing on Clips, with a hover crossfade between original and reframed framing.
  • Access: login required.
  • Failure/recovery: a clip whose reframing fails is flagged with retry.
  • Continuation: the creator keeps and downloads the reframed clip.
Page 13 of 28

FR-5 — Silent-pause removal (explicit) As a Content Creator / Podcaster, I should have silent pauses cut from each clip, so that pacing stays tight.

  • Trigger/input: clip generation for a submitted video.
  • Observable result: each clip's trimmed duration reflects removed silent pauses and is shown on Clips.
  • Access: login required.
  • Failure/recovery: a clip whose trimming fails is flagged with retry.
  • Continuation: the creator keeps and downloads the trimmed clip.

FR-6 — Clip creation via AI assistant prompt (MCP) (explicit) As an AI Assistant User (MCP client), I should issue a natural-language prompt in Claude or ChatGPT and have auto-clipping create clips from my long video through MCP, so that I can produce clips without leaving the assistant workflow.

  • Trigger/input: a prompt in the connected assistant referencing a long video.
  • Observable result: the assistant calls auto-clipping through MCP; a project and its clips are created in the user's account and are visible on Dashboard and Clips.
  • Access: the MCP connection must be authorized for the user's account (see FR-10); the resulting clips are protected state.
  • Failure/recovery: an unauthorized or revoked connection, or a failed generation, returns an error to the assistant and leaves a failed project visible in the application with retry.
  • Continuation: the user reviews the resulting clips on Clips or continues prompting in the assistant.
Page 14 of 28

FR-7 — New product name (explicit) As the product owner, the application should carry the new name auto-clipping and must not be named miqla.app, so that the product has its own identity.

  • Observable result: all surfaces use auto-clipping; no miqla.app naming or branding appears.

FR-8 — Self-service enrollment (required_inference) As a visitor, I should be able to sign up on Sign Up to create my account and session, so that my projects and clips are durably mine.

  • Trigger/input: submitted enrollment form.
  • Observable result: account created, session established, redirect to Dashboard or New Project with any carried link prefilled.
  • Access: anonymous.
  • Failure/recovery: duplicate identity or invalid input shown inline with the form preserved.
  • Continuation: proceed to submit a first video.

FR-9 — Returning verification (required_inference) As a returning creator, I should log in on Login to regain access to my durable projects and clips, so that I can resume work across sessions.

  • Trigger/input: submitted credentials.
  • Observable result: session established and redirect to Dashboard or New Project.
  • Access: anonymous.
  • Failure/recovery: invalid credentials shown inline without revealing which field failed; retry or switch to Sign Up.
  • Continuation: open an existing project's Clips.
Page 15 of 28

FR-10 — MCP connection authorization (required_inference) As a Content Creator / Podcaster or AI Assistant User, I should authorize an MCP connection for my account on MCP Integration before prompt-driven clip creation, so that clips created from Claude or ChatGPT land in the correct account.

  • Trigger/input: authorize action on MCP Integration while signed in.
  • Observable result: connection state becomes connected and names the assistant; prompts in that assistant can create clips in the account.
  • Access: login required.
  • Failure/recovery: authorization failure shown with retry; revoking returns the connection to not connected and blocks further prompt-driven creation until re-authorized.
  • Continuation: issue a prompt in the assistant, then review resulting clips on Clips.

FR-11 — Project overview and routing (required_inference) As a Content Creator / Podcaster, I should see my projects with status and top scores on Dashboard and route to submission, clip review, and MCP connection, so that I can manage my clipping work from one hub.

  • Trigger/input: opening Dashboard while signed in.
  • Observable result: project rows with status and top virality score; navigation to New Project, Clips, and MCP Integration.
  • Access: login required.
  • Failure/recovery: list load failure with retry; failed projects offer retry.
  • Continuation: open a project's Clips or start a new submission.
Page 16 of 28

FR-12 — Clip review, keep, and download (required_inference) As a Content Creator / Podcaster, I should review ranked clips on Clips, keep the ones I want, and download them with captions, reframing, and adjusted pacing, so that I can publish the finished clips.

  • Trigger/input: opening Clips for a project with generated clips.
  • Observable result: ranked clips with scores; kept clips downloadable as vertical files with captions, reframing, and trimmed pacing.
  • Access: login required.
  • Failure/recovery: render or download failure shown per clip with retry.
  • Continuation: return to Dashboard or download further clips.

4. User Personas

Page 17 of 28

Content Creator / Podcaster

  • Product context: produces long-form video — podcasts, webinars, YouTube episodes — and needs a steady stream of short vertical clips for short-form feeds. Works inside the auto-clipping application.
  • Primary goal: turn a long video into several ranked, captioned, reframed, tightly paced vertical clips and download the best ones.
  • Distinct accepted responsibilities: submits long videos on New Project (or via a pasted link carried from Landing); monitors project status on Dashboard; reviews ranked clips with virality scores on Clips; keeps and downloads clips with captions, reframing, and silence-trimmed pacing; optionally connects an AI assistant on MCP Integration.
  • Inputs/decisions: the source link or file; which ranked clips to keep; whether to connect an assistant for prompt-driven creation.
  • Interactions with other participants: shares the same account and clip state with the AI Assistant User when an MCP connection is authorized; clips created via prompt appear in this creator's Clips.
  • Observable success: a project reaches ready status, clips appear ranked by virality score with captions and reframed framing, and kept clips download successfully.
Page 18 of 28

AI Assistant User (MCP client)

  • Product context: works inside Claude or ChatGPT and wants clip creation to happen from a natural-language prompt without switching to a separate editing workflow. Uses the same auto-clipping account.
  • Primary goal: issue a prompt in the assistant and receive generated clips from a long video, with the results landing in the account.
  • Distinct accepted responsibilities: authorizes the MCP connection on MCP Integration; issues prompts in the assistant; reviews the resulting clips on Clips when needed.
  • Inputs/decisions: the prompt content and the referenced long video; whether to authorize or revoke the connection.
  • Interactions with other participants: the connection is bound to the Content Creator / Podcaster's account, so prompt-created clips appear in that creator's projects and Clips.
  • Observable success: the assistant returns generated clips, and those clips are visible and downloadable in the application.

5. Core User Flows

Page 19 of 28

Flow A — Creator turns a long video into ranked vertical clips

  1. The visitor opens Landing and reads the product explanation (auto-clipping, virality scoring, captions/reframing/silence removal, MCP integration).
  2. The visitor pastes a YouTube, podcast, or stream link into the paste-a-link field and submits. The link is validated; an invalid link shows an inline error and keeps the value.
  3. Because the visitor is not signed in, the application routes to Sign Up with the link carried forward.
  4. The visitor completes enrollment on Sign Up; a session is established and the application continues to New Project with the link prefilled.
  5. On New Project, the creator confirms the link (or uploads a file) and submits. A project is created and background processing begins; the status region shows queued → analyzing → rendering.
  6. The creator opens Dashboard and sees the project row with its status and, once ready, its clip count and top virality score.
  7. The creator opens Clips for the project. Ranked vertical clips appear with virality score numerals, caption text, reframed framing, and trimmed durations. Hovering a clip crossfades between original and reframed framing.
  8. The creator keeps the clips worth publishing and discards the rest.
  9. The creator downloads each kept clip; the downloaded file carries captions, reframed framing, and silence-trimmed pacing.
  10. Failure/recovery: if the pipeline fails, the project shows a failed state on Dashboard and New Project with a retry control; the creator retries or resubmits. If a single clip fails to render or download, Clips flags it with retry.
  11. Continuation: the creator returns to Dashboard to start another project or revisit Clips later.
Page 20 of 28

Flow B — Returning creator resumes work

  1. The creator opens Login and submits credentials.
  2. On success, a session is established and the creator lands on Dashboard, seeing existing projects and their statuses.
  3. The creator opens a project's Clips to continue reviewing or downloading.
  4. Failure/recovery: invalid credentials show an inline error without revealing which field failed; the creator retries or switches to Sign Up.

Flow C — AI Assistant User creates clips by prompt through MCP

  1. The signed-in creator opens MCP Integration and authorizes an MCP connection for their account. The connection state becomes connected and names the assistant (Claude or ChatGPT).
  2. The creator copies the connection details and adds the connection in the assistant.
  3. Inside the assistant, the user issues a natural-language prompt to create clips from a long video.
  4. The assistant calls auto-clipping through MCP; a project and its clips are created in the user's account.
  5. The user opens Dashboard and sees the new project, then opens Clips to review the ranked clips and download the kept ones.
  6. Failure/recovery: if the connection is not authorized or has been revoked, the assistant receives an error and no clips are created; the user re-authorizes on MCP Integration. If generation fails, a failed project appears in the application with retry.
  7. Continuation: the user continues prompting in the assistant or reviews results in the application.
Page 21 of 28

6. Visuals Colors and Theme

The creative direction is authoritative: editorial swagger for a clipping machine — black ground, one acid signal, type that behaves like a magazine cover. Muse: Tobias van Schneider.

Mode: dark.

Colour tokens (exact hex by role):

  • Background / ink ground: #0E0E0D (~70% of every page)
  • Surface (panels, paste-a-link field, clip cards): #171716
  • Text / primary: #F4F1EA (warm off-white; carries all display and body type)
  • Accent: #E8FF3A (acid lime; only for virality scores, primary CTA fill, active nav underline, hover swaps — never a background wash)
  • Muted (metadata, timestamps, disabled): #8C877C
  • Hairline rules: #2A2926 (1px, the only ornament)
  • Inverted band: text #0E0E0D on #F4F1EA

Contrast: #F4F1EA on #0E0E0D ≈ 16:1; #0E0E0D on #E8FF3A ≈ 15:1 — both pass at body size.

Page 22 of 28

Typography:

  • Headings: Instrument Serif, light optical weight, tight leading 0.92–0.96, tracking -0.02em, sentence case; occasional all-caps micro-labels in Space Grotesk at 11px / 0.18em.
  • Body: Space Grotesk.
  • Scale: 1.5 modular with an editorial jump — hero clamp(44px, 13vw, 168px); section heads 32/48/72; clip titles 20/24/28; body 16/17/18; micro-labels 11px caps; score numerals 40/56/72 in Space Grotesk tabular with 1.1 line-height.
  • Measure capped at 62ch for body, 9 columns for hero.

Shape language: sharp corners everywhere (0px radius on cards, inputs, buttons); 1px hairline rules in #2A2926 as the only ornament; full-bleed image blocks that run off the left or right viewport edge; thin acid-lime underlines as the sole highlight gesture. No rounded pills, no soft shadows — depth comes from flat colour steps and rules, never blur.

Layout: asymmetric 12-column editorial grid with a wide left margin; nav as a single horizontal rule with wordmark left, links centre, "Get clips" right. Sections alternate between full-bleed black bands and off-white bands so the page reads as a magazine spread sequence.

Imagery: large-scale editorial video stills cropped hard — vertical 9:16 frames of speakers in podcast studios, monochrome-graded with a single acid-lime caption bar burned in; face-reframe demonstration as a split frame (original wide left, reframed vertical right) with a hairline rule between. No stock office people, no 3D blobs, no gradients; captions rendered as real type in the images.

Readability constraint: headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit; imagery and decoration may bleed off edges but never cover readable text or controls.

Page 23 of 28

7. Signature Design Concept

The public entry is a magazine cover, not a SaaS hero. An off-black full-bleed first screen opens with a 1px rule spanning the viewport: wordmark left, "Get clips" as an acid-lime filled, sharp-cornered button right. The dominant element is a 9-column display headline in Instrument Serif at clamp(44px, 13vw, 168px), left-aligned and stacked over three lines, the last line set in acid lime on black. Directly beneath it, pinned left, sits a single-line paste-a-link field (sharp corners, #171716 surface, 1px #2A2926 border, acid focus ring) with a small-caps label "Paste a YouTube, podcast or stream link". To the right, bleeding off the right viewport edge, a full-height 9:16 vertical video frame shows a speaker with a burned-in caption and an oversized acid score "94" in the corner. No centred headline, no subtext paragraph, no gradient. Below, the page turns like magazine spreads: three steps as a numbered 3-column rule grid, "why it works" as a two-column editorial spread, the comparison table as ruled rows with the auto-clipping column marked by an acid rule, proof as large pull-quotes at 40–56px, under-the-hood as a numbered technical spread, and a full-viewport footer band with one oversized line ("Stop scrolling. Start clipping.") and the paste-a-link field repeated beneath it.

Page 24 of 28

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: restrained Hero Dimensionality: flat

Landing Hero Motion Brief

  • Focal subject: the oversized Instrument Serif headline stacked over three lines with the final line in acid lime, paired with the bleeding 9:16 vertical video frame and its burned-in caption and acid score.
  • Input → transformation → outcome thesis: on load, the headline reveals line-by-line with a 60ms stagger (translateY 24px, 700ms cubic-bezier(0.16,1,0.3,1)); the paste-a-link field and the vertical frame settle into place; the outcome is a composed magazine cover ready for the visitor to paste a link.
  • Motion vocabulary: one purposeful gesture per screen; virality scores count up once when a clip card enters the viewport; hover on clip cards swaps the thumbnail for the reframed version with a 240ms crossfade and flips the score underline to acid. No parallax, no bounces, nothing loops.
  • Composed first frame: black ground, 1px top rule with wordmark and acid "Get clips" button, three-line headline with acid final line, paste-a-link field pinned left, vertical frame bleeding right with caption and score.
  • Reduced-motion state: all reveals render final state instantly; hover swaps become static opacity changes.
Page 25 of 28

9. Non-Functional Requirements

  • NFR-1 — Durable state (required_inference): projects, clips, virality scores, captions, reframed framing, keep state, and MCP connections persist in MariaDB so creators can resume across sessions.
  • NFR-2 — Background automation (required_inference): clip analysis and rendering run as background work coordinated through Redis, so submission returns promptly and status is observable on Dashboard and New Project.
  • NFR-3 — Model-provider calls (required_inference): moment analysis and captioning call model providers through the LiteLLM gateway; provider credentials are not exposed to the frontend.
  • NFR-4 — Identity and session continuity (required_inference): application-owned identity with self-service Sign Up and returning Login; protected pages (Dashboard, New Project, Clips, MCP Integration) require a session; each creator sees only their own projects, clips, and MCP connections.
  • NFR-5 — MCP authorization (required_inference): MCP connections are authorized against the creator's account and can be revoked; revoked connections cannot create clips.
  • NFR-6 — Readability and accessibility (explicit, from design constraints): readable text and controls stay whole at 375px, 768px, and 1280px; contrast ratios meet body-size thresholds; prefers-reduced-motion yields a usable static arrangement.
  • NFR-7 — Naming (explicit): the product is named auto-clipping and must not be named miqla.app.
Page 26 of 28

10. Tech Stack

  • Frontend: React application UI.
  • Backend: shared FastAPI process for application APIs and domain modules (projects, clips, scoring, captions, MCP connection).
  • Application storage: MariaDB for application-owned persistent data.
  • Cache/state/queue coordination: Redis.
  • Model gateway: LiteLLM gateway for the backend's model-provider calls, backed by its own PostgreSQL (separate from application-owned storage).
  • Deployment: docker-compose with the services above.

11. Assumptions and Constraints

  • Constraint (explicit): the product must be named auto-clipping and must not be named miqla.app.
  • Assumption: the reference site miqla.app is inspiration only for the auto-clipping concept and structure; no miqla.app copy, branding, or unaccepted capabilities are adopted.
  • Assumption: identity is application-owned and required for durable projects, clips, and MCP connections; Landing, Sign Up, and Login are anonymously reachable.
  • Assumption: no differentiated roles or permission tiers exist; every signed-in creator sees only their own state.
  • Assumption: Claude and ChatGPT are external provider surfaces reached through MCP; auto-clipping owns the connection and the resulting clips.
  • Assumption: background analysis and rendering are required to make automatic clipping usable; they are coordinated through Redis and the shared backend.
Page 27 of 28

12. Glossary

  • Auto-Clipping: automatic conversion of a long video into multiple short vertical clips.
  • Virality Score: a numeric score assigned to each selected moment/clip reflecting viral potential; clips are ranked by it.
  • Reframing: adjusting the framing of a clip to keep the speaker's face well positioned in vertical 9:16 format.
  • Silent-pause removal: cutting silent gaps from a clip to tighten pacing.
  • MCP: the integration that lets an AI assistant such as Claude or ChatGPT call auto-clipping to create clips from a prompt.
  • MCP client: the AI assistant (Claude or ChatGPT) connected to a creator's account through MCP.
  • Project: a durable record of one submitted long video and its generated clips.
  • Clip: a short vertical output generated from a project, carrying a virality score, caption, reframed framing, and trimmed duration.
  • LiteLLM gateway: the service through which the backend calls model providers.
Page 28 of 28
Live
Landing design preview
Landing: Read MCP integration explanation
Sign Up: Complete enrollment
Login: Sign in
Dashboard: Open MCP Integration
MCP Integration: 1. Authorize MCP connection
MCP Integration: 2. Retry failed authorization
MCP Integration: 3. Copy connection details
MCP Integration: 4. Revoke connection
Dashboard: 1. View prompt-created project
Clips: Review prompt-created clips
Clips: Download kept clips
Dashboard: 2. Retry failed project
Live
Landing design preview
Landing: Read MCP integration explanation
Sign Up: Complete enrollment
Login: Sign in
Dashboard: Open MCP Integration
MCP Integration: 1. Authorize MCP connection
MCP Integration: 2. Retry failed authorization
MCP Integration: 3. Copy connection details
MCP Integration: 4. Revoke connection
Dashboard: 1. View prompt-created project
Clips: Review prompt-created clips
Clips: Download kept clips
Dashboard: 2. Retry failed project