「motion」の検索結果

Create polished, code-driven Remotion motion explainers from scripts, narration, subtitles, product specifications, reference videos, UI recordings, diagrams, or abstract concepts. Use for product launches, AI demonstrations, UI interactions, algorithms, scientific principles, electrical systems, data flows, architecture, charts, equations, and concepts best expressed with React, SVG, Canvas, WebGL, or Three.js. Prioritize continuous spatial logic, visible cause and effect, precise interaction states, editable parameters, deterministic rendering, and evidence-backed visual QA.

日本語の概要は準備中です。原文の説明を表示しています。

Programmatic React video best practices for Remotion. Use this skill whenever the user is writing, debugging, or rendering Remotion code — compositions, useCurrentFrame animations, interpolate, spring, Sequence timing, <Img>/<Video>/<Audio> from @remotion/media, staticFile, calculateMetadata, the Studio preview, `npx remotion render`, captions, subtitles, voiceover, audio visualization, ffmpeg, transitions, light leaks, transparent video, Lottie, 3D scenes, Mapbox flyovers. Triggers especially on HtmlInCanvas / "html in canvas" requests, CRT terminal effects, glitch effects, video shaders, WebGL video, and any request to scaffold a new programmatic React video. Owns `remotion render` and everything about Remotion code. Do NOT trigger for finished MP4 ad assembly from existing slides (that is `/video-content`) or for the inspiration-to-MP4 reference-video pipeline (that is `/cmo-video`).

日本語の概要は準備中です。原文の説明を表示しています。

Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "implement this motion", "add animation from Figma", "animate this component", provides a Figma URL whose node is animated, or when `get_design_context` returns motion data or instructs you to call `get_motion_context`.

日本語の概要は準備中です。原文の説明を表示しています。

React / Next.jsのボタン、モーダル、通知、ページ遷移に動きを加え、表示・消去やスクロールに連動するアニメーションを実装するスキル。

• ボタンの操作に動きを付けたいとき
• モーダルや通知の表示・消去
• Next.js App Routerのページ遷移

ReactやNext.jsで、ドラッグ操作、スワイプ、文字やSVGのアニメーションを実装します。複数段階の動きや読み込み表示まで扱い、用途に合うAPI選びも支えるスキル。

• ドラッグで閉じる画面や並べ替えリストの実装
• 単語ごとの文字表示や数値アニメーション
• SVGの線描画や円形の進捗表示

Use when the user wants a short, design-led motion graphic where motion is the message: kinetic typography, stat or number count-up, chart/data-viz hit, logo sting, brand lockup, lower-third, callout, social overlay, animated headline/tweet/news item, motion poster, or quick captured-page highlight. Usually under 10s and up to ~30s, with no narration arc, voice-over, or live-action subject. Can render to MP4 or transparent overlay. Not for longer, multi-scene, narrated, or brand-reel pieces (use general-video), narrated website videos (website-to-video), topic explainers (faceless-explainer), product promos (product-launch-video), PR videos (pr-to-video), or captions on existing footage (embedded-captions). When unsure whether it's a quick motion-first piece or a longer / narrated treatment, see /hyperframes.

日本語の概要は準備中です。原文の説明を表示しています。

Port an existing Remotion (React) composition's source to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate/translate a Remotion source — one-way, Remotion-only. A passing Remotion mention, reference-only code, or "make something like my Remotion video" is a fresh build (/general-video). Unclear → /hyperframes.

日本語の概要は準備中です。原文の説明を表示しています。

Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "implement this motion", "add animation from Figma", "animate this component", provides a Figma URL whose node is animated, or when `get_design_context` returns motion data or instructs you to call `get_motion_context`.

日本語の概要は準備中です。原文の説明を表示しています。

Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "implement this motion", "add animation from Figma", "animate this component", provides a Figma URL whose node is animated, or when `get_design_context` returns motion data or instructs you to call `get_motion_context`.

日本語の概要は準備中です。原文の説明を表示しています。

Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system.

日本語の概要は準備中です。原文の説明を表示しています。

Access Core Motion accelerometer, gyroscope, magnetometer, device-motion, pedometer, activity-recognition, altitude, headphone motion, batched high-frequency workout motion, and water-submersion/depth data. Use when reading device sensors, counting steps, detecting walking/running/driving/cycling, tracking altitude, building motion interactions, handling AirPods head tracking, or implementing watchOS dive/depth features.

日本語の概要は準備中です。原文の説明を表示しています。

Turn one sentence of intent into tasteful, produced motion. Given a natural-language request like "make a good-looking animated landing page", "add a delightful like animation", or "make a silky release video", this skill classifies the intent, picks the most suitable recipes from the motion-anything library while honoring MOTION-SPEC.md (timing, easing, and the restraint budget), and produces the output. The universal entry point to motion-anything. Works on web pages, slides, app-showcase pages, and video.

日本語の概要は準備中です。原文の説明を表示しています。

Design a RULER emotional literacy sequence for recognising, understanding, labelling, expressing, and regulating emotions. Use when students struggle with emotional regulation, conflict, or anxiety.

日本語の概要は準備中です。原文の説明を表示しています。

