code-anything.com
Sign inStart free
Marketing

ClipCraft

ClipCraft is a modern, techy design system for browser-based creative tools that need to feel powerful yet approachable. A near-black slate canvas with a single bright teal accent reads confident and product-forward, while Space Grotesk headings paired with Inter body keep the copy crisp and scannable. The layout centres on a realistic in-browser editor screenshot — a preview canvas, a slim toolbar, and a signature multi-track timeline — so visitors grasp what the product does before they read a word.

Sleek, techy and confident — a near-black studio surface where a single teal accent and a live editor timeline make a powerful tool feel effortless.

clip-craft.code-anything.app
ClipCraft
Runs in your browser

Professional video
editing made simple

Create stunning video content with our powerful yet intuitive editor. Trim, split, and export in minutes.

No install·Free tier forever·Export in 4K
launch-teaser.clipcraft
SAVED
1920×1080 · 24fps00:07 / 00:20
00:0000:0400:0800:1200:1600:20
V1
V2
T
A1
Trusted by creators atStreamlineFramehouseCutroomPlaybackReelworks
Everything in one editor

Powerful tools, zero learning curve

Every clip lives on the same magnetic timeline, so editing feels obvious from the first cut.

Trim & split on the beat

Ripple-trim, slip, and split clips with frame-accurate handles. Magnetic snapping keeps every cut tight to the beat without the guesswork.

Multi-track by design

Stack video, overlays, captions, and audio on unlimited lanes. Drag to reorder, lock what you like, and mute a track to audition an idea.

Auto-captions in a click

Transcribe speech to styled, editable captions in 30+ languages, then restyle the whole track from a single preset.

Export in minutes

Render 4K straight from the browser on our GPU cloud. Presets for YouTube, Reels, and TikTok ship the right aspect ratio every time.

From clip to cut

Four steps to a finished video

01
Drop your footage

Import from your drive, a link, or the stock library. Clips land on the timeline instantly.

02
Cut & arrange

Trim, split, and layer on the multi-track timeline with snapping that keeps everything aligned.

03
Polish & caption

Add transitions, titles, and auto-captions, then tune color and audio with live preview.

04
Export & share

Render 4K in the cloud and publish straight to social, or download the master file.

00:0000:0400:0800:1200:1600:20
V1
V2
T
A1
Video Text Audio
12M+
Videos exported
4K
Cloud rendering
30+
Caption languages
0
Installs required

Your first cut is one click away

Open the editor in your browser — no download, no card. Start with a template or a blank timeline.

Try a demo

Design rules

The system, applied to any site

  • Anchor the design in a near-black slate (#0b0f16) with one bright teal accent reserved for the primary CTA, the playhead, active tools and key numbers, so the palette stays disciplined and product-forward.
  • Make an original in-browser editor screenshot the hero: a preview canvas with a centred play glyph, a slim vertical toolbar, and a realistic multi-track timeline underneath — never a stock photo.
  • Render the signature timeline in pure CSS/SVG: stacked lanes of clips at varying widths (video, text, audio), an audio waveform, a time ruler, and a single teal playhead cutting across.
  • Pair Space Grotesk for headings with Inter for body and a monospace for eyebrows, timecodes and labels; keep headings tight (-0.03em) and lead sections with a short teal-rule eyebrow.
  • Use a teal primary button carrying a play triangle plus a ghost secondary button, and repeat a small pulsing status dot (SAVED, live) to make the surface feel alive.
  • Keep cards on the #131a24 surface with 1px #212a36 borders and 12px radius; lift on hover with a teal-tinted border and a soft teal glow rather than heavy shadows.

Ships with

Nav with Sign in + teal Get StartedHero with headline, dual CTAs and editor screenshotCreator logo stripFeature grid (trim, multi-track, captions, export)Workflow strip over the signature timelineStats bandCTA + footer

Design tokens

Palette

bg
surface
text
muted
accent
accent2
border

Headings

Space Grotesk

Body

Inter

Radius

12px

Explore palettes

More from the library

AuroraMarketing
Warm ArtisanMarketing
Sharp FadeBooking
CockpitDashboard

Make it yours in minutes.

Start from this template and describe your tweaks — content, sections, colours. The backend and deploy are handled.