Build a UI animation storyboard component with timing and easing specifications
Views
3.2K
Copies
919
Likes
285
Comments
0
Copy rate
29.0%
Prompt
Create a React component that serves as an interactive animation storyboard tool for UI designers. It should document and preview [animation_type] animations for a [context] interface.
Requirements:
- Timeline visualization showing keyframes
- Easing curve preview (cubic-bezier visualization)
- Frame-by-frame property breakdown (opacity, transform, color)
- Play/pause controls with speed adjustment (0.25x, 0.5x, 1x, 2x)
- CSS/Framer Motion code export for each animation
- Preset library for common UI animations (fade-in, slide-up, scale, stagger)
Use Tailwind CSS, make it self-contained with useState for all state management.Customise this prompt
Fill in 2 variables to personalise this prompt
Preview
Create a React component that serves as an interactive animation storyboard tool for UI designers. It should document and preview [animation_type] animations for a [context] interface.
Requirements:
- Timeline visualization showing keyframes
- Easing curve preview (cubic-bezier visualization)
- Frame-by-frame property breakdown (opacity, transform, color)
- Play/pause controls with speed adjustment (0.25x, 0.5x, 1x, 2x)
- CSS/Framer Motion code export for each animation
- Preset library for common UI animations (fade-in, slide-up, scale, stagger)
Use Tailwind CSS, make it self-contained with useState for all state management.
Example output
UI Preview
This content is user-generated and runs in a sandboxed environment.