Skip to content

Fix #18: Add delightful particle effects when typing - #19

Open
github-actions[bot] wants to merge 1 commit into
mainfrom
claude/issue-18
Open

Fix #18: Add delightful particle effects when typing#19
github-actions[bot] wants to merge 1 commit into
mainfrom
claude/issue-18

Conversation

@github-actions

@github-actions github-actions Bot commented Feb 1, 2026

Copy link
Copy Markdown

Closes #18

Demo

Demo

Demo

Demo

Summary

Added colorful particle effects that appear when typing in the editor. Each keystroke generates 3-5 particles that float upward with gravity, fade out naturally, and create a delightful visual feedback. The particles use a variety of colors (red, blue, green, yellow, purple) and animate smoothly at 60fps without impacting editor performance.

Before & After

Before After
before after
Plain editor with no visual effects when typing Colorful particles appear at cursor position with each keystroke

Files Changed

  • src/components/ParticleEffects.tsx: New component managing particle lifecycle, animation loop, and rendering
  • src/components/ParticleEffects.css: Styles for particle container and individual particles with fixed positioning
  • src/components/Editor.tsx: Integrated ParticleEffects component and added particle emission logic in updateListener when text is inserted

Tests

  • e2e/issues/18/verify.spec.ts - Verification test with before/after assertions
  • e2e/issues/18/demo.spec.ts - Demo recording showing particles in action

🤖 Generated with Claude Code

Co-Authored-By: Claude <claude@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add delightful particle effects when typing

1 participant