All work03 / 05
AI PRODUCT · PROTOTYPE

Mindframe.

The edit begins before the timeline.

AI workflowVideoProduct prototype

Screenshot of the project website

STAGEFunctioning prototype
MY WORKProduct design · workflow specification · AI-assisted development
EXPLORERequest a walkthrough
01 / WHAT I BUILT

From raw footage to a clearer editorial decision.

Mindframe is a video production workspace that moves from upload and AI analysis to editorial choices, rendering and approval. It is designed for creators who need a coherent workflow across both creative and processing steps.

02 / MY ROLE

My contribution.

I designed the product journey and directed a functioning AI-assisted prototype, defining what the system should surface at each editorial decision.

  • Designed upload, analysis, transcript and visual review, work modes, rendering and output stages.
  • Specified chapter markers, key moments, processing states and approval points.
  • Directed implementation, inspected outputs, diagnosed broken logic and refined the prototype.
03 / HOW IT WORKS

Inside the system.

The workflow separates media intake, AI-supported analysis, human editorial choice and final rendering. Each stage has its own state so a creator can understand what the system has done and what decision is theirs next.

TECHNOLOGY STACKTHE BUILDING BLOCKS
InterfaceReact · TypeScript · Vite · Tailwind · shadcn/ui
MotionFramer Motion
Data and servicesSupabase / Lovable Cloud
AI and renderingGemini vision · Shotstack
SYSTEM ARCHITECTUREFROM INPUT TO OUTCOME ↘
  1. 01Upload

    Bring footage into a project

  2. 02Analyze

    Visual and transcript review identify useful material

  3. 03Decide

    Work modes, chapters and key moments support editing choices

  4. 04Render

    Processing states make output progress legible

  5. 05Approve

    Review the result and continue the editorial loop

04 / IMPLEMENTATION

Under the hood.

The details that make the experience or workflow work in practice.

01

Editorial checkpoints

Analysis is organized around transcript and visual review, chapter markers and key moments rather than a single undifferentiated AI result.

02

Visible processing states

The prototype gives upload, analysis and rendering clear states, making a multi-step job easier to follow.

03

Output review

A final review and approval stage keeps the creator in the decision loop.

AI ARCHITECTURE

Where the model fits.

Model layer

Gemini vision supports visual analysis in the prototype.

Human control

AI analysis informs editorial decisions; the workflow still presents explicit review and approval steps.

05 / WHY IT WORKS THIS WAY

Decisions with intent.

The thinking behind the architecture and product experience.

01 / DECISION

Structure AI output as editorial choices

Markers and moments are more useful when a creator can inspect them within the video workflow.

02 / DECISION

Show progress as states

Upload, analysis and rendering take time; distinct states make the next action clearer.

06 / THE HARD PART

Keeping a complex production flow understandable.

Video creation spans media, AI analysis, creative judgment and rendering. I broke the journey into explicit stages and decisions, then refined the prototype when the underlying logic did not match the intended flow.

07 / CURRENT STAGE

Where it stands.

Functioning prototype with the core end-to-end video workflow represented.

PROOF / EXPLORE

A prototype walkthrough and product material are available on request.

Request a walkthrough