KRNL Styles
Drop a screenshot or a screen recordingDrop it in
Paste, drag or pick a file. Screenshots, screen recordings, SVG logos and Lottie all work.
Devices in 3D
Phones, foldables, tablets, laptops and browser windows you can tilt, orbit and light.
[ open source ] free mockups and motion, made in your browser
Drop in a screenshot and it lands in a real device, lit and composed. Pick one of 95 templates, give it motion, export a video. Free, open source, and your AI can drive it too.
No accountNo watermark you cannot turn offMIT licensed
One canvas for stills and motion. Devices, type, backgrounds, camera and timeline, all in one place.[ runs in any modern browser ]
[ how it works ]
Screenshot in.
Launch post out.
Drop a screenshot or a screen recordingIt lands in a device
Real phones, tablets, laptops and browsers in 3D, on light that suits them. Every template sets the composition for you.
Give it motion, export
Words rise, cameras push in, numbers count up. Export MP4, GIF, Lottie or a still, sized for every network.
[ 95 templates ]
Every one of them moves.
App launches, product tours, milestones, code, kinetic type and films with transitions. Made to the same art direction, so they look designed, not generated.
[ what is inside ]
A design studio,
not a frame generator.
Type that performs
Sixty-four fonts, and text that rises, types, scrambles, blurs in or follows a path.
Camera and timeline
Push in, orbit and morph between layouts, on a timeline with real easing.
Backgrounds with light
Meshes, grain, glass and live effects that move with the design.
Your brand, everywhere
Set your colours, fonts and logo once and every template wears them.
Every format
Sized for X, LinkedIn, Instagram, App Store and Product Hunt, in one click.
MP4GIFLottiePNGWebPFrames
[ for agents ]
Your AI can design too.
KRNL Styles speaks MCP. Claude, Cursor or any agent can pick a template, write the copy, place your screenshots and render the video, with the same tools you use. In the open editor, the same tools are there through WebMCP.
> make a launch post for Tally, our finance app● styles · list_templates category: App showcase● styles · create_design template: app-hero-phone● styles · add_media tally-home.png into the phone● styles · edit_design headline: Your money, at a glance.● styles · render_video mp4 · 1080 × 1350 · 6 s✓ tally-launch.mp4 is ready
claude mcp add --transport http styles https://styles.krnl.studio/api/mcp[ MIT licensed ]
Free, and yours.
Use it here, or run it on your own machine. The editor, the renderer, the templates and the MCP server are all in the repository.
git clone https://github.com/OWNER/krnl-styles && cd krnl-styles && npm ci && npm run dev