CSS Animation Keyframe Generator
Generate custom CSS keyframe animations for UI elements.
Prompt Template
Create CSS `@keyframes` and the corresponding utility class for a {{Animation Style: Fade, Slide, Bounce, Spin, Pulse}} animation. The animation should have a duration of {{Duration in Seconds:1-10}} seconds, run {{Iteration Count: Infinite, 1, 2, 3}} times, and use a {{Timing Function: ease-in-out, linear, ease-in, cubic-bezier}}. Provide the code for animating a {{Element: e.g. Puco UI call-to-action button}}.
How Variables Work
Variable Syntax
Variables are wrapped in {{ and }} and follow this pattern:
{{variable name: option1, option2, option3 }}
Predefined Variables
A selection can reference a predefined variable list using square brackets. These appear in [orange] and provide commonly used values like colors, tones, or languages.
{{Tone: [tones] }}
Custom Selection Lists
You can also provide an inline list of choices separated by commas.
{{Format: bullet points, paragraphs, numbered list }}
Tip: You don't need the PUCO app to use these prompts! Simply copy the template and replace each {{…}} section with your own text directly in ChatGPT, Claude, Gemini, or any other AI assistant.