Particle Burst
No library Advanced
Small particles burst outward from the input corners on focus via absolutely positioned spans with staggered CSS animations. A festive, energetic focus confirmation.
Small particles burst outward from the input corners on focus via absolutely positioned spans with staggered CSS animations. A festive, energetic focus confirmation.
Goal: Create a "Particle Burst" input that emits particles on focus.
Visual behavior: When the input is focused, 8 small colored particles burst outward from the input's four corners in pairs (2 per corner, different angles). Each particle is a 5px dot that flies outward (translateX/Y) and fades to scale 0 over 500ms via CSS @keyframes. Particles have staggered animation-delay (e.g., i * 30ms). They use CSS custom properties (--dx, --dy) per particle to set their individual travel vectors. A key counter ensures the animation replays on every focus.
Technique:
- 8 particle span elements, conditionally rendered only when burstKey > 0
- Each span: position:absolute at the nearest corner, CSS custom properties --dx/--dy for direction
- @keyframes: 0%{transform:translate(0,0) scale(1);opacity:1} 100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}
- animation: 'particle-fly 500ms ease-out {delay}ms both'
- Wrapper: position:relative, overflow:visible
Accessibility: Particle elements hidden (display:none) under prefers-reduced-motion.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.