Best For
- Starting from a structured, reusable prompt instead of a blank chat.
- Adapting the prompt to your own inputs while keeping the original intent intact.
- Workflows related to Software Development, Design & Art.
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}}.
Prompt Guide
How To Use It
- Copy the full prompt template.
- Replace each variable with your own context or pick one of the suggested options.
- Paste the completed prompt into ChatGPT, Claude, Gemini, or another AI assistant.
Variables In This Prompt
Animation Style
Fade, Slide, Bounce, Spin, Pulse
Duration in Seconds
1-10
Iteration Count
Infinite, 1, 2, 3
Timing Function
ease-in-out, linear, ease-in, cubic-bezier
Element
e.g. Puco UI call-to-action button
Example Starting Point
Create CSS `@keyframes` and the corresponding utility class for a Fade animation. The animation should have a duration of 1-10 seconds, run Infinite times, and use a ease-in-out. Provide the code for animating a 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.