본문으로 건너뛰기
cccskills

Charlie Hills

@charlie947

스킬 15개저장소 1개 428

스킬(15)

검색에서 좁히기

Make a looping animated chart for LinkedIn or a newsletter in code with Claude Code. Bars that become a line, a number that counts up, a before and after. Every value stays exactly as given. Use when someone says "animate my chart", "animated graph", "make my results move", "stat animation" or wants a data graphic that loops.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

charlie947/motion-graphics-skills4282026년 10월 11일 업데이트

Make a 30-45 second product launch video in code with Claude Code, the kind SaaS companies post on launch day. One sentence split across scenes, real product screens with slow camera moves, a typed prompt, a proof beat and a clear call to action. Use when someone says "launch video", "promo video for my product", "announce my course/cohort/offer", "make a launch reel" or "trailer for my product".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

charlie947/motion-graphics-skills4282026년 10월 11일 업데이트

Make a 12-second looping milestone clip in code with Claude Code. Thousands of tiny points drift like a night sky, pull together into your real number (followers, subscribers, revenue, customers), a line draws underneath and the label settles in. Premium, not a party. Use when someone says "milestone video", "celebrate 10k followers", "animate my subscriber count", "number reveal", "particle number animation" or wants to mark a result on LinkedIn or Instagram.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

charlie947/motion-graphics-skills4282026년 10월 11일 업데이트

Give the same motion brief to three AI models, keep each first try, render all three the same way and stack them into one comparison video with model names and logos. Makes a 16:9 side-by-side for a newsletter and a 1080 x 1920 stacked reel for Instagram and TikTok. Use when someone says "compare three models", "same prompt three AIs", "model showdown", "which AI is the best motion designer", "side by side comparison video" or wants a fair head-to-head of AI outputs.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

charlie947/motion-graphics-skills4282026년 10월 11일 업데이트

Turns a rough idea for an animated graphic into a precise build brief for Claude Code, in your own brand. Asks for anything essential first (exact numbers, size, length, brand), keeps real results apart from sample data, and never invents a figure. Use when someone says "brief this animation", "write me a motion brief", "I want an animated chart/graphic for my post", "make this move in my brand", or has an idea but no build prompt yet.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

charlie947/motion-graphics-skills4282026년 10월 11일 업데이트

Build any of 16 premium motion effects from scratch in your own brand, as one 8-second looping HTML file with window.seek(seconds) so it exports frame-exact to MP4 or GIF. Interfaces (button to player, search to results, card to workspace, tabs to panels), data (chart morph, dashboard zoom, spring stack, magnetic dock), type (masked type, elastic type, text to layout, image reveal) and systems (perspective shift, glass focus, flowing paths, particle logo). Use when someone says "build the chart morph", "make a button that turns into a video player", "animate my logo with particles", "motion effect", "UI animation", "product animation", "animated dashboard", "kinetic type" or names any of the 16 effects.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

charlie947/motion-graphics-skills4282026년 10월 11일 업데이트

Write a complete 8-part Claude Motion prompt (The bar, Format, The one rule, Look, Motion, Never, Before you finish, The scene) for one short looping motion graphic, in your own brand. Takes your brand (a website screenshot, a logo, hex codes, or nothing for the Apple-style default) and one moment you want to show, in plain words. Use when someone says "write me a Motion prompt", "turn this idea into a motion graphic", "fill in the 8 parts" or "make my motion brief". Outputs parts 1 to 7 as a reusable brief and part 8 as the scene, in one paste-ready code block.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

charlie947/motion-graphics-skills4282026년 10월 11일 업데이트

Turn any horizontal or square motion video into a 1080 x 1920 Instagram Reel or TikTok that uploads cleanly. Headline and logos inside the safe zone, H.264, yuv420p, limited colour range, bt709, a silent audio track when there is no sound, and an ffprobe check before upload. Use when someone says "make this a reel", "vertical version", "export for Instagram", "TikTok version", "9:16 cut", "reel export" or has a 16:9 or 4:5 video that needs to go on a vertical feed.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

charlie947/motion-graphics-skills4282026년 10월 11일 업데이트

Make a short Vox-style documentary explainer (30-60 seconds) entirely in code with Claude Code. Torn paper, halftone texture, bold condensed type, motion on twos. Use when someone says "make a Vox-style video", "explainer video about...", "why does X happen", or wants a documentary-style motion graphic for LinkedIn, Instagram or YouTube without After Effects or a video generator.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

charlie947/motion-graphics-skills4282026년 10월 11일 업데이트

Rebuild an Apple-style Mac launch film entirely in code with Claude Code. A thin menu bar, the black notch growing into widgets one scene at a time, full-screen gradient wallpapers and one short caption per scene. No screen recording, no After Effects. Use when someone says "Apple-style launch", "Mac launch video", "notch animation", "make it look like an Apple keynote", "macOS UI launch film" or wants a product launch that looks like native Mac interface.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

charlie947/motion-graphics-skills4282026년 10월 11일 업데이트

The setup step every other skill in this pack reads. A short interview plus 3 to 5 reference frames becomes two files in your project, brand.md (who you are, what you sell, your assets) and MOTION.md (your colours, type, timing and motion rules), plus a rule in CLAUDE.md so Claude reads them before it animates anything. Use at the start of any motion project, or when someone says "set up my brand", "brand intake", "build my motion design system", "make it look like my brand", "onboard me", "write my MOTION.md" or drops a batch of brand frames into chat.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

charlie947/motion-graphics-skills4282026년 10월 11일 업데이트

Turn a newsletter or blog cover into a seamless looping GIF at 896 x 640, 180 frames at 20fps. Only the one element you name moves, the loop is rotated so frame 1 shows the finished picture, and the seam is measured, not eyeballed. Use when someone says "animated cover", "make my cover move", "looping GIF cover", "newsletter cover GIF", "animate my thumbnail" or wants a cover that moves in the inbox without looking busy.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

charlie947/motion-graphics-skills4282026년 10월 11일 업데이트

Turn a newsletter edition into a 12-20 second promo clip for LinkedIn, Instagram or X that drives people to read and subscribe. Hook question, three proof frames from the edition, then the newsletter name and where to read it. Use when someone says "promo for my newsletter", "trailer for this edition", "get people to my Substack", "teaser video" or "promote this issue".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

charlie947/motion-graphics-skills4282026년 10월 11일 업데이트

Turn references you admire into a scene-by-scene Claude Motion prompt for your own topic and brand. Takes a video for the moves (screenshots, frames or a contact sheet of a reel or ad) and, optionally, a look reference for the style (a website, a brand, a moodboard). Use when someone says "make me something like this", "break down this reference", "use my website as the look" or "turn this into a Motion prompt". Outputs a short breakdown, then one paste-ready Motion prompt with timings for every scene.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

charlie947/motion-graphics-skills4282026년 10월 11일 업데이트

Make a cinematic 3D title sequence (8-15 seconds) in code with Claude Code and Three.js. A camera moves through a lit scene, such as a rainy street at night with brand names as neon signs, then a big question or title lands. Use when someone wants a scroll-stopping opener, a film-style intro, "3D intro", "cinematic opening", "title sequence" or a hook for a video, reel or newsletter.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

charlie947/motion-graphics-skills4282026년 10월 11일 업데이트

본인 계정인가요? GitHub를 연동하면 크리에이터 페이지에 모을 수 있습니다 (일본어)