View raw

Examples#

Working Clipkit Sources that exercise the runtime end-to-end. Every example is a hand-authored CKP/1.0 document — copy the JSON, drop it into your project, render.

The examples live in apps/playground/src/examples.ts and ship with the playground. Each one is loadable from the dropdown in the live editor.

★ Clipkit launch · 16:9#

The hero brand video. Multi-scene composition — wordmark reveal, schema-as-code beat, agent-write-render moment, brand close. Exercises text, shape, composition, animation presets, and timeline coordination across ~15 elements.

What it shows off: motion design at brand quality, in pure JSON.

★ Mux Data demo · 16:9#

A recreation of the Mux Data product video. Stats counters that ride a particle field, gradient backgrounds, dashboard plates, and tight typographic timing. Built to prove the runtime can match production motion work.

What it shows off: data-density, particle systems, gradient mesh fills, multi-stage scene flow.

★ Vercel template · 16:9#

A clean Vercel-aesthetic template — large type, generous whitespace, minimalist motion. The kind of brand video you'd put on a homepage.

What it shows off: design discipline, typographic restraint, geometry-only composition.

★ Code Wrapped · 9:16#

A "year in code" recap. Stats reveal, animated bar charts, kinetic captions. Vertical format — built for Stories / TikTok.

What it shows off: data viz primitives, vertical layout, caption styling.

★ Year in Review · 9:16#

A Wrapped-style year summary. Big numbers, gradient panels, kinetic typography, transitions between cards.

What it shows off: card-based scene composition, smooth inter-scene transitions.

★ Cinematic opener · 16:9#

A film-trailer-style opener. Letterbox bars, slow zooms, dramatic typography reveal, audio sting.

What it shows off: composition framing, slow-motion timing curves, atmospheric stills.

★ Viral hook · 9:16#

The first 3 seconds of a social video — bright, loud, designed to stop the thumb. Word-by-word caption bounce, color flashes, hook copy.

What it shows off: caption animations, tight pacing, attention engineering.

Starters#

Hello Clipkit · 16:9#

The minimum interesting Source. Background shape, animated accent, title, captions. Read this first — it's the smallest thing that uses every major element type.

Launch teaser · 16:9#

Clean brand reveal — wordmark scales in, tagline slides up, second line replaces first, fade out. ~8 seconds. A good shape for product launch announcements.

Social ad · 9:16#

A Stories-format ad template. Big headline, single CTA, supporting imagery. Designed to be remixed.

Motion test · 16:9#

Not a real video — a diagnostic. Cycles through every animation preset against a neutral background so you can compare easings side by side.

Try them#

The fastest way to see these in motion is the playground:

git clone https://github.com/clipkit/clipkit-modern
cd clipkit-modern
npm install
npm run dev --workspace apps/playground

Then open http://localhost:5173. Pick an example from the dropdown. Edit on the left, watch the runtime re-render on the right, export to MP4 from the toolbar.

A hosted playground is on the roadmap — until then, the local one is the gold-standard surface for reading and editing Sources.