# Article Highlights > Create article/news-style Remotion carousel inserts with clean editorial cards, layered text, rough.js highlighter strokes behind keywords, blur-in, and subtle 3D camera motion for informative/release/news/trend topics. - **Type:** Skill - **Install:** `agentstack add skill-liamrjohnston30-remotion-motion-graphics-skill-article-highlights` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [liamrjohnston30](https://agentstack.voostack.com/s/liamrjohnston30) - **Installs:** 0 - **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [liamrjohnston30](https://github.com/liamrjohnston30) - **Source:** https://github.com/liamrjohnston30/remotion-motion-graphics-skill/tree/main/skills/article-highlights ## Install ```sh agentstack add skill-liamrjohnston30-remotion-motion-graphics-skill-article-highlights ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # Article Highlights ## Example output The approved reference render for this skill — an editorial card that blurs in, slowly zooms with a subtle 3D tilt, then draws hand-drawn highlighter strokes behind the key phrases (click for full MP4): Use this with the Remotion skill and the `motion-graphics` skill when a carousel slide should feel like an editorial/news/article screenshot rather than a terminal demo. Use this pattern for: - Informative/news/release/trend slides. - "Something just changed/launched" topics. - Explaining a key claim by highlighting keywords in an article-like layout. - Non-terminal visual proof where terminal UI would feel forced. Prefer the `terminal-inserts` skill instead for Claude Code/Codex/skills/CLI/setup/agent-run visuals. ## Core architecture Do **not** use a flattened article screenshot when the highlight must appear behind text. Build layered Remotion DOM/SVG: 1. White full-HD background. 2. White editorial article/card/paper layer with generous padding. 3. Rough.js highlighter SVG layer above the paper. 4. DOM/SVG text layer above the highlighter. This is required so the marker appears behind the words but visibly on the paper. ## Default specs - Composition: 1920x1080, 30fps, 5s / 150 frames. - Background: white or very light editorial canvas. - Card: centered, generous margins, subtle shadow optional, no clipping. - Typography: editorial/news-like hierarchy. - Small uppercase section label. - Large bold serif or editorial headline. - Muted byline/date. - 2-3 short body lines max. - Optional muted pill/button/source row. - Highlights: semi-transparent yellow, rough.js/hand-drawn marker style, behind text. ## Animation standard - Frames 0-30: whole composition starts blurred and unblurs over 1 second. - No highlight visible at frame 0 or early blur frames. - Full duration: slow subtle zoom into the article. - Add slight 3D left-to-right rotation with perspective. Target around 15deg total per axis, but reduce if needed to prevent clipping/readability issues. - Start highlighter only after blur finishes, around frame 38-45. - Draw each highlight left-to-right like dragging a marker over paper. - Sequence highlights, do not reveal all at once. - Final state holds with highlights visible. ## Highlighter rules - Use rough.js or irregular SVG marker shapes. - Animate reveal with a clipping mask/wipe from left to right. - Highlighter must be behind text and above paper. - Yellow should be visible but not obscure text. - Make the stroke slightly imperfect, not a clean rectangle. - Target only meaningful keywords/phrases, not whole paragraphs. ## Layout rules - Hard-wrap headline/body lines intentionally. - Keep all text inside safe margins. - Check transformed/rotated card does not clip in the viewport. - Do not let body copy run off the right edge. - Do not center it like a title slide; it should feel like an article/webpage excerpt. ## When briefing Remotion Include: - Composition size/FPS/duration/output path. - The article copy and exact phrases to highlight. - Exact timing: blur, first highlight, second highlight, final hold. - Requirement that highlights start invisible and draw on after blur. - Requirement to build layered DOM/SVG, not flattened image text. - QA stills: early no-highlight frame, mid-highlight frame, final-highlight frame. ## Quality gate Before delivery: - `npx tsc --noEmit`. - Render MP4. - Render stills around frame 20, frame 60, frame 120. - Confirm frame 20 has no highlight. - Confirm target phrases are highlighted by final frame. - Confirm no text clipping, no off-center/cut-off card, and marker sits behind text. ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [liamrjohnston30](https://github.com/liamrjohnston30) - **Source:** [liamrjohnston30/remotion-motion-graphics-skill](https://github.com/liamrjohnston30/remotion-motion-graphics-skill) - **License:** MIT Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-liamrjohnston30-remotion-motion-graphics-skill-article-highlights - Seller: https://agentstack.voostack.com/s/liamrjohnston30 - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.