skills.rest
ayarse
ayarseCOMMUNITY
Explore all skills by this author →
GitHub

creating-popkorn-animations

Author and edit Popkorn motion-graphics scenes in its CSS-subset DSL with parser verification.

19|Updated Jul 8, 2026
Search Tags:#motion graphics#react native#interactive design#canvas animation#css animation#scene authoring#popkorn
One-click install
npx skills add https://github.com/ayarse/popkorn --skill creating-popkorn-animations
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: creating-popkorn-animations
Source: https://github.com/ayarse/popkorn/tree/main/.claude/skills/creating-popkorn-animations
Command: npx skills add https://github.com/ayarse/popkorn --skill creating-popkorn-animations

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create and edit Popkorn animation scenes without treating them as opaque binary or JSON assets, while avoiding CSS-like declarations that parse successfully but have no rendering effect.

Core Features & Use Cases

  • Scene Authoring: Build vector scenes with shapes, gradients, paths, text, images, masks, filters, reusable symbols, and nested groups.
  • Animation and Interaction: Add keyframes, easing, motion paths, transitions, hover and active states, state machines, timeline scrubbing, and responsive input bindings.
  • Validation Guidance: Select type-correct geometry and supported properties, account for Popkorn differences from CSS, and verify scenes through the Popkorn parser.
  • Use Case: Create an interactive animated product illustration that runs on the web and React Native, with reusable components, responsive pointer behavior, and carefully timed motion.

Quick Start

Use the Popkorn animation skill to create or edit a self-contained scene with a defined stage, typed shapes, keyframe animation, and interactive hover behavior, then verify that it parses correctly.

Frequently Asked Questions about creating-popkorn-animations

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

FAQPage Schema
How do I author interactive motion graphics that run on both web and React Native?▼

You can author portable motion graphics using a CSS-subset DSL with explicit stage and shape declarations, enabling interactive scenes to play back on both web and React Native.

What's the best way to create vector scenes with keyframe animation and hover states?▼

Create vector scenes with keyframe animation and hover states by defining typed shapes, motion paths, and reusable symbols in a CSS-subset DSL, then verifying the scenes through a parser.

Why does my CSS animation parse correctly but have no rendering effect in Popkorn?▼

CSS animations may parse but fail to render due to unsupported Popkorn properties or type-incorrect geometry; explicit parser verification and CSS-subset compatibility checks are required before preview.

Can I use imported animations and masks within an interactive design scene?▼

Yes, you can edit imported animations and apply masks by declaring typed geometry, supported properties, and nested groups within your scene, ensuring all elements pass parser verification.

Does this motion graphics approach support state machines and timeline scrubbing?▼

Yes, the motion graphics DSL supports state machines, timeline scrubbing, easing, and responsive input bindings for building interactive animated UI assets and product illustrations.

How do I validate type-correct geometry for canvas animation scenes?▼

Validate type-correct geometry by selecting supported Popkorn properties, accounting for differences from standard CSS, and running parser verification on your scene before generating a preview.

Related Skills

Explore More Design & Creative Skills→
hulusi-tunchulusi-tunc
3

illustration-style

Define color, geometry, and asset rules for consistent illustration systems.

Community
Intermediate
exiaoexiao
37

browser-animation-video

Generate browser-native looping motion graphics videos with React, Framer Motion, and GSAP.

Community
Advanced
ricardocidalericardocidale

3d-graphics

Integrate Three.js 3D scenes and framer-motion animations into web applications.

Community
Intermediate
UniquecreteUniquecrete

threejs-animation

Play and blend keyframe, skeletal, and morph-target animations in Three.js.

Community
Advanced