skills.rest
Keimoshi
KeimoshiCOMMUNITY
Explore all skills by this author →
GitHub

motion-frames

Generates single-page HTML motion-design compositions with looping CSS animations for HyperFrames export.

Updated May 20, 2026
Search Tags:#html#motion design#css animation#kinetic typography#hyperframes#video poster#animated hero
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill motion-frames-keimoshi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-frames
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/motion-frames
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill motion-frames-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating animated hero posters and title cards usually requires motion-design tools and keyframe timelines. This Skill produces a complete single-frame motion composition as one self-contained HTML file, where all animation is pure CSS and the page itself is the loop, ready for frame-based video exporters. ## Core Features & Use Cases - Layered Motion Composition: Builds a 16:9 hero with concentric rotating rings, a wireframe globe or focal mark, co-rotating ring labels, and an animated display headline. - CSS-Only Animation: Uses @keyframes exclusively (no JavaScript), so HyperFrames, Lottie, or any frame-grabber can capture the loop deterministically. - Design-System Aware: Reads the active DESIGN.md tokens to pick expressive serif/display typography and canvas colors that match the brand. - Use Case: A marketing team needs an animated hero for a product launch — a rotating type ring around a globe with the headline 'Reach every country' looping at 12 seconds, exported as a video poster. ## Quick Start Ask the AI to design an animated hero with a rotating type ring around a wireframe globe and a looping headline, ready for HyperFrames export.

Frequently Asked Questions about motion-frames

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an animated hero poster with CSS only?▼

Compose a full-bleed 16:9 stage with layered elements — concentric rings, a focal SVG mark, ring labels, and a headline — then animate each layer with @keyframes at different durations. Pure CSS animation lets frame-grabbers capture the loop deterministically without JavaScript.

How to export a CSS animation to video with HyperFrames?▼

Build the composition as a single HTML document where all motion uses CSS @keyframes and no scripts. HyperFrames or any keyframe-based exporter can then capture the page frame-by-frame into a video, since the animation state is deterministic at every timestamp.

Can CSS animations replace JavaScript for motion design?▼

For looping decorative motion like rotating rings, pulsing dots, and headline reveals, CSS @keyframes are sufficient and more predictable for export tools. JavaScript is only needed for interactive or state-driven animation, which this poster-style workflow deliberately avoids.

What makes a motion composition readable when paused?▼

The composition must work as a static poster at frame 0: clear typographic hierarchy, a focal mark, and balanced chrome elements. Depth comes from at least three layers moving at different speeds, not from parallax tricks that only read in motion.

When should I not use CSS-only looping animations?▼

Avoid CSS-only loops when the design needs user interaction, scroll-driven timelines, or physics-based motion. Those cases require JavaScript animation libraries, which break the deterministic frame-capture contract that video exporters rely on.

Related Skills

Explore More Design & Creative Skills→
Intension-usIntension-us

design-consultation

Generate a DESIGN.md documenting typography, color, spacing, layout, and motion guidelines.

Official
Advanced
Maccio-huangMaccio-huang

motion-frames

Generate looped motion design compositions using HTML and CSS.

Community
Intermediate
eachlabseachlabs
28

logo-generation

Generate diverse professional logos with customizable styles and colors.

Official
Intermediate
nexu-ionexu-io
93.2k

gsap-core

Implement high-performance web animations using the GSAP core engine and tweening methods.

Official
Intermediate