5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T7f1,

Video Editor is my hackathon entry: a working multitrack video editor built with Framer 3.0 agents. You can drop clips onto a timeline, trim and arrange them across tracks, add styled text and effects, and watch it all play back live in the browser.

Why I built it

I wanted to build something people don't expect a Framer site to do. A video editor felt like the real test — it's runtime software, not a page: a playhead that advances every frame, multiple videos seeking in sync, clips you drag and trim by hand. If Framer could do that, it could do almost anything.

What's inside

A media library you click to add clips to the timeline
A multitrack timeline with drag, trim, split, and scrub
A text panel with styled presets, edited live in the inspector
An effects panel — apply filters to a clip and tune them
A live preview that stacks every track and plays in sync

The whole thing runs on one master playback clock that the video, audio, and text layers all follow, so everything stays in sync as you play and scrub.

What agents helped with

Agents helped me build each piece on its own and refine it — the timeline interactions, the contextual inspector, the effect system — which made it far easier to iterate on the fiddly parts like clip dragging, keeping the preview smooth without flicker, and matching the dark UI across panels.

What surprised me most is how well agents handled the interactive side of Framer, not just layout and content. With a clear structure and small, verified steps, you can actually ship real interactive software people want to touch.

(Export runs on a render server — that's the next step. This is the live editing experience.)

Try it: click a clip onto the timeline, type a title, add an effect, and hit play.

Built with Framer 3.0 AI agents

5a:[["$","$L5d",null,{"post":{"id":"019ed69f-cd8a-7318-88aa-9849f0c0136f","title":null,"body":"

My entry to Framer 3.0 Hackathon

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"My entry to Framer 3.0 Hackathon"}]}]},"author":{"framerUserId":"e61f0a6a-36a9-4888-983d-6ac510419224","name":"Syed Saboor","slug":"syed-saboor","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/309218/avatar-OjublbQTOL1LRgrwzHgZqBTFloHXgy.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[],"contests":[{"id":"019ed69f-cd8a-7318-88aa-9f3c981dbe4a","contestId":"agents-hackathon","author":{"framerUserId":"e61f0a6a-36a9-4888-983d-6ac510419224","name":"Syed Saboor","slug":"syed-saboor","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/309218/avatar-OjublbQTOL1LRgrwzHgZqBTFloHXgy.jpg","badges":["available","expert"]},"title":"Video Editor","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Video Editor ","marks":[{"type":"bold"}]},{"type":"text","text":"is my hackathon entry: a working multitrack video editor built with Framer 3.0 agents. You can drop clips onto a timeline, trim and arrange them across tracks, add styled text and effects, and watch it all play back live in the browser."}]},{"type":"paragraph","content":[{"type":"text","text":"Why I built it","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"I wanted to build something people don't expect a Framer site to do. A video editor felt like the real test — it's runtime software, not a page: a playhead that advances every frame, multiple videos seeking in sync, clips you drag and trim by hand. If Framer could do that, it could do almost anything."}]},{"type":"paragraph","content":[{"type":"text","text":"What's inside","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A media library you click to add clips to the timeline"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A multitrack timeline with drag, trim, split, and scrub"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A text panel with styled presets, edited live in the inspector"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"An effects panel — apply filters to a clip and tune them"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A live preview that stacks every track and plays in sync"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"The whole thing runs on one master playback clock that the video, audio, and text layers all follow, so everything stays in sync as you play and scrub."}]},{"type":"paragraph","content":[{"type":"text","text":"What agents helped with","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Agents helped me build each piece on its own and refine it — the timeline interactions, the contextual inspector, the effect system — which made it far easier to iterate on the fiddly parts like clip dragging, keeping the preview smooth without flicker, and matching the dark UI across panels."}]},{"type":"paragraph","content":[{"type":"text","text":"What surprised me most is how well agents handled the "},{"type":"text","text":"interactive","marks":[{"type":"italic"}]},{"type":"text","text":" side of Framer, not just layout and content. With a clear structure and small, verified steps, you can actually ship real interactive software people want to touch."}]},{"type":"paragraph","content":[{"type":"text","text":"(Export runs on a render server — that's the next step. This is the live editing experience.)"}]},{"type":"paragraph","content":[{"type":"text","text":"Try it: click a clip onto the timeline, type a title, add an effect, and hit play."}]},{"type":"paragraph","content":[{"type":"text","text":"Built with Framer 3.0 AI agents"}]}]},"media":[{"type":"video","url":"https://stream.mux.com/qPLGpAo5vCEVQLfvZUQUHdkdggxf8t01pFsgI9jZicI8.m3u8","metadata":{"posterUrl":"https://image.mux.com/qPLGpAo5vCEVQLfvZUQUHdkdggxf8t01pFsgI9jZicI8/thumbnail.webp?time=4.994","aspectRatio":"829:450","duration":7.63}}],"post":null,"data":{"previewUrl":"https://predictable-diplodocus-886975.framer.app/editor"},"winner":false,"createdAt":"2026-06-17T17:27:37.659Z","updatedAt":"2026-06-17T17:27:37.659Z"}],"categories":[],"tags":[],"likes":{"count":63,"liked":false},"comments":{"count":39},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-17T17:27:37.618Z","updatedAt":"2026-06-17T17:27:37.618Z","reported":false}}],"$L5f"] 5b:E{"digest":"NEXT_REDIRECT;replace;/community/contests/agents-hackathon/submissions/LfU6NV8T2vuxZYM4Tgwp1F/;307;"}

Suggested for you