Use when creating animations that prompt immediate user action, highlight time-sensitivity, or drive conversions.
Create animations that motivate immediate response and communicate time-sensitivity.
Urgency creates a compelling need to act now. Action-driving animations capture attention, create momentum, and remove hesitation through dynamic, forward-moving motion.
Sharp, impactful deformations. Quick squash on landing (15-25%) creates impact. Fast stretch during motion shows speed and force.
Very short or none (0-50ms). Urgency means no time to prepare. Direct, immediate action. Skip wind-up for instant response.
Aggressive focus on call-to-action. High contrast, motion isolation. Everything else should recede. Spotlight the urgent element.
Creates unpredictable, attention-grabbing movement. Use for pulsing, shaking, or urgent indicator animations.
Minimal follow-through. Sharp stops communicate decisiveness. No lingering—immediate resolution drives action.
Asymmetric: fast start, abrupt end. ease-out with high initial velocity. cubic-bezier(0.0, 0, 0.2, 1) for aggressive acceleration.
Direct, linear paths for speed. Urgency takes the shortest route. Curved paths feel leisurely—use straight lines.
Attention-grabbing pulses, glows, or shakes. Badge counters that bounce. Subtle but persistent motion draws eyes.
Fast and punchy (100-200ms). Rapid animations create energy. Pulse intervals: 1-2 seconds to maintain attention without annoyance.
Moderate to high (20-40%). Amplified motion captures attention. Oversized bounces on notifications, emphasized shakes on errors.
Strong, bold forms. High-contrast shapes that command attention. No subtlety—clarity is paramount.
Bold colors (red, orange). Strong contrast. Asymmetric, dynamic compositions that feel active, not static.
| Element | Duration | Easing |
|---------|----------|--------|
| Attention pulse | 150-200ms | ease-out |
| CTA bounce | 200-300ms | ease-out-back |
| Countdown tick | 100ms | linear |
| Error shake | 300-400ms | ease-in-out |
--urgency-snap: cubic-bezier(0.0, 0, 0.2, 1);
--urgency-punch: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--urgency-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);
@keyframes urgent-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes urgent-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
Use urgency honestly. Fake scarcity damages trust. Reserve for genuinely time-sensitive situations.
下载完整 Skill 目录，包含 SKILL.md 及所有相关文件
Generate or edit images via Gemini 3 Pro Image (Nano Banana Pro).
Batch-generate images via OpenAI Images API. Random prompt sampler + `index.html` gallery.
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
Extract frames or short clips from videos using ffmpeg.
Search GIF providers with CLI/TUI, download results, and extract stills/sheets.
Category:media-generate