Add a measured sound pass to a motion-graphics video made with Claude Code (HyperFrames, Remotion, GSAP, Claude Motion or the motion-broll skill). Builds a cue list, checks the music's beat grid against the kick drums, lands cuts on the beat, places one real sound effect per cue from a bundled CC0 library, mixes to -16 LUFS with true peaks below -4 dBFS measured on the exported MP4, and proves it with frames, waveforms and 5 timestamps for a human to check. Use when someone wants sound effects, sound design or music added to a motion-graphics video, or says their AI video sounds like cheap beeps.

日本語の概要は準備中です。原文の説明を表示しています。

Use when the user wants a short, design-led motion graphic where motion is the message: kinetic typography, stat or number count-up, chart/data-viz hit, logo sting, brand lockup, lower-third, callout, social overlay, animated headline/tweet/news item, motion poster, or quick captured-page highlight. Usually under 10s and up to ~30s, with no live-action subject. Can render to MP4 or transparent overlay. Not for longer, multi-scene, or brand-reel pieces (use general-video), topic explainers (faceless-explainer), PR videos (pr-to-video), or captions on existing footage (embedded-captions). When unsure whether it's a quick motion-first piece or a longer treatment, see /hyperframes.

日本語の概要は準備中です。原文の説明を表示しています。

用代码生成 15 秒动态图形（Motion Graphics）成片，默认交付 1920×1080 / 30fps：自研渲染引擎（超采样矢量/文字 + bloom/色差/颗粒）、真 3D 点云渲染、丝网印/riso 四色分色、代码合成配乐，画面与音乐全部由代码产出、不用任何外部美术素材、不用 AE。视觉语言有 16 张牌，默认随机抽一张（轻的、非 3D 的、编辑排版/手绘/纸艺/标本那类一样做），不默认做最炫的那一支。当用户说「用代码做个动效视频/动态图形/motion graphics」「生成一条 15 秒作品集样片/产品片/宣传短片」「按某种风格做视频」「给某个品牌/产品做一条片子」「复刻某条动效片的风格」，或要改已有片子的品牌、配色、节奏、镜头时使用。触发词：动效视频、动态图形、motion graphics、作品集样片、产品片、15 秒视频、1080p30、代码生成视频、ruic-motion-reel。

日本語の概要は準備中です。原文の説明を表示しています。

Design a RULER emotional literacy sequence for recognising, understanding, labelling, expressing, and regulating emotions. Use when students struggle with emotional regulation, conflict, or anxiety.

日本語の概要は準備中です。原文の説明を表示しています。

Code-rendered motion video for a product or a client, built the way a motion studio would do it. Every frame comes from an HTML seek(t) page rendered by Playwright at 1080p60 with real motion blur, using real product UI and screenshots with a privacy blur, and an ElevenLabs hype score cut on bar lines with its drop verified on the reveal. Three formats — a 20-30 s hype launch spot, a polished feature walkthrough from real screenshots, and a 19 s pain-point video with a muted site cut and burned-in text. Delivered with baked posters, H.264 + VP9 web encodes at 1280 px (1.5-3 MB), a site-embed kit (muted autoplay or click-to-play), 9:16 social re-layouts and share copy, plus a service playbook for selling it. Use when "make a launch video", "make a commercial / promo / ad spot", "motion design video", "product walkthrough video from screenshots", "pain point videos for the site", "videos for the homepage", "sell video production", "price a video package", or a polished brand spot is wanted rather than a talking-head edit or a Remotion template batch (use /kai-video-production for those).

日本語の概要は準備中です。原文の説明を表示しています。

Advanced motion designer with decades of After Effects and motion graphics experience, specialized in creating engaging video specifications for Remotion. Use when creating video specs, planning motion graphics, designing animations, or when asked to "create a video", "design motion graphics", "plan video content", or "spec out a video". Produces detailed scene-by-scene specifications with timing, audio, sound effects, and animation descriptions.

日本語の概要は準備中です。原文の説明を表示しています。

Web (CSS/JS/React + GSAP/Motion): classify UI motion as communicative (sequence is the content) or decorative (decorating a result), then fix or apply prefers-reduced-motion so meaning survives under reduce. Use when auditing existing animation, gating new motion, verifying both preference states, catching a dead reduced-motion branch, snapping to an end state, or collapsing a transition without nuking essential cues. Not for React Native, full WCAG encyclopedias, keyboard traps, color contrast, focus management, or ARIA pattern audits.

日本語の概要は準備中です。原文の説明を表示しています。

Motion (formerly Framer Motion) patterns - motion components, variants, AnimatePresence, gestures, layout animations, scroll-linked motion, reduced-motion handling

日本語の概要は準備中です。原文の説明を表示しています。

複数店舗の販売データや商品の特性をもとに、需要予測、安全在庫、発注量を検討するスキル。販促後の需要減少や季節商品の値下げ時期まで計画を支援します。

• 商品ごとの需要予測方法の選定
• 仕入れ先の納期変更に伴う安全在庫の見直し
• 販促中と終了後の需要を見積もりたいとき

Upload large Remotion repository assets to the Cloudflare R2 bucket behind remotion.media and replace local public/ assets with hosted URLs. Use when a file is too large for Git or when a PR should avoid committing media binaries by hosting them on remotion.media.

日本語の概要は準備中です。原文の説明を表示しています。

Add a new Remotion CLI or config option by creating an AnyRemotionOption, registering CLI parsing, wiring config setters, and updating documentation. Use when adding or converting command-line flags or Remotion options.

日本語の概要は準備中です。原文の説明を表示しています。