Framecut

A neutral-grey editing workspace with procedural footage, a multi-track timeline, colour controls and a three.js RGB scope, plus audio and export interface views.

• Best forDevelopers building browser editors, media workspaces and post-production interfaces.

• Edit

  Use the shared transport, procedural monitor, media bin, inspector and seven-track timeline with filmstrips, markers and a local ripple-delete example.

• Color

  Adjust lift, gamma, gain and look controls while the procedural viewer, three.js RGB cube and RGB parade respond.

• Audio

  Explore a waveform editor, synthesized loudness readings, draggable mixer faders and a visual EQ interface.

• Export

  Change render settings and inspect fictional encoding progress, frame previews, queue rows and delivery destinations.

• A shared editing transport

  The playhead drives procedural footage, filmstrips, inspector, waveform and meters together. Playback, frame steps, scrubbing and local ripple-delete controls are included.

• Colour workspace

  Colour wheels and look previews affect a shared procedural grade. A three.js RGB cube scope, vectorscope trace and RGB parade make the colour interface tangible.

• Audio and delivery layouts

  Mixer faders, waveform controls, export presets, progress displays and destination rows demonstrate an editor workflow without claiming a processing engine.

• Responsive and reduced motion

  Four views include keyboard navigation and a layout for smaller screens. The hydration-safe reduced-motion hook shows composed still states; three.js scenes include lighter software-rendering tiers and a fallback when WebGL is unavailable.

Responsive layouts, keyboard-accessible navigation and reduced-motion support.

No media is imported, decoded or encoded. Footage is procedural; audio analysis, meters and waveforms are synthesized visuals. Render and upload progress are simulations and the queue does not encode a file. Connect your own media backend, decoder, audio engine, colour pipeline and export services.

• IncludedFictional demonstration data and local interactions, ready to edit. The included README identifies the data files and model.
• Not includedBackend, database, authentication, payments or AI services. Features that look connected are simulated; connect your own services when you adapt the code.

• Complete Next.js project
• 4 animated views
• Source files and project assets
• README with setup and customization
• LICENSE.md

Stack and requirements

• StackNext.js 16, React 19, TypeScript, Tailwind CSS v4, Framer Motion, Three.js, Lucide icons
• FontsGeist, Geist Mono
• RequiresNode.js 20.9 or later, npm, and working knowledge of React and Next.js

Run it locally

Extract the ZIP, open a terminal in the project folder, then run:

npm install
npm run dev

Open localhost:3000. The README covers the data, colors, fonts and animations.

• Price$9 USD, one-time payment. No subscription or renewal.
• TaxesApplicable VAT and sales tax are included in the price. The total is shown before you pay.
• LicenseUnlimited personal and client projects. No resale or redistribution of the source. Read the license
• DeliveryAfter payment, Polar emails your receipt and a download link for the ZIP.
• RefundsIf the files don’t install or run as described and can’t be fixed within 7 days, you get a full refund. Refund policy
• Supporthello@buildindex.dev for the template as delivered.

Secure checkout by Polar. More answers in the questions.