Communitygithub.com

Kadr On-Screen Graphics

Design the on-screen graphics for a vertical invite film: hooks, captions, lower thirds, callouts, stickers, stats, and end cards, in one type and color system.

What is Kadr On-Screen Graphics?

A design system for short-form vertical video graphics in the Kadr style. It covers hooks, captions, lower thirds, callouts, stickers, stats, lists, quotes, transitions, and end cards, with colors, type, fonts, assets, and timeline-driven React components. Use it to dress the invite film before a single frame is rendered.

Works with~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/yehdan8-debug/kadr-design/tree/main

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

Read the readme.md file within this skill, and explore the other available files. If creating visual artifacts (reels, graphic overlays, motion pieces, mocks), copy assets out and create static HTML files for the user to view. If working on production code, copy assets and follow the rules here. If the user invokes this skill without any other guidance, ask what video they're making (topic, length, platform, footage they have), then design the graphics for it.

Creator: Emkarok (@emkarok) — Instagram Reels, TikTok, YouTube Shorts. Safe zones default platform="all". Output: A = full reel MP4 (footage composited here); B = graphics only on magenta #FF00FF key for CapCut/Premiere/Final Cut (Export tweak on timeline pages).

Quick rules:

  • Canvas 1080 × 1920. Position graphics in canvas px; keep text out of safe zones (top 160, bottom 440, right 160).
  • Every graphic takes progress (0–1 enter) and exit (0–1). Drive them from one timeline clock (see ui_kits/reel/).
  • Brand = sky gradient --accent-gradient (#61D4FE → #FFFFFF) with dark ink text on it; white type with --shadow-text-footage over footage; ink plates on busy shots.
  • Plus Jakarta Sans 800 for hooks/captions; Martian Mono for kickers/handles.
  • Text enters with the ASCII decode (AsciiText progress); the only transition is GlyphTransition.
  • One graphic idea on screen at a time. No emoji in graphics.
  • Explainer layout: SplitPresenter (+ CardWall on top) on the light studio grid; head pop-out needs a background-removed copy of the clip.
  • Tech look: ScanSweep → TrackBox (face/object) + HudReadout corner data; put trackers inside the footage's transform layer.
  • Vision HUD: DepthScan, ObjectTags, Viewfinder, ContourMap (+ CompassStrip), TerminalLog, ThermalView. Canvas ones need a same-origin still of the shot (src + fit); pass zoom to follow a punch-in. Box/label coordinates are measured per shot — re-measure for new footage.
  • Explainer: FileDrop (cursor drags clips into a folder) — ~1.5s per file.
  • Footage must leave room for graphics: see FOOTAGE in readme.md and ShotGuide presets (talking-head, wide, product, broll, endcard). Mid-to-dark footage under text, SDR, locked exposure, no sky-blue or white behind text.

Related Skills